FabledScribe/docs/superpowers/specs/2026-03-10-settings-rework-design.md

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)