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/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>
   );
 }