AJ Isaacs
87efedbc33
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>
115 lines
4.0 KiB
Markdown
115 lines
4.0 KiB
Markdown
# 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
|