Skip to content

feat: UI overhaul with sidebar, dashboard, and channel views#394

Closed
wowitsjack wants to merge 3 commits intoFredolx:mainfrom
wowitsjack:feat/ui-overhaul
Closed

feat: UI overhaul with sidebar, dashboard, and channel views#394
wowitsjack wants to merge 3 commits intoFredolx:mainfrom
wowitsjack:feat/ui-overhaul

Conversation

@wowitsjack
Copy link

@wowitsjack wowitsjack commented Mar 7, 2026

Full source available at FredTV-Next, my personal fork with all features integrated.

Summary

Major UI redesign introducing sidebar navigation, a dashboard home view, multiple channel display modes (grid/list), a search overlay, channel detail panel, and now-playing bar.

Dependencies

Stacked on #393 (feat/inline-player) and #392 (feat/recording-system). Merge those first, then this PR's diff auto-narrows to just the UI changes.

New components (10)

  • Sidebar - collapsible nav with home/all/categories/favorites/history/hidden/sources
  • Dashboard - home view with content rows (recently watched, favorites, by source)
  • Search overlay - Ctrl+K instant search with keyboard navigation
  • Channel detail panel - slide-out info panel for any channel
  • Now-playing bar - persistent mini controls at bottom when something is playing
  • Channel card - grid view with thumbnail, type badge, favorite icon
  • Channel list row - table/list view with columns
  • Content row - horizontal scrollable card row (used by dashboard)
  • View density toggle - grid large / grid compact / list switcher
  • View density toggle - in home toolbar

New models

  • SidebarNavEvent - sidebar navigation event type
  • ViewDensity - GridLarge / GridCompact / List enum

Modified files

  • App shell - sidebar + main content layout, global progress bar, Ctrl+K shortcut
  • Home - grid/list views, skeleton loading, empty states, sidebar nav subscriptions, dynamic grid columns
  • Settings - complete card-based redesign with sections (Playback, Storage, Interface, Network, Sources)
  • Memory service - sidebar state, view density, channel detail, search overlay subjects
  • Channel tile - showInfo(), favPop animation, CSS variable gradients
  • EPG modal - inline player integration, design polish
  • Download manager - design token migration
  • styles.css - sidebar layout vars, material menu overrides, modal animation, toastr dark theme, btn-spinner

Test plan

  • Sidebar shows on home route, hidden on settings
  • Sidebar collapse/expand persists across page nav
  • Dashboard shows recently watched and favorites rows
  • Ctrl+K opens search overlay, type to search, Enter/click to play
  • Grid large / grid compact / list view modes work
  • Channel detail panel opens from right-click > Info
  • Now-playing bar shows when a channel is playing
  • Settings page renders with new card layout
  • Skeleton loading appears while channels load
  • Empty states show for favorites/history/hidden when empty
  • npx ng build passes

@CLAassistant
Copy link

CLAassistant commented Mar 7, 2026

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


wowitsjack seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

@wowitsjack
Copy link
Author

wowitsjack commented Mar 7, 2026

THis bot omfg D;

Finally it works

@wowitsjack wowitsjack force-pushed the feat/ui-overhaul branch 2 times, most recently from 1e4a7d6 to d8ec6f4 Compare March 7, 2026 15:54
wowitsjack added 3 commits March 8, 2026 03:08
Add HLS.js-based web player and embedded MPV engine for in-app
video playback. Local MPEG-TS proxy via ffmpeg+warp for streams
that need transcoding. Engine selection in settings.
Add sidebar navigation, dashboard with content rows, channel cards,
detail panel, now-playing bar, search overlay, view density toggle.
Restyle EPG modal, download manager, and settings. Add CSS custom
properties design system.
Remove backdrop-filter blur, livePulse animation, forced GPU
compositing. Add OnPush change detection, lazy image loading.
Reduce max dashboard cards from 264 to 80.
@wowitsjack
Copy link
Author

Superseded by #396 + #397 which contribute the full FredTV-Next codebase as a proper 2-part stack.

@wowitsjack wowitsjack closed this Mar 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants