diff --git a/docs/superpowers/specs/2026-03-10-settings-rework-design.md b/docs/superpowers/specs/2026-03-10-settings-rework-design.md new file mode 100644 index 0000000..4e0a59b --- /dev/null +++ b/docs/superpowers/specs/2026-03-10-settings-rework-design.md @@ -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 `