🤖 refactor: eliminate workspace prop drilling via WorkspaceContext

ProjectSidebar, LeftSidebar, and App.tsx now use WorkspaceContext directly
instead of passing workspace state/operations through props:

- ProjectSidebar uses useWorkspaceContext() to get workspace operations
- LeftSidebar no longer passes workspace props to ProjectSidebar
- App.tsx no longer passes workspace callbacks to LeftSidebar
- Telemetry tracking moved to effect watching selectedWorkspace changes

This eliminates prop drilling for:
- selectedWorkspace / setSelectedWorkspace
- onAddWorkspace (beginWorkspaceCreation)
- onRemoveWorkspace / onRenameWorkspace
- workspaceMetadata

Cleaned up unused callbacks and imports.

Author: kylecarbs

src/App.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import "./styles/globals.css";
 import { useApp } from "./contexts/AppContext";
-import { useProjectContext } from "./contexts/ProjectContext";
-import { useSortedWorkspacesByProject } from "./hooks/useSortedWorkspacesByProject";
 import type { WorkspaceSelection } from "./components/ProjectSidebar";
+import type { FrontendWorkspaceMetadata } from "./types/workspace";
 import { LeftSidebar } from "./components/LeftSidebar";
 import { ProjectCreateModal } from "./components/ProjectCreateModal";
 import { AIView } from "./components/AIView";
@@ -13,10 +12,11 @@ import { matchesKeybind, KEYBINDS } from "./utils/ui/keybinds";
 import { useResumeManager } from "./hooks/useResumeManager";
 import { useUnreadTracking } from "./hooks/useUnreadTracking";
 import { useAutoCompactContinue } from "./hooks/useAutoCompactContinue";
-import { useWorkspaceStoreRaw } from "./stores/WorkspaceStore";
+import { useWorkspaceStoreRaw, useWorkspaceRecency } from "./stores/WorkspaceStore";
 import { ChatInput } from "./components/ChatInput/index";
 import type { ChatInputAPI } from "./components/ChatInput/types";
 
+import { useStableReference, compareMaps } from "./hooks/useStableReference";
 import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandRegistryContext";
 import type { CommandAction } from "./contexts/CommandRegistryContext";
 import { ModeProvider } from "./contexts/ModeContext";
@@ -28,6 +28,7 @@ import type { ThinkingLevel } from "./types/thinking";
 import { CUSTOM_EVENTS } from "./constants/events";
 import { isWorkspaceForkSwitchEvent } from "./utils/workspaceFork";
 import { getThinkingLevelKey } from "./constants/storage";
+import type { BranchListResult } from "./types/ipc";
 import { useTelemetry } from "./hooks/useTelemetry";
 import { useStartWorkspaceCreation, getFirstProjectPath } from "./hooks/useStartWorkspaceCreation";
 
@@ -36,25 +37,20 @@ const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
 function AppInner() {
   // Get app-level state from context
   const {
+    projects,
+    addProject,
+    removeProject,
     workspaceMetadata,
     setWorkspaceMetadata,
     removeWorkspace,
     renameWorkspace,
     selectedWorkspace,
     setSelectedWorkspace,
   } = useApp();
-  const {
-    projects,
-    addProject,
-    removeProject: removeProjectFromContext,
-    isProjectCreateModalOpen,
-    openProjectCreateModal,
-    closeProjectCreateModal,
-    pendingNewWorkspaceProject,
-    beginWorkspaceCreation,
-    clearPendingWorkspaceCreation,
-    getBranchesForProject,
-  } = useProjectContext();
+  const [projectCreateModalOpen, setProjectCreateModalOpen] = useState(false);
+
+  // Track when we're in "new workspace creation" mode (show FirstMessageInput)
+  const [pendingNewWorkspaceProject, setPendingNewWorkspaceProject] = useState<string | null>(null);
 
   // Auto-collapse sidebar on mobile by default
   const isMobile = typeof window !== "undefined" && window.innerWidth <= 768;
@@ -71,13 +67,7 @@ function AppInner() {
 
   const startWorkspaceCreation = useStartWorkspaceCreation({
     projects,
-    setPendingNewWorkspaceProject: (projectPath: string | null) => {
-      if (projectPath) {
-        beginWorkspaceCreation(projectPath);
-      } else {
-        clearPendingWorkspaceCreation();
-      }
-    },
+    setPendingNewWorkspaceProject,
     setSelectedWorkspace,
   });
 
@@ -97,22 +87,17 @@ function AppInner() {
   // Get workspace store for command palette
   const workspaceStore = useWorkspaceStoreRaw();
 
-  // Wrapper for setSelectedWorkspace that tracks telemetry
-  const handleWorkspaceSwitch = useCallback(
-    (newWorkspace: WorkspaceSelection | null) => {
-      // Track workspace switch when both old and new are non-null (actual switch, not init/clear)
-      if (
-        selectedWorkspace &&
-        newWorkspace &&
-        selectedWorkspace.workspaceId !== newWorkspace.workspaceId
-      ) {
-        telemetry.workspaceSwitched(selectedWorkspace.workspaceId, newWorkspace.workspaceId);
-      }
 
-      setSelectedWorkspace(newWorkspace);
-    },
-    [selectedWorkspace, setSelectedWorkspace, telemetry]
-  );
+
+  // Track telemetry when workspace selection changes
+  const prevWorkspaceRef = useRef<WorkspaceSelection | null>(null);
+  useEffect(() => {
+    const prev = prevWorkspaceRef.current;
+    if (prev && selectedWorkspace && prev.workspaceId !== selectedWorkspace.workspaceId) {
+      telemetry.workspaceSwitched(prev.workspaceId, selectedWorkspace.workspaceId);
+    }
+    prevWorkspaceRef.current = selectedWorkspace;
+  }, [selectedWorkspace, telemetry]);
 
   // Validate selectedWorkspace when metadata changes
   // Clear selection if workspace was deleted
@@ -189,22 +174,91 @@ function AppInner() {
       if (selectedWorkspace?.projectPath === path) {
         setSelectedWorkspace(null);
       }
-      if (pendingNewWorkspaceProject === path) {
-        clearPendingWorkspaceCreation();
+      await removeProject(path);
+    },
+    [removeProject, selectedWorkspace, setSelectedWorkspace]
+  );
+
+  const handleAddWorkspace = useCallback(
+    (projectPath: string) => {
+      startWorkspaceCreation(projectPath);
+    },
+    [startWorkspaceCreation]
+  );
+
+  // Memoize callbacks to prevent LeftSidebar/ProjectSidebar re-renders
+  const handleAddProjectCallback = useCallback(() => {
+    setProjectCreateModalOpen(true);
+  }, []);
+
+
+
+  const handleRemoveProjectCallback = useCallback(
+    (path: string) => {
+      void handleRemoveProject(path);
+    },
+    [handleRemoveProject]
+  );
+
+  const handleGetSecrets = useCallback(async (projectPath: string) => {
+    return await window.api.projects.secrets.get(projectPath);
+  }, []);
+
+  const handleUpdateSecrets = useCallback(
+    async (projectPath: string, secrets: Array<{ key: string; value: string }>) => {
+      const result = await window.api.projects.secrets.update(projectPath, secrets);
+      if (!result.success) {
+        console.error("Failed to update secrets:", result.error);
       }
-      await removeProjectFromContext(path);
     },
-    [
-      clearPendingWorkspaceCreation,
-      pendingNewWorkspaceProject,
-      removeProjectFromContext,
-      selectedWorkspace,
-      setSelectedWorkspace,
-    ]
+    []
   );
 
   // NEW: Get workspace recency from store
-  const sortedWorkspacesByProject = useSortedWorkspacesByProject();
+  const workspaceRecency = useWorkspaceRecency();
+
+  // Sort workspaces by recency (most recent first)
+  // Returns Map<projectPath, FrontendWorkspaceMetadata[]> for direct component use
+  // Use stable reference to prevent sidebar re-renders when sort order hasn't changed
+  const sortedWorkspacesByProject = useStableReference(
+    () => {
+      const result = new Map<string, FrontendWorkspaceMetadata[]>();
+      for (const [projectPath, config] of projects) {
+        // Transform Workspace[] to FrontendWorkspaceMetadata[] using workspace ID
+        const metadataList = config.workspaces
+          .map((ws) => (ws.id ? workspaceMetadata.get(ws.id) : undefined))
+          .filter((meta): meta is FrontendWorkspaceMetadata => meta !== undefined && meta !== null);
+
+        // Sort by recency
+        metadataList.sort((a, b) => {
+          const aTimestamp = workspaceRecency[a.id] ?? 0;
+          const bTimestamp = workspaceRecency[b.id] ?? 0;
+          return bTimestamp - aTimestamp;
+        });
+
+        result.set(projectPath, metadataList);
+      }
+      return result;
+    },
+    (prev, next) => {
+      // Compare Maps: check if size, workspace order, and metadata content are the same
+      if (
+        !compareMaps(prev, next, (a, b) => {
+          if (a.length !== b.length) return false;
+          // Check both ID and name to detect renames
+          return a.every((metadata, i) => {
+            const bMeta = b[i];
+            if (!bMeta || !metadata) return false; // Null-safe
+            return metadata.id === bMeta.id && metadata.name === bMeta.name;
+          });
+        })
+      ) {
+        return false;
+      }
+      return true;
+    },
+    [projects, workspaceMetadata, workspaceRecency]
+  );
 
   const handleNavigateWorkspace = useCallback(
     (direction: "next" | "prev") => {
@@ -303,11 +357,32 @@ function AppInner() {
     [startWorkspaceCreation]
   );
 
+  const getBranchesForProject = useCallback(
+    async (projectPath: string): Promise<BranchListResult> => {
+      const branchResult = await window.api.projects.listBranches(projectPath);
+      const sanitizedBranches = Array.isArray(branchResult?.branches)
+        ? branchResult.branches.filter((branch): branch is string => typeof branch === "string")
+        : [];
+
+      const recommended =
+        typeof branchResult?.recommendedTrunk === "string" &&
+        sanitizedBranches.includes(branchResult.recommendedTrunk)
+          ? branchResult.recommendedTrunk
+          : (sanitizedBranches[0] ?? "");
+
+      return {
+        branches: sanitizedBranches,
+        recommendedTrunk: recommended,
+      };
+    },
+    []
+  );
+
   const selectWorkspaceFromPalette = useCallback(
     (selection: WorkspaceSelection) => {
-      handleWorkspaceSwitch(selection);
+      setSelectedWorkspace(selection);
     },
-    [handleWorkspaceSwitch]
+    [setSelectedWorkspace]
   );
 
   const removeWorkspaceFromPalette = useCallback(
@@ -321,8 +396,8 @@ function AppInner() {
   );
 
   const addProjectFromPalette = useCallback(() => {
-    openProjectCreateModal();
-  }, [openProjectCreateModal]);
+    setProjectCreateModalOpen(true);
+  }, []);
 
   const removeProjectFromPalette = useCallback(
     (path: string) => {
@@ -467,11 +542,16 @@ function AppInner() {
     <>
       <div className="bg-bg-dark mobile-layout flex h-screen overflow-hidden">
         <LeftSidebar
-          onSelectWorkspace={handleWorkspaceSwitch}
+          onAddProject={handleAddProjectCallback}
+          onRemoveProject={handleRemoveProjectCallback}
           lastReadTimestamps={lastReadTimestamps}
           onToggleUnread={onToggleUnread}
           collapsed={sidebarCollapsed}
           onToggleCollapsed={handleToggleSidebar}
+          onGetSecrets={handleGetSecrets}
+          onUpdateSecrets={handleUpdateSecrets}
+          sortedWorkspacesByProject={sortedWorkspacesByProject}
+          workspaceRecency={workspaceRecency}
         />
         <div className="mobile-main-content flex min-w-0 flex-1 flex-col overflow-hidden">
           <div className="mobile-layout flex flex-1 overflow-hidden">
@@ -511,7 +591,7 @@ function AppInner() {
                           setWorkspaceMetadata((prev) => new Map(prev).set(metadata.id, metadata));
 
                           // Switch to new workspace
-                          handleWorkspaceSwitch({
+                          setSelectedWorkspace({
                             workspaceId: metadata.id,
                             projectPath: metadata.projectPath,
                             projectName: metadata.projectName,
@@ -522,13 +602,13 @@ function AppInner() {
                           telemetry.workspaceCreated(metadata.id);
 
                           // Clear pending state
-                          clearPendingWorkspaceCreation();
+                          setPendingNewWorkspaceProject(null);
                         }}
                         onCancel={
                           pendingNewWorkspaceProject
                             ? () => {
                                 // User cancelled workspace creation - clear pending state
-                                clearPendingWorkspaceCreation();
+                                setPendingNewWorkspaceProject(null);
                               }
                             : undefined
                         }
@@ -560,8 +640,8 @@ function AppInner() {
           })}
         />
         <ProjectCreateModal
-          isOpen={isProjectCreateModalOpen}
-          onClose={closeProjectCreateModal}
+          isOpen={projectCreateModalOpen}
+          onClose={() => setProjectCreateModalOpen(false)}
           onSuccess={addProject}
         />
       </div>

src/components/LeftSidebar.tsx

@@ -1,20 +1,30 @@
 import React from "react";
 import { cn } from "@/lib/utils";
+import type { FrontendWorkspaceMetadata } from "@/types/workspace";
+import type { Secret } from "@/types/secrets";
 import ProjectSidebar from "./ProjectSidebar";
 import { TitleBar } from "./TitleBar";
-import type { WorkspaceSelection } from "./ProjectSidebar";
+import { useApp } from "@/contexts/AppContext";
 
 interface LeftSidebarProps {
-  onSelectWorkspace: (selection: WorkspaceSelection) => void;
+  onAddProject: () => void;
+  onRemoveProject: (path: string) => void;
   lastReadTimestamps: Record<string, number>;
   onToggleUnread: (workspaceId: string) => void;
   collapsed: boolean;
   onToggleCollapsed: () => void;
+  onGetSecrets: (projectPath: string) => Promise<Secret[]>;
+  onUpdateSecrets: (projectPath: string, secrets: Secret[]) => Promise<void>;
+  sortedWorkspacesByProject: Map<string, FrontendWorkspaceMetadata[]>;
+  workspaceRecency: Record<string, number>;
 }
 
 export function LeftSidebar(props: LeftSidebarProps) {
   const { collapsed, onToggleCollapsed, ...projectSidebarProps } = props;
 
+  // Get app-level state from context
+  const { projects } = useApp();
+
   return (
     <>
       {/* Hamburger menu button - only visible on mobile */}
@@ -58,6 +68,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
         {!collapsed && <TitleBar />}
         <ProjectSidebar
           {...projectSidebarProps}
+          projects={projects}
           collapsed={collapsed}
           onToggleCollapsed={onToggleCollapsed}
         />