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

# UI Plan 2 Block 03 — Navigation and Backlog Screen Shell

**Goal:** Add the Backlog tab route/screen shell and make the sidebar navigation render `Backlog` as active.

---

## Block outcome

After this block, the app can switch between the existing Today screen and the new Backlog screen shell. The Backlog shell matches the finalized header/control layout but may still use placeholder board content until later blocks fill it in.

---

## Chunk 3.1 — Introduce app section navigation state

### Tasks

1. Add an app-level enum/model such as `FocusFlowSection` with values:
   - `today`
   - `backlog`
   - `projects`
   - `reports`
   - `settings`
2. Move the currently hardcoded active `Today` sidebar state into `FocusFlowHome` or a small shell controller.
3. Update `Sidebar` to accept:
   - `activeSection`,
   - `onSectionSelected` callback.
4. Keep Projects/Reports/Settings visible. They may switch to placeholder empty screens or remain inert, but Today and Backlog must work.

### Acceptance criteria

- Today still renders as before when active.
- Backlog nav item can become active.
- Sidebar widget tests can verify active styling for Today and Backlog.

---

## Chunk 3.2 — Add Backlog screen controller skeleton

### Tasks

Add controller/read-state classes under app conventions, for example:

```text
apps/focus_flow_flutter/lib/controllers/backlog_board_controller.dart
apps/focus_flow_flutter/lib/models/backlog/backlog_board_screen_data.dart
```

Controller responsibilities:

- load `BacklogBoardQueryResult`,
- track loading/ready/empty/failure states,
- track selected task id for drawer,
- track search/filter/sort/group UI values,
- request detail data for selected task,
- expose reload method after commands.

Avoid canonical scheduling state in the controller.

### Acceptance criteria

- Controller can load the demo/app composition read model.
- Controller has no direct persistence dependency.
- Selection is UI-local and not persisted.

---

## Chunk 3.3 — Extend composition factory

### Tasks

Update `DemoSchedulerComposition` or the current app composition to create:

- Backlog board controller,
- Backlog command controller if needed,
- any date/context provider needed for suggestions.

Behavior:

- Use same owner/timezone/date context style as Today.
- Reuse existing in-memory application store seeded by domain objects.
- Ensure Today and Backlog share the same underlying demo store so commands can refresh both later.

### Acceptance criteria

- Backlog can load without constructing a separate unrelated fake app state.
- Existing Today seed still works.

---

## Chunk 3.4 — Build Backlog screen shell

### Tasks

Create `BacklogBoardScreen` or equivalent under a feature folder such as:

```text
apps/focus_flow_flutter/lib/widgets/backlog/backlog_board_screen.dart
```

Screen sections:

1. Header title/subtitle row.
2. Header mode/settings row.
3. Search/filter/sort/group/new-task control row.
4. Content body with board region and summary panel slot.
5. Drawer overlay slot above content.

Use mockup spacing:

- main left/top padding close to current app gutter,
- title around 32–36 px,
- dark navy/black background,
- controls height around 40–44 px,
- right summary panel around 285–300 px wide.

### Acceptance criteria

- Backlog shell visually resembles the default mockup header/control skeleton.
- Summary panel area exists but may display placeholder data until Block 6.
- Board area exists but may display placeholder columns until Block 4.
- No white Material surfaces.

---

## Chunk 3.5 — Implement loading/empty/error states

### Tasks

Use existing `ReadStateView` patterns only if they can match the mockup. Otherwise build Backlog-specific states:

- Loading: subtle centered progress or skeleton columns.
- Empty: calm empty board with new-task CTA.
- Failure: compact error panel with retry.

Do not show blame language.

### Acceptance criteria

- Controller state maps to UI states.
- Tests can render loading, empty, failure, and ready states.

BREAKPOINT: Stop here for visual review if the shell deviates from the default mockup header/sidebar layout.

---

## Block acceptance criteria

- Backlog nav is functional.
- Backlog shell renders without board details.
- Today screen remains functional and visually unchanged except sidebar now supports active state.
- App still passes Flutter analyze/test.

## Validation after block

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