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.
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.
1---2name: iptvnator-ui-design3description: Use when changing user-visible Angular UI in IPTVnator, especially channel rows or lists, EPG views, settings and playlist surfaces, selection states, shared portal components, or light/dark styling.4---56# IPTVnator UI Design78## Inspect First910- Policy: `docs/architecture/iptvnator-ui-guidelines.md`11- Theme and navigation: `apps/web/src/m3-theme.scss`,12 `libs/ui/styles/_nav-list.scss`13- Channel row: `libs/ui/components/src/lib/channel-list-container/channel-list-item/`14- Shared EPG timeline/list: `libs/ui/epg/src/lib/epg-timeline/`,15 `libs/ui/epg/src/lib/epg-list-view/`1617Before adding local markup, inspect `@iptvnator/ui/components`,18`@iptvnator/ui/epg`, `@iptvnator/ui/playback`,19`@iptvnator/ui/shared-portals`, `@iptvnator/portal/shared/ui`, and20`@iptvnator/playlist/shared/ui`. Stateful collection loading, persistence, and21cross-provider orchestration belong in `@iptvnator/portal/shared/data-access`,22not UI or util.2324## Design Contract2526- Prefer dense, scannable application UI. Behavior-only work must not include27 an opportunistic visual rewrite.28- App chrome uses app-owned selection, surface, and text tokens in both themes.29 Do not extend the known hard-coded EPG/surface styling debt.30- Dense rows use minimum dimensions rather than a fixed width: the text column31 needs `min-width: 0` plus ellipsis, while logos and trailing actions use32 `flex-shrink: 0`.33- Assign one scroll owner per pane. Preserve sticky controls, keyboard/focus34 feedback, and loading, empty, error, disabled, hover, and selected states.35- Providers supply controlled data to shared EPG timeline/list/panel components36 instead of rebuilding those views.37- Shared changes require checking every affected M3U, Xtream, Stalker,38 workspace, and collection consumer in light and dark themes.3940## Validation4142Run the focused component/unit target and the closest Playwright workflow for a43visible change. Electron CDP is a fallback for Electron-only gaps, not a44replacement for an available E2E flow. Record any uncovered visual state.
4gray