refactor: update AppLayout and NavigationSidebar components to improve sidebar management; simplify devlog fetching logic in ProjectDevlogDetailsPage

Author: tikazyq

packages/web/app/AppLayout.tsx

@@ -2,8 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { AppLayoutSkeleton, ErrorBoundary, NavigationSidebar, TopNavbar } from '@/components';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import { useLayoutStore } from '@/stores';
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -12,8 +11,6 @@ interface AppLayoutProps {
 export function AppLayout({ children }: AppLayoutProps) {
   const [mounted, setMounted] = useState(false);
 
-  const { sidebarOpen, setSidebarOpen } = useLayoutStore();
-
   // Handle client-side hydration
   useEffect(() => {
     setMounted(true);
@@ -28,20 +25,14 @@ export function AppLayout({ children }: AppLayoutProps) {
     <ErrorBoundary>
       <div className="min-h-screen bg-background w-full">
         <TopNavbar />
-        <SidebarProvider
-          defaultOpen={sidebarOpen}
-          open={sidebarOpen}
-          onOpenChange={(open) => {
-            setSidebarOpen(open);
-          }}
-        >
+        <SidebarProvider>
           <div className="flex w-full h-[calc(100vh-3rem)]">
             <NavigationSidebar />
-            <div className="flex-1 flex flex-col w-full">
+            <SidebarInset>
               <main className="flex-1 p-6 w-full overflow-auto">
                 <div className="w-full">{children}</div>
               </main>
-            </div>
+            </SidebarInset>
           </div>
         </SidebarProvider>
       </div>

packages/web/app/components/layout/NavigationSidebar.tsx

@@ -6,10 +6,12 @@ import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
+  SidebarGroup,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarTrigger,
+  useSidebar,
 } from '@/components/ui/sidebar';
 import { Home, SquareKanban } from 'lucide-react';
 
@@ -24,19 +26,13 @@ export function NavigationSidebar() {
   const router = useRouter();
   const pathname = usePathname();
   const [mounted, setMounted] = useState(false);
+  const { open, toggleSidebar } = useSidebar();
 
   // Handle client-side hydration
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  // Check if sidebar should be hidden
-  const shouldHideSidebar = () => {
-    if (!mounted) return false;
-    // No pages currently hide the sidebar
-    return false;
-  };
-
   const getProjectId = () => {
     const matched = pathname.match(/\/projects\/(\w+)/);
     if (matched) {
@@ -49,21 +45,21 @@ export function NavigationSidebar() {
     {
       key: 'overview',
       label: 'Overview',
-      icon: <Home size={16} />,
+      icon: <Home />,
       onClick: () => router.push('/projects'),
     },
   ];
   const projectDetailMenuItems = [
     {
       key: 'overview',
       label: 'Overview',
-      icon: <Home size={16} />,
+      icon: <Home />,
       onClick: () => router.push(`/projects/${getProjectId()}`),
     },
     {
       key: 'list',
       label: 'Devlogs',
-      icon: <SquareKanban size={16} />,
+      icon: <SquareKanban />,
       onClick: () => router.push(`/projects/${getProjectId()}/devlogs`),
     },
   ];
@@ -96,23 +92,19 @@ export function NavigationSidebar() {
   };
 
   // Don't render menu items until mounted to prevent hydration issues
-  if (!mounted || shouldHideSidebar()) {
+  if (!mounted) {
     return null;
   }
 
   const menuItems = getMenuItems();
 
   return (
-    <Sidebar className="border-r bg-background">
+    <Sidebar collapsible="icon" className="py-1 border-r bg-background">
       <SidebarContent className="bg-background">
-        <SidebarMenu className="space-y-2 px-4 py-2">
+        <SidebarMenu className="space-y-2 p-2">
           {menuItems.map((item) => (
             <SidebarMenuItem key={item.key}>
-              <SidebarMenuButton
-                isActive={getSelectedKey() === item.key}
-                className="flex items-center gap-3 px-4 py-3 text-sm font-medium min-h-[44px] rounded-md"
-                onClick={item.onClick}
-              >
+              <SidebarMenuButton isActive={getSelectedKey() === item.key} onClick={item.onClick}>
                 {item.icon}
                 <span>{item.label}</span>
               </SidebarMenuButton>
@@ -121,8 +113,8 @@ export function NavigationSidebar() {
         </SidebarMenu>
       </SidebarContent>
 
-      <SidebarFooter className="p-4 bg-background border-t-0">
-        <SidebarTrigger className="h-8 w-8 p-0" />
+      <SidebarFooter className="p-2 bg-background border-t-0">
+        <SidebarTrigger className="h-8 w-8 p-0" onClick={toggleSidebar} />
       </SidebarFooter>
     </Sidebar>
   );

packages/web/app/projects/[id]/devlogs/[devlogId]/ProjectDevlogDetailsPage.tsx

@@ -11,8 +11,7 @@ import {
 } from '@/components';
 import { useDevlogStore, useProjectStore } from '@/stores';
 import { useRouter } from 'next/navigation';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { AlertTriangleIcon, ArrowLeftIcon, SaveIcon, TrashIcon, UndoIcon } from 'lucide-react';
+import { ArrowLeftIcon, SaveIcon, TrashIcon, UndoIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
 interface ProjectDevlogDetailsPageProps {
@@ -26,11 +25,14 @@ export function ProjectDevlogDetailsPage({ projectId, devlogId }: ProjectDevlogD
   const { setCurrentProjectId } = useProjectStore();
 
   const {
+    currentDevlogId,
+    setCurrentDevlogId,
     currentDevlogContext,
     currentDevlogNotesContext,
     fetchCurrentDevlog,
+    fetchCurrentDevlogNotes,
     updateSelectedDevlog,
-    deleteDevlog: deleteDevlogFromList,
+    deleteDevlog,
     clearCurrentDevlog,
   } = useDevlogStore();
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
@@ -42,17 +44,24 @@ export function ProjectDevlogDetailsPage({ projectId, devlogId }: ProjectDevlogD
 
   useEffect(() => {
     setCurrentProjectId(projectId);
-  }, [projectId, setCurrentProjectId]);
+  }, [projectId]);
 
-  // Fetch the devlog when component mounts or devlogId changes
   useEffect(() => {
-    fetchCurrentDevlog(devlogId);
+    setCurrentDevlogId(devlogId);
+  }, [devlogId]);
+
+  // Fetch the devlog when currentDevlogId changes
+  useEffect(() => {
+    if (!currentDevlogId) return;
+
+    fetchCurrentDevlog();
+    fetchCurrentDevlogNotes();
 
     // Clear selected devlog when component unmounts
     return () => {
       clearCurrentDevlog();
     };
-  }, [devlogId, fetchCurrentDevlog, clearCurrentDevlog]);
+  }, [currentDevlogId]);
 
   const handleUpdate = async (data: any) => {
     try {
@@ -80,7 +89,7 @@ export function ProjectDevlogDetailsPage({ projectId, devlogId }: ProjectDevlogD
   const handleDelete = async () => {
     try {
       // Delete the devlog (this will also clear selected devlog via context)
-      await deleteDevlogFromList(devlogId);
+      await deleteDevlog(devlogId);
 
       router.push(`/projects/${projectId}/devlogs`);
     } catch (error) {

packages/web/app/stores/devlog-store.ts

@@ -48,9 +48,9 @@ interface DevlogState {
   fetchDevlogs: () => Promise<void>;
   fetchStats: () => Promise<void>;
   fetchTimeSeriesStats: () => Promise<void>;
-  fetchCurrentDevlog: (id: DevlogId) => Promise<void>;
+  fetchCurrentDevlog: () => Promise<void>;
   clearCurrentDevlog: () => void;
-  fetchCurrentDevlogNotes: (id: DevlogId) => Promise<void>;
+  fetchCurrentDevlogNotes: () => Promise<void>;
   clearCurrentDevlogNotes: () => void;
   createDevlog: (data: Partial<DevlogEntry>) => Promise<any>;
   updateDevlog: (data: Partial<DevlogEntry> & { id: DevlogId }) => Promise<any>;
@@ -285,14 +285,15 @@ export const useDevlogStore = create<DevlogState>()(
       }
     },
 
-    fetchCurrentDevlog: async (id: DevlogId) => {
+    fetchCurrentDevlog: async () => {
+      const { currentDevlogId } = get();
       const devlogApiClient = getDevlogApiClient();
-      if (!devlogApiClient) {
+      if (!currentDevlogId || !devlogApiClient) {
         set((state) => ({
           currentDevlogContext: {
             ...state.currentDevlogContext,
             loading: false,
-            error: 'API client unavailable',
+            error: 'No devlog selected or API client unavailable',
           },
         }));
         return;
@@ -306,7 +307,7 @@ export const useDevlogStore = create<DevlogState>()(
             error: null,
           },
         }));
-        const currentDevlog = await devlogApiClient.get(id);
+        const currentDevlog = await devlogApiClient.get(currentDevlogId);
         set((state) => ({
           currentDevlogContext: {
             ...state.currentDevlogContext,