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/AdvancedSettingsTab.tsx

@@ -2,7 +2,6 @@ import { useSettingsStore } from "../../stores/settingsStore";
 import { Input } from "../ui/Input";
 import { Toggle } from "../ui/Toggle";
 import { SettingsRow } from "../ui/SettingsRow";
-import { SettingsSection } from "../ui/SettingsSection";
 import type { DbType } from "../../lib/types";
 
 const DB_TYPES: { id: DbType; label: string }[] = [
@@ -31,39 +30,45 @@ export function AdvancedSettingsTab() {
   };
 
   return (
-    <>
-      <SettingsSection title="Safety">
-        <SettingsRow
-          title="Confirm before delete"
-          description="Show a confirmation dialog before deleting connections or folders."
-        >
-          <Toggle
-            checked={settings.confirm_before_delete}
-            onChange={(checked) =>
-              updateSetting("confirm_before_delete", checked ? "true" : "false")
-            }
-            label="Confirm before delete"
-          />
-        </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title="Default ports">
-        {DB_TYPES.map((db) => (
+    <div className="space-y-6">
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Safety</h2>
+        <div className="flex flex-col gap-4">
           <SettingsRow
-            key={db.id}
-            title={db.label}
-            description={`Default port for new ${db.label} connections.`}
+            title="Confirm before delete"
+            description="Show a confirmation dialog before deleting connections or folders."
           >
-            <Input
-              type="number"
-              value={defaultPorts[db.id]?.toString() ?? ""}
-              onChange={(value) => updatePort(db.id, value)}
-              className="w-24"
-              aria-label={`Default port for ${db.label}`}
+            <Toggle
+              checked={settings.confirm_before_delete}
+              onChange={(checked) =>
+                updateSetting("confirm_before_delete", checked ? "true" : "false")
+              }
+              label="Confirm before delete"
             />
           </SettingsRow>
-        ))}
-      </SettingsSection>
-    </>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-sm font-medium text-text mb-3">Default ports</h2>
+        <div className="flex flex-col gap-4">
+          {DB_TYPES.map((db) => (
+            <SettingsRow
+              key={db.id}
+              title={db.label}
+              description={`Default port for new ${db.label} connections.`}
+            >
+              <Input
+                type="number"
+                value={defaultPorts[db.id]?.toString() ?? ""}
+                onChange={(value) => updatePort(db.id, value)}
+                className="w-24"
+                aria-label={`Default port for ${db.label}`}
+              />
+            </SettingsRow>
+          ))}
+        </div>
+      </section>
+    </div>
   );
 }