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/electron/renderer/shell/shell.css.ts

@@ -1,4 +1,4 @@
-import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, style } from '@vanilla-extract/css';
 
 export const sidebarOffsetVar = createVar();
@@ -7,10 +7,33 @@ export const root = style({
   width: '100vw',
   height: '100vh',
   display: 'flex',
-  background: cssVar('backgroundPrimaryColor'),
+  flexDirection: 'column',
+  background: cssVarV2('layer/background/primary'),
   selectors: {
     '&[data-translucent="true"]': {
       background: 'transparent',
     },
   },
 });
+
+export const appTabsHeader = style({
+  zIndex: 1,
+});
+
+export const fallbackRoot = style({
+  position: 'absolute',
+  paddingTop: 52,
+  width: '100%',
+  height: '100%',
+  zIndex: 0,
+});
+
+export const splitViewFallback = style({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  zIndex: 0,
+  background: cssVarV2('layer/background/primary'),
+});

packages/frontend/electron/renderer/shell/shell.tsx

@@ -1,5 +1,7 @@
+import { AppFallback } from '@affine/core/components/affine/app-container';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { AppTabsHeader } from '@affine/core/modules/app-tabs-header';
+import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view';
 
 import * as styles from './shell.css';
 
@@ -11,7 +13,10 @@ export function ShellRoot() {
     appSettings.enableBlurBackground;
   return (
     <div className={styles.root} data-translucent={translucent}>
-      <AppTabsHeader mode="shell" />
+      <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
+      <AppFallback className={styles.fallbackRoot}>
+        <SplitViewFallback className={styles.splitViewFallback} />
+      </AppFallback>
     </div>
   );
 }