From 228a8cd6b42358a73a7deaa73a7ce1fdfbe0f73f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 17 Feb 2026 21:48:28 +0200
Subject: [PATCH] docs: add Settings sidebar tabs design

---
 docs/plans/2026-02-17-settings-tabs-design.md | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 docs/plans/2026-02-17-settings-tabs-design.md

diff --git a/docs/plans/2026-02-17-settings-tabs-design.md b/docs/plans/2026-02-17-settings-tabs-design.md
new file mode 100644
index 0000000..7c9a3f5
--- /dev/null
+++ b/docs/plans/2026-02-17-settings-tabs-design.md
@@ -0,0 +1,69 @@
+# 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