# 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