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

TaskTracker Web UI Redesign

Date: 2026-02-26 Status: Approved

Overview

Ground-up redesign of the TaskTracker web UI. Replace the current vanilla JS SPA in wwwroot/ with a React-based Kanban board application in a separate TaskTracker.Web project.

Tech Stack

• Framework: React 19, TypeScript
• Build: Vite
• Styling: Tailwind CSS
• Drag-and-drop: @dnd-kit/core + @dnd-kit/sortable
• Data fetching: @tanstack/react-query
• Routing: react-router-dom
• Charts: Recharts
• HTTP: Axios
• Icons: lucide-react
• Font: Inter

Dev server on port 5173, proxies /api to localhost:5200.

Project Structure

TaskTracker.Web/
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── api/
│   │   ├── client.ts          # Axios wrapper → localhost:5200
│   │   ├── tasks.ts           # useTasksQuery, useStartTask, etc.
│   │   ├── context.ts         # useContextSummary, useRecentEvents
│   │   └── mappings.ts        # useMappings, useCreateMapping
│   ├── components/
│   │   ├── Layout.tsx          # Sidebar + top bar + content area
│   │   ├── KanbanBoard.tsx
│   │   ├── KanbanColumn.tsx
│   │   ├── TaskCard.tsx
│   │   ├── TaskModal.tsx
│   │   ├── SearchBar.tsx
│   │   └── ...
│   ├── pages/
│   │   ├── Board.tsx           # Kanban board (main view)
│   │   ├── Analytics.tsx       # Context tracking visualizations
│   │   ├── Mappings.tsx        # App-to-category mapping management
│   │   └── Settings.tsx        # (future)
│   ├── types/                  # TypeScript types matching API DTOs
│   └── lib/                    # Utilities, constants, theme tokens
└── public/

Pages & Features

Kanban Board (main page)

Four columns: Pending, Active, Paused, Completed.

Drag-and-drop behavior:

• Pending → Active: calls PUT /tasks/{id}/start (auto-pauses any active task)
• Active → Paused: calls PUT /tasks/{id}/pause
• Paused → Active: calls PUT /tasks/{id}/resume
• Any → Completed: calls PUT /tasks/{id}/complete
• Dragging to Pending from other columns is blocked
• Optimistic updates via TanStack Query; rolls back on API error

Task card displays:

• Title
• Category badge (color-coded)
• Elapsed time (live-updating for active task)
• Progress bar (actual vs estimated time, if estimate set)
• Subtask count indicator (e.g., "2/4 subtasks done")
• Active task gets a pulsing cyan accent border

"+ Add Task" button in Pending column opens quick-create form.

Card click opens the Task Detail Panel.

Filter bar below board header:

• Category filter chips
• Date range picker
• "Has subtasks" toggle
• Filters are additive (AND), shown as dismissible chips

Task Detail Panel

Slide-over panel from the right (~400px), board visible behind (dimmed).

Sections:

• Header: Title (inline editable), status, category dropdown
• Description: Inline editable text area
• Time: Elapsed display, estimate input field, progress bar (actual/estimated)
• Subtasks: Checklist of child tasks. Check to complete, "+" to add new subtask (creates child task via API)
• Notes: Chronological list with type badges (Pause, Resume, General). "+" for inline add
• Actions: Context-aware buttons (Start/Pause/Resume/Complete/Abandon)

Close with Escape or click outside.

Analytics Page

Three visualization sections, filterable by time range and task.

Filters (top bar):

• Time range: Today, Last 7 days, Last 30 days, Custom
• Task filter: All Tasks or specific task

Timeline:

• Horizontal swim lane showing app usage blocks, color-coded by category
• Task lifecycle markers (started/paused/resumed/completed) as annotations
• Hover shows app name, window title, duration

Category Breakdown:

• Donut chart + horizontal bar list with time and percentage per category
• Colors match category badges

Activity Feed:

• Reverse-chronological log of context events
• Each row: colored dot, timestamp, app name, window title/URL
• Task lifecycle events interleaved
• Paginated with "Load more"

Mappings Page

CRUD table for app-to-category rules.

• Columns: Pattern, Match Type, Category (color badge), Friendly Name, Edit/Delete actions
• "+ Add Rule" opens inline form row at top
• Inline editing on existing rows

Search

Global search bar in top bar, always visible.

• Client-side search over task titles and descriptions
• Results as dropdown below search bar
• Keyboard navigable (arrows, Enter, Escape)

New Features (require API changes)

• Time estimates: New field on WorkTask entity for estimated duration. Progress bar = elapsed / estimated.
• Subtask progress rollup: Parent task cards show child completion count (may be client-side calculation from existing data).

Visual Design

Palette:

• Background: #0f1117 (deep charcoal)
• Surface/cards: #1a1d27
• Accent primary: #6366f1 (electric indigo)
• Accent secondary: #06b6d4 (vivid cyan)
• Success: #10b981 (emerald)
• Warning: #f59e0b (amber)
• Danger: #f43f5e (rose)
• Per-category saturated colors: dev=indigo, research=cyan, comms=violet, devops=orange

Typography:

• Font: Inter
• Body: 13px / Medium (500)
• Labels: 11px
• Headings: 18px / Semibold (600)

Visual details:

• Subtle gradient on sidebar
• Colored left border on task cards (category color)
• Active task: soft glowing cyan border animation
• Column headers: subtle colored underline per status
• Smooth transitions on drag, hover, panel open/close
• Colored-tint shadows for depth

Layout:

• Sidebar: ~60px collapsed, ~200px expanded, icon + label nav
• Top bar: search, minimal
• Board: full remaining width, columns flex evenly
• Detail panel: ~400px, slides from right, overlays board

API Endpoints Used

Endpoint	Used By
GET /api/tasks	Board, Search
GET /api/tasks/active	Board (active indicator)
GET /api/tasks/{id}	Detail panel
POST /api/tasks	New task, new subtask
PUT /api/tasks/{id}/start	Drag to Active
PUT /api/tasks/{id}/pause	Drag to Paused
PUT /api/tasks/{id}/resume	Drag to Active from Paused
PUT /api/tasks/{id}/complete	Drag to Completed, subtask checkbox
DELETE /api/tasks/{id}	Abandon button
GET /api/tasks/{taskId}/notes	Detail panel notes
POST /api/tasks/{taskId}/notes	Add note
GET /api/context/summary	Analytics category breakdown
GET /api/context/recent	Analytics timeline + feed
GET /api/mappings	Mappings page, category colors
POST /api/mappings	Add mapping
PUT /api/mappings/{id}	Edit mapping
DELETE /api/mappings/{id}	Delete mapping