feat: Phase 5 — Connection Manager, new-connection + preferences modals

laksamanakeris · laksamanakeris · commit 475eced03e8c · 2026-06-13T16:13:09.000+08:00
Faithful Connection Manager: status-pill cards (online/read-only/offline)
with DB/ping/server stats from the registry, recent-activity list, and a
Preferences link. New-connection modal with Engine picker AND Protocol field
omitted (single-engine; transport undecided per CLAUDE.md). Preferences modal
with six panes; Theme control wired to the Preferences signal. Modal primitive
gains a `wide` variant; ModalHost + bodies moved to src/modals/.
diff --git a/nodedb-studio/src/app.rs b/nodedb-studio/src/app.rs
@@ -12,7 +12,7 @@ use std::rc::Rc;
 
 use dioxus::prelude::*;
 
-use crate::components::modal::ModalHost;
+use crate::modals::ModalHost;
 use crate::services::connection_service::{ConnectionService, MockConnectionService};
 use crate::state::connection::ActiveConnection;
 use crate::state::preferences::Preferences;
diff --git a/nodedb-studio/src/components/modal.rs b/nodedb-studio/src/components/modal.rs
@@ -1,25 +1,24 @@
-//! Generic modal primitive + the modal host.
-//!
-//! `Modal` is the reusable overlay shell (backdrop, header, close). `ModalHost`
-//! decides which modal is open from the shared `ModalKind` signal. The bodies
-//! here are Phase-3 placeholders; Phase 5 replaces them with the real
-//! `modals::new_connection` and `modals::preferences` content.
+//! Generic modal primitive: the reusable overlay shell (backdrop, panel,
+//! header, close). Callers pass the body and footer as children. The dispatch
+//! that decides *which* modal is open lives in `crate::modals`.
 
 use dioxus::prelude::*;
 
 use crate::state::ui::ModalKind;
 
 /// Reusable modal shell. Clicking the backdrop or the close button dismisses;
 /// clicks inside the panel do not (matches the mockup's `closeModal`).
+/// `wide` selects the `.modal.wide` variant used by Preferences.
 #[component]
