Context
Tasks can already be created with an optional description. The frontend sends
description through createTask, and the API contract exposes it in the task
response.
Right now src/components/TaskPanel.tsx only renders the task title, so users
cannot read a saved description from the overlay.
API reference:
http://127.0.0.1:8000/docs#/default/create_task_api_tasks_post
Goal
Add a small dropdown/expand control for each task in
src/components/TaskPanel.tsx so users can open a task and read its
description.
Suggested approach
- Add local React state in
TaskPanel to track which task id is expanded.
- Render a compact dropdown button for every task.
- Use
aria-expanded on the dropdown button.
- When a task is expanded and
task.description exists, render it below the
task title/actions.
- If a task has no description, the expanded area can show a short empty state
such as No description.
- Reuse the prepared CSS classes:
task-title
task-dropdown-button
task-description
Acceptance criteria
- Every task row has a dropdown/expand button.
- Clicking the dropdown button toggles the description for that task.
- Description text preserves line breaks and wraps inside the overlay.
- Tasks without descriptions do not break the layout.
- Existing complete/delete behavior still works.
npm run build passes.
Files to start with
src/components/TaskPanel.tsx
src/styles.css
src/types.ts
Context
Tasks can already be created with an optional description. The frontend sends
descriptionthroughcreateTask, and the API contract exposes it in the taskresponse.
Right now
src/components/TaskPanel.tsxonly renders the task title, so userscannot read a saved description from the overlay.
API reference:
http://127.0.0.1:8000/docs#/default/create_task_api_tasks_post
Goal
Add a small dropdown/expand control for each task in
src/components/TaskPanel.tsxso users can open a task and read itsdescription.
Suggested approach
TaskPanelto track which task id is expanded.aria-expandedon the dropdown button.task.descriptionexists, render it below thetask title/actions.
such as
No description.task-titletask-dropdown-buttontask-descriptionAcceptance criteria
npm run buildpasses.Files to start with
src/components/TaskPanel.tsxsrc/styles.csssrc/types.ts