timothy/ersatztv
1
0
Fork 0
Code Issues 57 Pull Requests 6 Actions Packages Projects Releases 9 Wiki Activity

ChicoryTV SPA: app shell (sidebar + top bar + routing) #82

New Issue
Closed
opened 2026-07-02 01:07:18 +02:00 by timothy · 2 comments
timothy commented 2026-07-02 01:07:18 +02:00
Owner
Copy Link
Copy Source

Build the admin shell from design-system/templates/chicorytv-admin/Shell.jsx.

Do

  • 232px left sidebar: nav + health section; active item = accent rail + soft tint.
  • 52px top bar: search, Connect menu, and the top-right primary action slot present on every screen.
  • Client-side routing with the screen slots; theme switcher mounted.

Acceptance: shell matches the prototype across 3 themes; navigation between (placeholder) screens works. See docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md + shell prototype.

Build the admin shell from `design-system/templates/chicorytv-admin/Shell.jsx`. **Do** - 232px left sidebar: nav + health section; active item = accent rail + soft tint. - 52px top bar: search, Connect menu, and the top-right primary action slot present on every screen. - Client-side routing with the screen slots; theme switcher mounted. **Acceptance:** shell matches the prototype across 3 themes; navigation between (placeholder) screens works. See `docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md` + shell prototype.
timothy added the frontend label 2026-07-02 01:07:18 +02:00
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#80 ChicoryTV SPA: component library (primitives)
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#81 ChicoryTV SPA: typed API client + auth
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#83 ChicoryTV SPA: Dashboard screen
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#84 ChicoryTV SPA: Channels screen
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#85 ChicoryTV SPA: Guide / EPG screen
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#86 ChicoryTV SPA: Schedule editor screen
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#87 ChicoryTV SPA: Playouts screen
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#88 ChicoryTV SPA: Libraries screen
timothy added a new dependency 2026-07-02 01:08:42 +02:00
#89 ChicoryTV SPA: Channel Builder (primary deliverable)
timothy added a new dependency 2026-07-02 01:08:43 +02:00
#93 ChicoryTV SPA: Settings screen (prototype → implement)
timothy added this to the Design system (Claude Design ↔ prod) milestone 2026-07-02 01:08:44 +02:00
timothy commented 2026-07-02 18:11:55 +02:00
Author
Owner
Copy Link
Copy Source

Handoff — ready to pick up (unblocked)

Foundation is complete and merged on docs/59-ui-redesign-brief: #78 scaffold, #79 themes, #80 components, #81 API client — all closed. This issue's blockers are cleared.

Current tree

  • SPA lives in web/ (Vite + React + TS; scripts: dev/build/lint/test).
  • Components ported: web/src/components/{forms,dataDisplay,feedback,navigation}.tsx (+ components.css), re-exported from web/src/components/index.ts.
  • Tokens/themes wired via web/src/designSystem.ts; a web/src/shell.css stub already exists — extend it, don't recreate.
  • API client + auth in web/src/api/* (typed from web/src/api/generated/v1.d.ts); example query useChannelsQuery.ts.
  • Entry: web/src/App.tsx, web/src/main.tsx.

Build

  • Recreate the admin shell from the prototype design-system/templates/chicorytv-admin/Shell.jsx (visual match; use the ported primitives, not the prototype's internals).
  • 232px left sidebar (nav + health, active item = accent rail + soft tint); 52px top bar (search, Connect menu, top-right primary-action slot); mount the 3-theme switcher.
  • Add client-side routing (screen slots as placeholders for #83–#89, #93).

Acceptance: shell matches prototype across all 3 themes; nav between placeholder screens works; web build + tests green in CI.

After this + #92, the Design-sync workflow ready milestone is met.

### Handoff — ready to pick up (unblocked) Foundation is complete and merged on `docs/59-ui-redesign-brief`: #78 scaffold, #79 themes, #80 components, #81 API client — all closed. This issue's blockers are cleared. **Current tree** - SPA lives in `web/` (Vite + React + TS; scripts: `dev`/`build`/`lint`/`test`). - Components ported: `web/src/components/{forms,dataDisplay,feedback,navigation}.tsx` (+ `components.css`), re-exported from `web/src/components/index.ts`. - Tokens/themes wired via `web/src/designSystem.ts`; a `web/src/shell.css` **stub already exists** — extend it, don't recreate. - API client + auth in `web/src/api/*` (typed from `web/src/api/generated/v1.d.ts`); example query `useChannelsQuery.ts`. - Entry: `web/src/App.tsx`, `web/src/main.tsx`. **Build** - Recreate the admin shell from the prototype `design-system/templates/chicorytv-admin/Shell.jsx` (visual match; use the ported primitives, not the prototype's internals). - 232px left sidebar (nav + health, active item = accent rail + soft tint); 52px top bar (search, Connect menu, top-right primary-action slot); mount the 3-theme switcher. - Add client-side routing (screen slots as placeholders for #83–#89, #93). **Acceptance:** shell matches prototype across all 3 themes; nav between placeholder screens works; `web` build + tests green in CI. **After this + #92**, the *Design-sync workflow ready* milestone is met.
timothy commented 2026-07-02 18:22:19 +02:00
Author
Owner
Copy Link
Copy Source

Done

What was done: Built the ChicoryTV React admin shell from the prototype: 232px sidebar with grouped nav and health footer, 52px top bar with search, Connect menu, top-right primary action slot, mounted 3-theme switcher, and client-side routing across placeholder screen slots for Dashboard, Channels, New Channel, Guide, Schedules, Playouts, Collections, Libraries, and Settings. Added shell/routing/Connect tests and an implementation plan document.

Root cause: n/a

Files changed: web/src/App.tsx, web/src/shell.css, web/src/App.test.tsx, docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md

Verification: npm test -- --run src/App.test.tsx (14 passed); npm test -- --run (20 passed); npm run lint (clean); npm run build (TypeScript + Vite build succeeded); git diff --check (clean).

Deferred: Screen-specific implementations remain for downstream issues #83-#89/#93.

Follow-up issues: Existing downstream screen issues.

Docs updated: Added docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md.

Commit: 5fb3bb2e pushed to docs/59-ui-redesign-brief.

## Done **What was done**: Built the ChicoryTV React admin shell from the prototype: 232px sidebar with grouped nav and health footer, 52px top bar with search, Connect menu, top-right primary action slot, mounted 3-theme switcher, and client-side routing across placeholder screen slots for Dashboard, Channels, New Channel, Guide, Schedules, Playouts, Collections, Libraries, and Settings. Added shell/routing/Connect tests and an implementation plan document. **Root cause**: n/a **Files changed**: `web/src/App.tsx`, `web/src/shell.css`, `web/src/App.test.tsx`, `docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md` **Verification**: `npm test -- --run src/App.test.tsx` (14 passed); `npm test -- --run` (20 passed); `npm run lint` (clean); `npm run build` (TypeScript + Vite build succeeded); `git diff --check` (clean). **Deferred**: Screen-specific implementations remain for downstream issues #83-#89/#93. **Follow-up issues**: Existing downstream screen issues. **Docs updated**: Added `docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md`. Commit: `5fb3bb2e` pushed to `docs/59-ui-redesign-brief`.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ad-hoc
One-off / ad-hoc work not tracked by a dedicated issue
 api
REST API / HTTP endpoints
 bug
Something isn't working
 ci-cd
Build, test, deploy pipeline
 content
Channel content / schedules / playlists
 dependencies
Dependency updates (Renovate)
 enhancement
New feature or improvement
 frontend
ChicoryTV React SPA frontend
 in-progress
Claimed by an active session — do not pick up
 jellyfin
Jellyfin tuner / IPTV integration
 parked
Excluded from automatic queue pickup; work only when explicitly selected
 priority: high
priority: low
priority: medium
review
Adversarial review finding
 security
Security / vulnerability fix
No labels frontend
Milestone
No items
No Milestone Design system (Claude Design ↔ prod)
Projects
Clear projects
No projects
Assignees
Clear assignees
renovate timothy (Timothy)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Blocks
#83 ChicoryTV SPA: Dashboard screen
timothy/ersatztv
#84 ChicoryTV SPA: Channels screen
timothy/ersatztv
#85 ChicoryTV SPA: Guide / EPG screen
timothy/ersatztv
#86 ChicoryTV SPA: Schedule editor screen
timothy/ersatztv
#87 ChicoryTV SPA: Playouts screen
timothy/ersatztv
#88 ChicoryTV SPA: Libraries screen
timothy/ersatztv
#89 ChicoryTV SPA: Channel Builder (primary deliverable)
timothy/ersatztv
#93 ChicoryTV SPA: Settings screen (prototype → implement)
timothy/ersatztv
Depends on
#80 ChicoryTV SPA: component library (primitives)
timothy/ersatztv
#81 ChicoryTV SPA: typed API client + auth
timothy/ersatztv
Reference: timothy/ersatztv#82