Create reusable TaskItem Composable with completed state #128

Description

Issue #125 introduces the Today screen with a list of tasks. To keep the work focused and reusable, the task row component needs its own implementation ticket. This component will be shared across the Today and Upcoming screens.

This ticket also covers the completed state of the component, which was out of scope in #125. When a task is marked as completed, the row must visually reflect that state (e.g. checked checkbox, faded/strikethrough title) without implementing the interaction logic that toggles completion.

• Scope and constraints

  • The component must support both light and dark themes using the existing Material 3 FoliaryTheme.
  • All visible text must come from strings.xml string resources.
  • The component should be preview-friendly and tested with Compose UI tests.

• References

  • Today screen: display tasks #125

Scope

In scope: TaskItem Composable, task title display, description capped at 3 lines with ellipsis, checkbox on the start side, overdue pill that appears red when the due date is in the past, completed state visuals (checked checkbox, distinct title styling), string resources for any new visible text, Compose UI tests.

Out of scope: mark-as-done interaction logic (separate ticket), task detail navigation, swipe actions, inline quick-add, Upcoming screen integration, and loading/empty states.

Acceptance criteria

• A TaskItem composable exists in a shared UI components package and renders a task with title, description, checkbox, and optional overdue pill.
• GIVEN a task with a description
  WHEN the TaskItem is rendered
  THEN the description is capped at a maximum of 3 lines with an ellipsis overflow.
• GIVEN a task with a due date in the past and not completed
  WHEN the TaskItem is rendered
  THEN a red overdue pill is shown at the bottom of the row.
• GIVEN a task with a due date today or in the future and not completed
  WHEN the TaskItem is rendered
  THEN the overdue pill is not shown or is not red.
• GIVEN a task that is completed
  WHEN the TaskItem is rendered
  THEN the checkbox is shown in a checked state and the title has a clear visual distinction (e.g. strikethrough or reduced opacity).
• GIVEN user-visible text inside the TaskItem
  WHEN the app renders the component
  THEN all text comes from string resources.
• The TaskItem is covered by Compose UI tests verifying the rendering of title, description truncation, overdue pill, and completed state.