From f10a5b9f19af224e22f9db7c61ddd7b5e02eca9a Mon Sep 17 00:00:00 2001 From: Otto Date: Fri, 29 May 2026 10:50:23 +0200 Subject: [PATCH] docs: add dashboard UI/UX design plan --- docs/dashboard-ui-ux-design.md | 215 +++++++++++++++++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 docs/dashboard-ui-ux-design.md diff --git a/docs/dashboard-ui-ux-design.md b/docs/dashboard-ui-ux-design.md new file mode 100644 index 0000000..475567c --- /dev/null +++ b/docs/dashboard-ui-ux-design.md @@ -0,0 +1,215 @@ +# Second-Brain Dashboard UI/UX Design Plan (mobile-first) + +Basis: `second-brain/templates/dashboard.html`, `second-brain/static/style.css` (aktueller Stand) + neue Graph-Controls aus `/tmp/second-brain-staging/`. + +## 1) Konkreter Design-Plan + +### Ziele (UX) +- **Schnelles Triaging unterwegs:** Pending/Errors sofort sichtbar, 1-Hand-Bedienung. +- **Konsistentes Design-System:** einheitliche Buttons/Inputs/Panels statt Einzellösungen. +- **Graph als Diagnose-Tool:** klare Controls, Legende, nachvollziehbares Feedback (Loading/Empty/Errors). + +### Farbschema (Dark, high-contrast, "indigo + emerald") +- **Background:** sehr dunkel (nahe #0f1117) für weniger Blendung. +- **Surface (Cards/Panels):** abgestufte Flächen (Surface-1, Surface-2) für Hierarchie. +- **Primary:** Indigo/Blue für interaktive Elemente und Highlights (bisher #6c8af5 bleibt als Basis). +- **Success:** Emerald für Confirm/OK (bisher #3a7d3a → etwas heller/satter). +- **Danger:** Red für Errors/Reject. +- **Warning:** Amber für Pending/Match/Attention. +- **Text:** fast-weiß, sekundär gedimmt. + +### Typografie +- Systemfont-Stack (schnell, gut lesbar): `ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial`. +- Skala (mobile-first): + - `text-xs` 12px (Labels, Meta) + - `text-sm` 13–14px (secondary) + - `text-md` 15–16px (Body) + - `text-lg` 18–20px (Titles) +- **Ziffern:** optional `font-variant-numeric: tabular-nums;` für Stats. + +### Spacing/Rhythm +- 4px Grid; Standard-Gaps: 8/12/16. +- Container-Padding: 12px (mobile), 16–20px (>=768px). +- Border-radius: 12–16px (Cards/Modals), 10px (Inputs/Buttons), 999px (Pills). + +### Komponenten (konkret) + +#### A) Tabs +- Tabs bleiben als 3 Buttons, aber: + - **Active State** deutlicher (background + border + subtle glow). + - **Touch target** min. 44px Höhe. + - Sticky bleibt, aber mit leichter **Backdrop-Blurring** (wenn möglich) oder solid surface. + +#### B) Search +- Search-Row wird als **kompakte Toolbar** gestaltet: + - Input + Filter in einer Zeile. + - Optional Quick-Chips darunter: `All / Pending / Confirmed / Errors` (klickbar) als Alternative zum Select. +- Clear-Button (×) im Input (per CSS `::-webkit-search-cancel-button` oder eigener Button) für Mobile. + +#### C) Cards +- Karte als 3 Zonen: Header (badges/tags/date), Body (content), Footer (actions). +- Status wird stärker codiert: + - left-border + kleine **Status-Pill** (OK/Pending/Error) mit eindeutiger Farbe. +- Body: bessere Lesbarkeit via `line-height: 1.55` und max-height/clamp optional. + +#### D) Modal +- Modal als **Bottom Sheet** auf Mobile (>=50vh) + klassisches Center-Modal auf Desktop. +- Close-Button größer + Tap-Area. +- Inhalt in Tabs/Sections (History/Meta/Content) optional später. + +#### E) Graph + Controls (aus Staging) +- Controls als **Control Bar** oberhalb Canvas: + - Primary: Physics toggle. + - Secondary: Fit, Reset, Reload. + - Text labels kurz (z.B. `Physics` statt `Physics: off`, state als Badge). +- Canvas passt sich an Viewport an: + - `width: min(100%, 560px)`; Height: `min(65vh, 560px)` (CSS statt fester HTML Attribute, wenn möglich). +- Legende als einklappbares Panel (`Details`/`summary`) oder leichtes Panel unter Canvas. + +#### F) Status Panels +- Status-View nutzt vorhandene `.panel`/`.kv-*`: + - Gruppen: System, Storage, Jobs, Insights, Pending Queue. + - Jede Gruppe als Panel mit klarer Title Row. +- Kritische Werte (Errors/Pending/Queue) farblich markieren. + +## 2) CSS-Variablen (Theme-Tokens) + Mapping + +### Token-Vorschlag (`:root`) +```css +:root { + /* typography */ + --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; + + /* colors */ + --bg: #0f1117; + --surface-1: #14151d; + --surface-2: #1a1b26; + --border: #2a2d3a; + + --text: #e8e8ee; + --text-muted: #8b90a3; + --text-dim: #5c6276; + + --primary: #6c8af5; /* existing */ + --primary-2: #8aa1ff; + --success: #2fbf71; + --danger: #ef4444; + --warning: #f7d154; /* existing-ish */ + + /* shadows */ + --shadow-1: 0 1px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35); + + /* radius */ + --r-sm: 10px; + --r-md: 14px; + --r-lg: 16px; + + /* spacing */ + --s-1: 4px; + --s-2: 8px; + --s-3: 12px; + --s-4: 16px; + --s-5: 20px; + + /* control sizes */ + --tap: 44px; +} +``` + +### Mapping auf existierende Selektoren +- `body`/`.app` + - `background: var(--bg)` statt `#141419` + - `font-family: var(--font-sans)` + - `color: var(--text)` +- `.stats-bar`, `.tabs-bar`, `.search-box` + - `background: var(--surface-1)` (Stats ggf. Gradient bleibt, aber auf Tokens) + - `border-bottom: 1px solid var(--border)` +- `.panel`, `.card`, `.modal-content`, `.graph-legend` + - `background: var(--surface-2)` + - `border: 1px solid var(--border)` + - `border-radius: var(--r-md)` +- `.stat-num`, `#pageNum`, `.tab-btn.active`, `#searchInput:focus` + - `color/border-color: var(--primary)` +- `.muted`, `.stat-label`, `.kv-key`, `.date` + - `color: var(--text-muted)` bzw. `var(--text-dim)` +- Buttons + - vereinheitlichen über `.btn` + Modifier: `.btn.primary`, `.btn.danger`, `.btn.success`, `.btn.ghost` + - `min-height: var(--tap)` für Touch + +## 3) 5–10 priorisierte UI-Änderungen (mit Begründung) + +1) **Design Tokens (CSS vars) einführen** → reduziert Farbmix, erleichtert spätere Themes/Anpassungen. +2) **Einheitliche Button-Komponente (`.btn`)** (inkl. `:active`, `:disabled`, `min-height`) → bessere Touch-UX, konsistente Interaktion. +3) **Graph-Controls + Legende aus Staging in den Main-Template-Stand ziehen** → Graph wird tatsächlich bedienbar/selbsterklärend. +4) **Responsive Graph-Canvas (CSS gesteuert)** statt fixer `width/height` → bessere Nutzung auf Phones, weniger Scroll. +5) **Search als Toolbar + Clear-Action** → schnelleres Filtern unterwegs, weniger Friktion. +6) **Modal als Bottom-Sheet auf Mobile** → angenehmer für längeren Content + History, weniger „winziges Fenster“. +7) **Status/Health Werte farblich akzentuieren** (pending/errors/warn) → schnelleres Erkennen von Problemen. +8) **Cards: Status-Pill + typografische Lesbarkeit** (line-height, spacing) → weniger „Textblock“, bessere Scanbarkeit. +9) **Accessibility-Basics**: Focus-Rings, Kontrast, `prefers-reduced-motion` → weniger „invisible focus“ und bessere Bedienbarkeit. +10) **Top-level Layout Max-Width für Desktop** (z.B. 560–720px) → verhindert „zu breite“ Zeilen. + +## 4) Optionale Patch-Vorschläge (Diff-Snippets, NICHT anwenden) + +> Hinweis: Snippets sind bewusst klein gehalten. Gesamt < 120 Zeilen. + +### Snippet A — Tokens + Button-System (style.css) +```diff +--- a/second-brain/static/style.css ++++ b/second-brain/static/style.css +@@ ++:root { ++ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; ++ --bg:#0f1117; --surface-1:#14151d; --surface-2:#1a1b26; --border:#2a2d3a; ++ --text:#e8e8ee; --text-muted:#8b90a3; --text-dim:#5c6276; ++ --primary:#6c8af5; --success:#2fbf71; --danger:#ef4444; --warning:#f7d154; ++ --r-sm:10px; --r-md:14px; --r-lg:16px; ++ --s-2:8px; --s-3:12px; --s-4:16px; ++ --tap:44px; ++} ++ ++body { font-family: var(--font-sans); background: var(--bg); color: var(--text); } ++ ++.btn{ ++ min-height: var(--tap); ++ background: #1e1e28; ++ border: 1px solid var(--border); ++ border-radius: var(--r-sm); ++ padding: 8px 12px; ++ color: #cfd3ff; ++ font-weight: 700; ++} ++.btn.primary{ border-color: var(--primary); box-shadow: 0 0 0 1px rgba(108,138,245,0.18) inset; } ++.btn.success{ background: rgba(47,191,113,.18); border-color: rgba(47,191,113,.35); } ++.btn.danger{ background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.35); } ++.btn:active{ transform: scale(.98); } ++.btn:disabled{ opacity: .45; } +``` + +### Snippet B — Graph Controls + Legend übernehmen (dashboard.html) +```diff +--- a/second-brain/templates/dashboard.html ++++ b/second-brain/templates/dashboard.html +@@ +- ++ +``` +