fix: Sidebar should not show if the user has not created any tasks yet (#335)

Author: charlesvien

apps/array/src/main/services/types.ts

@@ -2,3 +2,5 @@
  * Auto-import all IPC service types for declaration merging
  * This file is auto-generated by vite-plugin-auto-services.ts
  */
+
+export {};

apps/array/src/renderer/features/sidebar/components/MainSidebar.tsx

@@ -1,7 +1,21 @@
+import { useWorkspaceStore } from "@features/workspace/stores/workspaceStore";
 import { Box } from "@radix-ui/themes";
+import { useEffect } from "react";
+import { useSidebarStore } from "../stores/sidebarStore";
 import { Sidebar, SidebarContent } from "./index";
 
 export function MainSidebar() {
+  const workspaces = useWorkspaceStore((state) => state.workspaces);
+  const isLoaded = useWorkspaceStore((state) => state.isLoaded);
+  const setOpenAuto = useSidebarStore((state) => state.setOpenAuto);
+
+  useEffect(() => {
+    if (isLoaded) {
+      const workspaceCount = Object.keys(workspaces).length;
+      setOpenAuto(workspaceCount > 0);
+    }
+  }, [isLoaded, workspaces, setOpenAuto]);
+
   return (
     <Box flexShrink="0" style={{ flexShrink: 0 }}>
       <Sidebar>

apps/array/src/renderer/features/sidebar/stores/sidebarStore.ts

@@ -3,6 +3,7 @@ import { persist } from "zustand/middleware";
 
 interface SidebarStoreState {
   open: boolean;
+  hasUserSetOpen: boolean;
   width: number;
   isResizing: boolean;
   collapsedSections: Set<string>;
@@ -11,6 +12,7 @@ interface SidebarStoreState {
 
 interface SidebarStoreActions {
   setOpen: (open: boolean) => void;
+  setOpenAuto: (open: boolean) => void;
   toggle: () => void;
   setWidth: (width: number) => void;
   setIsResizing: (isResizing: boolean) => void;
@@ -25,13 +27,17 @@ type SidebarStore = SidebarStoreState & SidebarStoreActions;
 export const useSidebarStore = create<SidebarStore>()(
   persist(
     (set) => ({
-      open: true,
+      open: false,
+      hasUserSetOpen: false,
       width: 256,
       isResizing: false,
       collapsedSections: new Set<string>(),
       folderOrder: [],
-      setOpen: (open) => set({ open }),
-      toggle: () => set((state) => ({ open: !state.open })),
+      setOpen: (open) => set({ open, hasUserSetOpen: true }),
+      setOpenAuto: (open) =>
+        set((state) => (state.hasUserSetOpen ? state : { open })),
+      toggle: () =>
+        set((state) => ({ open: !state.open, hasUserSetOpen: true })),
       setWidth: (width) => set({ width }),
       setIsResizing: (isResizing) => set({ isResizing }),
       toggleSection: (sectionId) =>
@@ -73,20 +79,24 @@ export const useSidebarStore = create<SidebarStore>()(
       name: "sidebar-storage",
       partialize: (state) => ({
         open: state.open,
+        hasUserSetOpen: state.hasUserSetOpen,
         width: state.width,
         collapsedSections: Array.from(state.collapsedSections),
         folderOrder: state.folderOrder,
       }),
       merge: (persisted, current) => {
         const persistedState = persisted as {
           open?: boolean;
+          hasUserSetOpen?: boolean;
           width?: number;
           collapsedSections?: string[];
           folderOrder?: string[];
         };
         return {
           ...current,
           open: persistedState.open ?? current.open,
+          hasUserSetOpen:
+            persistedState.hasUserSetOpen ?? current.hasUserSetOpen,
           width: persistedState.width ?? current.width,
           collapsedSections: new Set(persistedState.collapsedSections ?? []),
           folderOrder: persistedState.folderOrder ?? [],

apps/array/vite-plugin-auto-services.ts

@@ -31,12 +31,15 @@ ${serviceFiles.map((f) => `import "./${f.replace(".ts", ".js")}";`).join("\n")}
 `;
 
     // Generate types.ts (imports type files for declaration merging)
+    const typesImports = typeFiles
+      .map((f) => `import "./${f.replace(".ts", ".js")}";`)
+      .join("\n");
     const typesContent = `/**
  * Auto-import all IPC service types for declaration merging
  * This file is auto-generated by vite-plugin-auto-services.ts
  */
 
-${typeFiles.map((f) => `import "./${f.replace(".ts", ".js")}";`).join("\n")}
+${typesImports || "export {};"}
 `;
 
     // Check if content actually changed before writing