70 lines
3.2 KiB
Markdown
70 lines
3.2 KiB
Markdown
# Settings Sidebar Tabs Design
|
|
|
|
**Goal:** Replace the single-column scrolling Settings view with a left-sidebar tabbed layout that fills the available horizontal space and scales for future settings growth.
|
|
|
|
**Rationale:** The current `max-w-xl` constrained column leaves empty space to the right. A sidebar layout uses the full width, follows the macOS System Settings pattern (Apple HIG), and accommodates future settings categories without crowding.
|
|
|
|
---
|
|
|
|
## Layout
|
|
|
|
Two-panel layout: fixed-width sidebar on the left, flexible content pane on the right.
|
|
|
|
```
|
|
+------------------+---------------------------------------------+
|
|
| Settings (h1) | |
|
|
| | [Section Title] (h2) |
|
|
| > General * | |
|
|
| Timer | Setting row .................. [control] |
|
|
| Billing | Setting row .................. [control] |
|
|
| Data | |
|
|
| | |
|
|
+------------------+---------------------------------------------+
|
|
~180px remaining width
|
|
```
|
|
|
|
- Sidebar: fixed `w-44` (176px), `bg-bg-surface` background, right border `border-border-subtle`
|
|
- Content pane: fills remaining width, padded `p-6`
|
|
- No outer `max-w-xl` constraint
|
|
|
|
## Sidebar Items
|
|
|
|
Each item has a Lucide icon + text label. Order follows Apple HIG (general first, data/danger last).
|
|
|
|
| Tab | Lucide Icon | Contents |
|
|
|-----|-------------|----------|
|
|
| **General** | `Settings` | UI Scale (zoom stepper) |
|
|
| **Timer** | `Clock` | Idle Detection toggle, Reminder Interval (progressive disclosure) |
|
|
| **Billing** | `Receipt` | Default Hourly Rate |
|
|
| **Data** | `Database` | Export All Data, Clear All Data (danger zone) |
|
|
|
|
## Active State
|
|
|
|
- Active sidebar item: `bg-bg-elevated` background, `text-text-primary`, amber left border (2px `border-accent`, matching NavRail indicator)
|
|
- Inactive items: `text-text-secondary`, `hover:bg-bg-elevated` hover state
|
|
- Icons: 16x16, stroke-width 1.5
|
|
|
|
## Content Pane
|
|
|
|
- Section title (`h2`): matches active tab name, `text-[1.125rem] font-medium text-text-primary mb-6`
|
|
- Setting rows: `flex items-center justify-between` with vertical spacing
|
|
- Card-style grouping removed (no `bg-bg-surface` cards inside content pane since the pane itself is the content area)
|
|
- Danger zone item (Clear All Data) retains red border treatment within the Data tab
|
|
|
|
## Behavior
|
|
|
|
- **Auto-save**: all changes save immediately on input change (no Save button)
|
|
- **Progressive disclosure**: Reminder Interval only visible when Idle Detection is on
|
|
- **Default tab**: General (first tab active on mount)
|
|
- **State**: `activeTab` ref tracks which tab is selected, simple `v-if` switching
|
|
- **Confirmation dialog**: Clear All Data dialog unchanged
|
|
|
|
## Design Tokens Used
|
|
|
|
- `bg-bg-surface` — sidebar background
|
|
- `bg-bg-elevated` — active/hover sidebar item
|
|
- `border-border-subtle` — sidebar right border
|
|
- `border-accent` — active indicator (amber)
|
|
- `text-text-primary` / `text-text-secondary` — item text states
|
|
- `status-error` — danger zone styling
|