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/connections/NewConnectionScreen.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useConnectionStore } from "../../stores/connectionStore";
 import { useNotificationStore } from "../../stores/notificationStore";
+import { useSettingsStore } from "../../stores/settingsStore";
 import { ConnectionFormShell } from "./ConnectionFormShell";
 import { SimpleConnectionForm } from "./SimpleConnectionForm";
 import { DetailedConnectionForm } from "./DetailedConnectionForm";
@@ -26,6 +27,7 @@ interface NewConnectionScreenProps {
 
 function createEmptyForm(
     defaultFolderId: string | null = null,
+    defaultPorts?: Record<string, number | null>,
 ): ConnectionFormData {
     return {
         name: "",
@@ -35,7 +37,7 @@ function createEmptyForm(
         connection_string: "",
         db_type: "postgresql",
         host: "",
-        port: 5432,
+        port: defaultPorts?.postgresql ?? 5432,
         username: null,
         password: null,
         database: null,
@@ -43,6 +45,12 @@ function createEmptyForm(
     };
 }
 
+function getDefaultPort(dbType: string): number {
+    return (
+        useSettingsStore.getState().settings?.default_ports?.[dbType] ?? 5432
+    );
+}
+
 export function NewConnectionScreen({
     defaultFolderId = null,
     prefilledConnectionString = "",
@@ -53,7 +61,10 @@ export function NewConnectionScreen({
 }: NewConnectionScreenProps) {
     const [mode, setMode] = useState<NewConnectionMode>("simple");
     const [form, setForm] = useState<ConnectionFormData>(() =>
-        createEmptyForm(defaultFolderId),
+        createEmptyForm(
+            defaultFolderId,
+            useSettingsStore.getState().settings?.default_ports,
+        ),
     );
     const [testLoading, setTestLoading] = useState(false);
     const [saveLoading, setSaveLoading] = useState(false);
@@ -69,7 +80,7 @@ export function NewConnectionScreen({
                 connection_string: value,
                 db_type: parsed.db_type,
                 host: parsed.host,
-                port: parsed.port,
+                port: parsed.port ?? getDefaultPort(parsed.db_type),
                 username: parsed.username,
                 password: parsed.password,
                 database: parsed.database,