feat(schedule): EPG stylesheet + impeccable context (PRODUCT / DESIGN.md) #23

Merged

zgaetano merged 1 commit from polish/schedule-epg-styling into main

2026-05-23 16:20:49 -04:00

zgaetano commented

2026-05-23 16:20:38 -04:00

Owner

Summary

Companion to the EPG schedule rewrite already landed via the YouTube importer branch. The screens-ingest.jsx EPG JSX components shipped without their matching stylesheet during the parallel-branch shuffle; without these styles the page renders unlaid-out. This PR adds the missing .epg-* block to styles-rest.css and drops the now-dead .cal-* (month-calendar) rules.

Also adds PRODUCT.md and DESIGN.md so future design passes have the context files the impeccable skill requires. Both drafted from the existing codebase (tokens, screen patterns), not synthesised from a prompt.

What the styles cover

.epg-page / .epg-toolbar — top-level flex layout + date nav row
.epg-status — sticky "on air" strip with pulse halo on the live dot
.epg / .epg-corner / .epg-gutter / .epg-canvas-head / .epg-canvas — single scrolling container with sticky-top ruler and sticky-left recorder gutter
.epg-ruler / .epg-ruler-tick — hour ticks
.epg-row + .epg-block + .epg-block.live/.failed/.past — event blocks with a 4px inner project-color bar (no side-stripe accents; impeccable absolute ban)
.epg-now / .epg-now-pip — vertical hot-red now-line with broadcast glow
.epg-week + .epg-week-day — stacked 7-day sections for Week view
.epg-empty — recorder-less / loading empty state

Test plan

Open Ingest → Schedule — calendar grid is gone, replaced by a 7-row × 24-hour EPG with recorder names in a sticky left gutter and an hour ruler across the top
On Today view, the vertical red now-line ticks across the canvas every second and on first paint the canvas auto-scrolls so "now" sits ~30 % from the left
Click an empty cell on any recorder row → New schedule modal opens pre-filled with that recorder + a 30-min window snapped to the nearest 15 min
Click an existing event block → Edit schedule modal opens
Status strip up top shows "On air" pill while a schedule is live, "Next up" countdown otherwise
Switch to Week view — 7 day-sections stack vertically, density halves (44 px/hour vs 88 px/hour)
Switch to List view — old schedule-row table reappears with Upcoming / Past / All filters

🤖 Generated with Claude Code

## Summary Companion to the EPG schedule rewrite already landed via the YouTube importer branch. The `screens-ingest.jsx` EPG JSX components shipped without their matching stylesheet during the parallel-branch shuffle; without these styles the page renders unlaid-out. This PR adds the missing `.epg-*` block to `styles-rest.css` and drops the now-dead `.cal-*` (month-calendar) rules. Also adds `PRODUCT.md` and `DESIGN.md` so future design passes have the context files the impeccable skill requires. Both drafted from the existing codebase (tokens, screen patterns), not synthesised from a prompt. ## What the styles cover - **`.epg-page` / `.epg-toolbar`** — top-level flex layout + date nav row - **`.epg-status`** — sticky "on air" strip with pulse halo on the live dot - **`.epg` / `.epg-corner` / `.epg-gutter` / `.epg-canvas-head` / `.epg-canvas`** — single scrolling container with sticky-top ruler and sticky-left recorder gutter - **`.epg-ruler` / `.epg-ruler-tick`** — hour ticks - **`.epg-row` + `.epg-block` + `.epg-block.live/.failed/.past`** — event blocks with a 4px inner project-color bar (no side-stripe accents; impeccable absolute ban) - **`.epg-now` / `.epg-now-pip`** — vertical hot-red now-line with broadcast glow - **`.epg-week` + `.epg-week-day`** — stacked 7-day sections for Week view - **`.epg-empty`** — recorder-less / loading empty state ## Test plan - [ ] Open Ingest → Schedule — calendar grid is gone, replaced by a 7-row × 24-hour EPG with recorder names in a sticky left gutter and an hour ruler across the top - [ ] On Today view, the vertical red now-line ticks across the canvas every second and on first paint the canvas auto-scrolls so "now" sits ~30 % from the left - [ ] Click an empty cell on any recorder row → New schedule modal opens pre-filled with that recorder + a 30-min window snapped to the nearest 15 min - [ ] Click an existing event block → Edit schedule modal opens - [ ] Status strip up top shows "On air" pill while a schedule is live, "Next up" countdown otherwise - [ ] Switch to Week view — 7 day-sections stack vertically, density halves (44 px/hour vs 88 px/hour) - [ ] Switch to List view — old schedule-row table reappears with Upcoming / Past / All filters 🤖 Generated with [Claude Code](https://claude.com/claude-code)

zgaetano added 1 commit 2026-05-23 16:20:38 -04:00

feat(schedule): EPG stylesheet + impeccable context (PRODUCT/DESIGN.md) 5882c68217

The EPG JSX components in screens-ingest.jsx ship with the YouTube branch
but the matching stylesheet got lost during the parallel-branch shuffle.
This adds the missing .epg-* block to styles-rest.css and replaces the
dead .cal-* (month-calendar) rules left over from the previous design.

What the styles cover:
- .epg-page / .epg-toolbar — top-level flex layout + date nav row
- .epg-status — sticky "on air" strip with pulse halo on the live dot
- .epg / .epg-corner / .epg-gutter / .epg-canvas-head / .epg-canvas —
  the 2x2 sticky grid (top ruler + left gutter both sticky)
- .epg-ruler / .epg-ruler-tick — hour ticks
- .epg-row + .epg-block + .epg-block.live/.failed/.past — event blocks
  with project-color 4px inner bar (no side-stripes; impeccable ban)
- .epg-now / .epg-now-pip — vertical hot-red now-line with broadcast glow
- .epg-week + .epg-week-day — stacked 7-day sections for week view
- .epg-empty — recorder-less / loading empty state

Also adds PRODUCT.md and DESIGN.md so future design passes have the
context files the impeccable skill requires. Both drafted from the
existing codebase (tokens, screen patterns) rather than synthesised
from a prompt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>