docs: add UI redesign design document

Linear/Vercel aesthetic — top nav, refined kanban cards,
muted color system, command-K search, frosted detail panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs/plans/2026-02-26-ui-redesign-design.md

@@ -0,0 +1,114 @@
+# TaskTracker UI Redesign — Design Document
+
+**Date**: 2026-02-26
+**Aesthetic**: Linear / Vercel — restrained, premium, intentional
+**Scope**: Full redesign — layout, navigation, visual system, all pages
+
+## Layout & Navigation
+
+Replace the left sidebar with a slim top navigation bar (48px height):
+
+- **Top bar**: Logo/wordmark left, horizontal nav tabs center-left (Board, Analytics, Mappings), Cmd+K search trigger and "+" new task button right
+- **No sidebar** — 3 nav items don't justify a sidebar; reclaim the horizontal space for the kanban board
+- **Active tab**: subtle underline or pill highlight
+- **Filter bar**: contextual toolbar below the nav, only visible on the Board page
+- **Full viewport width** for content
+
+## Color System
+
+### Backgrounds (darkest to lightest)
+- Page: `#0a0a0f`
+- Card surface: `#12131a` + 1px border `rgba(255,255,255,0.06)`
+- Elevated (modals, dropdowns): `#1a1b26` + soft box-shadow
+- Hover overlay: `rgba(255,255,255,0.03)`
+
+### Accent
+- Primary: violet-to-indigo gradient `#8b5cf6` to `#6366f1`
+- Used for: active nav, primary buttons, focus rings, new task button
+
+### Status Colors (muted, shown as small dots/pills)
+- Active: `#3b82f6` (blue)
+- Paused: `#eab308` (amber)
+- Completed: `#22c55e` (green)
+- Pending: `#64748b` (slate)
+
+### Text
+- Primary: `#e2e8f0`
+- Secondary: `#64748b`
+- Tertiary/disabled: `#334155`
+
+### Effects
+- Background noise/grain texture (CSS noise SVG) on page background
+- Faint gradient border glow on card hover
+- Depth from border opacity, not heavy shadows
+
+## Kanban Board
+
+### Columns
+- No visible column containers — just header + card flow, separated by spacing
+- Header: status name (small caps) + count badge + 2px colored underline
+- Independent scroll per column if overflow
+
+### Task Cards
+- Dark card surface, 12px rounded corners, 1px subtle border
+- Content: title (medium weight), category dot + elapsed time (small muted), subtask progress dots if applicable
+- **Hover**: gradient glow border, translateY(-1px) lift
+- **Active task**: pulsing blue dot "live" indicator, brighter border
+- **Dragging**: stronger shadow, scale(1.02), background dims
+- Click anywhere opens detail panel
+
+### Empty Columns
+- Subtle dashed outline with muted "No tasks" text
+
+### New Task
+- Ghost card at bottom of Pending column: "+" icon + "New task" text, expands to inline form on click
+
+## Detail Panel
+
+- Slides in from right, 480px wide
+- Frosted glass background effect, backdrop blur on overlay
+- Spring-like animation (not linear)
+- Escape key or click outside to close
+
+### Layout (top to bottom)
+1. **Title** — large, bold, click-to-edit
+2. **Status pill + category** — small, muted
+3. **Description** — click-to-edit, markdown support
+4. **Time** — elapsed + estimate with thin gradient progress bar
+5. **Subtasks** — checkbox list with add button
+6. **Notes** — recent notes inline with relative timestamps
+7. **Action buttons** — sticky bottom, contextual (only relevant actions per status)
+
+## Command-K Search
+
+- Cmd+K trigger shows as a small pill in top bar
+- Opens centered modal with large search input
+- Results grouped by type, keyboard navigable
+- Frosted glass backdrop
+
+## Analytics Page
+
+- Stat cards at top: "Tasks today", "Active time", "Most active category"
+- Timeline chart with accent gradient fills
+- Category breakdown chart
+- Activity feed: timestamps right, status dots left, connecting vertical line (git-log style)
+
+## Mappings Page
+
+- Subtle row separators instead of heavy borders
+- Full-row hover highlight
+- Match type uses muted pill badges
+- "Add Rule" appears as inline row at top of table
+
+## Empty States (all pages)
+
+- Large muted icon or subtle illustration
+- Helpful text with call-to-action button
+- Not just centered "No data" text
+
+## Tech Notes
+
+- Keep: React 19, Vite, Tailwind CSS 4, TanStack Query, dnd-kit, Recharts, Lucide icons
+- Add: CSS noise texture, spring animations (framer-motion or CSS springs)
+- Extract color tokens to a centralized theme config
+- Consider adding framer-motion for panel/card animations