feat(web): add sidebar browse, bottom nav, and now-playing tiles

[rahul-singh-solanki]

Summary

The web UI put search, quality, categories, and languages in a crowded bar above the grid, and channel cards showed only a logo and a name. This PR reorganises the layout into something closer to a TV app: a persistent sidebar on desktop that becomes a drawer on mobile, a bottom tab bar for small screens, and channel cards that show what is airing right now. The filter selection is also written to a cookie so the first server render is already filtered instead of flashing an unfiltered grid.

Changes

22 files changed

File	Change Type	Description
web/views/sidebar.html	Added	category_sidebar template: quality/language/category pickers with a single Apply, static column on desktop and off-canvas drawer on mobile
web/views/bottom_nav.html	Added	bottom_nav template: Home / Search / Browse tabs, hidden at md and above
web/static/internal/bottom_nav.js	Added	Search tab scrolls up and focuses the header field; Browse reuses window.toggleSidebar; Home tab highlighted only on /
web/static/internal/now_tiles.js	Added	IntersectionObserver-driven per-card EPG fetch that fills the "Now:" line; exposes window.hydrateNowTiles() for dynamically added cards
web/static/internal/channels.js	Modified	Sidebar open/close/toggle, one-shot Apply that commits language + category in a single navigation, filter cookie sync, and redirect-once logic when saved filters and cookie disagree
web/static/internal/epg.js	Modified	Similar Channels now build the same card markup as the home grid via buildChannelCard, using DOM APIs for untrusted names, then hydrate favourites, catchup and now-playing state
web/static/internal/utils.js	Modified	Subscription warning becomes a one-time global acknowledgement (isSubscriptionWarningDismissed / dismissSubscriptionWarning) instead of per-channel suppression
web/static/internal/index.js	Modified	Search matches on data-channel-name instead of scraping the card's bold text, which no longer exists
web/static/internal/input.css	Modified	Styles for sidebar, bottom nav, live badge, logo tiles, glass nav; has-bottom-nav spacing
web/static/internal/tailwind.css	Modified	Regenerated via npm run build
web/views/index.html	Modified	Sidebar + main column layout, loads now_tiles.js and bottom_nav.js
web/views/channel_list.html	Modified	Filter bar removed (now in the sidebar); card becomes a 4:3 logo tile with LIVE/Subscription badge and a "Now:" line; adds data-channel-name
web/views/navbar.html	Modified	Slimmed to brand, centred search, catchup toggle, theme, auth; filter controls removed
web/views/play.html	Modified	Wider player column, Back and quality controls under the player, mobile-only filter drawer, bottom nav, loads channels.js and now_tiles.js
web/views/catchup.html, web/views/catchup_player.html, web/views/premium_provider.html	Modified	Bottom nav include, has-bottom-nav spacing, and theme-aware colours replacing hardcoded greys
web/views/styling.html, web/views/footer.html	Modified	Shared styling/footer adjustments for the new chrome
internal/handlers/handlers.go	Modified	Extract qualityOptions so /play can render the same picker; read language/category from cookies when no query param is present
web/test/channels_filter_scope.test.js	Added	10 jsdom cases covering Apply scope on / vs /play, cookie write/clear, redirect-once behaviour, and drawer toggling
web/test/play.test.js	Modified	Updated for the one-time global subscription notice

Key Implementation Details

• Apply commits language and category in one navigation instead of two, and on /play it routes back to / with the filter applied rather than reloading the player.
• The drawer writes the selection to a cookie; IndexHandler falls back to that cookie, so a returning user gets a filtered first paint. When saved state and cookie disagree the page reloads exactly once, guarded in channels.js.
• buildChannelCard in epg.js mirrors channel_list.html so Similar Channels and the home grid stay visually identical; channel names go through textContent/attributes, never innerHTML.
• Now-playing titles are fetched lazily per card as it scrolls into view (rootMargin: 200px), since there is no bulk now-playing feed; cards without EPG simply keep the line hidden.
• The subscription modal lost its per-channel "don't warn me again" checkbox: closing it once dismisses it globally, which removes the per-channel storage array.

Screenshots

Home — desktop (dark)	Home — desktop (light)
Play — desktop (dark)	Play — desktop (light)
Home — mobile (dark)	Home — mobile (light)
Browse drawer — mobile (dark)	Browse drawer — mobile (light)

Test Areas

• Desktop home: sidebar filters apply, grid re-renders, Apply navigates once
• Mobile home: bottom nav Search focuses the header field, Browse opens/closes the drawer
• Filter persistence: a saved filter renders filtered on first paint without a visible unfiltered flash
• Play page: filter drawer applies to / and does not restart playback
• Now-playing: "Now:" lines fill as cards scroll into view, on both the grid and Similar Channels
• Search box filters by channel name after the card markup change
• Subscription notice appears once and never again after being closed
• Catchup and premium provider pages render with the bottom nav and no layout overlap

Verification

• go test ./...
• cd web && npm test -- --watchAll=false --ci (12 suites, 143 tests)
• npm run build for the regenerated tailwind.css
• Screenshots above captured against a local serve run at 1440×900 and 390×844