From e9a4dd03198cf8a2c96c0ad9150fc05e2fdad87f Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Tue, 9 Dec 2025 23:07:40 -0500
Subject: [PATCH] feat(sidebar, settings): enhance project management and UI
 navigation

- Removed trash functionality from the sidebar component, including the associated button and event handlers.
- Added a new "Danger Zone" section in the settings view for project deletion, featuring a confirmation dialog.
- Implemented smooth scrolling and active section highlighting in the settings sidebar for improved navigation.
- Updated various UI elements for better consistency and responsiveness.

These changes streamline project management and enhance user experience within the application.
---
 app/src/components/layout/sidebar.tsx      | 100 ++------
 app/src/components/views/board-view.tsx    |  34 ++-
 app/src/components/views/settings-view.tsx | 260 +++++++++++++++++++--
 3 files changed, 281 insertions(+), 113 deletions(-)

diff --git a/app/src/components/layout/sidebar.tsx b/app/src/components/layout/sidebar.tsx
index f47c23e4..43021508 100644
--- a/app/src/components/layout/sidebar.tsx
+++ b/app/src/components/layout/sidebar.tsx
@@ -10,14 +10,11 @@ import {
   FileText,
   LayoutGrid,
   Bot,
-  ChevronLeft,
-  ChevronRight,
   Folder,
   X,
   Wrench,
   PanelLeft,
   PanelLeftClose,
-  Sparkles,
   ChevronDown,
   Check,
   BookOpen,
@@ -28,9 +25,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger,
-  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import {
   Dialog,
@@ -84,7 +79,6 @@ interface SortableProjectItemProps {
   index: number;
   currentProjectId: string | undefined;
   onSelect: (project: Project) => void;
-  onTrash: (project: Project) => void;
 }
 
 function SortableProjectItem({
@@ -92,7 +86,6 @@ function SortableProjectItem({
   index,
   currentProjectId,
   onSelect,
-  onTrash,
 }: SortableProjectItemProps) {
   const {
     attributes,
@@ -151,19 +144,6 @@ function SortableProjectItem({
           <Check className="h-4 w-4 text-brand-500 shrink-0" />
         )}
       </div>
-
-      {/* Move to trash */}
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          onTrash(project);
-        }}
-        className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
-        title="Move to Trash"
-        data-testid={`project-trash-${project.id}`}
-      >
-        <Trash2 className="h-3.5 w-3.5" />
-      </button>
     </div>
   );
 }
@@ -179,7 +159,6 @@ export function Sidebar() {
     setCurrentProject,
     setCurrentView,
     toggleSidebar,
-    moveProjectToTrash,
     restoreTrashedProject,
     deleteTrashedProject,
     emptyTrash,
@@ -272,22 +251,6 @@ export function Sidebar() {
     }
   }, [addProject, setCurrentProject]);
 
-  const handleTrashProject = useCallback(
-    (project: Project) => {
-      const confirmed = window.confirm(
-        `Move "${project.name}" to Trash?\nThe folder stays on disk until you delete it from Trash.`
-      );
-      if (!confirmed) return;
-
-      moveProjectToTrash(project.id);
-      setIsProjectPickerOpen(false);
-      toast.success("Project moved to Trash", {
-        description: `${project.name} was removed from the sidebar.`,
-      });
-    },
-    [moveProjectToTrash]
-  );
-
   const handleRestoreProject = useCallback(
     (projectId: string) => {
       restoreTrashedProject(projectId);
@@ -571,7 +534,7 @@ export function Sidebar() {
               title="New Project"
               data-testid="new-project-button"
             >
-              <Plus className="w-4 h-4 flex-shrink-0" />
+              <Plus className="w-4 h-4 shrink-0" />
               <span className="ml-2 text-sm font-medium hidden lg:block whitespace-nowrap">
                 New
               </span>
@@ -583,13 +546,23 @@ export function Sidebar() {
               data-testid="open-project-button"
             >
               <FolderOpen className="w-4 h-4 shrink-0" />
-              <span className="ml-2 text-sm font-medium hidden lg:block whitespace-nowrap">
-                Open
-              </span>
               <span className="hidden lg:flex items-center justify-center w-5 h-5 text-[10px] font-mono rounded bg-white/5 border border-white/10 text-zinc-500 ml-2">
                 {ACTION_SHORTCUTS.openProject}
               </span>
             </button>
+            <button
+              onClick={() => setShowTrashDialog(true)}
+              className="group flex items-center justify-center px-3 py-2.5 rounded-lg relative overflow-hidden transition-all text-muted-foreground hover:text-primary hover:bg-destructive/10 border border-sidebar-border"
+              title="Trash"
+              data-testid="trash-button"
+            >
+              <Trash2 className="size-4 shrink-0" />
+              {trashedProjects.length > 0 && (
+                <span className="absolute -top-[2px] -right-[2px] flex items-center justify-center w-5 h-5 text-[10px] font-medium rounded-full text-brand-500">
+                  {trashedProjects.length > 9 ? "9+" : trashedProjects.length}
+                </span>
+              )}
+            </button>
           </div>
         )}
 
@@ -646,23 +619,10 @@ export function Sidebar() {
                           setCurrentProject(p);
                           setIsProjectPickerOpen(false);
                         }}
-                        onTrash={handleTrashProject}
                       />
                     ))}
                   </SortableContext>
                 </DndContext>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onSelect={(e) => {
-                    e.preventDefault();
-                    setShowTrashDialog(true);
-                  }}
-                  className="text-destructive focus:text-destructive"
-                  data-testid="manage-trash"
-                >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  Manage Trash ({trashedProjects.length})
-                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
@@ -767,38 +727,8 @@ export function Sidebar() {
 
       {/* Bottom Section - User / Settings */}
       <div className="border-t border-sidebar-border bg-sidebar-accent/10 shrink-0">
-        {/* Trash + Settings Links */}
+        {/* Settings Link */}
         <div className="p-2">
-          <button
-            onClick={() => setShowTrashDialog(true)}
-            className={cn(
-              "group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag mb-2",
-              "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50",
-              sidebarOpen ? "justify-start" : "justify-center"
-            )}
-            title={!sidebarOpen ? "Trash" : undefined}
-            data-testid="trash-button"
-          >
-            <Trash2 className="w-4 h-4 shrink-0 transition-colors group-hover:text-destructive" />
-            <span
-              className={cn(
-                "ml-2.5 font-medium text-sm flex-1",
-                sidebarOpen ? "hidden lg:block" : "hidden"
-              )}
-            >
-              Trash
-            </span>
-            {trashedProjects.length > 0 && sidebarOpen && (
-              <span className="hidden lg:flex items-center justify-center min-w-[20px] px-1 h-5 text-[10px] font-mono rounded bg-destructive/10 border border-destructive/20 text-destructive">
-                {trashedProjects.length}
-              </span>
-            )}
-            {!sidebarOpen && (
-              <span className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-border">
-                Trash ({trashedProjects.length})
-              </span>
-            )}
-          </button>
           <button
             onClick={() => setCurrentView("settings")}
             className={cn(
diff --git a/app/src/components/views/board-view.tsx b/app/src/components/views/board-view.tsx
index ce5564ed..98cb062d 100644
--- a/app/src/components/views/board-view.tsx
+++ b/app/src/components/views/board-view.tsx
@@ -337,7 +337,6 @@ export function BoardView() {
     }
   }, [showAddDialog, defaultSkipTests]);
 
-
   // Listen for auto mode feature completion and errors to reload features
   useEffect(() => {
     const api = getElectronAPI();
@@ -352,7 +351,10 @@ export function BoardView() {
         loadFeatures();
       } else if (event.type === "auto_mode_error") {
         // Reload features when an error occurs (feature moved to waiting_approval)
-        console.log("[Board] Feature error, reloading features...", event.error);
+        console.log(
+          "[Board] Feature error, reloading features...",
+          event.error
+        );
 
         // Remove from running tasks so it moves to the correct column
         if (event.featureId) {
@@ -415,7 +417,10 @@ export function BoardView() {
     const checkAllContexts = async () => {
       // Check context for in_progress, waiting_approval, and verified features
       const featuresWithPotentialContext = features.filter(
-        (f) => f.status === "in_progress" || f.status === "waiting_approval" || f.status === "verified"
+        (f) =>
+          f.status === "in_progress" ||
+          f.status === "waiting_approval" ||
+          f.status === "verified"
       );
       const contextChecks = await Promise.all(
         featuresWithPotentialContext.map(async (f) => ({
@@ -674,7 +679,9 @@ export function BoardView() {
       console.log(`[Board] Deleted agent context for feature ${featureId}`);
     } catch (error) {
       // Context file might not exist, which is fine
-      console.log(`[Board] Context file not found or already deleted for feature ${featureId}`);
+      console.log(
+        `[Board] Context file not found or already deleted for feature ${featureId}`
+      );
     }
 
     // Delete attached images if they exist
@@ -686,11 +693,17 @@ export function BoardView() {
             await api.deleteFile(imagePathObj.path);
             console.log(`[Board] Deleted image: ${imagePathObj.path}`);
           } catch (error) {
-            console.error(`[Board] Failed to delete image ${imagePathObj.path}:`, error);
+            console.error(
+              `[Board] Failed to delete image ${imagePathObj.path}:`,
+              error
+            );
           }
         }
       } catch (error) {
-        console.error(`[Board] Error deleting images for feature ${featureId}:`, error);
+        console.error(
+          `[Board] Error deleting images for feature ${featureId}:`,
+          error
+        );
       }
     }
 
@@ -1633,10 +1646,15 @@ export function BoardView() {
                   try {
                     const contextPath = `${currentProject.path}/.automaker/agents-context/${feature.id}.md`;
                     await api.deleteFile(contextPath);
-                    console.log(`[Board] Deleted agent context for feature ${feature.id}`);
+                    console.log(
+                      `[Board] Deleted agent context for feature ${feature.id}`
+                    );
                   } catch (error) {
                     // Context file might not exist, which is fine
-                    console.debug("[Board] No context file to delete for feature:", feature.id);
+                    console.debug(
+                      "[Board] No context file to delete for feature:",
+                      feature.id
+                    );
                   }
 
                   // Remove the feature
diff --git a/app/src/components/views/settings-view.tsx b/app/src/components/views/settings-view.tsx
index 2e45fe3e..6436d1c0 100644
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useAppStore } from "@/store/app-store";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 import {
   Settings,
   Key,
@@ -32,8 +33,27 @@ import {
   Square,
   Maximize2,
   FlaskConical,
+  Trash2,
+  Folder,
 } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+// Navigation items for the side panel
+const NAV_ITEMS = [
+  { id: "api-keys", label: "API Keys", icon: Key },
+  { id: "appearance", label: "Appearance", icon: Palette },
+  { id: "kanban", label: "Kanban Display", icon: LayoutGrid },
+  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
+  { id: "danger", label: "Danger Zone", icon: Trash2 },
+];
 
 export function SettingsView() {
   const {
@@ -46,6 +66,8 @@ export function SettingsView() {
     setKanbanCardDetailLevel,
     defaultSkipTests,
     setDefaultSkipTests,
+    currentProject,
+    moveProjectToTrash,
   } = useAppStore();
   const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic);
   const [googleKey, setGoogleKey] = useState(apiKeys.google);
@@ -62,12 +84,61 @@ export function SettingsView() {
     success: boolean;
     message: string;
   } | null>(null);
+  const [activeSection, setActiveSection] = useState("api-keys");
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setAnthropicKey(apiKeys.anthropic);
     setGoogleKey(apiKeys.google);
   }, [apiKeys]);
 
+  // Track scroll position to highlight active nav item
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const sections = NAV_ITEMS.map((item) => ({
+        id: item.id,
+        element: document.getElementById(item.id),
+      })).filter((s) => s.element);
+
+      const containerRect = container.getBoundingClientRect();
+      const scrollTop = container.scrollTop;
+
+      for (let i = sections.length - 1; i >= 0; i--) {
+        const section = sections[i];
+        if (section.element) {
+          const rect = section.element.getBoundingClientRect();
+          const relativeTop = rect.top - containerRect.top + scrollTop;
+          if (scrollTop >= relativeTop - 100) {
+            setActiveSection(section.id);
+            break;
+          }
+        }
+      }
+    };
+
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const scrollToSection = useCallback((sectionId: string) => {
+    const element = document.getElementById(sectionId);
+    if (element && scrollContainerRef.current) {
+      const container = scrollContainerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+      const relativeTop = elementRect.top - containerRect.top + container.scrollTop;
+
+      container.scrollTo({
+        top: relativeTop - 24,
+        behavior: "smooth",
+      });
+    }
+  }, []);
+
   const handleTestConnection = async () => {
     setTestingConnection(true);
     setTestResult(null);
@@ -171,23 +242,60 @@ export function SettingsView() {
         </div>
       </div>
 
-      {/* Content Area */}
-      <div className="flex-1 overflow-y-auto p-8">
-        <div className="max-w-4xl mx-auto space-y-6">
-          {/* API Keys Section */}
-          <div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
-            <div className="p-6 border-b border-border">
-              <div className="flex items-center gap-2 mb-2">
-                <Key className="w-5 h-5 text-brand-500" />
-                <h2 className="text-lg font-semibold text-foreground">
-                  API Keys
-                </h2>
+      {/* Content Area with Sidebar */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Sticky Side Navigation */}
+        <nav className="hidden lg:block w-48 shrink-0 border-r border-border bg-card/50 backdrop-blur-sm">
+          <div className="sticky top-0 p-4 space-y-1">
+            {NAV_ITEMS.filter((item) => item.id !== "danger" || currentProject).map(
+              (item) => {
+                const Icon = item.icon;
+                const isActive = activeSection === item.id;
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => scrollToSection(item.id)}
+                    className={cn(
+                      "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all text-left",
+                      isActive
+                        ? "bg-brand-500/10 text-brand-500 border border-brand-500/20"
+                        : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                    )}
+                  >
+                    <Icon
+                      className={cn(
+                        "w-4 h-4 shrink-0",
+                        isActive ? "text-brand-500" : ""
+                      )}
+                    />
+                    <span className="truncate">{item.label}</span>
+                  </button>
+                );
+              }
+            )}
+          </div>
+        </nav>
+
+        {/* Scrollable Content */}
+        <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-8">
+          <div className="max-w-4xl mx-auto space-y-6">
+            {/* API Keys Section */}
+            <div
+              id="api-keys"
+              className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+            >
+              <div className="p-6 border-b border-border">
+                <div className="flex items-center gap-2 mb-2">
+                  <Key className="w-5 h-5 text-brand-500" />
+                  <h2 className="text-lg font-semibold text-foreground">
+                    API Keys
+                  </h2>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Configure your AI provider API keys. Keys are stored locally in
+                  your browser.
+                </p>
               </div>
-              <p className="text-sm text-muted-foreground">
-                Configure your AI provider API keys. Keys are stored locally in
-                your browser.
-              </p>
-            </div>
             <div className="p-6 space-y-6">
               {/* Claude/Anthropic API Key */}
               <div className="space-y-3">
@@ -391,7 +499,10 @@ export function SettingsView() {
           </div>
 
           {/* Appearance Section */}
-          <div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
+          <div
+            id="appearance"
+            className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+          >
             <div className="p-6 border-b border-border">
               <div className="flex items-center gap-2 mb-2">
                 <Palette className="w-5 h-5 text-brand-500" />
@@ -569,7 +680,10 @@ export function SettingsView() {
           </div>
 
           {/* Kanban Card Display Section */}
-          <div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
+          <div
+            id="kanban"
+            className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+          >
             <div className="p-6 border-b border-border">
               <div className="flex items-center gap-2 mb-2">
                 <LayoutGrid className="w-5 h-5 text-brand-500" />
@@ -647,7 +761,10 @@ export function SettingsView() {
           </div>
 
           {/* Feature Defaults Section */}
-          <div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
+          <div
+            id="defaults"
+            className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+          >
             <div className="p-6 border-b border-border">
               <div className="flex items-center gap-2 mb-2">
                 <FlaskConical className="w-5 h-5 text-brand-500" />
@@ -689,6 +806,51 @@ export function SettingsView() {
             </div>
           </div>
 
+          {/* Delete Project Section - Only show when a project is selected */}
+          {currentProject && (
+            <div
+              id="danger"
+              className="rounded-xl border border-destructive/30 bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+            >
+              <div className="p-6 border-b border-destructive/30">
+                <div className="flex items-center gap-2 mb-2">
+                  <Trash2 className="w-5 h-5 text-destructive" />
+                  <h2 className="text-lg font-semibold text-foreground">
+                    Danger Zone
+                  </h2>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Permanently remove this project from Automaker.
+                </p>
+              </div>
+              <div className="p-6">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+                      <Folder className="w-5 h-5 text-brand-500" />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="font-medium text-foreground truncate">
+                        {currentProject.name}
+                      </p>
+                      <p className="text-xs text-muted-foreground truncate">
+                        {currentProject.path}
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    variant="destructive"
+                    onClick={() => setShowDeleteDialog(true)}
+                    data-testid="delete-project-button"
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    Delete Project
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Save Button */}
           <div className="flex items-center gap-4">
             <Button
@@ -716,6 +878,64 @@ export function SettingsView() {
           </div>
         </div>
       </div>
+      </div>
+
+      {/* Delete Project Confirmation Dialog */}
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent className="bg-popover border-border max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Trash2 className="w-5 h-5 text-destructive" />
+              Delete Project
+            </DialogTitle>
+            <DialogDescription className="text-muted-foreground">
+              Are you sure you want to move this project to Trash?
+            </DialogDescription>
+          </DialogHeader>
+
+          {currentProject && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
+              <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+                <Folder className="w-5 h-5 text-brand-500" />
+              </div>
+              <div className="min-w-0">
+                <p className="font-medium text-foreground truncate">
+                  {currentProject.name}
+                </p>
+                <p className="text-xs text-muted-foreground truncate">
+                  {currentProject.path}
+                </p>
+              </div>
+            </div>
+          )}
+
+          <p className="text-sm text-muted-foreground">
+            The folder will remain on disk until you permanently delete it from Trash.
+          </p>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="ghost"
+              onClick={() => setShowDeleteDialog(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (currentProject) {
+                  moveProjectToTrash(currentProject.id);
+                  setShowDeleteDialog(false);
+                }
+              }}
+              data-testid="confirm-delete-project"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Move to Trash
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }