Frontend: view scenario (list + show with buckets) #53

New issue

Closed

opened 2026-06-26 00:03:55 +02:00 by myrmidex · 0 comments

myrmidex commented

2026-06-26 00:03:55 +02:00

Owner

Context

Split from #34 (too broad). First read-only content slice of the SPA: a user can see their scenarios and open one to view its buckets. All data is owner-scoped server-side (#50), so the frontend just consumes the API.

Scope (read-only — uses existing GET ops only)

Scenario list → GET /api/scenarios (Hydra collection; owner-scoped). Empty state when the user has none.
Scenario show → GET /api/scenarios/{id} — buckets are now embedded inline in the scenario response (#64), so this is a SINGLE request. No separate /api/buckets call, no client-side filtering. Render the bucket layout — port the old-app aesthetic (buckets left, connector middle, income panel right; see PLATFORM.md "UI Theme & Layout").
Bucket display: name, type, allocation, priority, the DigitalProgressBar capacity visual (PLATFORM.md "Inline Editing Components" / "UI Theme").
404 handling: a scenario you don't own returns 404 (owner scoping) — show a not-found state, not a crash.

Depends on

#33 (SPA scaffold: router, API client, auth context)
#52 (must be logged in to have a session)
#64 (buckets embedded in the scenario item representation) — DONE

Out of scope

Adding/editing buckets (separate tickets), preview (separate), streams (separate).

Testing

Per the SPA test setup from #33 (Vitest + RTL + MSW component/API-mock integration).

## Context Split from #34 (too broad). First read-only content slice of the SPA: a user can see their scenarios and open one to view its buckets. All data is owner-scoped server-side (#50), so the frontend just consumes the API. ## Scope (read-only — uses existing GET ops only) - **Scenario list** → `GET /api/scenarios` (Hydra collection; owner-scoped). Empty state when the user has none. - **Scenario show** → `GET /api/scenarios/{id}` — **buckets are now embedded inline in the scenario response (#64)**, so this is a SINGLE request. No separate `/api/buckets` call, no client-side filtering. Render the bucket layout — port the old-app aesthetic (buckets left, connector middle, income panel right; see PLATFORM.md "UI Theme & Layout"). - Bucket display: name, type, allocation, priority, the DigitalProgressBar capacity visual (PLATFORM.md "Inline Editing Components" / "UI Theme"). - 404 handling: a scenario you don't own returns 404 (owner scoping) — show a not-found state, not a crash. ## Depends on - #33 (SPA scaffold: router, API client, auth context) - #52 (must be logged in to have a session) - #64 (buckets embedded in the scenario item representation) — DONE ## Out of scope - Adding/editing buckets (separate tickets), preview (separate), streams (separate). ## Testing - Per the SPA test setup from #33 (Vitest + RTL + MSW component/API-mock integration).