docs: settings rework design spec

Sidebar navigation with User/Admin groups, Option-A grouped card content style, cog header direct link, Users and Logs panels inlined. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-10 20:43:04 -04:00
parent a6ce287be3
commit 1047298765
1 changed files with 140 additions and 0 deletions
@@ -0,0 +1,140 @@
+# Settings Rework Design
+
+**Date:** 2026-03-10
+
+## Goal
+
+Consolidate UserManagement and Logs into SettingsView, replace the horizontal tab bar with a sidebar navigation, apply Option-A grouped-card content panel style, and remove the gear dropdown from the header so the cog becomes a direct link to `/settings`.
+
+---
+
+## Navigation Structure
+
+The existing flat tab bar is replaced with a **left sidebar** (~160px wide) containing two labelled groups:
+
+**User**
+- General
+- Account
+- Notifications
+- Integrations
+- Data
+
+**Admin** *(shown only when `authStore.isAdmin`)*
+- Config
+- Users
+- Logs
+
+Active item styling: indigo left-border accent + light tinted background (`rgba(99,102,241,0.08)`), consistent with other sidebar patterns in the app (WorkspaceTaskPanel, etc.).
+
+Tab identity strings stay lowercase (`"general"`, `"account"`, ..., `"config"`, `"users"`, `"logs"`) and continue to be persisted in `localStorage` key `settings_tab`.
+
+---
+
+## Content Panel Style — Option A: Grouped Cards
+
+- Page background: `var(--color-bg-secondary)` (the grey used elsewhere)
+- Each settings group is a white (`var(--color-bg-card)`) rounded card (`var(--radius-md)`) with `1px solid var(--color-border)` border
+- Card header: small-caps section label (`.65rem`, `font-weight: 700`, `color: var(--color-text-muted)`, `text-transform: uppercase`)
+- Settings rows within a card: label left, control right, `padding: 0.5rem 0`, bottom border separator except on last row
+- Save button sits below the card group it belongs to (or at page bottom if single-card sections)
+
+This matches the visual language of `WorkspaceTaskPanel` and `NoteCard` used throughout the app.
+
+---
+
+## AppHeader Changes
+
+- Remove `gearOpen` ref, `toggleGear()` function, `handleClickOutside` listener for the gear menu, and the gear dropdown `<div>` from the template
+- Replace the `<button @click="toggleGear">` with `<router-link to="/settings" class="icon-btn" aria-label="Settings">` containing the existing cog SVG icon
+- Remove associated `gearMenuRef`, `gearOpen`, and click-outside logic — no longer needed
+
+---
+
+## Router Changes
+
+- `/admin/users` route → redirect to `/settings` (or remove; sidebar is now the canonical entry)
+- `/admin/logs` route → redirect to `/settings` (same)
+- Both `UserManagementView.vue` and `LogsView.vue` are kept as files but the routes pointing to them are replaced by redirects
+
+---
+
+## SettingsView.vue Restructure
+
+### Layout
+
+```
+┌─ settings-root ──────────────────────────────────────────┐
+│ ┌─ settings-sidebar (160px) ─┐  ┌─ settings-content ──┐ │
+│ │  User                      │  │  [active panel]     │ │
+│ │  ● General (active)        │  │                     │ │
+│ │    Account                 │  │                     │ │
+│ │    Notifications           │  │                     │ │
+│ │    Integrations            │  │                     │ │
+│ │    Data                    │  │                     │ │
+│ │  Admin                     │  │                     │ │
+│ │    Config                  │  │                     │ │
+│ │    Users                   │  │                     │ │
+│ │    Logs                    │  │                     │ │
+│ └────────────────────────────┘  └─────────────────────┘ │
+└──────────────────────────────────────────────────────────┘
+```
+
+CSS: `display: flex`, sidebar `flex-shrink: 0`, content `flex: 1; overflow-y: auto`.
+
+### Panels
+
+| Panel | Content |
+|-------|---------|
+| General | Assistant name, default model (existing) |
+| Account | Email change, password change, session invalidation (existing) |
+| Notifications | Push notification toggles (existing) |
+| Integrations | CalDAV config (existing) |
+| Data | Export (notes MD/JSON, full backup), restore, chat retention (existing) |
+| Config | Admin config settings — rename from current "admin" tab (existing content) |
+| Users | Inline content from `UserManagementView.vue`: registration toggle, invite form, pending invitations table, users table |
+| Logs | Inline content from `LogsView.vue`: stats cards, filter bar, log table with expand rows, pagination |
+
+The script logic from `UserManagementView.vue` and `LogsView.vue` is moved into `SettingsView.vue`'s `<script setup>`. Both old view files are kept but their routes replaced with redirects.
+
+### Card Grouping per Panel
+
+Each logical group within a panel gets its own white card. Examples:
+
+**General panel:**
+- Card: "Assistant" → name input + model select + save button
+- Card: "Appearance" → theme toggle (if applicable in future)
+
+**Account panel:**
+- Card: "Email" → change email form
+- Card: "Password" → change password form
+- Card: "Sessions" → invalidate sessions button
+
+**Users panel:**
+- Card: "Registration" → open/close toggle
+- Card: "Invite" → email input + send button + pending invitations list
+- Card: "Users" → users table
+
+**Logs panel:**
+- Card: "Overview" → stats counters
+- Card: "Log Entries" → filter bar + table
+
+---
+
+## Files to Create/Modify
+
+**Modify:**
+- `frontend/src/views/SettingsView.vue` — full template + style rework; absorb UserManagement and Logs script logic
+- `frontend/src/components/AppHeader.vue` — remove gear dropdown; cog becomes router-link
+- `frontend/src/router/index.ts` — replace `/admin/users` and `/admin/logs` routes with redirects to `/settings`
+
+**Keep (unchanged):**
+- `frontend/src/views/UserManagementView.vue` — file kept, route removed
+- `frontend/src/views/LogsView.vue` — file kept, route removed
+
+---
+
+## Non-Goals
+
+- No new backend endpoints
+- No sub-routing under `/settings` (JS panel switching only)
+- No mobile-specific sidebar collapse (sidebar stacks above content on narrow screens)