teal-todo

As a frontend developer, implement the TaskListFilters section for the TaskList page. This section uses useState for activeFilter (default 'all') and query (default '') state. It renders a FILTERS array with three entries (all/12, active/7, completed/5) as accessible role='tablist' tab buttons with aria-selected. The active tab renders a framer-motion motion.span with layoutId='tf-active-pill' and spring transition (stiffness 420, damping 32) for a sliding pill animation. A search input uses lucide-react Search icon (size 17, strokeWidth 2.2) and conditionally renders a clear button with X icon (size 15) when query is non-empty. A tf-meta row displays ListChecks icon and the current filter label and count derived from the active FILTERS entry. Sections TaskListHeader, TaskListFilters, TaskListGrid, and TaskListEmpty are independent content sections and can be built in parallel; this section depends only on TaskListHeader for shared page scaffolding.

As a frontend developer, implement the TaskListGrid section for the TaskList page. This section uses @react-three/fiber Canvas with a StatusOrb component (IcosahedronGeometry args [1.1, 0], MeshStandardMaterial with flatShading) animated via useFrame (rotation.x += delta*0.5, rotation.y += delta*(active?0.9:0.4)) wrapped in a TaskOrb Canvas (camera position [0,0,3], fov 45, dpr [1,2]) with ambientLight (0.7), directionalLight ([2,3,4], 1.1), and pointLight. STATE_COLOR map defines teal/orange/amber per status. useState manages INITIAL_TASKS array of 6 task objects with id, title, desc, status, and due fields. toggleComplete handler flips status between 'done' and 'active'. Task cards use framer-motion AnimatePresence and motion.div with layout prop for animated list transitions. Each card renders Check, Pencil, Trash2, and CalendarDays lucide icons (from lucide-react) for actions. STATUS_LABEL maps active/progress/done to display strings. This section depends on TaskListHeader for page scaffolding but is parallel to TaskListFilters and TaskListEmpty.

