fix: using width atom for syncing app headers position (#7666)

may use global state to replace these sidebar state atoms

fix AF-1109

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

@@ -1,12 +1,13 @@
 import 'setimmediate';
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
+import '@affine/core/bootstrap/preload';
 
 import { ThemeProvider } from '@affine/component/theme-provider';
-import { appConfigProxy } from '@affine/core/hooks/use-app-config-storage';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
 import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
 import { performanceLogger } from '@affine/core/shared';
+import { apis, events } from '@affine/electron-api';
 import {
   configureGlobalStorageModule,
   Framework,
@@ -26,9 +27,17 @@ const frameworkProvider = framework.provider();
 const logger = performanceLogger.namespace('shell');
 
 function main() {
-  appConfigProxy
-    .getSync()
-    .catch(() => console.error('failed to load app config'));
+  const handleMaximized = (maximized: boolean | undefined) => {
+    document.documentElement.dataset.maximized = String(maximized);
+  };
+  const handleFullscreen = (fullscreen: boolean | undefined) => {
+    document.documentElement.dataset.fullscreen = String(fullscreen);
+  };
+
+  apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
+  apis?.ui.isFullScreen().then(handleFullscreen).catch(console.error);
+  events?.ui.onMaximized(handleMaximized);
+  events?.ui.onFullScreen(handleFullscreen);
 }
 
 function mountApp() {

packages/frontend/electron/renderer/shell/shell.css.ts

@@ -1,10 +1,13 @@
 import { cssVar } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
+
+export const sidebarOffsetVar = createVar();
 
 export const root = style({
   width: '100vw',
   height: '100vh',
   opacity: 1,
+  display: 'flex',
   transition: 'opacity 0.1s',
   background: cssVar('backgroundPrimaryColor'),
   selectors: {

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

@@ -1,12 +1,12 @@
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { AppTabsHeader } from '@affine/core/modules/app-tabs-header';
-import { apis, events } from '@affine/electron-api';
+import { events } from '@affine/electron-api';
 import { useEffect, useState } from 'react';
 
 import * as styles from './shell.css';
 
 const useIsShellActive = () => {
-  const [active, setActive] = useState(true);
+  const [active, setActive] = useState(false);
 
   useEffect(() => {
     const unsub = events?.ui.onTabShellViewActiveChange(active => {
@@ -20,48 +20,9 @@ const useIsShellActive = () => {
   return active;
 };
 
-const useTabsBoundingRect = () => {
-  const [rect, setRect] = useState<{
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  }>({
-    x: environment.isDesktop && environment.isMacOs ? 80 : 0,
-    y: 0,
-    width: window.innerWidth,
-    height: 52,
-  });
-
-  useEffect(() => {
-    let unsub: (() => void) | undefined;
-    apis?.ui
-      .getTabsBoundingRect()
-      .then(rect => {
-        if (rect) {
-          setRect(rect);
-        }
-        unsub = events?.ui.onTabsBoundingRectChanged(rect => {
-          if (rect) {
-            setRect(rect);
-          }
-        });
-      })
-      .catch(err => {
-        console.error(err);
-      });
-    return () => {
-      unsub?.();
-    };
-  }, []);
-
-  return rect;
-};
-
 export function ShellRoot() {
   const active = useIsShellActive();
   const { appSettings } = useAppSettingHelper();
-  const rect = useTabsBoundingRect();
   const translucent =
     environment.isDesktop &&
     environment.isMacOs &&
@@ -72,15 +33,7 @@ export function ShellRoot() {
       data-translucent={translucent}
       data-active={active}
     >
-      <AppTabsHeader
-        style={{
-          position: 'fixed',
-          top: rect.y,
-          left: rect.x,
-          width: rect.width,
-          height: rect.height,
-        }}
-      />
+      <AppTabsHeader mode="shell" />
     </div>
   );
 }