# 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)