<!-- SPDX-FileCopyrightText: 2026 FocusFlow contributors -->
<!-- SPDX-License-Identifier: AGPL-3.0-only -->

# UI Plan 2 Block 07 — Right-Anchored Task Detail Drawer

**Goal:** Implement the selected-task drawer shown in the finalized drawer mockup.

---

## Block outcome

After this block, selecting a backlog card opens a right-side drawer that overlays the board without shifting any existing elements.

---

## Chunk 7.1 — Add selection and detail loading behavior

### Tasks

1. Store selected task id in `BacklogBoardController`.
2. On card click:
   - set selected task id,
   - request `BacklogTaskDetailReadModel`,
   - keep current board data unchanged.
3. If another card is selected while drawer is open, replace detail content without closing first.
4. If selected task disappears after a command/reload, close drawer and show quiet status if appropriate.

### Acceptance criteria

- Card click opens drawer.
- Selecting another card changes drawer content.
- Selection is UI-local.
- Detail query failures are rendered as drawer-local error, not full screen crash.

---

## Chunk 7.2 — Implement drawer overlay anchoring

### Tasks

Use a `Stack` at the Backlog screen body level.

Drawer layout:

```dart
Positioned(
  top: 0,
  right: 0,
  bottom: 0,
  width: drawerWidth,
  child: BacklogTaskDrawer(...),
)
```

Sizing:

- Preferred width: 460–470 px.
- Clamp to available width minus safe left minimum for small desktop windows.
- Drawer height fills content area inside app frame.

Behavior:

- Do not shift columns or summary panel.
- Do not use a heavy scrim.
- Board remains visible behind/left of drawer.
- Close icon closes drawer.
- Escape key may close drawer if easy and testable.

### Acceptance criteria

- Drawer overlays content without moving board columns.
- No layout jump occurs when drawer opens/closes.
- Drawer remains attached to right edge during window resize.

---

## Chunk 7.3 — Drawer header

### Tasks

Header content:

- bucket/status icon with accent color,
- selected task title,
- sparkle icon at right of title area if available,
- close icon button in top-right,
- subtitle/description,
- age metadata such as `Added 2h ago (Jul 3, 2024 • 6:17 AM)`.

Behavior:

- Metadata should be display-ready from read model or a UI formatter that only formats dates/times.
- Title wraps at sensible line count.

### Acceptance criteria

- `Review Q3 budget` header matches drawer mockup for seeded task.
- Close button works.

---

## Chunk 7.4 — Notes, project, and tags sections

### Tasks

Render:

1. Notes panel:
   - label `Notes`,
   - notes body.
2. Project selector:
   - label `Project`,
   - colored dot,
   - project name,
   - dropdown chevron.
3. Tags section:
   - label `Tags`,
   - tag chips,
   - add button.

Behavior:

- If update commands exist by this block, project/tags can be editable.
- If update commands are deferred to Block 8, controls should call placeholder callbacks and not mutate state.
- Do not invent Flutter-only persisted tags.

### Acceptance criteria

- Seeded `finance` and `review` chips display for `Review Q3 budget`.
- Empty notes/tags render calm empty states.
- Project and tag values come from detail read model.

---

## Chunk 7.5 — Metric tiles

### Tasks

Render three tiles:

1. Duration:
   - clock icon,
   - `60 min`,
   - `Estimated`.
2. Reward:
   - reward icon,
   - `3/5`,
   - `Satisfying` or equivalent label.
3. Difficulty:
   - difficulty icon,
   - `2/5`,
   - `Easy` or equivalent label.

Use centralized mapping helpers for reward/difficulty numeric labels.

### Acceptance criteria

- Tiles match drawer mockup density.
- Values update for different selected tasks.
- Missing values render `Not set` without throwing.

---

## Chunk 7.6 — Suggested slots section

### Tasks

Render:

- section title `Suggested slots`,
- `View day` button,
- rows with calendar icon, date label, time range, duration, fit badge, chevron.

Rows must support:

- green `Great Fit`,
- yellow/orange `Okay`,
- future/tomorrow labels.

Behavior:

- Rows may set a selected suggested slot id if slot-specific scheduling is implemented in Block 8.
- Otherwise rows are preview-only and pressing primary `Schedule` uses backend next-available command.

### Acceptance criteria

- Seeded drawer shows three suggested slot rows similar to mockup.
- Missing duration or no-fit returns a calm explanation.
- Slot rows are generated by read model/scheduler preview, not widget-only calculations.

---

## Chunk 7.7 — Drawer action buttons

### Tasks

Render action buttons:

- Primary magenta `Schedule`.
- Secondary `Break Up`.
- Full-width `Push to Someday`.
- Full-width `Remove`.

Behavior in this block:

- Buttons call callbacks supplied by parent.
- Actual commands are finalized in Block 8.
- Disable only when the read model explicitly says the action is unavailable. Do not make them look disabled because wiring is pending; instead route callbacks safely.

### Acceptance criteria

- Buttons visually match drawer mockup.
- Button presses do not throw before command wiring.
- Stable keys exist for widget tests.

---

## Chunk 7.8 — Selected card styling behind drawer

### Tasks

When selected:

- card gets magenta border/outline,
- checkbox/leading control reflects selected/focused state if visually needed,
- underlying board remains scrollable if drawer does not cover that area.

### Acceptance criteria

- `Review Q3 budget` selected card matches drawer mockup highlight.
- Closing drawer clears selected styling.

---

## Chunk 7.9 — Drawer polish and accessibility

### Tasks

Polish:

- drawer background, border, radius,
- internal section spacing,
- text sizes,
- button heights,
- hover/focus states,
- semantic labels for close and action buttons.

### Acceptance criteria

- Drawer closely matches `mockups/backlog_task_drawer.png`.
- Drawer is keyboard reachable enough for desktop tests.
- No white surfaces.

BREAKPOINT: Stop here for visual review if drawer is not right-anchored or if it shifts the board.

---

## Block acceptance criteria

- Clicking a task opens the right drawer.
- Drawer overlays without shifting layout.
- Drawer content is data-driven.
- Close behavior works.
- Selected card styling works.

## Validation after block

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