Settings: db-viewer redesign, theme/accent wiring, macOS overlay titlebar (#6)

* feat: settings back button returns to origin view (push/pop nav)

* feat: redesign settings screen with db-viewer border styling

* fix: settings sidebar — icon+text tabs, back at top, top border (PR feedback)

* fix: tighten settings sidebar — back and tabs in one group

* fix: settings header shows active tab name instead of duplicated title

* fix: settings — accent back button, header shows active tab; fix App test

* fix: tags settings — no create label, no card chrome (bg/border/padding)

* feat: drag-and-drop tag reordering in settings tags tab

* fix: general settings — remove section card chrome (bg/border/padding)

* fix: merge Appearance and Interface into one settings section

* fix: remove row separators between settings items within sections

* fix: settings rows use gap spacing instead of per-row padding

* feat: strip section cards from all settings tabs; delete SettingsSection

* feat: apply theme and font size settings (appearance wiring)

* feat: honor default folder setting on startup

* feat: confirm_before_delete setting now skips delete confirmations

* feat: default_ports setting prefills new connection forms

* fix: light theme — text colors, native window chrome, ThemePicker preview

* fix: sync window background color with theme so title bar follows light mode

* fix: window-sync test uses microtask flush instead of vi.waitFor

* fix: app root carries canvas bg so home-screen parent matches theme

* fix: grant window set-theme/set-background-color permissions so title bar follows theme

* fix: overlay title bar — webview paints under traffic lights, flat canvas color in both themes

* fix: compact 28px overlay titlebar with visible bottom border

* fix: in-flow titlebar strip (draggable via allowed permission); screens fill remaining height, no bottom clipping

* fix: top border only on settings + db viewer pages, not the titlebar strip

* fix: db viewer sidebar h-screen -> h-full (28px overflow clipped bottom icons)

* fix: system theme resets window to OS before reading matchMedia (was polluted by forced window theme)

* fix: theme switcher labels moved below previews for readability

* feat: configurable accent color setting (circle palette in Appearance)

* docs: update AGENTS.md + README for settings redesign, wired settings, accent color

src/components/settings/GeneralSettingsTab.tsx

@@ -2,8 +2,8 @@ import { useSettingsStore } from "../../stores/settingsStore";
 import { useConnectionStore } from "../../stores/connectionStore";
 import { Select } from "../ui/Select";
 import { ThemePicker } from "../ui/ThemePicker";
+import { AccentPicker } from "../ui/AccentPicker";
 import { SettingsRow } from "../ui/SettingsRow";
-import { SettingsSection } from "../ui/SettingsSection";
 import * as cmd from "../../lib/commands";
 import type { FontSize } from "../../lib/types";
 
@@ -50,80 +50,98 @@ export function GeneralSettingsTab() {
   };
 
   return (
-    <>
-      <SettingsSection title="Appearance">
-        <SettingsRow title="Theme" description="Choose your preferred appearance.">
-          <ThemePicker
-            value={settings.theme}
-            onChange={(theme) => updateSetting("theme", theme)}
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Interface">
-        <SettingsRow title="Font size" description="Adjust the application font size.">
-          <Select
-            value={settings.font_size}
-            onChange={(value) => updateSetting("font_size", value)}
-            options={FONT_SIZE_OPTIONS}
-            label="Font size"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Workspace">
-        <SettingsRow
-          title="Default folder"
-          description="Select the folder to show on startup."
-        >
-          <Select
-            value={settings.default_folder_id ?? ""}
-            onChange={(value) => updateSetting("default_folder_id", value)}
-            options={folderOptions}
-            label="Default folder"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Table defaults">
-        <SettingsRow
-          title="Auto-refresh rate"
-          description="How often tables auto-refresh by default."
-        >
-          <Select
-            value={String(settings.table_refresh_rate ?? 0)}
-            onChange={(value) => updateSetting("table_refresh_rate", value)}
-            options={REFRESH_RATE_OPTIONS}
-            label="Auto-refresh rate"
-          />
-        </SettingsRow>
-        <SettingsRow
-          title="Rows per page"
-          description="Default number of rows shown per page."
-        >
-          <Select
-            value={String(settings.table_page_size ?? 50)}
-            onChange={(value) => updateSetting("table_page_size", value)}
-            options={PAGE_SIZE_OPTIONS}
-            label="Rows per page"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Demo">
-        <SettingsRow
-          title="Re-add demo database"
-          description="Re-create the demo SQLite connection if it was deleted."
-        >
-          <button
-            type="button"
-            onClick={handleReAddDemo}
-            className="rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-raised transition-colors"
+    <div className="space-y-6">
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Appearance</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow title="Theme" description="Choose your preferred appearance.">
+            <ThemePicker
+              value={settings.theme}
+              onChange={(theme) => updateSetting("theme", theme)}
+            />
+          </SettingsRow>
+          <SettingsRow title="Font size" description="Adjust the application font size.">
+            <Select
+              value={settings.font_size}
+              onChange={(value) => updateSetting("font_size", value)}
+              options={FONT_SIZE_OPTIONS}
+              label="Font size"
+            />
+          </SettingsRow>
+          <SettingsRow
+            title="Accent color"
+            description="Used for buttons, active states, and highlights."
           >
-            Re-add demo
-          </button>
-        </SettingsRow>
-      </SettingsSection>
-    </>
+            <AccentPicker
+              value={settings.accent_color}
+              onChange={(color) => updateSetting("accent_color", color)}
+            />
+          </SettingsRow>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Workspace</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow
+            title="Default folder"
+            description="Select the folder to show on startup."
+          >
+            <Select
+              value={settings.default_folder_id ?? ""}
+              onChange={(value) => updateSetting("default_folder_id", value)}
+              options={folderOptions}
+              label="Default folder"
+            />
+          </SettingsRow>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Table defaults</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow
+            title="Auto-refresh rate"
+            description="How often tables auto-refresh by default."
+          >
+            <Select
+              value={String(settings.table_refresh_rate ?? 0)}
+              onChange={(value) => updateSetting("table_refresh_rate", value)}
+              options={REFRESH_RATE_OPTIONS}
+              label="Auto-refresh rate"
+            />
+          </SettingsRow>
+          <SettingsRow
+            title="Rows per page"
+            description="Default number of rows shown per page."
+          >
+            <Select
+              value={String(settings.table_page_size ?? 50)}
+              onChange={(value) => updateSetting("table_page_size", value)}
+              options={PAGE_SIZE_OPTIONS}
+              label="Rows per page"
+            />
+          </SettingsRow>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Demo</h2>
+        <div className="flex flex-col gap-4">
+          <SettingsRow
+            title="Re-add demo database"
+            description="Re-create the demo SQLite connection if it was deleted."
+          >
+            <button
+              type="button"
+              onClick={handleReAddDemo}
+              className="rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-raised transition-colors"
+            >
+              Re-add demo
+            </button>
+          </SettingsRow>
+        </div>
+      </section>
+    </div>
   );
 }