feat(electron): electron shell skeleton (#8127)

fix AF-1331
<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/e09203aa-f143-42f8-bd39-e5078d07ada2.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/e09203aa-f143-42f8-bd39-e5078d07ada2.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/e09203aa-f143-42f8-bd39-e5078d07ada2.mp4">1.mp4</video>

missing
- per split view skeleton
- per route skeleton

packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx

@@ -39,6 +39,17 @@ export interface SplitViewPanelProps
   >;
 }
 
+export const SplitViewPanelContainer = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={styles.splitViewPanel} {...props}>
+      {children}
+    </div>
+  );
+};
+
 export const SplitViewPanel = memo(function SplitViewPanel({
   children,
   view,
@@ -85,9 +96,8 @@ export const SplitViewPanel = memo(function SplitViewPanel({
   );
 
   return (
-    <div
+    <SplitViewPanelContainer
       style={style}
-      className={styles.splitViewPanel}
       data-is-dragging={isDragging}
       data-is-active={isActive && views.length > 1}
       data-is-last={isLast}
@@ -110,7 +120,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({
         ) : null}
       </div>
       {children}
-    </div>
+    </SplitViewPanelContainer>
   );
 });
 

packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx

@@ -13,13 +13,13 @@ import {
 } from '@dnd-kit/sortable';
 import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
-import type { HTMLAttributes, RefObject } from 'react';
+import type { HTMLAttributes, PropsWithChildren, RefObject } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import type { View } from '../../entities/view';
 import { WorkbenchService } from '../../services/workbench';
-import { SplitViewPanel } from './panel';
+import { SplitViewPanel, SplitViewPanelContainer } from './panel';
 import { ResizeHandle } from './resize-handle';
 import * as styles from './split-view.css';
 
@@ -141,3 +141,20 @@ export const SplitView = ({
     </div>
   );
 };
+
+export const SplitViewFallback = ({
+  children,
+  className,
+}: PropsWithChildren<{ className?: string }>) => {
+  const { appSettings } = useAppSettingHelper();
+
+  return (
+    <div
+      className={clsx(styles.splitViewRoot, className)}
+      data-client-border={appSettings.clientBorder}
+    >
+      {/* todo: support multiple split views */}
+      <SplitViewPanelContainer>{children}</SplitViewPanelContainer>
+    </div>
+  );
+};