@hienlh/ppm 0.19.2 → 0.19.4

package/src/web/components/settings/appearance-settings-section.tsx

@@ -0,0 +1,125 @@
+/**
+ * Appearance settings: the theme and the chrome choices that ride on top of it.
+ *
+ * Theme style and mode are separate axes — the grid picks the palette, the mode row overrides
+ * light/dark within it, and System follows the OS.
+ */
+
+import { WrapText } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
+import { useSettingsStore, type EditorTabStyle, type ExplorerSkinPref } from "@/stores/settings-store";
+import { cn } from "@/lib/utils";
+import { THEME_MODE_OPTIONS } from "@/theme/theme-mode-options";
+import { ThemeGrid } from "./theme-grid";
+import { ThemeManagerSection } from "./theme-manager-section";
+
+const TAB_STYLE_OPTIONS: { value: EditorTabStyle; label: string }[] = [
+  { value: "default", label: "Default" },
+  { value: "boxed", label: "Boxed" },
+  { value: "pill", label: "Pill" },
+];
+
+const EXPLORER_SKIN_OPTIONS: { value: ExplorerSkinPref; label: string }[] = [
+  { value: "auto", label: "Auto" },
+  { value: "windows", label: "Windows" },
+  { value: "macos", label: "macOS" },
+];
+
+/** Segmented row of mutually exclusive choices — same shape for tab style and explorer skin. */
+function OptionRow<T extends string>({
+  options, value, onChange,
+}: {
+  options: { value: T; label: string }[];
+  value: T;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="flex gap-2">
+      {options.map((opt) => (
+        <Button
+          key={opt.value}
+          variant={value === opt.value ? "default" : "outline"}
+          onClick={() => onChange(opt.value)}
+          className={cn("flex-1 cursor-pointer", value === opt.value && "ring-2 ring-primary")}
+        >
+          {opt.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export function AppearanceSettingsSection() {
+  const {
+    theme, setTheme, tabWrap, toggleTabWrap, editorTabStyle, setEditorTabStyle, explorerSkin, setExplorerSkin,
+  } = useSettingsStore(
+    useShallow((s) => ({
+      theme: s.themeMode,
+      setTheme: s.setThemeMode,
+      tabWrap: s.tabWrap,
+      toggleTabWrap: s.toggleTabWrap,
+      editorTabStyle: s.editorTabStyle,
+      setEditorTabStyle: s.setEditorTabStyle,
+      explorerSkin: s.explorerSkin,
+      setExplorerSkin: s.setExplorerSkin,
+    })),
+  );
+
+  return (
+    <div className="space-y-6">
+      <section className="space-y-3">
+        <h3 className="text-sm font-medium">Theme</h3>
+        <ThemeGrid />
+        <div className="flex gap-2">
+          {THEME_MODE_OPTIONS.map((opt) => {
+            const Icon = opt.icon;
+            return (
+              <Button
+                key={opt.value}
+                variant={theme === opt.value ? "default" : "outline"}
+                onClick={() => setTheme(opt.value)}
+                className={cn("flex-1 gap-2 cursor-pointer", theme === opt.value && "ring-2 ring-primary")}
+              >
+                <Icon className="size-4" />
+                {opt.label}
+              </Button>
+            );
+          })}
+        </div>
+      </section>
+
+      <Separator />
+
+      <ThemeManagerSection />
+
+      <Separator />
+
+      <section className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3 min-w-0">
+          <WrapText className="size-4 text-muted-foreground shrink-0" />
+          <div className="min-w-0">
+            <p className="text-sm font-medium">Wrap Tabs</p>
+            <p className="text-xs text-muted-foreground">Stack tabs in rows instead of scrolling</p>
+          </div>
+        </div>
+        <Switch checked={tabWrap} onCheckedChange={toggleTabWrap} />
+      </section>
+
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Tab Style</h3>
+        <OptionRow options={TAB_STYLE_OPTIONS} value={editorTabStyle} onChange={setEditorTabStyle} />
+      </section>
+
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Explorer Skin</h3>
+        <p className="text-xs text-muted-foreground">
+          Chrome the OS File Explorer window wears. Auto follows the host platform.
+        </p>
+        <OptionRow options={EXPLORER_SKIN_OPTIONS} value={explorerSkin} onChange={setExplorerSkin} />
+      </section>
+    </div>
+  );
+}

package/src/web/components/settings/general-settings-section.tsx

@@ -0,0 +1,87 @@
+/**
+ * General settings: this device's name, the account password, and the build identity.
+ *
+ * Grouped together because all three answer "which install am I looking at" rather than
+ * changing how PPM behaves.
+ */
+
+import { useCallback, useRef, useState } from "react";
+import { Check } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { useSettingsStore } from "@/stores/settings-store";
+import { ChangePasswordSection } from "./change-password-section";
+
+export function GeneralSettingsSection() {
+  const { deviceName, setDeviceName, version } = useSettingsStore(
+    useShallow((s) => ({ deviceName: s.deviceName, setDeviceName: s.setDeviceName, version: s.version })),
+  );
+  const [nameInput, setNameInput] = useState(deviceName ?? "");
+  const [nameSaving, setNameSaving] = useState(false);
+  const [nameSaved, setNameSaved] = useState(false);
+  const savedTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const nameChanged = nameInput.trim() !== (deviceName ?? "");
+
+  const handleSaveName = useCallback(async () => {
+    if (!nameChanged) return;
+    setNameSaving(true);
+    try {
+      await setDeviceName(nameInput);
+      setNameSaved(true);
+      clearTimeout(savedTimer.current);
+      savedTimer.current = setTimeout(() => setNameSaved(false), 2000);
+    } finally {
+      setNameSaving(false);
+    }
+  }, [nameInput, nameChanged, setDeviceName]);
+
+  return (
+    <div className="space-y-6">
+      <section className="space-y-2">
+        <Label htmlFor="device-name">Device Name</Label>
+        <div className="flex gap-2">
+          <Input
+            id="device-name"
+            value={nameInput}
+            onChange={(e) => setNameInput(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") handleSaveName(); }}
+            placeholder="My Device"
+            className="flex-1"
+            maxLength={100}
+          />
+          <Button
+            variant={nameSaved ? "default" : "outline"}
+            className="cursor-pointer shrink-0"
+            disabled={!nameChanged || nameSaving}
+            onClick={handleSaveName}
+          >
+            {nameSaving ? "..." : nameSaved ? <Check className="size-4" /> : "Save"}
+          </Button>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Shown in page title and synced to PPM Cloud.
+        </p>
+      </section>
+
+      <Separator />
+
+      <ChangePasswordSection />
+
+      <Separator />
+
+      <section className="space-y-1">
+        <h3 className="text-sm font-medium">About</h3>
+        <p className="text-sm text-muted-foreground">PPM — Personal Project Manager</p>
+        <p className="text-xs text-muted-foreground">
+          A mobile-first web IDE for managing your projects.
+        </p>
+        {version && (
+          <p className="text-xs text-muted-foreground tabular-nums">Version {version}</p>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/web/components/settings/jira-watcher-section.tsx

@@ -0,0 +1,34 @@
+/**
+ * The Jira Watcher master switch.
+ *
+ * Only the switch lives here: turning it on adds a Jira tab to the sidebar rail, and that
+ * panel owns project config, watchers, and results. Duplicating those controls here would
+ * give the same settings two homes.
+ */
+
+import { useShallow } from "zustand/react/shallow";
+import { Switch } from "@/components/ui/switch";
+import { useSettingsStore } from "@/stores/settings-store";
+
+export function JiraWatcherSection() {
+  const { jiraEnabled, setJiraEnabled } = useSettingsStore(
+    useShallow((s) => ({ jiraEnabled: s.jiraEnabled, setJiraEnabled: s.setJiraEnabled })),
+  );
+
+  return (
+    <div className="space-y-4">
+      <section className="flex items-center justify-between gap-4">
+        <div className="min-w-0">
+          <p className="text-sm font-medium">Jira Watcher</p>
+          <p className="text-xs text-muted-foreground">Auto-debug Jira tickets</p>
+        </div>
+        <Switch checked={jiraEnabled} onCheckedChange={setJiraEnabled} />
+      </section>
+      <p className="text-xs text-muted-foreground">
+        {jiraEnabled
+          ? "Configure projects, watchers, and results in the Jira tab on the sidebar."
+          : "Enable to add a Jira tab to the sidebar, where projects and watchers are configured."}
+      </p>
+    </div>
+  );
+}

package/src/web/components/settings/notifications-settings-section.tsx

@@ -0,0 +1,37 @@
+/**
+ * Notification settings.
+ *
+ * Browser push is not wired up yet, so this pane's job is to say so plainly and point at
+ * PPMBot, which is where alerts actually get delivered today.
+ */
+
+import { Bell } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+
+export function NotificationsSettingsSection() {
+  return (
+    <div className="space-y-6">
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Push Notifications</h3>
+        <div className="flex items-center gap-2">
+          <Bell className="size-4 text-muted-foreground" />
+          <span className="text-sm text-muted-foreground">Not available yet</span>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Browser push does not deliver right now. Use Telegram below to get alerted when a
+          session finishes or needs approval.
+        </p>
+      </section>
+
+      <Separator />
+
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Telegram</h3>
+        <p className="text-xs text-muted-foreground">
+          Telegram notifications are sent to all approved devices in PPMBot settings. Configure
+          your bot token and pair devices there.
+        </p>
+      </section>
+    </div>
+  );
+}

package/src/web/components/settings/open-settings.ts

@@ -0,0 +1,42 @@
+/**
+ * Opening Settings on whichever presentation the device has.
+ *
+ * `WindowLayer` renders nothing below the `md` breakpoint, so `open("settings")` would be a
+ * silent no-op on a phone. Desktop gets the floating window; mobile gets the `settings` tab
+ * route — both host the same `SettingsBody`. On desktop a second call focuses the window that
+ * is already open rather than stacking a duplicate: there is only one set of settings, so a
+ * repeat open is never a distinct instance.
+ *
+ * A plain function rather than a hook (the shape `openExplorer` already uses) because the
+ * global keybinding handler is not a component and must reach the same routing. The viewport
+ * is read at call time, which is what an action wants anyway — a click acts on the width the
+ * user currently has, not on a value captured at render.
+ *
+ * Callers may name a category to land on, which is how a cross-feature link ("manage
+ * accounts") reaches a specific pane instead of the index.
+ */
+
+import { isMobileDevice } from "@/hooks/use-is-mobile";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { useTabStore } from "@/stores/tab-store";
+import type { SettingsCategoryId } from "./settings-categories";
+import { resolveOpenSettingsAction } from "./resolve-open-settings-action";
+
+export function openSettings(category?: SettingsCategoryId): void {
+  const windowStore = useWindowStore.getState();
+  const existing = Object.values(windowStore.windows).find((w) => w.kind === "settings");
+  const action = resolveOpenSettingsAction(isMobileDevice(), existing?.id ?? null, category);
+
+  if (action.kind === "tab") {
+    useTabStore.getState().openTab(action.tab);
+    return;
+  }
+  if (action.kind === "focus") {
+    // Payload first: the body reads its category from the payload, so moving the pane before
+    // raising the window avoids a frame showing the previous one.
+    if (action.category) windowStore.setPayload(action.id, { category: action.category });
+    windowStore.focus(action.id);
+    return;
+  }
+  windowStore.open("settings", action.category ? { category: action.category } : undefined);
+}

package/src/web/components/settings/resolve-open-settings-action.ts

@@ -0,0 +1,45 @@
+/** Pure viewport-routing decision for the Settings open-hook — split out from
+ *  `use-open-settings.ts` so it has zero runtime imports (only type-only ones, fully
+ *  erased) and is unit-testable without mounting zustand stores. */
+import type { Tab } from "@/stores/tab-store";
+import type { SettingsCategoryId } from "./settings-categories";
+
+export type OpenSettingsAction =
+  | { kind: "tab"; tab: Omit<Tab, "id"> }
+  | { kind: "window"; category?: SettingsCategoryId }
+  | { kind: "focus"; id: string; category?: SettingsCategoryId };
+
+/**
+ * There is exactly one set of settings, so unlike `"explorer"`/`"team-member"` (legitimately
+ * multi-instance — different payload, different folder/teammate), a second `"settings"`
+ * window is never a distinct instance, only a duplicate. When one is already open, focus it
+ * instead of spawning another.
+ *
+ * `category` rides through every branch, not just the opening ones: focusing an existing
+ * window still has to move it to the requested pane, or a "manage accounts" link would raise
+ * a window sitting on some unrelated pane and look like it did nothing. On the tab branch it
+ * travels as tab metadata, which tabs already carry and persist — no new field needed.
+ *
+ * Mobile never gets a window: `WindowLayer` renders nothing below the `md` breakpoint, so
+ * opening one there is a silent no-op.
+ */
+export function resolveOpenSettingsAction(
+  isMobile: boolean,
+  existingWindowId: string | null,
+  category?: SettingsCategoryId,
+): OpenSettingsAction {
+  if (isMobile) {
+    return {
+      kind: "tab",
+      tab: {
+        type: "settings",
+        title: "Settings",
+        projectId: null,
+        closable: true,
+        ...(category && { metadata: { category } }),
+      },
+    };
+  }
+  if (existingWindowId) return { kind: "focus", id: existingWindowId, ...(category && { category }) };
+  return { kind: "window", ...(category && { category }) };
+}

package/src/web/components/settings/settings-body.tsx

@@ -0,0 +1,110 @@
+/**
+ * The Settings shell, shared by every host: the floating window, the mobile tab, and (until it
+ * moves out) the sidebar panel.
+ *
+ * Layout is decided by the shell's OWN width via `@container`, not by the viewport. The same
+ * component therefore lands correctly in a 900px window, a 240px sidebar, and a phone tab
+ * without any host passing a hint down — the way the process table already does it. Reading
+ * `useIsMobile()` here would be wrong twice over: a narrow sidebar on a desktop is not mobile,
+ * and a detached window on a tablet is not narrow.
+ *
+ * The content pane is mounted exactly once and never remounts while navigating. The narrow
+ * layout's category list is an overlay above it rather than a sibling branch, so picking a
+ * category cannot tear down and refetch the pane that was already there.
+ */
+
+import { useState } from "react";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  DEFAULT_SETTINGS_CATEGORY, settingsCategory,
+  type SettingsCategoryId,
+} from "./settings-categories";
+import { SettingsCategoryRail } from "./settings-category-rail";
+import { SettingsCategoryList } from "./settings-category-list";
+import { SettingsSectionContent } from "./settings-section-content";
+
+export interface SettingsBodyProps {
+  /**
+   * Category to open on. Present when a host remembers where the user was (a window payload)
+   * or deep-links into a pane; its presence also skips the narrow layout's list, so a
+   * deep link lands on the pane instead of the index.
+   */
+  initialCategory?: SettingsCategoryId;
+  /** Fires on every category change so a host can persist the position. */
+  onCategoryChange?: (category: SettingsCategoryId) => void;
+}
+
+export function SettingsBody({ initialCategory, onCategoryChange }: SettingsBodyProps) {
+  const [active, setActive] = useState<SettingsCategoryId>(initialCategory ?? DEFAULT_SETTINGS_CATEGORY);
+  // Narrow layout only: is the index covering the pane? A deep link opens straight on the pane.
+  const [showList, setShowList] = useState(initialCategory === undefined);
+
+  const category = settingsCategory(active);
+  const Icon = category.icon;
+
+  function select(id: SettingsCategoryId) {
+    setActive(id);
+    // Also cleared when picking from the rail: if the container later shrinks, a stale list
+    // overlay would otherwise cover the pane the user just chose.
+    setShowList(false);
+    onCategoryChange?.(id);
+  }
+
+  return (
+    <div className="@container h-full w-full" data-testid="settings-window" data-category={active}>
+      <div className="h-full w-full flex">
+        {/* Split layout only — the narrow layout navigates through the overlay instead. */}
+        <aside
+          className="hidden @[640px]:flex @[640px]:flex-col w-[210px] shrink-0 border-r border-border min-h-0"
+          data-testid="settings-rail"
+        >
+          <SettingsCategoryRail active={active} onSelect={select} />
+        </aside>
+
+        <div className="relative flex-1 min-w-0">
+          <div className="h-full flex flex-col min-h-0">
+            <div className="shrink-0 flex items-center gap-2 px-2 py-2.5 @[640px]:px-4">
+              <Button
+                variant="ghost"
+                size="icon"
+                aria-label="Back to settings list"
+                className="size-9 shrink-0 cursor-pointer @[640px]:hidden"
+                onClick={() => setShowList(true)}
+              >
+                <ArrowLeft className="size-4" />
+              </Button>
+              <Icon className="size-4 text-muted-foreground shrink-0" />
+              <h2 className="text-sm font-semibold truncate" data-testid="settings-pane-title">
+                {category.label}
+              </h2>
+            </div>
+            <Separator />
+            <ScrollArea className="flex-1 min-h-0">
+              <div className="p-4 pb-8">
+                <SettingsSectionContent category={active} />
+              </div>
+            </ScrollArea>
+          </div>
+
+          {showList && (
+            <div
+              className="absolute inset-0 z-10 bg-background flex flex-col min-h-0 @[640px]:hidden"
+              data-testid="settings-index"
+            >
+              <div className="shrink-0 px-4 py-3">
+                <h2 className="text-sm font-semibold">Settings</h2>
+              </div>
+              <Separator />
+              <div className="flex-1 min-h-0">
+                <SettingsCategoryList onSelect={select} />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/components/settings/settings-categories.ts

@@ -0,0 +1,102 @@
+/**
+ * The settings tree: which categories exist, and how the rail groups them.
+ *
+ * Data only, no component imports — the window's payload validator and the routing resolver
+ * both need to know the legal category ids without pulling every settings section into their
+ * bundle. `settings-section-content.tsx` owns the id → component mapping.
+ */
+
+import {
+  Settings2, Palette, Bot, KeyRound, BotMessageSquare, BellRing, Bug, Puzzle, Globe,
+  CalendarClock, Keyboard, FolderSearch, DatabaseZap,
+} from "lucide-react";
+
+/**
+ * There is one `accounts` entry, not one per provider: the pane itself carries a sub-tab per
+ * configured provider. Claude and Codex share no endpoints or login flow, but "which
+ * accounts does PPM have" is a single question, and a rail listing every provider separately
+ * would grow a row for each one added.
+ */
+export type SettingsCategoryId =
+  | "general"
+  | "appearance"
+  | "ai-provider"
+  | "accounts"
+  | "ppmbot"
+  | "notifications"
+  | "jira"
+  | "extensions"
+  | "proxy"
+  | "schedules"
+  | "shortcuts"
+  | "files"
+  | "query-audit";
+
+/**
+ * `core` carries no heading: General and Appearance sit at the top of the rail as plain rows,
+ * the way a desktop settings app opens on its most-used pane. A heading above a single row
+ * would just repeat the row's own label.
+ */
+export type SettingsGroupId = "core" | "ai" | "integrations" | "advanced";
+
+export interface SettingsGroupDef {
+  id: SettingsGroupId;
+  /** Null renders the group's rows without a heading. */
+  label: string | null;
+}
+
+export interface SettingsCategoryDef {
+  id: SettingsCategoryId;
+  group: SettingsGroupId;
+  label: string;
+  /** One line under the label — the rail shows it, the stacked list needs it to be scannable. */
+  subtitle: string;
+  icon: React.ElementType;
+}
+
+export const SETTINGS_GROUPS: SettingsGroupDef[] = [
+  { id: "core", label: null },
+  { id: "ai", label: "AI & Accounts" },
+  { id: "integrations", label: "Integrations" },
+  { id: "advanced", label: "Advanced" },
+];
+
+export const SETTINGS_CATEGORIES: SettingsCategoryDef[] = [
+  { id: "general", group: "core", label: "General", subtitle: "Device name, password, version", icon: Settings2 },
+  { id: "appearance", group: "core", label: "Appearance", subtitle: "Theme, tabs, explorer skin", icon: Palette },
+
+  { id: "ai-provider", group: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
+  { id: "accounts", group: "ai", label: "Accounts", subtitle: "Claude and Codex sign-ins, rotation", icon: KeyRound },
+
+  { id: "ppmbot", group: "integrations", label: "PPMBot", subtitle: "Telegram AI bot", icon: BotMessageSquare },
+  { id: "notifications", group: "integrations", label: "Notifications", subtitle: "Push & Telegram alerts", icon: BellRing },
+  { id: "jira", group: "integrations", label: "Jira Watcher", subtitle: "Auto-debug Jira tickets", icon: Bug },
+  { id: "extensions", group: "integrations", label: "Extensions", subtitle: "Install and manage extensions", icon: Puzzle },
+  { id: "proxy", group: "integrations", label: "API Proxy", subtitle: "Expose accounts as Anthropic API", icon: Globe },
+
+  { id: "schedules", group: "advanced", label: "Scheduled Agents", subtitle: "Run Claude on a cron schedule", icon: CalendarClock },
+  { id: "shortcuts", group: "advanced", label: "Keyboard Shortcuts", subtitle: "Customize key bindings", icon: Keyboard },
+  { id: "files", group: "advanced", label: "File Filters", subtitle: "Exclude patterns, ignore files", icon: FolderSearch },
+  { id: "query-audit", group: "advanced", label: "Query Audit Log", subtitle: "SQL history retention and size", icon: DatabaseZap },
+];
+
+/** The pane a window with no remembered category opens on. */
+export const DEFAULT_SETTINGS_CATEGORY: SettingsCategoryId = "general";
+
+/**
+ * Narrows an unknown value (a persisted window payload, a URL fragment) to a real category.
+ * Anything unrecognised falls back rather than rendering an empty pane.
+ */
+export function isSettingsCategoryId(value: unknown): value is SettingsCategoryId {
+  return typeof value === "string" && SETTINGS_CATEGORIES.some((c) => c.id === value);
+}
+
+export function settingsCategory(id: SettingsCategoryId): SettingsCategoryDef {
+  // Non-null: the id type is closed over SETTINGS_CATEGORIES, so every member has an entry.
+  return SETTINGS_CATEGORIES.find((c) => c.id === id)!;
+}
+
+/** Categories of one group, in declaration order. */
+export function settingsCategoriesInGroup(group: SettingsGroupId): SettingsCategoryDef[] {
+  return SETTINGS_CATEGORIES.filter((c) => c.group === group);
+}

package/src/web/components/settings/settings-category-list.tsx

@@ -0,0 +1,56 @@
+/**
+ * Narrow-container layout: one column, list first and pane second.
+ *
+ * A rail plus a content pane cannot both be usable below ~640px, so instead of shrinking both
+ * this drills down — the list fills the container, picking a row replaces it, and Back returns.
+ * Group labels stay as headings so the list is still scannable at a glance.
+ */
+
+import { ChevronRight } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  SETTINGS_GROUPS, settingsCategoriesInGroup,
+  type SettingsCategoryId,
+} from "./settings-categories";
+
+export function SettingsCategoryList({ onSelect }: { onSelect: (id: SettingsCategoryId) => void }) {
+  return (
+    <ScrollArea className="h-full">
+      <nav className="p-3 space-y-5" aria-label="Settings categories">
+        {SETTINGS_GROUPS.map((group) => {
+          const categories = settingsCategoriesInGroup(group.id);
+          if (categories.length === 0) return null;
+          return (
+            <div key={group.id} className="space-y-1">
+              {group.label && (
+                <h3 className="px-1 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                  {group.label}
+                </h3>
+              )}
+              {categories.map((cat) => {
+                const Icon = cat.icon;
+                return (
+                  <button
+                    key={cat.id}
+                    onClick={() => onSelect(cat.id)}
+                    data-testid={`settings-index-${cat.id}`}
+                    className="w-full flex items-center gap-3 px-2.5 py-3 rounded-lg text-left cursor-pointer group hover:bg-accent/50 active:bg-accent transition-colors"
+                  >
+                    <div className="size-10 rounded-md bg-muted flex items-center justify-center shrink-0 group-hover:bg-accent">
+                      <Icon className="size-4 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">{cat.label}</p>
+                      <p className="text-xs text-muted-foreground truncate">{cat.subtitle}</p>
+                    </div>
+                    <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+                  </button>
+                );
+              })}
+            </div>
+          );
+        })}
+      </nav>
+    </ScrollArea>
+  );
+}