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/src/main/ui/events.ts

@@ -2,7 +2,6 @@ import type { MainEventRegister } from '../type';
 import {
   onActiveTabChanged,
   onTabAction,
-  onTabsBoundingRectChanged,
   onTabShellViewActiveChange,
   onTabsStatusChange,
   onTabViewsMetaChanged,
@@ -36,5 +35,4 @@ export const uiEvents = {
   onTabsStatusChange,
   onActiveTabChanged,
   onTabShellViewActiveChange,
-  onTabsBoundingRectChanged,
 } satisfies Record<string, MainEventRegister>;

packages/frontend/electron/src/main/ui/handlers.ts

@@ -11,7 +11,6 @@ import {
   closeTab,
   getMainWindow,
   getOnboardingWindow,
-  getTabsBoundingRect,
   getTabsStatus,
   getTabViewsMeta,
   getWorkbenchMeta,
@@ -19,10 +18,10 @@ import {
   initAndShowMainWindow,
   isActiveTab,
   launchStage,
+  pingAppLayoutReady,
   showDevTools,
   showTab,
   showTabContextMenu,
-  updateTabsBoundingRect,
   updateWorkbenchMeta,
 } from '../windows-manager';
 import { getChallengeResponse } from './challenge';
@@ -193,14 +192,8 @@ export const uiHandlers = {
       uiSubjects.onToggleRightSidebar$.next(tabId);
     }
   },
-  getTabsBoundingRect: async () => {
-    return getTabsBoundingRect();
-  },
-  updateTabsBoundingRect: async (
-    e,
-    rect: { x: number; y: number; width: number; height: number }
-  ) => {
-    return updateTabsBoundingRect(e.sender, rect);
+  pingAppLayoutReady: async e => {
+    pingAppLayoutReady(e.sender);
   },
   showDevTools: async (_, ...args: Parameters<typeof showDevTools>) => {
     return showDevTools(...args);

packages/frontend/electron/src/main/windows-manager/tab-views.ts

@@ -5,7 +5,6 @@ import {
   type CookiesSetDetails,
   globalShortcut,
   Menu,
-  type Rectangle,
   type View,
   type WebContents,
   WebContentsView,
@@ -130,7 +129,6 @@ export class WebContentViewsManager {
   }
 
   readonly tabViewsMeta$ = TabViewsMetaState.$;
-  readonly tabsBoundingRect$ = new BehaviorSubject<Rectangle | null>(null);
   readonly appTabsUIReady$ = new BehaviorSubject(new Set<string>());
 
   // all web views
@@ -202,14 +200,6 @@ export class WebContentViewsManager {
     TabViewsMetaState.patch(patch);
   };
 
-  get tabsBoundingRect() {
-    return this.tabsBoundingRect$.value;
-  }
-
-  set tabsBoundingRect(rect: Rectangle | null) {
-    this.tabsBoundingRect$.next(rect);
-  }
-
   get shellView() {
     return this.webViewsMap$.value.get('shell');
   }
@@ -584,14 +574,6 @@ export class WebContentViewsManager {
       })
     );
 
-    disposables.push(
-      this.tabsBoundingRect$.subscribe(rect => {
-        if (rect) {
-          this.reorderViews();
-        }
-      })
-    );
-
     app.on('ready', () => {
       // bind CMD/CTRL+1~8 to switch tabs
       // bind CMD/CTRL+9 to switch to the last tab
@@ -745,6 +727,11 @@ export class WebContentViewsManager {
     });
 
     this.resizeView(view);
+
+    view.webContents.on('did-finish-load', () => {
+      this.resizeView(view);
+    });
+
     // reorder will add to main window when loaded
     this.reorderViews();
 
@@ -887,32 +874,12 @@ export const showDevTools = (id?: string) => {
   }
 };
 
-export const onTabsBoundingRectChanged = (
-  fn: (rect: Rectangle | null) => void
-) => {
-  const sub = WebContentViewsManager.instance.tabsBoundingRect$.subscribe(fn);
-  return () => {
-    sub.unsubscribe();
-  };
-};
-
-export const getTabsBoundingRect = () => {
-  return WebContentViewsManager.instance.tabsBoundingRect;
-};
-
-export const updateTabsBoundingRect = (wc: WebContents, rect: Rectangle) => {
-  try {
-    if (isActiveTab(wc)) {
-      WebContentViewsManager.instance.tabsBoundingRect = rect;
-    }
-    const viewId = WebContentViewsManager.instance.getViewIdFromWebContentsId(
-      wc.id
-    );
-    if (viewId) {
-      WebContentViewsManager.instance.setTabUIReady(viewId);
-    }
-  } catch (err) {
-    logger.error(err);
+export const pingAppLayoutReady = (wc: WebContents) => {
+  const viewId = WebContentViewsManager.instance.getViewIdFromWebContentsId(
+    wc.id
+  );
+  if (viewId) {
+    WebContentViewsManager.instance.setTabUIReady(viewId);
   }
 };