# UI Plan 1 Block 05 — Task Selection Modal

**Status:** Complete on 2026-06-30.
**Goal:** Implement the only functional interaction for this slice: clicking a task opens the selected-task modal, and clicking outside/close dismisses it.

---

## Block outcome

After this block, the app should match `mockups/clean/task_selected_modal.png` for the selected-task state.

---

## Chunk 5.1 — Add selected task state

### Tasks

1. Add selected-card state to the Today screen/controller layer.
2. Selection should store a `TimelineCardModel` or selected task id plus lookup into current data.
3. Clicking a task card sets selection.
4. Clearing selection closes the modal.
5. Do not persist selection outside the UI session.
6. Do not modify backend state when selecting.

### Acceptance criteria

- Tapping/clicking `Pay bill` sets selected task state.
- Selection is UI-local and does not call domain commands.
- Tests can open the modal by tapping a card with key `pay-bill` or equivalent.

---

## Chunk 5.2 — Build selected-task modal component

### Tasks

Create `widgets/task_selection_modal.dart`.

Inputs:

- selected task/card model,
- close callback,
- no-op callbacks for Done/Push/Move/Break up.

Modal sections:

1. Header:
   - status ring,
   - title (`Pay bill` for seed),
   - type/time line (`Required · 6:00 – 6:10 PM`),
   - close button.
2. Metadata row:
   - Reward tile with reward icon and label, e.g. `Reward level 2`.
   - Effort tile with five-bar difficulty icon and label, e.g. `Medium effort`.
3. Action grid:
   - Done.
   - Push.
   - Move to Backlog.
   - Break up.
4. Footer:
   - `Options apply after confirmation.`

### Visual requirements

- Dark glass panel.
- Pink border/accent for selected required task.
- Panel width/height close to mockup.
- Rounded corners.
- No white Material dialog surface.
- Buttons are enabled-looking and no-op.

### Acceptance criteria

- Modal can render for any seeded task, but `Pay bill` must match the mockup.
- Reward/difficulty tiles reuse the same icon widgets as timeline cards.
- No action button mutates state or calls backend commands.

---

## Chunk 5.3 — Implement overlay and click-away behavior

### Tasks

1. Render modal above timeline using `Stack`, `Overlay`, or a custom dialog route.
2. Use transparent or very light dark barrier; underlying timeline should remain visible.
3. Clicking/tapping outside the modal clears selection.
4. Clicking the close button clears selection.
5. Clicking inside the modal should not close it unless close button is used.
6. Modal buttons should not close the modal unless that is visually required later. For this slice, keep them no-op and leave modal open.

### Implementation guidance

Avoid `showDialog` default styling unless fully overridden, because default Material dialog/barrier behavior can introduce unwanted background/surface styling. A local `Stack` inside the Today screen is usually easier to control for this mockup.

### Acceptance criteria

- Outside-click closes modal.
- Close icon closes modal.
- Modal action buttons do nothing and keep app stable.
- No accidental route/navigation stack complexity.

---

## Chunk 5.4 — Polish modal against clean mockup

### Tasks

Compare against `mockups/clean/task_selected_modal.png` and tune:

- modal width and position,
- header height,
- close button size,
- metadata tile spacing,
- action button height,
- text weights,
- border opacity,
- barrier/scrim opacity.

### Acceptance criteria

- Modal is centered over the timeline similarly to the mockup.
- Underlying timeline is visible and recognizable.
- Pay bill card remains visible behind/under modal region as in mockup.
- No white surfaces appear.

BREAKPOINT: Stop here for visual review if modal diverges substantially from the clean modal mockup.

---

## Chunk 5.5 — Add widget tests for modal behavior

### Tests

Add tests that verify:

1. Initial render shows no modal.
2. Tapping `Pay bill` opens modal.
3. Modal shows:
   - `Pay bill`,
   - `Required`,
   - `Reward level`,
   - `Medium effort`,
   - `Done`,
   - `Push`,
   - `Move to Backlog`,
   - `Break up`.
4. Tapping close hides modal.
5. Reopening and tapping outside hides modal.
6. Tapping modal action buttons does not throw and does not remove seeded task labels.

### Acceptance criteria

- Tests are stable under Flutter test.
- Tests do not require golden rendering.
- Tests do not require actual backend mutations.

---

## Block acceptance criteria

- Selected-task modal matches clean mockup closely.
- Opening/closing behavior works.
- Modal actions are inert but enabled-looking.
- No backend/domain state changes occur from modal interactions.
- Tests cover open/close and no-op actions.

## Validation after block

```sh
cd apps/focus_flow_flutter
flutter analyze
flutter test
```

---

## Completed implementation

1. Added UI-local selected card state to `TodayScreenController`.
2. Implemented centered selected-task modal with header, metadata tiles, four
   no-op action buttons, close button, and footer copy.
3. Added click-away and close-button dismissal.
4. Kept modal action buttons enabled-looking and inert.

## Verification

1. `flutter analyze`: passed, no issues found.
2. `flutter test`: passed, including modal open, close, outside-click, and
   no-op action behavior.
