feat: add widgets sidebar toggle button to tabbar

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).

Author: mswiszcz

frontend/app/tab/tabbar.tsx

@@ -75,6 +75,30 @@ const WaveAIButton = memo(({ divRef }: { divRef?: React.RefObject<HTMLDivElement
 });
 WaveAIButton.displayName = "WaveAIButton";
 
+const WidgetsSidebarButton = memo(({ divRef }: { divRef?: React.RefObject<HTMLDivElement> }) => {
+    const widgetsSidebarVisible = useAtomValue(WorkspaceLayoutModel.getInstance().widgetsSidebarVisibleAtom);
+
+    const onClick = () => {
+        const current = WorkspaceLayoutModel.getInstance().getWidgetsSidebarVisible();
+        WorkspaceLayoutModel.getInstance().setWidgetsSidebarVisible(!current);
+    };
+
+    return (
+        <Tooltip
+            content="Toggle Widgets Sidebar"
+            placement="bottom"
+            hideOnClick
+            divClassName={`flex h-[22px] px-3.5 justify-end mb-1 items-center rounded-md mr-1 box-border cursor-pointer bg-hover hover:bg-hoverbg transition-colors text-[12px] ${widgetsSidebarVisible ? "text-accent" : "text-secondary"}`}
+            divStyle={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+            divOnClick={onClick}
+            divRef={divRef}
+        >
+            <i className="fa fa-bars" />
+        </Tooltip>
+    );
+});
+WidgetsSidebarButton.displayName = "WidgetsSidebarButton";
+
 function strArrayIsEqual(a: string[], b: string[]) {
     // null check
     if (a == null && b == null) {
@@ -123,6 +147,7 @@ const TabBar = memo(({ workspace, noTabs }: TabBarProps) => {
     const rightContainerRef = useRef<HTMLDivElement>(null);
     const workspaceSwitcherRef = useRef<HTMLDivElement>(null);
     const waveAIButtonRef = useRef<HTMLDivElement>(null);
+    const widgetsSidebarButtonRef = createRef<HTMLDivElement>();
     const appMenuButtonRef = useRef<HTMLDivElement>(null);
     const tabWidthRef = useRef<number>(TabDefaultWidth);
     const scrollableRef = useRef<boolean>(false);
@@ -665,6 +690,7 @@ const TabBar = memo(({ workspace, noTabs }: TabBarProps) => {
             </button>
             <div className="flex-1" />
             <div ref={rightContainerRef} className="flex flex-row gap-1 items-end">
+                <WidgetsSidebarButton divRef={widgetsSidebarButtonRef} />
                 <UpdateStatusBanner />
                 <div
                     className="h-full shrink-0 z-window-drag"
@@ -675,4 +701,4 @@ const TabBar = memo(({ workspace, noTabs }: TabBarProps) => {
     );
 });
 
-export { TabBar, WaveAIButton };
+export { TabBar, WaveAIButton, WidgetsSidebarButton };

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

@@ -56,6 +56,9 @@ class WorkspaceLayoutModel {
     private focusTimeoutRef: NodeJS.Timeout | null = null;
     private debouncedPersistAIWidth: () => void;
     private debouncedPersistVTabWidth: () => void;
+    private widgetsSidebarVisible: boolean;
+    widgetsSidebarVisibleAtom: jotai.PrimitiveAtom<boolean>;
+    private debouncedPersistWidgetsSidebarVisible: () => void;
 
     private constructor() {
         this.aiPanelRef = null;
@@ -71,6 +74,8 @@ class WorkspaceLayoutModel {
         this.vtabWidth = VTabBar_DefaultWidth;
         this.vtabVisible = false;
         this.panelVisibleAtom = jotai.atom(false);
+        this.widgetsSidebarVisible = true;
+        this.widgetsSidebarVisibleAtom = jotai.atom(true);
         this.initializeFromMeta();
 
         this.handleWindowResize = this.handleWindowResize.bind(this);
@@ -104,6 +109,17 @@ class WorkspaceLayoutModel {
                 console.warn("Failed to persist vtabbar width:", e);
             }
         }, 300);
+
+        this.debouncedPersistWidgetsSidebarVisible = debounce(() => {
+            try {
+                RpcApi.SetMetaCommand(TabRpcClient, {
+                    oref: WOS.makeORef("workspace", this.getWorkspaceId()),
+                    meta: { "layout:widgetsvisible": this.widgetsSidebarVisible },
+                });
+            } catch (e) {
+                console.warn("Failed to persist widgets sidebar visibility:", e);
+            }
+        }, 300);
     }
 
     static getInstance(): WorkspaceLayoutModel {
@@ -135,6 +151,10 @@ class WorkspaceLayoutModel {
         return getOrefMetaKeyAtom(WOS.makeORef("workspace", this.getWorkspaceId()), "layout:vtabbarwidth");
     }
 
+    private getWidgetsSidebarVisibleAtom(): jotai.Atom<boolean | undefined> {
+        return getOrefMetaKeyAtom(WOS.makeORef("workspace", this.getWorkspaceId()), "layout:widgetsvisible");
+    }
+
     private initializeFromMeta(): void {
         try {
             const savedVisible = globalStore.get(this.getPanelOpenAtom());
@@ -150,6 +170,11 @@ class WorkspaceLayoutModel {
             if (savedVTabWidth != null && savedVTabWidth > 0) {
                 this.vtabWidth = savedVTabWidth;
             }
+            const savedWidgetsSidebarVisible = globalStore.get(this.getWidgetsSidebarVisibleAtom());
+            if (savedWidgetsSidebarVisible != null) {
+                this.widgetsSidebarVisible = savedWidgetsSidebarVisible;
+                globalStore.set(this.widgetsSidebarVisibleAtom, savedWidgetsSidebarVisible);
+            }
             const tabBarPosition = globalStore.get(getSettingsKeyAtom("app:tabbar")) ?? "top";
             const showLeftTabBar = tabBarPosition === "left" && !isBuilderWindow();
             this.vtabVisible = showLeftTabBar;
@@ -352,6 +377,17 @@ class WorkspaceLayoutModel {
         return this.getResolvedAIWidth(window.innerWidth);
     }
 
+    getWidgetsSidebarVisible(): boolean {
+        return this.widgetsSidebarVisible;
+    }
+
+    setWidgetsSidebarVisible(visible: boolean): void {
+        if (this.widgetsSidebarVisible === visible) return;
+        this.widgetsSidebarVisible = visible;
+        globalStore.set(this.widgetsSidebarVisibleAtom, visible);
+        this.debouncedPersistWidgetsSidebarVisible();
+    }
+
     // ---- Initial percentage helpers (used by workspace.tsx for defaultSize) ----
 
     getLeftGroupInitialPercentage(windowWidth: number, showLeftTabBar: boolean): number {

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

@@ -1143,6 +1143,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"`