Sync workspace layout mode across windows

src/components/settings/general-settings.tsx

@@ -291,25 +291,25 @@ export function GeneralSettings() {
 
           <div className="space-y-2">
             <Select value={layoutMode} onValueChange={onLayoutModeChange}>
-              <SelectTrigger className="w-full sm:w-64">
-                <SelectValue />
+              <SelectTrigger className="w-full text-left sm:w-64">
+                <SelectValue className="justify-start text-left" />
               </SelectTrigger>
               <SelectContent align="start">
                 <SelectItem value="fusion">
-                  <span className="flex flex-col">
+                  <div className="flex flex-col items-start text-left">
                     <span>{t("workspaceLayoutFusion")}</span>
-                    <span className="text-[10px] text-muted-foreground">
+                    <span className="text-left text-[10px] text-muted-foreground">
                       {t("workspaceLayoutFusionHint")}
                     </span>
-                  </span>
+                  </div>
                 </SelectItem>
                 <SelectItem value="files">
-                  <span className="flex flex-col">
+                  <div className="flex flex-col items-start text-left">
                     <span>{t("workspaceLayoutFiles")}</span>
-                    <span className="text-[10px] text-muted-foreground">
+                    <span className="text-left text-[10px] text-muted-foreground">
                       {t("workspaceLayoutFilesHint")}
                     </span>
-                  </span>
+                  </div>
                 </SelectItem>
               </SelectContent>
             </Select>

src/contexts/workspace-context.test.tsx

@@ -39,6 +39,7 @@ const mockedApi = api as unknown as {
 function WorkspaceProbe() {
   const {
     mode,
+    layoutMode,
     activePane,
     fileTabs,
     activeFileTabId,
@@ -53,6 +54,7 @@ function WorkspaceProbe() {
   return (
     <div>
       <output data-testid="mode">{mode}</output>
+      <output data-testid="layout-mode">{layoutMode}</output>
       <output data-testid="file-tab-count">{fileTabs.length}</output>
       <output data-testid="active-pane">{activePane}</output>
       <output data-testid="files-maximized">{String(filesMaximized)}</output>
@@ -127,6 +129,24 @@ describe("WorkspaceProvider mode", () => {
     expect(screen.getByTestId("mode")).toHaveTextContent("conversation")
     expect(screen.getByTestId("file-tab-count")).toHaveTextContent("0")
   })
+
+  it("syncs layoutMode from storage events fired by another window", () => {
+    renderWorkspace()
+
+    expect(screen.getByTestId("layout-mode")).toHaveTextContent("fusion")
+
+    act(() => {
+      localStorage.setItem("workspace:layout-mode", "files")
+      window.dispatchEvent(
+        new StorageEvent("storage", {
+          key: "workspace:layout-mode",
+          newValue: "files",
+        })
+      )
+    })
+
+    expect(screen.getByTestId("layout-mode")).toHaveTextContent("files")
+  })
 })
 
 describe("WorkspaceProvider files-maximized", () => {

src/contexts/workspace-context.tsx

@@ -278,6 +278,20 @@ export function WorkspaceProvider({ children }: WorkspaceProviderProps) {
     fileTabsRef.current = fileTabs
   }, [fileTabs])
 
+  useEffect(() => {
+    if (typeof window === "undefined") return
+
+    const onStorage = (event: StorageEvent) => {
+      if (event.key && event.key !== "workspace:layout-mode") return
+      setLayoutModeState(loadLayoutMode())
+    }
+
+    window.addEventListener("storage", onStorage)
+    return () => {
+      window.removeEventListener("storage", onStorage)
+    }
+  }, [])
+
   const mode: WorkspaceMode = fileTabs.length > 0 ? "fusion" : "conversation"
   const effectiveFilesMaximized = mode === "fusion" && filesMaximized