docs: add UI polish & UX upgrade design doc
Covers amber accent system, charcoal background lift, button hierarchy, toast notifications, rich empty states, UI zoom, portable storage, and window state persistence.
This commit is contained in:
Your Name
371
docs/plans/2026-02-17-ui-polish-design.md
Normal file
371
docs/plans/2026-02-17-ui-polish-design.md
Normal file
@@ -0,0 +1,371 @@
|
|||||||
|
# ZeroClock UI Polish & UX Upgrade — Design
|
||||||
|
|
||||||
|
## Problem
|
||||||
|
|
||||||
|
The first redesign pass established a Swiss/Dieter Rams foundation but went too far into monochrome territory. The app is a wall of near-black grey with zero personality. The signature amber accent color is completely absent. All buttons look identical. Empty states are sad grey text. `alert()` calls for all feedback. No visual hierarchy for primary actions. The app also stores data in AppData (not portable) and doesn't remember window position/size.
|
||||||
|
|
||||||
|
## Goals
|
||||||
|
|
||||||
|
1. Reintroduce warm amber (#D97706) as the strategic accent color
|
||||||
|
2. Lift the entire background palette from near-black to charcoal
|
||||||
|
3. Establish clear button hierarchy (primary/secondary/ghost/danger)
|
||||||
|
4. Replace all `alert()` calls with a toast notification system
|
||||||
|
5. Design rich empty states with icons, copy, and CTA buttons
|
||||||
|
6. Add amber focus states on all inputs
|
||||||
|
7. Add UI zoom control in Settings (persistent)
|
||||||
|
8. Make the app fully portable (data next to exe)
|
||||||
|
9. Persist window position and size between runs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design System
|
||||||
|
|
||||||
|
### Color Palette (Revised)
|
||||||
|
|
||||||
|
```
|
||||||
|
Background layers (lifted from near-black to charcoal):
|
||||||
|
--bg-base: #1A1A18 app background
|
||||||
|
--bg-surface: #222220 cards, panels, navRail, titlebar
|
||||||
|
--bg-elevated: #2C2C28 hover, active, raised elements
|
||||||
|
--bg-inset: #141413 inputs, recessed areas
|
||||||
|
|
||||||
|
Text (warm whites — unchanged):
|
||||||
|
--text-primary: #F5F5F0 headings, active items
|
||||||
|
--text-secondary: #8A8A82 body, descriptions
|
||||||
|
--text-tertiary: #5A5A54 disabled, placeholders (bumped from #4A4A45)
|
||||||
|
|
||||||
|
Borders (bumped to match brighter backgrounds):
|
||||||
|
--border-subtle: #2E2E2A dividers, card borders
|
||||||
|
--border-visible: #3D3D38 input borders, focused
|
||||||
|
|
||||||
|
Accent (NEW — amber):
|
||||||
|
--accent: #D97706 button fills, active indicators
|
||||||
|
--accent-hover: #B45309 hover/pressed amber
|
||||||
|
--accent-muted: rgba(217,119,6,0.12) subtle glows, backgrounds
|
||||||
|
--accent-text: #FBBF24 amber text on dark backgrounds
|
||||||
|
|
||||||
|
Status (semantic — unchanged):
|
||||||
|
--status-running: #34D399 timer active, success, toggle on
|
||||||
|
--status-warning: #EAB308 pending, caution
|
||||||
|
--status-error: #EF4444 destructive, overdue
|
||||||
|
--status-info: #3B82F6 informational
|
||||||
|
```
|
||||||
|
|
||||||
|
Remove all legacy alias colors (--color-amber mapped to white, --color-background, --color-surface, etc.).
|
||||||
|
|
||||||
|
### Button Hierarchy
|
||||||
|
|
||||||
|
**Primary** — amber fill, for the ONE main action per view:
|
||||||
|
- `bg-accent text-[#1A1A18] font-medium rounded`
|
||||||
|
- Hover: `bg-accent-hover`
|
||||||
|
- Used: Start timer, Create Project, Save Settings, Generate Report, Apply Filters, Create Invoice
|
||||||
|
|
||||||
|
**Secondary** — outlined, for supporting actions:
|
||||||
|
- `border border-border-visible text-text-primary rounded`
|
||||||
|
- Hover: `bg-bg-elevated`
|
||||||
|
- Used: Export CSV, Export Data, Cancel buttons, Clear filters
|
||||||
|
|
||||||
|
**Ghost** — text only, for low-priority actions:
|
||||||
|
- `text-text-secondary hover:text-text-primary`
|
||||||
|
- No border, no background
|
||||||
|
- Used: "View all" links, tab navigation inactive
|
||||||
|
|
||||||
|
**Danger** — destructive actions:
|
||||||
|
- `border border-status-error text-status-error rounded`
|
||||||
|
- Hover: `bg-status-error/10`
|
||||||
|
- Used: Clear Data, Delete buttons in confirmation dialogs
|
||||||
|
|
||||||
|
### Input Focus States
|
||||||
|
|
||||||
|
All inputs, selects, and textareas:
|
||||||
|
- Current: `focus:border-border-visible` (grey, barely visible)
|
||||||
|
- New: `focus:border-accent focus:outline-none` with `box-shadow: 0 0 0 2px rgba(217,119,6,0.12)` (amber border + subtle amber glow)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Shell
|
||||||
|
|
||||||
|
### TitleBar
|
||||||
|
|
||||||
|
- "ZEROCLOCK" wordmark: `text-accent-text` (amber #FBBF24) instead of `text-text-secondary`
|
||||||
|
- Running timer section: unchanged (green dot + project + time + stop)
|
||||||
|
- Window controls: unchanged
|
||||||
|
|
||||||
|
### NavRail
|
||||||
|
|
||||||
|
- Active indicator: 2px left border in `bg-accent` (#D97706) instead of `bg-text-primary` (white)
|
||||||
|
- Active icon color: stays `text-text-primary` (white)
|
||||||
|
- Tooltip: add subtle caret/triangle pointing left for polish
|
||||||
|
- Timer dot at bottom: stays green (semantic)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## View Designs
|
||||||
|
|
||||||
|
### Dashboard
|
||||||
|
|
||||||
|
**Header:**
|
||||||
|
- Greeting: "Good morning/afternoon/evening" in `text-lg text-text-secondary`
|
||||||
|
- Date: "Monday, February 17, 2026" in `text-xs text-text-tertiary`
|
||||||
|
|
||||||
|
**Stats row (4 stats):**
|
||||||
|
- This Week | This Month | Today | Active Projects
|
||||||
|
- Labels: `text-xs text-text-tertiary uppercase tracking-[0.08em]`
|
||||||
|
- Values: `text-[1.25rem] font-mono text-accent-text` (amber)
|
||||||
|
|
||||||
|
**Weekly chart:**
|
||||||
|
- Bar fill: `#D97706` (amber), today's bar: `#FBBF24` (lighter amber)
|
||||||
|
- Grid: `#2E2E2A`, ticks: `#5A5A54`
|
||||||
|
|
||||||
|
**Recent entries:**
|
||||||
|
- Flat list as current
|
||||||
|
- "View all" ghost link bottom-right, navigates to Entries
|
||||||
|
|
||||||
|
**Empty state:**
|
||||||
|
- Centered vertically in available space
|
||||||
|
- Lucide `Clock` icon, 48px, `text-text-tertiary`
|
||||||
|
- "Start tracking your time" — `text-text-secondary`
|
||||||
|
- "Your dashboard will come alive with stats, charts, and recent activity once you start logging hours." — `text-xs text-text-tertiary`
|
||||||
|
- Primary amber button: "Go to Timer"
|
||||||
|
|
||||||
|
### Timer
|
||||||
|
|
||||||
|
**Hero display:**
|
||||||
|
- `text-[3rem] font-mono text-text-primary` centered
|
||||||
|
- When running: colon separators pulse amber (`text-accent-text` with opacity animation)
|
||||||
|
- When stopped: all white, static
|
||||||
|
|
||||||
|
**Start/Stop button:**
|
||||||
|
- Start: `bg-accent text-[#1A1A18] px-10 py-3 text-sm font-medium rounded`
|
||||||
|
- Stop: `bg-status-error text-white px-10 py-3 text-sm font-medium rounded` (filled red)
|
||||||
|
- 150ms color transition between states
|
||||||
|
|
||||||
|
**Inputs:**
|
||||||
|
- `max-w-[36rem] mx-auto` (centered)
|
||||||
|
- Amber focus states
|
||||||
|
- Project select: small colored dot preview of selected project color
|
||||||
|
|
||||||
|
**Recent entries:**
|
||||||
|
- Scoped to today's entries
|
||||||
|
- Most recent entry: subtle amber left border
|
||||||
|
- Max 5, "View all" ghost link
|
||||||
|
|
||||||
|
**Empty state:**
|
||||||
|
- Lucide `Timer` icon, 40px, `text-text-tertiary`
|
||||||
|
- "No entries today" — `text-text-secondary`
|
||||||
|
- "Select a project and hit Start to begin tracking" — `text-xs text-text-tertiary`
|
||||||
|
|
||||||
|
### Projects
|
||||||
|
|
||||||
|
**Header:**
|
||||||
|
- Title "Projects" left
|
||||||
|
- "+ Add" becomes small amber primary button: `bg-accent text-[#1A1A18] px-3 py-1.5 text-xs font-medium rounded`
|
||||||
|
|
||||||
|
**Cards:**
|
||||||
|
- 2px left border in project color
|
||||||
|
- `bg-bg-surface hover:bg-bg-elevated` transition
|
||||||
|
- Hover: left border widens from 2px to 3px
|
||||||
|
- Rate and client inline: "ClientName · $50.00/hr"
|
||||||
|
|
||||||
|
**Create/Edit dialog:**
|
||||||
|
- Submit: amber primary
|
||||||
|
- Cancel: secondary
|
||||||
|
- Color picker: row of 8 preset swatches above hex input
|
||||||
|
- Presets: #D97706, #3B82F6, #8B5CF6, #EC4899, #10B981, #EF4444, #06B6D4, #6B7280
|
||||||
|
|
||||||
|
**Empty state:**
|
||||||
|
- Lucide `FolderKanban` icon, 48px, `text-text-tertiary`
|
||||||
|
- "No projects yet" — `text-text-secondary`
|
||||||
|
- "Projects organize your time entries and set billing rates for clients." — `text-xs text-text-tertiary`
|
||||||
|
- Primary amber button: "Create Project" (opens dialog)
|
||||||
|
|
||||||
|
### Entries
|
||||||
|
|
||||||
|
**Filter bar:**
|
||||||
|
- Wrapped in `bg-bg-surface rounded p-4` container
|
||||||
|
- "Apply": amber primary
|
||||||
|
- "Clear": ghost button
|
||||||
|
- `mb-6` gap between filter bar and table
|
||||||
|
|
||||||
|
**Table:**
|
||||||
|
- Header row: `bg-bg-surface` background
|
||||||
|
- Duration column: `text-accent-text font-mono` (amber)
|
||||||
|
- Edit/delete hover reveal: unchanged
|
||||||
|
|
||||||
|
**Empty state (below filter bar):**
|
||||||
|
- Lucide `List` icon, 48px, `text-text-tertiary`
|
||||||
|
- "No entries found" — `text-text-secondary`
|
||||||
|
- "Time entries will appear here as you track your work. Try adjusting the date range if you have existing entries." — `text-xs text-text-tertiary`
|
||||||
|
- Primary amber button: "Go to Timer"
|
||||||
|
|
||||||
|
### Reports
|
||||||
|
|
||||||
|
**Filter bar:**
|
||||||
|
- Same `bg-bg-surface rounded p-4` container
|
||||||
|
- "Generate": amber primary
|
||||||
|
- "Export CSV": secondary
|
||||||
|
|
||||||
|
**Stats:**
|
||||||
|
- `mt-6` spacing after filter bar
|
||||||
|
- Values: `text-accent-text font-mono` (amber)
|
||||||
|
|
||||||
|
**Chart:**
|
||||||
|
- Bars use each project's own assigned color
|
||||||
|
- Fallback for no-color projects: #D97706
|
||||||
|
- Grid: `#2E2E2A`, ticks: `#5A5A54`
|
||||||
|
|
||||||
|
**Breakdown:**
|
||||||
|
- Hours value: `text-accent-text font-mono`
|
||||||
|
- Earnings: `text-text-secondary font-mono`
|
||||||
|
|
||||||
|
**Empty state:**
|
||||||
|
- Lucide `BarChart3` icon, 48px, `text-text-tertiary`
|
||||||
|
- "Generate a report to see your data" — `text-text-secondary`
|
||||||
|
- No CTA button (Generate button is right there)
|
||||||
|
|
||||||
|
### Invoices
|
||||||
|
|
||||||
|
**Tabs:**
|
||||||
|
- Active: `border-b-2 border-accent text-text-primary` (amber underline)
|
||||||
|
- Inactive: `text-text-tertiary hover:text-text-secondary`
|
||||||
|
|
||||||
|
**List table:**
|
||||||
|
- Header row: `bg-bg-surface`
|
||||||
|
- Amount: `text-accent-text font-mono`
|
||||||
|
- Status colors: unchanged (semantic)
|
||||||
|
|
||||||
|
**Create form:**
|
||||||
|
- Submit: amber primary
|
||||||
|
- Cancel: secondary
|
||||||
|
- Total line: `text-accent-text font-mono`
|
||||||
|
|
||||||
|
**Invoice detail dialog:**
|
||||||
|
- Export PDF: amber primary
|
||||||
|
- Total: `text-accent-text`
|
||||||
|
|
||||||
|
**Empty state:**
|
||||||
|
- Lucide `FileText` icon, 48px, `text-text-tertiary`
|
||||||
|
- "No invoices yet" — `text-text-secondary`
|
||||||
|
- "Create invoices from your tracked time to bill clients." — `text-xs text-text-tertiary`
|
||||||
|
- Primary amber button: "Create Invoice" (switches to Create tab)
|
||||||
|
|
||||||
|
### Settings
|
||||||
|
|
||||||
|
**Buttons:**
|
||||||
|
- "Save Settings": amber primary
|
||||||
|
- "Export": secondary
|
||||||
|
- "Clear Data": danger (red)
|
||||||
|
|
||||||
|
**Toggle:** stays green when active (semantic "on" state)
|
||||||
|
|
||||||
|
**All `alert()` calls:** replaced with toasts
|
||||||
|
|
||||||
|
**UI Zoom control (NEW):**
|
||||||
|
- New section "Appearance" between Timer and Data sections
|
||||||
|
- Label: "UI Scale"
|
||||||
|
- Minus button [-] | value display "100%" | Plus button [+]
|
||||||
|
- Steps: 80%, 90%, 100%, 110%, 120%, 130%, 150%
|
||||||
|
- Implementation: CSS `zoom` property on the `#app` root element
|
||||||
|
- Persisted via `update_settings('ui_zoom', '100')` in the settings SQLite table
|
||||||
|
- Applied on app startup before first paint (read from settings store in App.vue onMounted)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Toast Notification System
|
||||||
|
|
||||||
|
### Component: `ToastNotification.vue`
|
||||||
|
|
||||||
|
- Fixed position, top-center of the main content area, `top-4`
|
||||||
|
- Max width 320px
|
||||||
|
- `bg-bg-surface border border-border-subtle rounded shadow-lg`
|
||||||
|
- 3px left border colored by type:
|
||||||
|
- Success: `border-status-running` (green)
|
||||||
|
- Error: `border-status-error` (red)
|
||||||
|
- Info: `border-accent` (amber)
|
||||||
|
- Content: Lucide icon (Check/X/Info, 16px) + message in `text-sm text-text-primary`
|
||||||
|
- Enter animation: slide down from -20px + fade, 200ms
|
||||||
|
- Exit: fade out 150ms
|
||||||
|
- Auto-dismiss: 3 seconds
|
||||||
|
- Click to dismiss early
|
||||||
|
- Stack with 8px gap, max 3 visible
|
||||||
|
|
||||||
|
### Store: `useToastStore`
|
||||||
|
|
||||||
|
- `addToast(message: string, type: 'success' | 'error' | 'info')`
|
||||||
|
- Auto-generates unique ID
|
||||||
|
- Auto-removes after 3s timeout
|
||||||
|
- Max 3 toasts visible, oldest removed first
|
||||||
|
|
||||||
|
### Replacements
|
||||||
|
|
||||||
|
All `alert()` calls across the app become toast calls:
|
||||||
|
- Settings save success/failure
|
||||||
|
- Clear data success/failure
|
||||||
|
- Export data success/failure
|
||||||
|
- Timer "Please select a project"
|
||||||
|
- Reports "Please select a date range"
|
||||||
|
- Reports "No data to export"
|
||||||
|
- Invoices "Please select a client"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Portable App
|
||||||
|
|
||||||
|
### Problem
|
||||||
|
|
||||||
|
Currently uses `directories::ProjectDirs` to store the SQLite database in the OS app data directory (e.g., `C:\Users\<user>\AppData\Roaming\ZeroClock\`). This is not portable.
|
||||||
|
|
||||||
|
### Solution
|
||||||
|
|
||||||
|
Change `get_data_dir()` in `lib.rs` to always resolve relative to the executable:
|
||||||
|
|
||||||
|
```rust
|
||||||
|
fn get_data_dir() -> PathBuf {
|
||||||
|
let exe_path = std::env::current_exe().unwrap();
|
||||||
|
let data_dir = exe_path.parent().unwrap().join("data");
|
||||||
|
std::fs::create_dir_all(&data_dir).ok();
|
||||||
|
data_dir
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This stores `data/timetracker.db` next to the `.exe`. The `directories` crate dependency can be removed from Cargo.toml.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Window State Persistence
|
||||||
|
|
||||||
|
### Plugin: `tauri-plugin-window-state`
|
||||||
|
|
||||||
|
Add the Tauri window-state plugin to save/restore:
|
||||||
|
- Window position (x, y)
|
||||||
|
- Window size (width, height)
|
||||||
|
- Maximized state
|
||||||
|
|
||||||
|
### Implementation
|
||||||
|
|
||||||
|
1. Add dependency: `tauri-plugin-window-state = "2"` to Cargo.toml
|
||||||
|
2. Add `"window-state"` to plugins in tauri.conf.json
|
||||||
|
3. Register plugin: `.plugin(tauri_plugin_window_state::Builder::new().build())` in lib.rs
|
||||||
|
4. The plugin auto-saves state to a `.window-state` file. Since we're making the app portable, configure the plugin to store state in our `data/` directory next to the exe.
|
||||||
|
|
||||||
|
### Config
|
||||||
|
|
||||||
|
In `tauri.conf.json`, add to plugins:
|
||||||
|
```json
|
||||||
|
"window-state": {
|
||||||
|
"all": true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Remove `"center": true` from the window config so the saved position is respected on subsequent launches.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Transitions & Motion
|
||||||
|
|
||||||
|
Unchanged from first redesign, plus:
|
||||||
|
- Toast enter: translateY(-20px) + opacity 0 to 0+1, 200ms ease-out
|
||||||
|
- Toast exit: opacity 1 to 0, 150ms
|
||||||
|
- Button hover: 150ms background-color transition
|
||||||
|
- Project card left-border width: 150ms transition on hover
|
||||||
|
- Timer colon amber pulse: opacity 0.4 to 1.0 on accent-text color, 1s ease-in-out infinite (only when running)
|
||||||
Reference in New Issue
Block a user