# 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