Skip to content

Show task descriptions in a dropdown #4

Description

@HontoUKI

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions