🤖 feat: secrets management in Settings → Projects

src/browser/components/ProjectSidebar.tsx

@@ -43,14 +43,13 @@ import {
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import { SidebarCollapseButton } from "./ui/SidebarCollapseButton";
 import { ConfirmationModal } from "./ConfirmationModal";
-import SecretsModal from "./SecretsModal";
-import type { Secret } from "@/common/types/secrets";
+import { useSettings } from "@/browser/contexts/SettingsContext";
 
 import { WorkspaceListItem, type WorkspaceSelection } from "./WorkspaceListItem";
 import { WorkspaceStatusIndicator } from "./WorkspaceStatusIndicator";
 import { RenameProvider } from "@/browser/contexts/WorkspaceRenameContext";
 import { useProjectContext } from "@/browser/contexts/ProjectContext";
-import { ChevronRight, CircleHelp, KeyRound } from "lucide-react";
+import { ChevronRight, CircleHelp, Settings } from "lucide-react";
 import { MUX_HELP_CHAT_WORKSPACE_ID } from "@/common/constants/muxChat";
 import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { useRouter } from "@/browser/contexts/RouterContext";
@@ -359,14 +358,13 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     projects,
     openProjectCreateModal: onAddProject,
     removeProject: onRemoveProject,
-    getSecrets: onGetSecrets,
-    updateSecrets: onUpdateSecrets,
     createSection,
     updateSection,
     removeSection,
     reorderSections,
     assignWorkspaceToSection,
   } = useProjectContext();
+  const { openProjectSettings } = useSettings();
 
   // Theme for logo variant
   const { theme } = useTheme();
@@ -467,12 +465,6 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
   } | null>(null);
   const projectRemoveError = usePopoverError();
   const sectionRemoveError = usePopoverError();
-  const [secretsModalState, setSecretsModalState] = useState<{
-    isOpen: boolean;
-    projectPath: string;
-    projectName: string;
-    secrets: Secret[];
-  } | null>(null);
 
   const getProjectName = (path: string) => {
     if (!path || typeof path !== "string") {
@@ -608,26 +600,6 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     }
   };
 
-  const handleOpenSecrets = async (projectPath: string) => {
-    const secrets = await onGetSecrets(projectPath);
-    setSecretsModalState({
-      isOpen: true,
-      projectPath,
-      projectName: getProjectName(projectPath),
-      secrets,
-    });
-  };
-
-  const handleSaveSecrets = async (secrets: Secret[]) => {
-    if (secretsModalState) {
-      await onUpdateSecrets(secretsModalState.projectPath, secrets);
-    }
-  };
-
-  const handleCloseSecrets = () => {
-    setSecretsModalState(null);
-  };
-
   // UI preference: project order persists in localStorage
   const [projectOrder, setProjectOrder] = usePersistedState<string[]>("mux:projectOrder", []);
 
@@ -834,16 +806,16 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               <button
                                 onClick={(event) => {
                                   event.stopPropagation();
-                                  void handleOpenSecrets(projectPath);
+                                  openProjectSettings(projectPath);
                                 }}
-                                aria-label={`Manage secrets for ${projectName}`}
+                                aria-label={`Configure ${projectName}`}
                                 data-project-path={projectPath}
-                                className="text-muted-dark mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200 hover:bg-yellow-500/10 hover:text-yellow-500"
+                                className="text-muted-dark hover:text-foreground hover:bg-hover mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200"
                               >
-                                <KeyRound size={12} />
+                                <Settings size={12} />
                               </button>
                             </TooltipTrigger>
-                            <TooltipContent align="end">Manage secrets</TooltipContent>
+                            <TooltipContent align="end">Project settings</TooltipContent>
                           </Tooltip>
                           <Tooltip>
                             <TooltipTrigger asChild>
@@ -1304,16 +1276,6 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
             side="left"
             shortcut={formatKeybind(KEYBINDS.TOGGLE_SIDEBAR)}
           />
-          {secretsModalState && (
-            <SecretsModal
-              isOpen={secretsModalState.isOpen}
-              projectPath={secretsModalState.projectPath}
-              projectName={secretsModalState.projectName}
-              initialSecrets={secretsModalState.secrets}
-              onClose={handleCloseSecrets}
-              onSave={handleSaveSecrets}
-            />
-          )}
           <ConfirmationModal
             isOpen={archiveConfirmation !== null}
             title={