Upcoming screen: pill-shaped filter dropdowns #139

Description

Add pill-shaped filter dropdowns to the top of the Upcoming screen that allow users to filter the task list by completion status. The available filters are: All, Unfinished, and Completed.

The default selected filter is "Unfinished". Selecting a filter updates the task list immediately. Only one filter can be active at a time. The currently selected filter is visually highlighted.

When "Unfinished" is selected, only tasks that are not completed are shown. When "Completed" is selected, only tasks that are completed are shown. When "All" is selected, all tasks are shown regardless of completion status.

This ticket also includes updating the existing Upcoming screen designs to incorporate the pill-shaped filter component.

Depends on #138 (Upcoming screen: day-grouped task list).

Scope

In scope: pill-shaped filter dropdown UI components (All, Unfinished, Completed), updated designs for the Upcoming screen including the filter component, filter logic in UpcomingViewModel, updating the displayed task list based on the selected filter, and string resources.

Out of scope: sort options (separate tickets #17, #18), inline quick-add (separate ticket #20).

Acceptance criteria

• GIVEN the pill-shaped filter component has been designed
  WHEN the designs are reviewed
  THEN the Upcoming screen designs include the filter dropdowns positioned at the top of the screen
• GIVEN the user is on the Upcoming screen
  WHEN the screen renders
  THEN pill-shaped filter dropdowns are shown at the top with options: All, Unfinished, Completed
• GIVEN the filter dropdowns are displayed
  WHEN the screen first loads
  THEN "Unfinished" is selected by default and highlighted
• GIVEN the user taps a different filter
  WHEN the selection occurs
  THEN that filter becomes highlighted and the previous filter is deselected
• GIVEN the "All" filter is selected
  WHEN the task list renders
  THEN all tasks are shown regardless of completion status
• GIVEN the "Unfinished" filter is selected
  WHEN the task list renders
  THEN only tasks that are not completed are shown
• GIVEN the "Completed" filter is selected
  WHEN the task list renders
  THEN only tasks that are completed are shown
• GIVEN a filter is changed
  WHEN the task list updates
  THEN the day groups still respect the filter (empty groups are hidden)
• GIVEN user-visible text appears in the filter dropdowns
  WHEN the app renders them
  THEN all visible text comes from string resources