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/core/src/layouts/styles.css.ts

@@ -31,15 +31,3 @@ export const desktopTabsHeader = style({
   width: '100%',
   overflow: 'hidden',
 });
-
-export const desktopTabsHeaderTopLeft = style({
-  display: 'flex',
-  flexFlow: 'row',
-  alignItems: 'center',
-  transition: 'width 0.3s, padding 0.3s',
-  justifyContent: 'space-between',
-  marginRight: -8, // make room for tab's padding
-  padding: '0 16px',
-  flexShrink: 0,
-  ['WebkitAppRegion' as string]: 'drag',
-});

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -35,12 +35,9 @@ import { WorkspaceAIOnboarding } from '../components/affine/ai-onboarding';
 import { AppContainer } from '../components/affine/app-container';
 import { SyncAwareness } from '../components/affine/awareness';
 import {
-  appSidebarFloatingAtom,
-  appSidebarOpenAtom,
   appSidebarResizingAtom,
   SidebarSwitch,
 } from '../components/app-sidebar';
-import { appSidebarWidthAtom } from '../components/app-sidebar/index.jotai';
 import { AIIsland } from '../components/pure/ai-island';
 import { RootAppSidebar } from '../components/root-app-sidebar';
 import { MainContainer } from '../components/workspace';
@@ -181,29 +178,17 @@ const WorkspaceLayoutProviders = ({ children }: PropsWithChildren) => {
 };
 
 const DesktopLayout = ({ children }: PropsWithChildren) => {
-  const resizing = useAtomValue(appSidebarResizingAtom);
-  const sidebarWidth = useAtomValue(appSidebarWidthAtom);
-  const sidebarOpen = useAtomValue(appSidebarOpenAtom);
-  const sidebarFloating = useAtomValue(appSidebarFloatingAtom);
-  const sidebarResizing = useAtomValue(appSidebarResizingAtom);
-  const isMacosDesktop = environment.isDesktop && environment.isMacOs;
-
   return (
     <div className={styles.desktopAppViewContainer}>
       <div className={styles.desktopTabsHeader}>
-        <div
-          className={styles.desktopTabsHeaderTopLeft}
-          style={{
-            transition: sidebarResizing ? 'none' : undefined,
-            paddingLeft:
-              isMacosDesktop && sidebarOpen && !sidebarFloating ? 90 : 16,
-            width: sidebarOpen && !sidebarFloating ? sidebarWidth : 130,
-          }}
-        >
-          <SidebarSwitch show />
-          <NavigationButtons />
-        </div>
-        <AppTabsHeader reportBoundingUpdate={!resizing} />
+        <AppTabsHeader
+          left={
+            <>
+              <SidebarSwitch show />
+              <NavigationButtons />
+            </>
+          }
+        />
       </div>
       <div className={styles.desktopAppViewMain}>
         <RootAppSidebar />