# ChicoryTV UI Redesign — Visual Direction Brief (Pass 1)

**Date:** 2026-07-01
**Issue:** [ersatztv#59 — full UI redesign and ChicoryTV rebrand](http://192.168.1.95:3000/timothy/ersatztv/issues/59)
**Status:** Design direction locked; this brief drives the first Claude Design pass.

> Scope of *this* document: the **visual-direction brief** for Pass 1 — the decisions plus the exact prompts to paste into Claude Design (claude.ai/design) to generate 4 hero screens. It is **not** the full #59 implementation spec. That comes after a look is locked.

---

## 1. Context & goals

ErsatzTV is a custom IPTV channel server (C#/.NET 10, currently a Blazor Server + MudBlazor UI, ~60 Razor pages). The current UI is utilitarian ("Sonarr-like") and was never designed. Issue #59 calls for a complete redesign built **around the REST API** rather than legacy page patterns, plus a rename to **ChicoryTV**, with drag-and-drop workflows, better creation defaults/templates, and discoverable-but-not-heavy advanced config.

**Goals (from #59):**
- Slick, modern, app-like UI built around the API.
- Drag-and-drop for channel lineup, scheduling, ordering, editing.
- Better defaults/templates for channel creation (subtitles, shuffle, schedule/playout defaults).
- Advanced config discoverable without making common workflows heavy.
- Rebrand user-facing surfaces to ChicoryTV.

**Success for Pass 1:** the user (not design-oriented) can look at 4 rendered hero screens and say "yes, that direction" — locking a look + brand cheaply before any spec/prototype/build work.

---

## 2. Strategic decisions (locked 2026-07-01)

| Decision | Choice | Why |
|---|---|---|
| **Frontend stack** | **React SPA on the REST API** (not Blazor/MudBlazor reskin) | All design is AI-driven; LLMs generate React far more reliably than Blazor. Claude Design outputs React, so its output is *shippable* and the `design-sync` pipeline becomes usable (on-brand AI designs → 1:1 shipped code). Satisfies #59's "around the API" goal natively. |
| **API sequencing** | **Design pulls the API** | If a design goal needs a new API feature, build the API feature first. #59 is *not* hard-blocked on API completeness. |
| **Look & feel** | **Komodo-slick** | Dynamic, app-like, no full-page reloads, dense/technical. Explicitly **not** Sonarr-style. |
| **Brand** | **ChicoryTV — dark + chicory blue** | See §3. |

**Accepted costs of React:** full UI rewrite, dual-language (C# backend + TS frontend), new build/deploy step, transition period running both UIs.

**Pipeline note:** `/design-sync` does **not** apply yet — MudBlazor isn't a React library. It becomes usable once a React component library exists, at which point real ChicoryTV components can be synced into Claude Design.

---

## 3. Brand: ChicoryTV

"Chicory" is a real plant with a distinctive cornflower/periwinkle-blue flower (and a coffee/roasted association) — giving an ownable accent color and a name with a story. Direction: **dark, technical, focused**, one confident accent.

### Color tokens (draft — refine in Claude Design)

```
bg        #0F1115   (near-black charcoal — app background)
surface   #171A21   (cards / panels)
border    #262B36   (hairline dividers)
text      #E6E9EF   (primary)   muted #9AA4B2 (secondary)
accent    #5B7CFA   (chicory periwinkle-blue — primary actions, active nav)
ok        #3FB984   warn #E0A83D   err #E5484D
```

### Usage rules
- Accent used **sparingly** — primary buttons, active nav item, focus/selection, "live/on-air" emphasis. Not decorative.
- Dense rows with subtle hairline borders; generous but not wasteful spacing. TV/EPG grids read well on dark.
- **Typography:** clean sans (Inter-like) for UI; consider a tabular/mono for channel numbers, times, and durations so grids align.
- **Density:** app-like, information-dense (Komodo), not marketing-spacious. Prefer inline actions and hover affordances over full-page navigation.
- **Logo/wordmark:** "ChicoryTV" wordmark with a chicory-flower/periwinkle mark; let Claude Design propose 2-3 options.

---

## 4. The 4 hero screens (Pass 1)

Real domain vocabulary is included so renders show true ChicoryTV content, not placeholders. **Use the app's own terms:** Channels, Schedules / Schedule Items, Playouts (Classic/Block/Sequential/Scripted/External JSON), Blocks, Playout Templates, Deco / Deco Group, Filler (Pre/Mid/Post-Roll, Tail, Fallback), Collection Type, Playback Order, Playout Mode, Guide Mode, and the XMLTV "programme" for EPG.

### 4.1 Dashboard (reimagined as a real overview)
Today `Index.razor` is only health-checks + release notes. **Redesign it into a proper landing overview:**
- **On-air now** — per-channel "now playing" strip/cards: channel number + logo + name, current program title, progress bar to next, live/on-air accent state.
- **At-a-glance counts** — channels, active playouts, transcodes running, libraries.
- **Health panel** — the existing `HealthCheckResult` list (status: Pass/Info/Warning/Fail with green/blue/amber/red), condensed; click-through to detail.
- **Recent activity / errors** — recent scans, playout resets, transcode failures.
- **Release notes** — collapsible card, secondary.

### 4.2 Channels list
Entity: `Channel`. Dense table, the template for all list pages.
- **Columns:** Number (with `(D)` disabled / `(H)` hidden-from-EPG markers) · Logo · Name · Language (preferred audio) · Streaming Mode (`HLS Direct` / `HLS Segmenter` / `MPEG-TS` / `MPEG-TS (Legacy)`) · FFmpeg Profile.
- **Row actions (inline icons):** Preview · Stop transcode (only when active) · Edit · Troubleshoot playback · Delete.
- **Top bar:** "Add Channel", "Edit Channel Numbers", "Show Disabled" toggle, search/filter.
- **States:** disabled/hidden rows visually de-emphasized; active-transcode indicator.
- **Redesign opportunity:** bulk-select + bulk actions; group-by channel Group; drag-to-reorder channel numbers (replaces the separate "Edit Channel Numbers" page).

### 4.3 Schedule / playout editor (introduce drag-and-drop)
**Net-new capability:** today, schedule-item ordering is up/down arrow buttons. The redesign introduces **drag-to-reorder**.
- **Left:** ordered list of **Schedule Items** (drag handles) — each row shows Start Time · Collection · Playout Mode.
- **Right:** selected-item detail form. Real fields:
  - **Start Type** (Dynamic/Fixed) + Start Time + Fixed Start Time Behavior (Inherit/Strict/Flexible)
  - **Collection Type** — Collection, Television Show/Season, Artist, Multi Collection, Smart Collection, Search Query, Playlist, Rerun (First Run / Rerun) — each swaps its picker.
  - **Playback Order** — Chronological, Random, Shuffle, Shuffle In Order, Marathon, Season/Episode, Multi-Episode Shuffle (+ Marathon sub-fields: Group By, Shuffle Groups/Items, Batch Size).
  - **Playout Mode** — Flood / One / Multiple / Duration (+ Multiple Mode & Count, Playout Duration).
  - **Fill With Group Mode, Tail Mode, Custom Title, Guide Mode (Normal/Filler)**.
  - **Filler** — Pre-Roll, Mid-Roll, Post-Roll, Tail, Fallback presets.
  - **Overrides** — Watermarks, Graphics, Preferred Audio/Subtitle Language, Subtitle Mode.
- **Discoverability:** show the common fields (Collection, Playback Order, Playout Mode) up front; tuck Filler/Overrides into progressive-disclosure sections.

### 4.4 Guide / EPG grid
Today the guide is XMLTV output only (no rendered grid). Design a **dark time-grid** program guide.
- **Layout:** channels down the left (number + logo + name), time across the top, program blocks in the grid.
- **Program block** (`programme`): title, sub-title, start–stop times, category chip, artwork/icon, description on hover/expand.
- **States:** "now" vertical time-marker; current/on-air program gets the accent; filler (Guide Mode = Filler) visually distinct from real programs.
- **Controls:** time-range scrubber, jump-to-now, channel filter.

---

## 5. How to use this in Claude Design

Open claude.ai/design and create a project (e.g. "ChicoryTV"). Paste the **master brief** first, then generate one screen at a time with the per-screen prompts. Iterate on the look on the Dashboard first (it sets the shell), then apply the locked style to the rest.

### Master brief (paste first)
> Design **ChicoryTV**, a dark, slick, app-like admin UI for a self-hosted IPTV/custom-TV channel server (think a modern take on a media-server admin, in the spirit of Komodo — dense, technical, no full-page reloads). Dark theme: background `#0F1115`, surfaces `#171A21`, hairline borders `#262B36`, primary text `#E6E9EF`, muted `#9AA4B2`. One accent — chicory periwinkle-blue `#5B7CFA` — used only for primary actions, active nav, focus, and live/on-air states. Status colors: ok `#3FB984`, warn `#E0A83D`, error `#E5484D`. Clean sans UI type; tabular/mono for numbers, times, durations. Left sidebar nav (Dashboard, Channels, Schedules, Playouts, Collections, Libraries, Settings), compact top bar. Information-dense, inline actions, hover affordances. Include a "ChicoryTV" wordmark with a small periwinkle chicory-flower mark.

### Per-screen prompts
1. **Dashboard:** "A landing overview: an 'On air now' section of per-channel cards (channel number, logo, name, current program title, progress bar to next, live accent), a row of stat tiles (Channels, Active Playouts, Transcodes, Libraries), a condensed Health panel (rows with Pass/Info/Warning/Fail status icons in green/blue/amber/red), a Recent activity list, and a collapsible Release notes card."
2. **Channels list:** "A dense channels table. Columns: Number, Logo, Name, Language, Streaming Mode (values like 'HLS Segmenter', 'MPEG-TS'), FFmpeg Profile. Inline row actions: preview, edit, delete. Top bar: 'Add Channel', 'Show Disabled' toggle, search. Disabled rows de-emphasized. Bulk-select checkboxes."
3. **Schedule editor:** "Two-pane schedule editor. Left: a drag-to-reorder list of schedule items (drag handles), each showing start time, collection name, and playout mode. Right: a detail form for the selected item with Collection Type, Playback Order, and Playout Mode as the primary fields, and collapsible 'Filler' and 'Overrides' sections. Dark, dense."
4. **EPG grid:** "A dark TV program guide grid: channels down the left (number, logo, name), time across the top, program blocks in the grid with title/sub-title and a category chip. A vertical 'now' time marker; the current program on each channel uses the accent color; filler programs look muted. A jump-to-now button and time scrubber."

Refine tokens/typography live, then regenerate the other screens once the Dashboard look is locked.

---

## 6. Out of scope (Pass 1) & next steps

**Out of scope now:** the full #59 implementation spec, React app architecture (routing/state/auth/build/deploy), API gap analysis, channel-create wizard + templates screen, media-libraries/collections browser (Pass 2), browser-based channel playback (tracked separately in #60), the actual rebuild.

**Next steps (after a look is locked):**
1. Pass 2 screens: channel-create wizard + templates, libraries/collections browser.
2. Prototype the hard workflows (drag-drop lineup/scheduling) as clickable React.
3. Full #59 spec: IA, React app architecture, API gaps to backfill, migration/cutover (dual-stack), rebrand checklist.
4. Build.

**Related:** #2 (REST API — the foundation this UI sits on), #58 (MCP server), #60 (browser channel playback, post-redesign).
