zeroclock/docs/plans/2026-02-17-settings-tabs-design.md

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