--- phase: 02-rooms-and-tasks plan: 02 subsystem: ui tags: [flutter, riverpod, go-router, reorderable-grid, material-design, localization] # Dependency graph requires: - phase: 02-rooms-and-tasks plan: 01 provides: RoomsDao with CRUD, stream queries, cascade delete, reorder; curatedRoomIcons; RoomWithStats model; appDatabaseProvider provides: - Riverpod providers (roomWithStatsList, RoomActions) wrapping RoomsDao - RoomsScreen with 2-column reorderable card grid and empty state - RoomCard with icon, name, due count badge, cleanliness progress bar - RoomFormScreen for room creation and editing with icon picker - IconPickerSheet bottom sheet with curated Material Icons - Nested GoRouter routes for rooms, room detail, edit, and tasks - 11 new German localization keys for room management affects: [02-rooms-and-tasks, 03-daily-plan] # Tech tracking tech-stack: added: [flutter_reorderable_grid_view] patterns: [riverpod-stream-provider-with-async-value-when, consumer-widget-with-provider-override-in-tests, reorderable-builder-grid, long-press-context-menu, modal-bottom-sheet-icon-picker] key-files: created: - lib/features/rooms/presentation/room_providers.dart - lib/features/rooms/presentation/room_providers.g.dart - lib/features/rooms/presentation/room_card.dart - lib/features/rooms/presentation/room_form_screen.dart - lib/features/rooms/presentation/icon_picker_sheet.dart - lib/features/tasks/presentation/task_list_screen.dart - lib/features/tasks/presentation/task_form_screen.dart modified: - lib/features/rooms/presentation/rooms_screen.dart - lib/core/router/router.dart - lib/l10n/app_de.arb - lib/l10n/app_localizations.dart - lib/l10n/app_localizations_de.dart - pubspec.yaml - test/shell/app_shell_test.dart key-decisions: - "ReorderableBuilder with onReorder callback for type-safe drag-and-drop grid reorder" - "Long-press context menu (bottom sheet) for edit/delete actions on room cards" - "Provider override in app_shell_test to decouple navigation tests from database" patterns-established: - "AsyncValue.when(data/loading/error) pattern for stream provider consumption in widgets" - "ConsumerWidget with ref.watch for reactive provider data" - "ConsumerStatefulWidget with ref.read for mutation actions in callbacks" - "Provider override pattern for widget tests needing stream providers" - "Color.lerp for cleanliness ratio color interpolation (sage green to coral)" requirements-completed: [ROOM-01, ROOM-02, ROOM-03, ROOM-04, ROOM-05] # Metrics duration: 11min completed: 2026-03-15 --- # Phase 2 Plan 02: Room UI Summary **2-column reorderable room card grid with Riverpod providers, room create/edit form with icon picker bottom sheet, delete confirmation dialog, and nested GoRouter routes** ## Performance - **Duration:** 11 min - **Started:** 2026-03-15T20:56:46Z - **Completed:** 2026-03-15T21:08:00Z - **Tasks:** 2 - **Files modified:** 14 ## Accomplishments - Riverpod providers connecting room UI to data layer with stream-based reactivity - RoomsScreen with 2-column reorderable card grid, empty state, loading/error states, and FAB - RoomCard displaying icon, name, due task count badge, and thin cleanliness progress bar with color interpolation - RoomFormScreen handling both create and edit modes with name validation and icon picker - IconPickerSheet with 25 curated Material Icons in a 5-column grid bottom sheet - Nested GoRouter routes for room CRUD and placeholder task routes - 11 new German localization keys with proper Unicode umlauts ## Task Commits Each task was committed atomically: 1. **Task 1: Create Riverpod providers, room form screen, and icon picker** - `32e61e4` (feat) 2. **Task 2: Build rooms screen with reorderable card grid and room card** - `519a56b` (feat) ## Files Created/Modified - `lib/features/rooms/presentation/room_providers.dart` - Riverpod providers (roomWithStatsList stream, RoomActions notifier) - `lib/features/rooms/presentation/room_providers.g.dart` - Generated provider code - `lib/features/rooms/presentation/room_card.dart` - Room card with icon, name, due count, cleanliness bar - `lib/features/rooms/presentation/room_form_screen.dart` - Full-screen create/edit form with name field and icon picker - `lib/features/rooms/presentation/icon_picker_sheet.dart` - Bottom sheet with curated Material Icons grid - `lib/features/rooms/presentation/rooms_screen.dart` - Replaced placeholder with ConsumerWidget reorderable grid - `lib/features/tasks/presentation/task_list_screen.dart` - Placeholder for Plan 03 - `lib/features/tasks/presentation/task_form_screen.dart` - Placeholder expanded by pre-commit hook - `lib/core/router/router.dart` - Added nested routes: /rooms/new, /rooms/:roomId, /rooms/:roomId/edit, task routes - `lib/l10n/app_de.arb` - 11 new room management keys with German umlauts - `pubspec.yaml` - Added flutter_reorderable_grid_view dependency - `test/shell/app_shell_test.dart` - Fixed with provider override for stream provider ## Decisions Made - Used ReorderableBuilder with typed onReorder callback for drag-and-drop grid reorder - Implemented long-press context menu (bottom sheet) for edit/delete actions instead of popup menu for better mobile UX - Added provider override pattern in app_shell_test to decouple navigation tests from database dependency ## Deviations from Plan ### Auto-fixed Issues **1. [Rule 1 - Bug] Fixed app_shell_test pumpAndSettle timeout** - **Found during:** Task 2 (rooms screen implementation) - **Issue:** RoomsScreen now uses ConsumerWidget with stream provider, causing CircularProgressIndicator infinite animation in tests - **Fix:** Added roomWithStatsListProvider.overrideWith returning Stream.value([]) in test ProviderScope - **Files modified:** test/shell/app_shell_test.dart - **Verification:** All 59 tests pass - **Committed in:** 519a56b (Task 2 commit) **2. [Rule 3 - Blocking] Generated missing task_providers.g.dart** - **Found during:** Task 2 (verification) - **Issue:** Pre-commit hook expanded task_form_screen.dart and task_providers.dart from Plan 01, but task_providers.g.dart was never generated due to a previous build_runner error - **Fix:** Regenerated l10n and build_runner to produce task_providers.g.dart and new ARB keys - **Files modified:** lib/features/tasks/presentation/task_providers.g.dart, lib/l10n/app_de.arb, lib/l10n/app_localizations.dart, lib/l10n/app_localizations_de.dart - **Verification:** All 59 tests pass, dart analyze clean on room presentation files - **Committed in:** 519a56b (Task 2 commit) --- **Total deviations:** 2 auto-fixed (1 bug, 1 blocking) **Impact on plan:** Both auto-fixes necessary for test correctness. No scope creep. ## Issues Encountered - Pre-commit hook expanded placeholder task_form_screen.dart and task_providers.dart with full Plan 03 implementations, requiring additional l10n and build_runner regeneration to resolve compilation errors ## User Setup Required None - no external service configuration required. ## Next Phase Readiness - Room management UI complete and connected to data layer via Riverpod providers - Task list and task form placeholder screens ready for Plan 03 implementation - Nested GoRouter routes established for task CRUD navigation - All 59 tests passing, dart analyze clean on room presentation files ## Self-Check: PASSED All 13 key files verified present. Both task commits (32e61e4, 519a56b) verified in git log. 59 tests passing. dart analyze clean on room presentation files. --- *Phase: 02-rooms-and-tasks* *Completed: 2026-03-15*