# Feature: Task Management UI

## Problem Statement

The studio application has a static placeholder dashboard with no real functionality. The `data-models` feature provides backend REST APIs for Projects, Tasks, Labels, and Assignments, but there is no frontend to interact with them. Users need a task management interface in `studio-ui` to create and manage projects, organize tasks with statuses and priorities, and assign work — all through an intuitive board/list UI built on the shared design system.

## User Stories

- As a **user**, I want to see a list of my projects so I can navigate between them.
- As a **user**, I want to create, edit, and delete projects so I can organize my work.
- As a **user**, I want to see tasks within a project organized by status (todo, in_progress, done) so I can track progress.
- As a **user**, I want to create, edit, and delete tasks within a project so I can manage work items.
- As a **user**, I want to set task priority (low, medium, high) so I can focus on what matters.
- As a **user**, I want to assign and unassign people to tasks so I can distribute work.
- As a **user**, I want to create and manage labels within a project so I can categorize work.
- As a **user**, I want the UI to use the shared design system (dark theme, CSS variables) so it looks consistent.

## Acceptance Criteria

### Navigation & Routing
- [ ] React Router routes: `/projects`, `/projects/:id`, `/projects/:id/settings`
- [ ] Sidebar navigation includes "Projects" item with icon
- [ ] Breadcrumb navigation within project views

### Project List Page (`/projects`)
- [ ] Displays all projects as cards in a grid layout
- [ ] Each card shows name, description, status badge, task count
- [ ] "New Project" button opens a create dialog
- [ ] Project cards link to project detail view

### Project Detail Page (`/projects/:id`)
- [ ] Header with project name, status, and action buttons (edit, delete)
- [ ] Task board view with columns: Todo, In Progress, Done
- [ ] Each task card shows title, priority badge, assignees
- [ ] "Add Task" button opens create task dialog
- [ ] Labels section showing project labels

### CRUD Dialogs
- [ ] Create/Edit Project dialog: name (required), description (optional)
- [ ] Create/Edit Task dialog: title (required), description, priority selector, status selector
- [ ] Create Label dialog: name (required), color picker
- [ ] Delete confirmation dialogs for destructive actions

### API Integration
- [ ] Uses `@foundary-test-1770773605/api-client` for all API calls
- [ ] Proper loading states during API calls
- [ ] Error handling with user-friendly messages
- [ ] Optimistic UI updates where appropriate

### Responsive Design
- [ ] Works on desktop (1024px+) and tablet (768px+)
- [ ] Task board scrolls horizontally on smaller screens

## Dependencies

- `data-models` feature (backend APIs for Projects, Tasks, Labels, Assignments)
- `@foundary-test-1770773605/ui` (shared component library)
- `@foundary-test-1770773605/layout` (dashboard shell)
- `@foundary-test-1770773605/api-client` (typed HTTP client)
- `react-router-dom` (client-side routing)

## Out of Scope

- Drag-and-drop task reordering (future feature)
- Real-time updates via WebSockets
- Pagination or infinite scroll
- Advanced filtering/search within tasks
- Task-label association UI (backend not implemented yet)
- Authentication/login UI