feat: add widgets sidebar toggle button to view menu (#3140)

Add ability to toggle the Widgets sidebar visibility via a button in the
tabbar. State persists across sessions and workspaces through workspace
metadata (layout:widgetsvisible).

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: sawka <mike@commandline.dev>

Author: 3 people

emain/emain-menu.ts

@@ -311,6 +311,20 @@ function makeViewMenu(
         {
             role: "togglefullscreen",
         },
+        { type: "separator" },
+        {
+            label: "Toggle Widgets Bar",
+            click: () => {
+                fireAndForget(async () => {
+                    const workspaceId = focusedWaveWindow?.workspaceId;
+                    if (!workspaceId) return;
+                    const oref = `workspace:${workspaceId}`;
+                    const meta = await RpcApi.GetMetaCommand(ElectronWshClient, { oref });
+                    const current = meta?.["layout:widgetsvisible"] ?? true;
+                    await RpcApi.SetMetaCommand(ElectronWshClient, { oref, meta: { "layout:widgetsvisible": !current } });
+                });
+            },
+        },
     ];
 }
 

frontend/app/workspace/workspace-layout-model.ts

@@ -56,6 +56,7 @@ class WorkspaceLayoutModel {
     private focusTimeoutRef: NodeJS.Timeout | null = null;
     private debouncedPersistAIWidth: () => void;
     private debouncedPersistVTabWidth: () => void;
+    widgetsSidebarVisibleAtom: jotai.Atom<boolean>;
 
     private constructor() {
         this.aiPanelRef = null;
@@ -71,6 +72,11 @@ class WorkspaceLayoutModel {
         this.vtabWidth = VTabBar_DefaultWidth;
         this.vtabVisible = false;
         this.panelVisibleAtom = jotai.atom(false);
+        this.widgetsSidebarVisibleAtom = jotai.atom(
+            (get) =>
+                get(getOrefMetaKeyAtom(WOS.makeORef("workspace", this.getWorkspaceId()), "layout:widgetsvisible")) ??
+                true
+        );
         this.initializeFromMeta();
 
         this.handleWindowResize = this.handleWindowResize.bind(this);

frontend/app/workspace/workspace.tsx

@@ -46,6 +46,7 @@ const WorkspaceElem = memo(() => {
     const tabBarPosition = useAtomValue(getSettingsKeyAtom("app:tabbar")) ?? "top";
     const showLeftTabBar = tabBarPosition === "left";
     const aiPanelVisible = useAtomValue(workspaceLayoutModel.panelVisibleAtom);
+    const widgetsSidebarVisible = useAtomValue(workspaceLayoutModel.widgetsSidebarVisibleAtom);
     const windowWidth = window.innerWidth;
     const leftGroupInitialPct = workspaceLayoutModel.getLeftGroupInitialPercentage(windowWidth, showLeftTabBar);
     const innerVTabInitialPct = workspaceLayoutModel.getInnerVTabInitialPercentage(windowWidth, showLeftTabBar);
@@ -158,7 +159,7 @@ const WorkspaceElem = memo(() => {
                             ) : (
                                 <div className="flex flex-row h-full">
                                     <TabContent key={tabId} tabId={tabId} noTopPadding={showLeftTabBar && isMacOS()} />
-                                    <Widgets />
+                                    {widgetsSidebarVisible && <Widgets />}
                                 </div>
                             )}
                         </Panel>

frontend/types/gotypes.d.ts

@@ -1161,6 +1161,7 @@ declare global {
         "bg:bordercolor"?: string;
         "bg:activebordercolor"?: string;
         "layout:vtabbarwidth"?: number;
+        "layout:widgetsvisible"?: boolean;
         "waveai:panelopen"?: boolean;
         "waveai:panelwidth"?: number;
         "waveai:model"?: string;

pkg/waveobj/metaconsts.go

@@ -100,6 +100,7 @@ const (
 	MetaKey_BgActiveBorderColor              = "bg:activebordercolor"
 
 	MetaKey_LayoutVTabBarWidth               = "layout:vtabbarwidth"
+	MetaKey_LayoutWidgetsVisible             = "layout:widgetsvisible"
 
 	MetaKey_WaveAiPanelOpen                  = "waveai:panelopen"
 	MetaKey_WaveAiPanelWidth                 = "waveai:panelwidth"

pkg/waveobj/wtypemeta.go

@@ -102,7 +102,8 @@ type MetaTSType struct {
 	BgActiveBorderColor string  `json:"bg:activebordercolor,omitempty"` // frame:activebordercolor
 
 	// for workspace
-	LayoutVTabBarWidth int `json:"layout:vtabbarwidth,omitempty"`
+	LayoutVTabBarWidth      int  `json:"layout:vtabbarwidth,omitempty"`
+	LayoutWidgetsVisible    *bool `json:"layout:widgetsvisible,omitempty"`
 
 	// for tabs+waveai
 	WaveAiPanelOpen     bool   `json:"waveai:panelopen,omitempty"`