From 1766357335538af3c4c6ffad60f2d5a09bf9d06f Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Wed, 10 Dec 2025 08:56:22 -0500
Subject: [PATCH] feat(sidebar, app-store): enhance project history management
 with dropdown menu

- Replaced project cycle buttons in the sidebar with a dropdown menu for improved UI and accessibility.
- Added a new `clearProjectHistory` action to the app store, allowing users to clear project history while retaining the current project.
- Updated the sidebar component to integrate the new dropdown menu, providing options to cycle through previous and next projects, as well as clear history.

These changes streamline project navigation and enhance user experience within the application.
---
 app/src/components/layout/sidebar.tsx | 63 ++++++++++++++++-----------
 app/src/store/app-store.ts            | 18 ++++++++
 2 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/app/src/components/layout/sidebar.tsx b/app/src/components/layout/sidebar.tsx
index 45b10e2c..85e9dd7f 100644
--- a/app/src/components/layout/sidebar.tsx
+++ b/app/src/components/layout/sidebar.tsx
@@ -20,15 +20,17 @@ import {
   Check,
   BookOpen,
   GripVertical,
-  RotateCw,
   RotateCcw,
   Trash2,
   Undo2,
+  MoreVertical,
 } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import {
   Dialog,
@@ -176,6 +178,7 @@ export function Sidebar() {
     reorderProjects,
     cyclePrevProject,
     cycleNextProject,
+    clearProjectHistory,
   } = useAppStore();
 
   // State for project picker dropdown
@@ -770,32 +773,40 @@ export function Sidebar() {
               </DropdownMenuContent>
             </DropdownMenu>
 
-            {/* Project Cycle Buttons - only show when there's history */}
+            {/* Project History Menu - only show when there's history */}
             {projectHistory.length > 1 && (
-              <div className="hidden lg:flex items-center gap-1">
-                <button
-                  onClick={cyclePrevProject}
-                  className="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border transition-all titlebar-no-drag group relative"
-                  title={`Previous project (${ACTION_SHORTCUTS.cyclePrevProject})`}
-                  data-testid="cycle-prev-project"
-                >
-                  <RotateCcw className="w-4 h-4" />
-                  <span className="absolute -bottom-5 px-1 py-0.5 text-[9px] font-mono rounded bg-sidebar-accent/20 border border-sidebar-border text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10">
-                    {ACTION_SHORTCUTS.cyclePrevProject}
-                  </span>
-                </button>
-                <button
-                  onClick={cycleNextProject}
-                  className="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border transition-all titlebar-no-drag group relative"
-                  title={`Next project (${ACTION_SHORTCUTS.cycleNextProject})`}
-                  data-testid="cycle-next-project"
-                >
-                  <RotateCw className="w-4 h-4" />
-                  <span className="absolute -bottom-5 px-1 py-0.5 text-[9px] font-mono rounded bg-sidebar-accent/20 border border-sidebar-border text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10">
-                    {ACTION_SHORTCUTS.cycleNextProject}
-                  </span>
-                </button>
-              </div>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className="hidden lg:flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border transition-all titlebar-no-drag"
+                    title="Project history"
+                    data-testid="project-history-menu"
+                  >
+                    <MoreVertical className="w-4 h-4" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  <DropdownMenuItem onClick={cyclePrevProject} data-testid="cycle-prev-project">
+                    <Undo2 className="w-4 h-4 mr-2" />
+                    <span className="flex-1">Previous</span>
+                    <span className="text-[10px] font-mono text-muted-foreground ml-2">
+                      {ACTION_SHORTCUTS.cyclePrevProject}
+                    </span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={cycleNextProject} data-testid="cycle-next-project">
+                    <Redo2 className="w-4 h-4 mr-2" />
+                    <span className="flex-1">Next</span>
+                    <span className="text-[10px] font-mono text-muted-foreground ml-2">
+                      {ACTION_SHORTCUTS.cycleNextProject}
+                    </span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={clearProjectHistory} data-testid="clear-project-history">
+                    <RotateCcw className="w-4 h-4 mr-2" />
+                    <span>Clear history</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             )}
           </div>
         )}
diff --git a/app/src/store/app-store.ts b/app/src/store/app-store.ts
index 47c0c3dc..771b817f 100644
--- a/app/src/store/app-store.ts
+++ b/app/src/store/app-store.ts
@@ -168,6 +168,7 @@ export interface AppActions {
   reorderProjects: (oldIndex: number, newIndex: number) => void;
   cyclePrevProject: () => void; // Cycle back through project history (Q)
   cycleNextProject: () => void; // Cycle forward through project history (E)
+  clearProjectHistory: () => void; // Clear history, keeping only current project
 
   // View actions
   setCurrentView: (view: ViewMode) => void;
@@ -424,6 +425,23 @@ export const useAppStore = create<AppState & AppActions>()(
         }
       },
 
+      clearProjectHistory: () => {
+        const currentProject = get().currentProject;
+        if (currentProject) {
+          // Keep only the current project in history
+          set({
+            projectHistory: [currentProject.id],
+            projectHistoryIndex: 0,
+          });
+        } else {
+          // No current project, clear everything
+          set({
+            projectHistory: [],
+            projectHistoryIndex: -1,
+          });
+        }
+      },
+
       // View actions
       setCurrentView: (view) => set({ currentView: view }),
       toggleSidebar: () => set({ sidebarOpen: !get().sidebarOpen }),