Group Settings panel into accordion sections

Multiple-open accordion with per-section state persisted to
localStorage. Sections: General, Backends, Container, Git/SSH,
Tools, Updates. General is open by default; the rest are collapsed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/src/components/settings/SettingsPanel.tsx

@@ -9,6 +9,7 @@ import EnvVarsModal from "../projects/EnvVarsModal";
 import { detectHostTimezone } from "../../lib/tauri-commands";
 import type { EnvVar } from "../../lib/types";
 import Tooltip from "../ui/Tooltip";
+import AccordionSection from "../ui/AccordionSection";
 import WebTerminalSettings from "./WebTerminalSettings";
 import SttSettings from "./SttSettings";
 
@@ -61,67 +62,12 @@ export default function SettingsPanel() {
   };
 
   return (
-    <div className="p-4 space-y-6">
+    <div className="p-4 space-y-3">
       <h2 className="text-xs font-semibold uppercase text-[var(--text-secondary)]">
         Settings
       </h2>
-      <DockerSettings />
-      <AwsSettings />
-
-      {/* Default SSH Key Directory */}
-      <div>
-        <label className="block text-sm font-medium mb-1">Default SSH Key Directory<Tooltip text="Global default SSH key directory. Mounted into containers that don't have a per-project SSH path set." /></label>
-        <p className="text-xs text-[var(--text-secondary)] mb-1.5">
-          Mounted into all containers unless overridden by a per-project setting.
-        </p>
-        <input
-          type="text"
-          value={sshKeyPath}
-          onChange={(e) => setSshKeyPath(e.target.value)}
-          onBlur={async () => {
-            if (appSettings) {
-              await saveSettings({ ...appSettings, default_ssh_key_path: sshKeyPath || null });
-            }
-          }}
-          placeholder="~/.ssh"
-          className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
-        />
-      </div>
-
-      {/* Default Git Name */}
-      <div>
-        <label className="block text-sm font-medium mb-1">Default Git Name<Tooltip text="Sets git user.name inside containers. Per-project Git Name takes precedence." /></label>
-        <input
-          type="text"
-          value={gitName}
-          onChange={(e) => setGitName(e.target.value)}
-          onBlur={async () => {
-            if (appSettings) {
-              await saveSettings({ ...appSettings, default_git_user_name: gitName || null });
-            }
-          }}
-          placeholder="Your Name"
-          className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
-        />
-      </div>
-
-      {/* Default Git Email */}
-      <div>
-        <label className="block text-sm font-medium mb-1">Default Git Email<Tooltip text="Sets git user.email inside containers. Per-project Git Email takes precedence." /></label>
-        <input
-          type="text"
-          value={gitEmail}
-          onChange={(e) => setGitEmail(e.target.value)}
-          onBlur={async () => {
-            if (appSettings) {
-              await saveSettings({ ...appSettings, default_git_user_email: gitEmail || null });
-            }
-          }}
-          placeholder="you@example.com"
-          className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
-        />
-      </div>
 
+      <AccordionSection id="general" title="General">
         {/* Container Timezone */}
         <div>
           <label className="block text-sm font-medium mb-1">Container Timezone<Tooltip text="Sets the timezone inside containers. Affects scheduled task timing and log timestamps." /></label>
@@ -198,16 +144,78 @@ export default function SettingsPanel() {
             </button>
           </div>
         </div>
+      </AccordionSection>
 
-      {/* Web Terminal */}
+      <AccordionSection id="backends" title="Backends" defaultOpen={false}>
-      <WebTerminalSettings />
+        <AwsSettings />
+      </AccordionSection>
 
-      {/* Speech to Text */}
+      <AccordionSection id="container" title="Container" defaultOpen={false}>
-      <SttSettings />
+        <DockerSettings />
+      </AccordionSection>
 
-      {/* Updates section */}
+      <AccordionSection id="git-ssh" title="Git / SSH" defaultOpen={false}>
+        {/* Default SSH Key Directory */}
         <div>
-        <label className="block text-sm font-medium mb-2">Updates<Tooltip text="Check for new versions of the Triple-C app and container image." /></label>
+          <label className="block text-sm font-medium mb-1">Default SSH Key Directory<Tooltip text="Global default SSH key directory. Mounted into containers that don't have a per-project SSH path set." /></label>
+          <p className="text-xs text-[var(--text-secondary)] mb-1.5">
+            Mounted into all containers unless overridden by a per-project setting.
+          </p>
+          <input
+            type="text"
+            value={sshKeyPath}
+            onChange={(e) => setSshKeyPath(e.target.value)}
+            onBlur={async () => {
+              if (appSettings) {
+                await saveSettings({ ...appSettings, default_ssh_key_path: sshKeyPath || null });
+              }
+            }}
+            placeholder="~/.ssh"
+            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+          />
+        </div>
+
+        {/* Default Git Name */}
+        <div>
+          <label className="block text-sm font-medium mb-1">Default Git Name<Tooltip text="Sets git user.name inside containers. Per-project Git Name takes precedence." /></label>
+          <input
+            type="text"
+            value={gitName}
+            onChange={(e) => setGitName(e.target.value)}
+            onBlur={async () => {
+              if (appSettings) {
+                await saveSettings({ ...appSettings, default_git_user_name: gitName || null });
+              }
+            }}
+            placeholder="Your Name"
+            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+          />
+        </div>
+
+        {/* Default Git Email */}
+        <div>
+          <label className="block text-sm font-medium mb-1">Default Git Email<Tooltip text="Sets git user.email inside containers. Per-project Git Email takes precedence." /></label>
+          <input
+            type="text"
+            value={gitEmail}
+            onChange={(e) => setGitEmail(e.target.value)}
+            onBlur={async () => {
+              if (appSettings) {
+                await saveSettings({ ...appSettings, default_git_user_email: gitEmail || null });
+              }
+            }}
+            placeholder="you@example.com"
+            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+          />
+        </div>
+      </AccordionSection>
+
+      <AccordionSection id="tools" title="Tools" defaultOpen={false}>
+        <WebTerminalSettings />
+        <SttSettings />
+      </AccordionSection>
+
+      <AccordionSection id="updates" title="Updates" defaultOpen={false}>
         <div className="space-y-2">
           {appVersion && (
             <p className="text-xs text-[var(--text-secondary)]">
@@ -237,11 +245,11 @@ export default function SettingsPanel() {
           {imageUpdateInfo && (
             <div className="flex items-center gap-2 px-3 py-2 text-xs bg-[var(--bg-primary)] border border-[var(--warning,#f59e0b)] rounded">
               <span className="inline-block w-2 h-2 rounded-full bg-[var(--warning,#f59e0b)]" />
-              <span>A newer container image is available. Re-pull the image in Docker settings above to update.</span>
+              <span>A newer container image is available. Re-pull the image in Container settings above to update.</span>
             </div>
           )}
         </div>
-      </div>
+      </AccordionSection>
 
       {showInstructionsModal && (
         <ClaudeInstructionsModal

app/src/components/ui/AccordionSection.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState, type ReactNode } from "react";
+
+interface Props {
+  id: string;
+  title: string;
+  defaultOpen?: boolean;
+  storageKey?: string;
+  children: ReactNode;
+}
+
+function loadOpenState(storageKey: string, fallback: boolean): boolean {
+  try {
+    const stored = localStorage.getItem(storageKey);
+    if (stored === null) return fallback;
+    return stored === "1";
+  } catch {
+    return fallback;
+  }
+}
+
+function persistOpenState(storageKey: string, open: boolean) {
+  try {
+    localStorage.setItem(storageKey, open ? "1" : "0");
+  } catch {
+    // ignore
+  }
+}
+
+export default function AccordionSection({ id, title, defaultOpen = true, storageKey, children }: Props) {
+  const key = storageKey ?? `triple-c.accordion.${id}`;
+  const [open, setOpen] = useState<boolean>(() => loadOpenState(key, defaultOpen));
+
+  useEffect(() => {
+    persistOpenState(key, open);
+  }, [key, open]);
+
+  return (
+    <div className="border border-[var(--border-color)] rounded">
+      <button
+        type="button"
+        onClick={() => setOpen(o => !o)}
+        aria-expanded={open}
+        className="w-full flex items-center justify-between px-3 py-2 text-left text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-primary)] transition-colors"
+      >
+        <span>{title}</span>
+        <svg
+          className={`w-4 h-4 text-[var(--text-secondary)] transition-transform ${open ? "rotate-90" : ""}`}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+      {open && (
+        <div className="px-3 py-3 border-t border-[var(--border-color)] space-y-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}