-pub fn Modal(title: String, children: Element) -> Element {
+pub fn Modal(title: String, #[props(default = false)] wide: bool, children: Element) -> Element {
     let mut modal = use_context::<Signal<Option<ModalKind>>>();
+    let panel_class = if wide { "modal wide" } else { "modal" };
     rsx! {
         div {
             class: "modal-overlay open",
             onclick: move |_| modal.set(None),
             div {
-                class: "modal",
+                class: "{panel_class}",
                 onclick: move |e| e.stop_propagation(),
                 div { class: "modal-header",
                     h3 { "{title}" }
@@ -30,30 +29,3 @@ pub fn Modal(title: String, children: Element) -> Element {
         }
     }
 }
-
-/// Renders the currently-open modal, or nothing.
-#[component]
-pub fn ModalHost() -> Element {
-    let modal = use_context::<Signal<Option<ModalKind>>>();
-    let kind = *modal.read();
-
-    match kind {
-        None => rsx! {},
-        Some(ModalKind::NewConnection) => rsx! {
-            Modal { title: "New connection",
-                div { class: "modal-body",
-                    // Phase 5 ports the real form here. Per CLAUDE.md the form
-                    // must NOT include an Engine picker (single-engine client).
-                    p { "Connection form — ported in Phase 5." }
-                }
-            }
-        },
-        Some(ModalKind::Preferences) => rsx! {
-            Modal { title: "Preferences",
-                div { class: "modal-body",
-                    p { "Preferences panes (theme, fonts, keyboard, telemetry, about) — ported in Phase 5." }
-                }
-            }
-        },
-    }
-}
diff --git a/nodedb-studio/src/main.rs b/nodedb-studio/src/main.rs
@@ -5,6 +5,7 @@
 mod app;
 mod components;
 mod data;
+mod modals;
 mod models;
 mod routes;
 mod services;
diff --git a/nodedb-studio/src/modals/mod.rs b/nodedb-studio/src/modals/mod.rs
@@ -0,0 +1,27 @@
+//! Modal content + the host that decides which modal is open.
+
+pub mod new_connection;
+pub mod preferences;
+
+use dioxus::prelude::*;
+
+use crate::components::modal::Modal;
+use crate::modals::new_connection::NewConnectionForm;
+use crate::modals::preferences::PreferencesPanes;
+use crate::state::ui::ModalKind;
+
+/// Renders the currently-open modal (from the shared `ModalKind` signal), or
+/// nothing. Overlays everything; provided once near the app root.
+#[component]
+pub fn ModalHost() -> Element {
+    let modal = use_context::<Signal<Option<ModalKind>>>();
+    match *modal.read() {
+        None => rsx! {},
+        Some(ModalKind::NewConnection) => rsx! {
+            Modal { title: "New connection", NewConnectionForm {} }
+        },
+        Some(ModalKind::Preferences) => rsx! {
+            Modal { title: "Preferences", wide: true, PreferencesPanes {} }
+        },
+    }
+}
diff --git a/nodedb-studio/src/modals/new_connection.rs b/nodedb-studio/src/modals/new_connection.rs
@@ -0,0 +1,45 @@
+//! New-connection modal body.
+//!
+//! Per CLAUDE.md §1 this is a single-engine client: there is NO Engine picker.
+//! The Protocol field is also omitted — NodeDB's transport is undecided
+//! (CLAUDE.md §2), so the form doesn't assert one. Static in the skeleton.
+
+use dioxus::prelude::*;
+
+use crate::state::ui::ModalKind;
+
+#[component]
+pub fn NewConnectionForm() -> Element {
+    let mut modal = use_context::<Signal<Option<ModalKind>>>();
+    let mut close = move |_| modal.set(None);
+    rsx! {
+        div { class: "modal-body",
+            div { class: "form-field",
+                label { "Name" }
+                input { value: "local-nodedb-dev-2" }
+            }
+            div { class: "form-row",
+                div { class: "form-field", label { "Host" } input { value: "localhost" } }
+                div { class: "form-field", label { "Port" } input { value: "2480" } }
+            }
+            div { class: "form-field",
+                label { "Auth method" }
+                select { option { "Username + password" } option { "Token" } option { "mTLS" } }
+            }
+            div { class: "form-row",
+                div { class: "form-field", label { "Username" } input { value: "root" } }
+                div { class: "form-field", label { "Password" } input { r#type: "password", value: "••••••••" } }
+            }
+            div { style: "display: flex; gap: 8px; align-items: center; padding-top: 6px;",
+                span { class: "pill info", "i" }
+                span { style: "font-size: 11px; color: var(--text-secondary);", "Credentials are stored in your OS keychain." }
+            }
+        }
+        div { class: "modal-footer",
+            button { class: "btn ghost", onclick: move |e| close(e), "Cancel" }
+            button { class: "btn", "Test" }
+            button { class: "btn", "Save" }
+            button { class: "btn primary", onclick: move |e| close(e), "Save & connect" }
+        }
+    }
+}
diff --git a/nodedb-studio/src/modals/preferences.rs b/nodedb-studio/src/modals/preferences.rs
@@ -0,0 +1,204 @@
+//! Preferences modal body: a sidebar of categories + the active pane.
+//!
+//! App-level only (theme, editor, keyboard, security, telemetry, about) — never
+//! per-connection. The Theme control is wired to the `Preferences` signal; the
+//! remaining controls are visual placeholders, as in the mockup. Note the CSS
+//! port only defines OS-driven theming, so changing Theme updates state without
+//! a manual override repaint (faithful to the mockup, which is also static).
+
+use dioxus::prelude::*;
+
+use crate::state::preferences::{Preferences, Theme};
+use crate::state::ui::ModalKind;
+
+const CATS: [(&str, &str); 6] = [
+    ("appearance", "Appearance"),
+    ("editor", "Editor"),
+    ("keyboard", "Keyboard"),
+    ("security", "Security"),
+    ("telemetry", "Telemetry"),
+    ("about", "About"),
+];
+
+#[component]
+pub fn PreferencesPanes() -> Element {
+    let mut modal = use_context::<Signal<Option<ModalKind>>>();
+    let mut pane = use_signal(|| "appearance".to_string());
+    let current = pane.read().clone();
+
+    rsx! {
+        div { class: "prefs-layout",
+            div { class: "prefs-sidebar",
+                for (key, label) in CATS {
+                    {
+                        let is_active = current == key;
+                        let k = key.to_string();
+                        rsx! {
+                            div {
+                                class: if is_active { "prefs-cat active" } else { "prefs-cat" },
+                                onclick: move |_| pane.set(k.clone()),
+                                "{label}"
+                            }
+                        }
+                    }
+                }
+            }
+            div { class: "prefs-content",
+                match current.as_str() {
+                    "editor" => rsx! { EditorPane {} },
+                    "keyboard" => rsx! { KeyboardPane {} },
+                    "security" => rsx! { SecurityPane {} },
+                    "telemetry" => rsx! { TelemetryPane {} },
+                    "about" => rsx! { AboutPane {} },
+                    _ => rsx! { AppearancePane {} },
+                }
+            }
+        }
+        div { class: "modal-footer",
+            button { class: "btn primary", onclick: move |_| modal.set(None), "Done" }
+        }
+    }
+}
+
+#[component]
+fn AppearancePane() -> Element {
+    let mut prefs = use_context::<Signal<Preferences>>();
+    let theme = prefs.read().theme;
+    let cls = |t: Theme| if theme == t { "active" } else { "" };
+    rsx! {
+        div { class: "prefs-pane active",
+            h2 { "Appearance" }
+            p { "How the studio looks. Follows your OS theme by default." }
+            div { class: "form-field",
+                label { "Theme" }
+                div { class: "segmented", style: "display:flex;",
+                    button { class: cls(Theme::Light), onclick: move |_| prefs.write().theme = Theme::Light, "Light" }
+                    button { class: cls(Theme::Dark), onclick: move |_| prefs.write().theme = Theme::Dark, "Dark" }
+                    button { class: cls(Theme::System), onclick: move |_| prefs.write().theme = Theme::System, "Follow OS" }
+                }
+            }
+            div { class: "form-field",
+                label { "Density" }
+                div { class: "segmented", style: "display:flex;",
+                    button { "Compact" } button { class: "active", "Comfortable" } button { "Spacious" }
+                }
+            }
+            div { class: "form-row",
+                div { class: "form-field", label { "UI font size" } select { option { "12px" } option { "13px (default)" } option { "14px" } } }
+                div { class: "form-field", label { "Editor font" } select { option { "JetBrains Mono" } option { "SF Mono" } option { "Menlo" } } }
+            }
+            div { class: "form-field",
+                label { "Accent color" }
+                div { style: "display:flex; gap:8px;",
+                    div { style: "width:24px; height:24px; background:#1a1a18; border-radius:4px; outline: 2px solid var(--text-primary); outline-offset: 2px;" }
+                    div { style: "width:24px; height:24px; background:#185fa5; border-radius:4px;" }
+                    div { style: "width:24px; height:24px; background:#3b6d11; border-radius:4px;" }
+                    div { style: "width:24px; height:24px; background:#854f0b; border-radius:4px;" }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn EditorPane() -> Element {
+    rsx! {
+        div { class: "prefs-pane active",
+            h2 { "Editor" }
+            p { "Code editor behavior across SQL, Cypher, and the REPL." }
+            div { class: "form-row",
+                div { class: "form-field", label { "Tab size" } select { option { "2 spaces" } option { "4 spaces (default)" } option { "Tab" } } }
+                div { class: "form-field", label { "Word wrap" } select { option { "Off" } option { "On" } } }
+            }
+            div { class: "form-field", label { "Auto-format on save" } div { class: "segmented", style: "display:flex;", button { "Off" } button { class: "active", "On" } } }
+            div { class: "form-field", label { "Show whitespace" } div { class: "segmented", style: "display:flex;", button { class: "active", "Off" } button { "On" } } }
+            div { class: "form-field", label { "Bracket pair colorization" } div { class: "segmented", style: "display:flex;", button { "Off" } button { class: "active", "On" } } }
+        }
+    }
+}
+
+#[component]
+fn KeyboardPane() -> Element {
+    let rows = [
+        ("Command palette", "⌘K"),
+        ("Disconnect", "⌘D"),
+        ("Run query", "⌘↵"),
+        ("Open preferences", "⌘,"),
+        ("New query tab", "⌘T"),
+        ("Toggle theme", "⌘⇧L"),
+        ("Focus Explorer sidebar", "⌘B"),
+    ];
+    rsx! {
+        div { class: "prefs-pane active",
+            h2 { "Keyboard shortcuts" }
+            p { "Customize bindings. Defaults shown." }
+            div { style: "font-family: var(--font-mono); font-size: 12px;",
+                for (cmd, key) in rows {
+                    div { style: "display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 0.5px solid var(--border-soft);",
+                        span { "{cmd}" }
+                        span { "{key}" }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn SecurityPane() -> Element {
+    rsx! {
+        div { class: "prefs-pane active",
+            h2 { "Security" }
+            p { "Credential storage and session protections. These are app-level — per-connection auth settings live with each connection." }
+            div { class: "form-field", label { "Credential storage" } select { option { "OS keychain (default)" } option { "Encrypted file" } option { "In-memory only" } } }
+            div { class: "form-field", label { "Lock app after idle" } select { option { "Never" } option { "5 minutes" } option { "15 minutes" } option { "1 hour" } } }
+            div { class: "form-field", label { "Confirm destructive queries" } div { class: "segmented", style: "display:flex;", button { "Off" } button { class: "active", "On" } } }
+            div { class: "form-field", label { "Mask sensitive query results" } div { class: "segmented", style: "display:flex;", button { class: "active", "Off" } button { "On" } } }
+        }
+    }
+}
+
+#[component]
+fn TelemetryPane() -> Element {
+    rsx! {
+        div { class: "prefs-pane active",
+            h2 { "Telemetry" }
+            p { "Anonymous usage data helps improve NodeDB-Studio. Off by default." }
+            div { class: "form-field", label { "Send anonymous usage data" } div { class: "segmented", style: "display:flex;", button { class: "active", "Off" } button { "On" } } }
+            div { class: "form-field", label { "Send crash reports" } div { class: "segmented", style: "display:flex;", button { "Off" } button { class: "active", "On" } } }
+            div { style: "font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 10px; line-height: 1.6;", "No connection data, credentials, or query content is ever transmitted. Only anonymized UI interactions and error stack traces." }
+        }
+    }
+}
+
+#[component]
+fn AboutPane() -> Element {
+    rsx! {
+        div { class: "prefs-pane active",
+            h2 { "About NodeDB-Studio" }
+            p { "Database studio built on Dioxus + Rust." }
+            div { style: "font-family: var(--font-mono); font-size: 11px; line-height: 1.8; margin-top: 14px;",
+                AboutRow { k: "version", v: "dev" }
+                AboutRow { k: "build", v: "2026.06.13" }
+                AboutRow { k: "runtime", v: "dioxus 0.6" }
+                AboutRow { k: "platform", v: "darwin-arm64" }
+                AboutRow { k: "license", v: "Apache 2.0" }
+            }
+            div { style: "margin-top: 18px; display: flex; gap: 8px;",
+                button { class: "btn small", "Check for updates" }
+                button { class: "btn small", "Release notes" }
+                button { class: "btn small", "View license" }
+            }
+        }
+    }
+}
+
+#[component]
+fn AboutRow(k: String, v: String) -> Element {
+    rsx! {
+        div {
+            span { style: "color:var(--text-tertiary); display:inline-block; width:80px;", "{k}" }
+            "{v}"
+        }
+    }
+}
diff --git a/nodedb-studio/src/views/connection_manager.rs b/nodedb-studio/src/views/connection_manager.rs
