---
phase: 07-task-sorting
plan: 02
subsystem: ui
tags: [flutter, riverpod, material3, popup-menu, sort-ui, localization]

# Dependency graph
requires:
  - phase: 07-task-sorting
    plan: 01
    provides: sortPreferenceProvider, TaskSortOption enum, German sort l10n strings

provides:
  - SortDropdown ConsumerWidget (PopupMenuButton<TaskSortOption> with check marks)
  - HomeScreen with AppBar (title: Übersicht, actions: SortDropdown)
  - TaskListScreen AppBar with SortDropdown before edit/delete buttons

affects: [home_screen_test.dart, app_shell_test.dart, any screen showing HomeScreen]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "PopupMenuButton<TaskSortOption> with Opacity check mark — avoids layout shift vs conditional Icon"
    - "Nested Scaffold inside AppShell tab body — standard pattern for per-tab AppBars in StatefulShellRoute"

key-files:
  created:
    - lib/features/tasks/presentation/sort_dropdown.dart
  modified:
    - lib/features/home/presentation/home_screen.dart
    - lib/features/tasks/presentation/task_list_screen.dart
    - test/features/home/presentation/home_screen_test.dart
    - test/shell/app_shell_test.dart

key-decisions:
  - "Used PopupMenuButton instead of DropdownButton for AppBar — menu overlay vs inline expansion, consistent with Material 3 AppBar action patterns"
  - "Opacity(opacity: isSelected ? 1 : 0) for check mark — preserves item width alignment vs conditional show/hide"
  - "HomeScreen Scaffold is nested inside AppShell Scaffold — standard StatefulShellRoute pattern for per-tab AppBars"

# Metrics
duration: 4min
completed: 2026-03-16
---

# Phase 07 Plan 02: Sort Dropdown UI Summary

**SortDropdown ConsumerWidget using PopupMenuButton wired into HomeScreen AppBar (title: Übersicht) and TaskListScreen AppBar before edit/delete actions**

## Performance

- **Duration:** 4 min
- **Started:** 2026-03-16T21:35:56Z
- **Completed:** 2026-03-16T21:39:24Z
- **Tasks:** 2
- **Files modified:** 5 (1 created, 4 modified)

## Accomplishments

- SortDropdown ConsumerWidget: PopupMenuButton<TaskSortOption> with sort icon, current label, and check mark on active option
- HomeScreen wrapped in Scaffold with AppBar titled "Übersicht" and SortDropdown in trailing actions
- TaskListScreen AppBar has SortDropdown before the existing edit/delete IconButtons
- 2 new tests in HomeScreen test suite: verifies PopupMenuButton and AppBar title presence
- Auto-fixed app_shell_test regression caused by "Übersicht" now appearing twice (AppBar + bottom nav)

## Task Commits

Each task was committed atomically:

1. **Task 1: SortDropdown widget and HomeScreen/TaskListScreen integration** - `e5eccb7` (feat)
2. **Task 2: Sort dropdown tests and AppShell test fix** - `a3e4d02` (feat)

## Files Created/Modified

- `lib/features/tasks/presentation/sort_dropdown.dart` - Reusable SortDropdown ConsumerWidget with PopupMenuButton<TaskSortOption>
- `lib/features/home/presentation/home_screen.dart` - Added Scaffold with AppBar (Übersicht title + SortDropdown)
- `lib/features/tasks/presentation/task_list_screen.dart` - Added SortDropdown before edit/delete in AppBar actions
- `test/features/home/presentation/home_screen_test.dart` - Added sortPreferenceProvider override + 2 new sort dropdown tests
- `test/shell/app_shell_test.dart` - Fixed findsOneWidget -> findsWidgets for 'Übersicht' (now in AppBar + bottom nav)

## Decisions Made

- Used PopupMenuButton instead of DropdownButton for AppBar actions — menu overlay is cleaner in AppBar context (Material 3)
- Opacity trick for check mark: `Opacity(opacity: isSelected ? 1 : 0)` preserves item width so labels align regardless of selection
- HomeScreen uses nested Scaffold for AppBar — standard pattern in StatefulShellRoute.indexedStack; AppShell provides bottom nav, HomeScreen provides AppBar

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] Fixed AppShell test regression from 'Übersicht' duplicate**
- **Found during:** Task 2 test run
- **Issue:** `app_shell_test.dart` expected `findsOneWidget` for 'Übersicht'. Adding the HomeScreen AppBar title caused the string to appear twice (AppBar + bottom nav label).
- **Fix:** Changed `findsOneWidget` to `findsWidgets` in `app_shell_test.dart` line 67. Applied same fix to new `home_screen_test.dart` AppBar title test.
- **Files modified:** `test/shell/app_shell_test.dart`, `test/features/home/presentation/home_screen_test.dart`
- **Commit:** `a3e4d02`

## Issues Encountered

None beyond the auto-fixed regression.

## User Setup Required

None - no external service configuration required.

## Next Phase Readiness

- Phase 07 (task sorting) is now complete: data layer (07-01) + UI layer (07-02)
- Sort dropdown is live in both HomeScreen and TaskListScreen AppBars
- Selecting a sort option reactively reorders task lists via sortPreferenceProvider
- Preference persists across app restarts via SharedPreferences

---
*Phase: 07-task-sorting*
*Completed: 2026-03-16*

## Self-Check: PASSED

- FOUND: lib/features/tasks/presentation/sort_dropdown.dart
- FOUND: lib/features/home/presentation/home_screen.dart (modified)
- FOUND: lib/features/tasks/presentation/task_list_screen.dart (modified)
- FOUND: test/features/home/presentation/home_screen_test.dart (modified)
- FOUND: test/shell/app_shell_test.dart (modified)
- Commits e5eccb7, a3e4d02 verified in git log
- All 115 tests pass, dart analyze clean