IPTVnator UI Design

Inspect First

• Policy: docs/architecture/iptvnator-ui-guidelines.md
• Theme and navigation: apps/web/src/m3-theme.scss, libs/ui/styles/_nav-list.scss
• Channel row: libs/ui/components/src/lib/channel-list-container/channel-list-item/
• Shared EPG timeline/list: libs/ui/epg/src/lib/epg-timeline/, libs/ui/epg/src/lib/epg-list-view/

Before adding local markup, inspect @iptvnator/ui/components, @iptvnator/ui/epg, @iptvnator/ui/playback, @iptvnator/ui/shared-portals, @iptvnator/portal/shared/ui, and @iptvnator/playlist/shared/ui. Stateful collection loading, persistence, and cross-provider orchestration belong in @iptvnator/portal/shared/data-access, not UI or util.

Design Contract

• Prefer dense, scannable application UI. Behavior-only work must not include an opportunistic visual rewrite.
• App chrome uses app-owned selection, surface, and text tokens in both themes. Do not extend the known hard-coded EPG/surface styling debt.
• Dense rows use minimum dimensions rather than a fixed width: the text column needs min-width: 0 plus ellipsis, while logos and trailing actions use flex-shrink: 0.
• Assign one scroll owner per pane. Preserve sticky controls, keyboard/focus feedback, and loading, empty, error, disabled, hover, and selected states.
• Providers supply controlled data to shared EPG timeline/list/panel components instead of rebuilding those views.
• Shared changes require checking every affected M3U, Xtream, Stalker, workspace, and collection consumer in light and dark themes.
• <mat-icon> names must exist in the bundled Material Icons font; pnpm run styles:icon-ligatures:validate checks them (UI guidelines, Icon Names).

Validation

Run the focused component/unit target and the closest Playwright workflow for a visible change. Electron CDP is a fallback for Electron-only gaps, not a replacement for an available E2E flow. Record any uncovered visual state. A change that adds backdrop-filter, filter, animations or a rounded scroller also runs pnpm run perf:compositing (see the theme/style skill's Rendering Cost section) and quotes the numbers.