feat(frontend): Implement Task management components - Sprint 4 Story 2

Add complete Task CRUD UI for Story detail page with inline creation,
status toggling, filtering, and sorting capabilities.

Changes:
- Created TaskList component with filters, sorting, and progress bar
- Created TaskCard component with checkbox status toggle and metadata
- Created TaskQuickAdd component for inline Task creation
- Added shadcn/ui checkbox and alert components
- All components use existing Task hooks (useTasks, useCreateTask, etc.)

Components:
- components/tasks/task-list.tsx (150 lines)
- components/tasks/task-card.tsx (160 lines)
- components/tasks/task-quick-add.tsx (180 lines)
- components/ui/checkbox.tsx (shadcn/ui)
- components/ui/alert.tsx (shadcn/ui)

Features:
- Task list with real-time count and progress bar
- Filter by: All, Active, Completed
- Sort by: Recent, Alphabetical, Status
- Checkbox toggle for instant status change (optimistic UI)
- Inline Quick Add form for fast Task creation
- Priority badges and metadata display
- Loading states and error handling
- Empty state messaging

Sprint 4 Story 2: Task Management in Story Detail
Task 3: Implement TaskList, TaskCard, TaskQuickAdd components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-05 22:35:38 +01:00
parent f7a17a3d1a
commit 8fe6d64e2e
7 changed files with 625 additions and 0 deletions

31
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"@microsoft/signalr": "^9.0.6",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-avatar": "^1.1.11",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.7",
@@ -1490,6 +1491,36 @@
}
}
},
"node_modules/@radix-ui/react-checkbox": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
"integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2",
"@radix-ui/react-use-previous": "1.1.1",
"@radix-ui/react-use-size": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collection": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",