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

3.2 KiB Raw Blame History