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

# UI Plan 2 Block 06 — Backlog Summary Panel

**Goal:** Implement the right-side default Backlog summary panel from the finalized mockup.

---

## Block outcome

After this block, the default Backlog state includes a data-driven summary panel with totals, distributions, duration donut, and planning tip.

---

## Chunk 6.1 — Build summary panel structure

### Tasks

Create `BacklogSummaryPanel` under the backlog feature widgets.

Panel sections:

1. Header:
   - sparkle icon,
   - `Backlog summary`,
   - collapse chevron.
2. Totals:
   - total tasks,
   - total estimated time.
3. Priority distribution.
4. Project distribution.
5. Duration distribution.
6. Planning tip card.

### Acceptance criteria

- Panel consumes `BacklogBoardSummaryReadModel`.
- No summary value is hardcoded in the widget.
- Panel aligns to the right of the default board layout.

---

## Chunk 6.2 — Totals and distribution rows

### Tasks

Implement reusable compact distribution rows:

- icon/dot/flag at left,
- label,
- count at right.

Priority rows:

- High: red flag.
- Medium: yellow flag.
- Low: green flag.

Project rows:

- colored dot.
- project name.
- count.

### Acceptance criteria

- Distribution rows match mockup density.
- Counts come from summary read model.
- Project colors use centralized visual token mapping.

---

## Chunk 6.3 — Duration donut chart

### Tasks

Implement a small donut chart using Flutter painting, not external chart dependencies unless already present.

Segments:

- `0–30 min`
- `30–60 min`
- `60–120 min`
- `120+ min`

Behavior:

- Use read-model percentages/counts.
- Show legend at right with count and percentage.
- Handle zero-task state gracefully.

### Acceptance criteria

- Donut is visually similar to mockup.
- Widget does not crash for empty or all-zero distribution.
- Tests can find legend labels/counts.

---

## Chunk 6.4 — Planning tip card

### Tasks

Render planning tip:

- sparkle icon,
- title `Planning tip`,
- copy: `Pick 2–4 tasks for today. Keep it realistic and leave space for focus.`

The initial tip may be static in read model. Later plans can make tips dynamic.

### Acceptance criteria

- Tip card matches dark glass styling.
- Text uses calm product language.

---

## Chunk 6.5 — Collapse behavior

### Tasks

Implement chevron behavior:

- Expanded by default.
- Clicking collapse hides body sections and leaves a compact header or narrow rail if it fits the design.
- Collapsed state is UI-local only.

If collapse visual is not in mockup beyond chevron, simple body hide is enough.

### Acceptance criteria

- Collapse/expand works.
- Board widens or summary area reduces only in default summary mode; drawer overlay behavior remains unchanged.
- No persisted state change.

---

## Chunk 6.6 — Tune panel visuals

### Tasks

Tune:

- panel width,
- border opacity,
- header spacing,
- section dividers,
- row heights,
- donut size,
- planning tip background.

### Acceptance criteria

- Panel closely matches `mockups/backlog_board_default.png`.
- At mockup width, panel is fully visible and does not scroll independently unless content exceeds height.

BREAKPOINT: Stop here for visual review if donut or summary spacing substantially differs from the mockup.

---

## Block acceptance criteria

- Default Backlog screen includes summary panel.
- All panel values come from read model.
- Collapse state works.
- Search/filter changes update summary values.

## Validation after block

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