Sidebar should not show if the user has not created any tasks yet

Author: charlesvien

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

@@ -1,7 +1,19 @@
+import { useTasks } from "@features/tasks/hooks/useTasks";
 import { Box } from "@radix-ui/themes";
+import { useEffect } from "react";
+import { useSidebarStore } from "../stores/sidebarStore";
 import { Sidebar, SidebarContent } from "./index";
 
 export function MainSidebar() {
+  const { data: tasks = [], isFetched } = useTasks();
+  const setOpenAuto = useSidebarStore((state) => state.setOpenAuto);
+
+  useEffect(() => {
+    if (isFetched) {
+      setOpenAuto(tasks.length > 0);
+    }
+  }, [isFetched, tasks.length, 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 ?? [],