As a frontend developer, implement the TaskListEmpty section for the TaskList page. This section uses @react-three/fiber Canvas (camera position [0,0,5.2], fov 42, dpr [1,2]) with a FloatingClipboard group component animated via useFrame: groupRef rotation.y = Math.sin(t*0.5)*0.45, rotation.x = Math.sin(t*0.7)*0.12, position.y = Math.sin(t*1.1)*0.18. The clipboard is built from boxGeometry meshes: board (1.7×2.2×0.12, color #00796b), paper (1.45×1.85×0.06, white), clip (0.55×0.3×0.18, color #FF7043), three checkbox rows using useMemo for positions ([-0.35, 0.45], [-0.35, 0.05], [-0.35, -0.35]) each with a teal checkbox box and grey line bar, plus two accent spheres (amber at [1.15,1.0,0.5] r=0.22, orange at [-1.1,-0.85,0.4] r=0.16). The outer tle-card and tle-illustration use framer-motion whileInView animations (opacity/y and opacity/scale) with viewport once:true amount:0.3. This is the empty state UI shown when no tasks exist. Depends on TaskListHeader for page scaffolding; parallel to TaskListFilters and TaskListGrid.

As a frontend developer, implement the TaskDetailHeader section for the TaskDetail page. Build the `TaskDetailHeader` component using `tdh-root`/`tdh-inner` layout structure. Render a back-navigation anchor linking to `/TaskList` with a chevron SVG icon. Display the task title in an `<h1 className='tdh-title'>` element. Implement status badge with `tdh-status--{status}` dynamic class and an animated `tdh-status-dot` span, toggling between 'Completed' and 'Pending' based on `isCompleted` boolean derived from `task.status`. Render priority badge with `tdh-priority--{priority}` class using the `priorityConfig` lookup object (high/medium/low) that maps to label and icon (▲/■/▼). Implement `tdh-meta` row with two meta items — 'Created' and 'Due' dates — each with a respective calendar/clock SVG icon, `tdh-meta-label`, and `tdh-meta-value` spans. Wire up sample task data (`sampleTask` object) with title, status, priority, created, due fields. Note: check if a shared Navbar/header component exists from the TaskList page before creating a new one.

As a frontend developer, implement the TaskDetailContent section for the TaskDetail page. Build the `TaskDetailContent` component using `framer-motion` (`motion`, `AnimatePresence`) and `lucide-react` icons (`Check`, `Paperclip`, `Download`, `FileText`, `Image`, `File`, `ChevronDown`, `X`, `Tag`, `Folder`, `StickyNote`, `ListChecks`). Manage state via `useState` for `subtasks`, `tags`, `category`, and `notes`. Implement `toggleSubtask(id)` to toggle individual subtask `done` boolean using immutable map, and `removeTag(id)` to filter out a tag by ID. Compute `doneCount`, `totalCount`, and `progressPct` for a progress bar. Render animated cards using `cardVariants` (`hidden`/`visible` with staggered `delay: i * 0.08` and cubic-bezier easing `[0.22, 0.61, 0.36, 1]`). Build cards for: Description block, Subtasks list with checkbox-style toggling (`tdc-subtask--done` class), Tags with removable `X` buttons, Category dropdown with `ChevronDown`, Attachments list using `attachmentIconMap` (pdf/doc/img) with `FileText`/`File`/`Image` icons and Download buttons, and Notes textarea bound to `notes` state. Use `SAMPLE_TASK` object for initial data (description, subtasks array, tags with color variants, categories array, attachments with name/type/size, notes string).

As a frontend developer, implement the TaskDetailActions section for the TaskDetail page. Build the `TaskDetailActions` component using `framer-motion` (`motion`, `AnimatePresence`) and `lucide-react` icons (`Pencil`, `CheckCircle2`, `Circle`, `Trash2`, `Share2`, `Download`, `FileJson`, `FileText`, `ChevronDown`). Note: `three` (`* as THREE`) is imported but used only as a dependency reference — no active 3D rendering. Manage three state hooks: `completed` (boolean), `exportOpen` (boolean), `shareFeedback` (boolean with auto-reset via `setTimeout` after 1800ms). Implement `handleShare()` to set `shareFeedback` true then reset. Implement `handleExport(format)` to close export menu and stub export logic. Define spring animation config (`stiffness: 420, damping: 22, mass: 0.8`). Render Edit Task button with `whileHover` scale 1.03 and `whileTap` scale 0.96. Render Mark Complete button with dynamic `tda-btn-complete--done` class, toggling `completed` on click, with `motion.span` icon using `completeIconVariants` (incomplete→complete with `scale: [1,1.3,1]` and `rotate: [0,15,0]` over 0.45s) switching between `CheckCircle2` and `Circle`. Render Share button showing `feedbackVariants`-animated confirmation via `AnimatePresence`. Render Export dropdown button toggling `exportOpen`, with `AnimatePresence`-controlled menu using `exportMenuVariants` (spring stiffness 380, damping 26) listing JSON/PDF export options. Render Delete button with `Trash2` icon.

As a Backend Developer, implement the FastAPI REST API for task management. Create endpoints: POST /tasks (create task with title, description, status, priority, due date), GET /tasks (list all tasks with optional status filter query param), GET /tasks/{id} (get single task detail), PUT /tasks/{id} (update task fields), DELETE /tasks/{id} (delete task), PATCH /tasks/{id}/complete (toggle completion status). Return appropriate HTTP status codes and Pydantic response models. This API supports the TaskList and TaskDetail frontend pages.

As a Frontend Developer, create a shared API client/service layer for communicating with the FastAPI backend. Use fetch or axios to implement typed service functions: createTask(data), fetchTasks(filter?), fetchTaskById(id), updateTask(id, data), deleteTask(id), toggleTaskComplete(id). Configure base URL from environment variable (REACT_APP_API_URL). Handle loading states, error responses, and JSON parsing. Export a centralized tasks API module for use across TaskList and TaskDetail pages. Note: depends on tmp_backend_tasks_api being available for integration.

As a Tech Lead, verify the end-to-end integration between the TaskList frontend implementation and the Tasks backend API. Ensure the TaskListGrid fetches real tasks from GET /tasks, task creation posts to POST /tasks, toggleComplete calls PATCH /tasks/{id}/complete, delete calls DELETE /tasks/{id}, and TaskListFilters passes status query param to GET /tasks?status=. Confirm API responses are correctly mapped to UI state, loading/error states are handled gracefully, and the empty state (TaskListEmpty) shows when no tasks are returned. Note: frontend section tasks 287a496f, 472b96a6, 62ac8431, 9c009f35 should depend on tmp_api_client_setup.

As a Tech Lead, verify the end-to-end integration between the TaskDetail frontend implementation and the Tasks backend API. Ensure TaskDetailHeader fetches task data via GET /tasks/{id} using the route param, TaskDetailContent loads and saves subtasks, tags, category, and notes via PUT /tasks/{id}, and TaskDetailActions correctly calls PATCH /tasks/{id}/complete for mark-complete, DELETE /tasks/{id} for delete, and redirects back to TaskList after deletion. Confirm all form states are hydrated from API response and persisted correctly.