feat: general development, update core application components, and enhance build scripts.

CLAUDE.md

@@ -264,6 +264,24 @@ See `docs/architecture/m3u-playlist-module.md` for complete documentation.
     - Same schema structure but implemented in IndexedDB
     - Limited by browser storage quotas
 
+**TypeScript File Size Rule**:
+
+Keep TypeScript files under **300 lines**. Hard maximum is **350–400 lines**.
+
+- When creating new files, design them to stay within this limit from the start.
+- When adding a feature to an existing file that would push it past 350 lines, **refactor first**: extract helpers, sub-services, or feature modules before adding the new code.
+- When you notice a file already exceeds 350 lines, **proactively suggest a refactoring** (or perform it if the change is straightforward) — even if the immediate task is small.
+
+Typical split strategies:
+- Angular components: extract child components, move logic to a dedicated service or store feature
+- Signal store features: split into smaller `with*` feature functions in separate files
+- Services: split by responsibility (e.g. separate API, transformation, and state concerns)
+- Utility files: group by domain and export from a barrel `index.ts`
+
+This rule exists to keep the codebase navigable and reviewable. A 150-line file is always preferable to a 500-line file.
+
+---
+
 **Angular Coding Standards**:
 
 This project uses modern Angular signal-based APIs and patterns. **ALWAYS** use the following:

apps/web/src/app/app.routes.ts

@@ -49,6 +49,21 @@ export const routes: Routes = [
             },
             {
                 path: 'playlists/:id',
+                pathMatch: 'full',
+                redirectTo: 'playlists/:id/all',
+            },
+            {
+                path: 'playlists/:id/:view',
+                data: {
+                    layout: 'workspace',
+                },
+                loadComponent: () =>
+                    import('./home/video-player/video-player.component').then(
+                        (c) => c.VideoPlayerComponent
+                    ),
+            },
+            {
+                path: 'global-favorites',
                 data: {
                     layout: 'workspace',
                 },
@@ -90,6 +105,11 @@ export const routes: Routes = [
     },
     {
         path: 'playlists/:id',
+        pathMatch: 'full',
+        redirectTo: 'playlists/:id/all',
+    },
+    {
+        path: 'playlists/:id/:view',
         loadComponent: () =>
             import('./home/video-player/video-player.component').then(
                 (c) => c.VideoPlayerComponent

apps/web/src/app/home/video-player/video-player.component.html

@@ -21,6 +21,7 @@
             <app-sidebar
                 [channels]="(channels$ | async)!"
                 [showPlaylistHeader]="!isWorkspaceLayout"
+                [activeView]="activeView()"
             />
         } @loading {
             <p>Loading...</p>
@@ -29,7 +30,7 @@
         }
     </mat-drawer>
     <mat-drawer-content class="drawer-content">
-        @if (activeChannel$ | async; as activeChannel) {
+        @if (activeChannel(); as activeChannel) {
             <!-- toolbar with drawer icon -->
             <app-toolbar
                 (toggleLeftDrawerClicked)="drawer.toggle()"
@@ -117,7 +118,7 @@
                 <!-- channel overlay -->
                 <app-info-overlay
                     [channel]="activeChannel"
-                    [epgProgram]="(epgProgram$ | async)!"
+                    [epgProgram]="epgProgram()"
                 />
 
                 <!-- channel number overlay -->
@@ -129,6 +130,20 @@
                     </div>
                 }
             }
+        } @else {
+            <!-- Minimal toolbar when no channel is active so drawer works -->
+            <app-toolbar
+                (toggleLeftDrawerClicked)="drawer.toggle()"
+                (toggleRightDrawerClicked)="drawerRight.toggle()"
+                [isLeftDrawerOpened]="drawer.opened"
+                (settingsClicked)="openSettings()"
+            />
+            <div class="empty-state-container">
+                <mat-icon class="empty-state-icon">live_tv</mat-icon>
+                <h2 class="empty-state-title">
+                    {{ 'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate }}
+                </h2>
+            </div>
         }
     </mat-drawer-content>
     <!-- right sidebar content -->

apps/web/src/app/home/video-player/video-player.component.scss

@@ -126,3 +126,29 @@
         transform: scale(1);
     }
 }
+
+.empty-state-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: calc(100% - 64px); 
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+
+    .empty-state-icon {
+        font-size: 72px;
+        width: 72px;
+        height: 72px;
+        margin-bottom: 24px;
+        opacity: 0.2;
+    }
+
+    .empty-state-title {
+        font-family: 'DM Sans', sans-serif;
+        font-weight: 500;
+        font-size: 1.25rem;
+        margin: 0;
+        opacity: 0.5;
+    }
+}

apps/web/src/app/home/video-player/video-player.component.ts

@@ -11,11 +11,14 @@ import {
     inject,
     viewChild,
 } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { StorageMap } from '@ngx-pwa/local-storage';
+import { TranslatePipe } from '@ngx-translate/core';
 import {
     ArtPlayerComponent,
     AudioPlayerComponent,
@@ -29,8 +32,10 @@ import {
     ToolbarComponent,
     VjsPlayerComponent,
 } from 'components';
-import { PlaylistActions, ChannelActions, FavoritesActions } from 'm3u-state';
 import {
+    ChannelActions,
+    FavoritesActions,
+    PlaylistActions,
     selectActive,
     selectChannels,
     selectCurrentEpgProgram,
@@ -40,6 +45,7 @@ import {
     Subscription,
     combineLatest,
     combineLatestWith,
+    distinctUntilChanged,
     filter,
     map,
     startWith,
@@ -56,13 +62,14 @@ import {
     VideoPlayer,
 } from 'shared-interfaces';
 import { SettingsStore } from '../../services/settings-store.service';
+import { SettingsComponent } from '../../settings/settings.component';
 import {
     getAdjacentChannelItem,
     getChannelItemByNumber,
 } from '../../shared/services/remote-channel-navigation.util';
-import { SettingsComponent } from '../../settings/settings.component';
 
 @Component({
+    selector: 'app-video-player',
     imports: [
         ArtPlayerComponent,
         AsyncPipe,
@@ -71,11 +78,13 @@ import { SettingsComponent } from '../../settings/settings.component';
         EpgListComponent,
         HtmlVideoPlayerComponent,
         InfoOverlayComponent,
+        MatIcon,
         MatSidenavModule,
         ResizableDirective,
         RouterLink,
         SidebarComponent,
         ToolbarComponent,
+        TranslatePipe,
         VjsPlayerComponent,
     ],
     templateUrl: './video-player.component.html',
@@ -93,13 +102,34 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
     private readonly store = inject(Store);
 
     /** Active selected channel */
-    readonly activeChannel$ = this.store.select(selectActive);
+    readonly activeChannel = this.store.selectSignal(selectActive);
 
     /** Channels list */
-    channels$!: Observable<Channel[]>;
+    readonly channels$: Observable<Channel[]> = this.store.select(
+        selectChannels
+    ) as Observable<Channel[]>;
 
     /** Current epg program */
-    readonly epgProgram$ = this.store.select(selectCurrentEpgProgram);
+    readonly epgProgram = this.store.selectSignal(selectCurrentEpgProgram);
+
+    /** Active M3U view (all, groups, favorites) */
+    readonly activeView = toSignal(
+        this.activatedRoute.params.pipe(
+            map((params) => {
+                if (this.router.url.includes('/workspace/global-favorites')) {
+                    return 'favorites';
+                }
+                return params['view'] || 'all';
+            })
+        ),
+        {
+            initialValue: this.router.url.includes(
+                '/workspace/global-favorites'
+            )
+                ? 'favorites'
+                : 'all',
+        }
+    );
 
     /** Selected video player options */
     playerSettings: Partial<Settings> = {
@@ -118,6 +148,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
     private unsubscribeRemoteChannelChange?: () => void;
     private unsubscribeRemoteCommand?: () => void;
     private statusSubscription?: Subscription;
+    private routeSubscription?: Subscription;
     private lastKnownVolume = 1;
 
     /** Info overlay component reference for manual triggering */
@@ -155,11 +186,11 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
 
         // Setup remote control channel change listener (Electron only)
         if (this.isDesktop && window.electron?.onChannelChange) {
-            const unsubscribe = window.electron.onChannelChange((data: {
-                direction: 'up' | 'down';
-            }) => {
-                this.handleRemoteChannelChange(data.direction);
-            });
+            const unsubscribe = window.electron.onChannelChange(
+                (data: { direction: 'up' | 'down' }) => {
+                    this.handleRemoteChannelChange(data.direction);
+                }
+            );
             if (typeof unsubscribe === 'function') {
                 this.unsubscribeRemoteChannelChange = unsubscribe;
             }
@@ -175,66 +206,109 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
             }
         }
 
-        this.channels$ = this.activatedRoute.params.pipe(
-            combineLatestWith(this.activatedRoute.queryParams),
-            switchMap(([params, queryParams]) => {
-                if (params['id']) {
-                    this.store.dispatch(ChannelActions.resetActiveChannel());
-                    this.store.dispatch(
-                        PlaylistActions.setActivePlaylist({
-                            playlistId: params['id'],
-                        })
+        this.routeSubscription = this.activatedRoute.params
+            .pipe(
+                distinctUntilChanged((prev, curr) => prev['id'] === curr['id']),
+                combineLatestWith(this.activatedRoute.queryParams),
+                switchMap(([params, queryParams]) => {
+                    const isGlobalFavorites = this.router.url.includes(
+                        '/workspace/global-favorites'
                     );
-                    return this.playlistsService.getPlaylist(params['id']).pipe(
-                        map((playlist) => {
-                            // Set user agent if specified on playlist level
-                            if (playlist.userAgent) {
-                                window.electron?.setUserAgent(
-                                    playlist.userAgent,
-                                    'localhost'
-                                );
-                            }
 
-                            this.store.dispatch(
-                                ChannelActions.setChannels({
-                                    channels: playlist.playlist.items,
+                    if (isGlobalFavorites) {
+                        this.store.dispatch(
+                            ChannelActions.resetActiveChannel()
+                        );
+                        this.store.dispatch(
+                            PlaylistActions.setActivePlaylist({
+                                playlistId: '',
+                            })
+                        );
+                        return this.playlistsService
+                            .getPlaylistWithGlobalFavorites()
+                            .pipe(
+                                map((playlist) => {
+                                    this.store.dispatch(
+                                        ChannelActions.setChannels({
+                                            channels: playlist.playlist.items,
+                                        })
+                                    );
+
+                                    if (
+                                        playlist.favorites &&
+                                        playlist.favorites.length > 0
+                                    ) {
+                                        this.store.dispatch(
+                                            FavoritesActions.setFavorites({
+                                                channelIds: playlist.favorites,
+                                            })
+                                        );
+                                    } else {
+                                        this.store.dispatch(
+                                            FavoritesActions.setFavorites({
+                                                channelIds: [],
+                                            })
+                                        );
+                                    }
                                 })
                             );
+                    } else if (params['id']) {
+                        this.store.dispatch(
+                            ChannelActions.resetActiveChannel()
+                        );
+                        this.store.dispatch(
+                            PlaylistActions.setActivePlaylist({
+                                playlistId: params['id'],
+                            })
+                        );
+                        return this.playlistsService
+                            .getPlaylist(params['id'])
+                            .pipe(
+                                map((playlist) => {
+                                    // Set user agent if specified on playlist level
+                                    if (playlist.userAgent) {
+                                        window.electron?.setUserAgent(
+                                            playlist.userAgent,
+                                            'localhost'
+                                        );
+                                    }
 
-                            // Load favorites from the playlist
-                            if (
-                                playlist.favorites &&
-                                playlist.favorites.length > 0
-                            ) {
-                                this.store.dispatch(
-                                    FavoritesActions.setFavorites({
-                                        channelIds: playlist.favorites,
-                                    })
-                                );
-                            } else {
-                                // Clear favorites if playlist has none
-                                this.store.dispatch(
-                                    FavoritesActions.setFavorites({
-                                        channelIds: [],
-                                    })
-                                );
-                            }
+                                    this.store.dispatch(
+                                        ChannelActions.setChannels({
+                                            channels: playlist.playlist.items,
+                                        })
+                                    );
 
-                            return playlist.playlist.items as Channel[];
-                        })
-                    );
-                } else if (queryParams['url']) {
-                    return this.store.select(selectChannels) as Observable<
-                        Channel[]
-                    >;
-                }
-            })
-        );
+                                    // Load favorites from the playlist
+                                    if (
+                                        playlist.favorites &&
+                                        playlist.favorites.length > 0
+                                    ) {
+                                        this.store.dispatch(
+                                            FavoritesActions.setFavorites({
+                                                channelIds: playlist.favorites,
+                                            })
+                                        );
+                                    } else {
+                                        // Clear favorites if playlist has none
+                                        this.store.dispatch(
+                                            FavoritesActions.setFavorites({
+                                                channelIds: [],
+                                            })
+                                        );
+                                    }
+                                })
+                            );
+                    }
+                    return [];
+                })
+            )
+            .subscribe();
 
         this.statusSubscription = combineLatest([
             this.channels$,
-            this.activeChannel$,
-            this.epgProgram$.pipe(startWith(null)),
+            this.store.select(selectActive),
+            this.store.select(selectCurrentEpgProgram).pipe(startWith(null)),
         ]).subscribe(([channels, activeChannel, epgProgram]) => {
             if (!window.electron?.updateRemoteControlStatus || !activeChannel) {
                 return;
@@ -247,9 +321,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
             window.electron.updateRemoteControlStatus({
                 portal: 'm3u',
                 isLiveView: true,
-                channelName:
-                    activeChannel.name ??
-                    activeChannel.tvg?.name,
+                channelName: activeChannel.name ?? activeChannel.tvg?.name,
                 channelNumber: currentIndex >= 0 ? currentIndex + 1 : undefined,
                 epgTitle: (epgProgram as any)?.title,
                 epgStart: (epgProgram as any)?.start,
@@ -268,7 +340,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         console.log(`Remote control: changing channel ${direction}`);
 
         // Use combineLatest to get both values and take only the first emission
-        combineLatest([this.channels$, this.activeChannel$])
+        combineLatest([this.channels$, this.store.select(selectActive)])
             .pipe(
                 filter(([channels, activeChannel]) => {
                     return channels.length > 0 && !!activeChannel;
@@ -310,6 +382,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         this.unsubscribeRemoteChannelChange?.();
         this.unsubscribeRemoteCommand?.();
         this.statusSubscription?.unsubscribe();
+        this.routeSubscription?.unsubscribe();
     }
 
     /**
@@ -382,11 +455,11 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         ) as Observable<Channel[]>;
 
         // Pass the active channel's tvg.id for highlighting
-        this.activeChannel$.pipe(take(1)).subscribe((channel) => {
-            if (channel) {
-                componentRef.instance.activeChannelId = (channel as Channel).tvg?.id || null;
-            }
-        });
+        const currentChannel = this.activeChannel();
+        if (currentChannel) {
+            componentRef.instance.activeChannelId =
+                currentChannel.tvg?.id || null;
+        }
 
         this.overlayRef.backdropClick().subscribe(() => {
             this.overlayRef.dispose();
@@ -479,7 +552,9 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         this.channels$
             .pipe(
                 take(1),
-                map((channels) => getChannelItemByNumber(channels, channelNumber))
+                map((channels) =>
+                    getChannelItemByNumber(channels, channelNumber)
+                )
             )
             .subscribe((channel) => {
                 if (channel) {

apps/web/src/app/shared/components/header/header.component.ts

@@ -18,7 +18,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { DataService } from 'services';
-import { GLOBAL_FAVORITES_PLAYLIST_ID } from 'shared-interfaces';
 //import { shell } from 'electron';
 import { AddPlaylistMenuComponent, PlaylistType } from 'components';
 import { HomeComponent } from '../../../home/home.component';
@@ -85,7 +84,7 @@ export class HeaderComponent implements OnInit {
      * Navigates to the global favorites view
      */
     navigateToGlobalFavorites(): void {
-        this.router.navigate(['playlists', GLOBAL_FAVORITES_PLAYLIST_ID]);
+        this.router.navigate(['/workspace', 'global-favorites']);
     }
 
     /**

apps/web/src/app/shared/navigation/portal-rail-links.ts

@@ -1,5 +1,3 @@
-import { GLOBAL_FAVORITES_PLAYLIST_ID } from 'shared-interfaces';
-
 export type PortalProvider = 'xtreams' | 'stalker' | 'playlists';
 
 export interface PortalRailLink {
@@ -160,29 +158,36 @@ export function buildPortalRailLinks(
         return { primary, secondary };
     }
 
-    return {
-        primary: [
+    if (provider === 'playlists') {
+        const primary: PortalRailLink[] = [
             {
-                icon: 'play_circle',
-                tooltip: 'Player',
-                path: root,
+                icon: 'list',
+                tooltip: 'All Channels',
+                path: [...root, 'all'],
                 exact: true,
-                section: 'player',
+                section: 'all',
             },
-        ],
-        secondary: workspace
-            ? [
-                  {
-                      icon: 'favorite',
-                      tooltip: 'Global favorites',
-                      path: [
-                          '/workspace',
-                          'playlists',
-                          GLOBAL_FAVORITES_PLAYLIST_ID,
-                      ],
-                      section: 'favorites',
-                  },
-              ]
-            : [],
-    };
+            {
+                icon: 'folder',
+                tooltip: 'Groups',
+                path: [...root, 'groups'],
+                exact: true,
+                section: 'groups',
+            },
+            {
+                icon: 'star',
+                tooltip: 'Favorites',
+                path: [...root, 'favorites'],
+                exact: true,
+                section: 'favorites',
+            },
+        ];
+
+        return {
+            primary,
+            secondary: [],
+        };
+    }
+
+    return { primary: [], secondary: [] };
 }

apps/web/src/app/workspace/workspace-shell.component.html

@@ -131,18 +131,16 @@
                     <mat-icon>{{ action.icon }}</mat-icon>
                 </button>
             }
-            <!-- <button
-                type="button"
+            <a
                 class="header-shortcut"
                 mat-icon-button
-                [class.is-active]="isFavoritesView()"
-                (click)="toggleFavoritesShortcut()"
-                [matTooltip]="'WORKSPACE.FAVORITES_ONLY' | translate"
-                [disabled]="!currentContext()"
-                aria-label="Toggle favorites only"
+                routerLink="/workspace/global-favorites"
+                [class.is-active]="isGlobalFavoritesRoute()"
+                [matTooltip]="'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate"
+                aria-label="Open global favorites"
             >
-                <mat-icon>favorite</mat-icon>
-            </button> -->
+                <mat-icon>star</mat-icon>
+            </a>
             @if (canSort()) {
                 <button
                     type="button"

apps/web/src/app/workspace/workspace-shell.component.scss

@@ -234,7 +234,8 @@
     gap: 2px;
     app-region: no-drag;
 
-    button {
+    button,
+    a {
         color: var(--mat-sys-on-surface-variant);
         border-radius: 8px;
         transition:

apps/web/src/app/workspace/workspace-shell.component.ts

@@ -36,7 +36,6 @@ import {
 } from 'm3u-state';
 import { filter, firstValueFrom } from 'rxjs';
 import { PlaylistsService } from 'services';
-import { GLOBAL_FAVORITES_PLAYLIST_ID } from 'shared-interfaces';
 import { DownloadsService } from '../services/downloads.service';
 import { AddPlaylistDialogComponent } from '../shared/components/add-playlist/add-playlist-dialog.component';
 import {
@@ -146,12 +145,13 @@ export class WorkspaceShellComponent {
             return routeContext;
         }
 
-        // On dashboard, sources, and settings we still want provider-specific rail links
+        // On dashboard, sources, settings, and global favorites we still want provider-specific rail links
         // for the currently active playlist selected in the switcher.
         if (
             !this.isDashboardRoute() &&
             !this.isSourcesRoute() &&
-            !this.isSettingsRoute()
+            !this.isSettingsRoute() &&
+            !this.isGlobalFavoritesRoute()
         ) {
             return null;
         }
@@ -175,6 +175,11 @@ export class WorkspaceShellComponent {
     readonly isSettingsRoute = computed(() =>
         /^\/workspace\/settings(?:\/)?(?:\?.*)?$/.test(this.currentUrl())
     );
+    readonly isGlobalFavoritesRoute = computed(() =>
+        /^\/workspace\/global-favorites(?:\/)?(?:\?.*)?$/.test(
+            this.currentUrl()
+        )
+    );
     readonly dashboardXtreamContext = computed<WorkspaceContext | null>(() => {
         if (!this.isDashboardRoute()) {
             return null;
@@ -221,17 +226,6 @@ export class WorkspaceShellComponent {
             this.isCategoryContextRoute() ||
             this.isFavoritesContextRoute()
     );
-    readonly isFavoritesView = computed(() => {
-        const context = this.currentContext();
-        if (
-            context?.provider === 'playlists' &&
-            context.playlistId === GLOBAL_FAVORITES_PLAYLIST_ID
-        ) {
-            return true;
-        }
-
-        return this.currentSection() === 'favorites';
-    });
     readonly canUseSearch = computed(() => {
         if (this.isSettingsRoute()) {
             return false;
@@ -504,9 +498,7 @@ export class WorkspaceShellComponent {
                 return;
             }
 
-            if (context.playlistId !== GLOBAL_FAVORITES_PLAYLIST_ID) {
-                this.lastM3uPlaylistId.set(context.playlistId);
-            }
+            this.lastM3uPlaylistId.set(context.playlistId);
         });
     }
 
@@ -600,55 +592,6 @@ export class WorkspaceShellComponent {
         }
     }
 
-    toggleFavoritesShortcut(): void {
-        const context = this.currentContext();
-        if (!context) return;
-
-        if (context.provider === 'xtreams') {
-            if (!this.isElectron) return;
-
-            const base = ['/workspace', 'xtreams', context.playlistId];
-            this.router.navigate(
-                this.isFavoritesView()
-                    ? [...base, 'vod']
-                    : [...base, 'favorites']
-            );
-            return;
-        }
-
-        if (context.provider === 'stalker') {
-            const base = ['/workspace', 'stalker', context.playlistId];
-            this.router.navigate(
-                this.isFavoritesView()
-                    ? [...base, 'vod']
-                    : [...base, 'favorites']
-            );
-            return;
-        }
-
-        if (context.provider === 'playlists') {
-            if (context.playlistId === GLOBAL_FAVORITES_PLAYLIST_ID) {
-                const fallbackPlaylist = this.lastM3uPlaylistId();
-                if (fallbackPlaylist) {
-                    this.router.navigate([
-                        '/workspace',
-                        'playlists',
-                        fallbackPlaylist,
-                    ]);
-                } else {
-                    this.router.navigate(['/workspace', 'dashboard']);
-                }
-                return;
-            }
-
-            this.router.navigate([
-                '/workspace',
-                'playlists',
-                GLOBAL_FAVORITES_PLAYLIST_ID,
-            ]);
-        }
-    }
-
     openDownloadsShortcut(): void {
         const context = this.downloadsContext();
         if (!context) {

apps/web/src/assets/i18n/de.json

@@ -13,6 +13,7 @@
         "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Neue Playlist hochladen oder eine andere aussuchen",
         "USE_STAR_TO_FAVORITE": "Nutzen Sie das Star-Icon um Sender als Favoriten zu markieren",
         "FAVORITES_UPDATED": "Favoriten wurden aktualisiert!",
+        "SELECT_CHANNEL_PLAYBACK": "Bitte wählen Sie einen Sender aus, um die Wiedergabe zu starten",
         "SORT_BY": "Sortieren nach",
         "SORT_BY_DATE": "Nach Datum sortieren (Neueste zuerst)",
         "SORT_BY_RATING": "Nach Bewertung sortieren",

apps/web/src/assets/i18n/en.json

@@ -227,6 +227,7 @@
         "REMOVE_FAVORITE": "Remove from favorites",
         "ADD_FAVORITE": "Add to favorites",
         "FAVORITES_UPDATED": "Favorites were updated!",
+        "SELECT_CHANNEL_PLAYBACK": "Please select a channel to start playback",
         "SORT_BY": "Sort by",
         "SORT_BY_DATE": "Sort by Date Added (Newest First)",
         "SORT_BY_RATING": "Sort by Rating",

apps/web/src/assets/i18n/ru.json

@@ -203,6 +203,7 @@
         "USE_STAR_TO_FAVORITE": "Используйте иконку звезды, чтобы добавлять каналы в избранное",
         "REMOVE_FAVORITE": "Удалить из списка фаворитов",
         "FAVORITES_UPDATED": "Список фаворитов был обновлен!",
+        "SELECT_CHANNEL_PLAYBACK": "Пожалуйста, выберите канал для начала воспроизведения",
         "SORT_BY": "Сортировать по",
         "SORT_BY_DATE": "Сортировать по дате добавления (сначала новые)",
         "SORT_BY_RATING": "Сортировать по рейтингу",

libs/m3u-state/src/lib/effects.ts

@@ -17,7 +17,6 @@ import {
 } from 'rxjs';
 import { DataService, EpgService, PlaylistsService } from 'services';
 import {
-    GLOBAL_FAVORITES_PLAYLIST_ID,
     OPEN_MPV_PLAYER,
     OPEN_VLC_PLAYER,
     Playlist,
@@ -25,10 +24,10 @@ import {
     VideoPlayer,
 } from 'shared-interfaces';
 import {
-    PlaylistActions,
     ChannelActions,
     EpgActions,
     FavoritesActions,
+    PlaylistActions,
 } from './actions';
 import {
     selectActive,
@@ -57,10 +56,7 @@ export class PlaylistEffects {
                     this.store.select(selectFavorites),
                     this.store.select(selectActivePlaylistId)
                 ),
-                filter(
-                    ([, , playlistId]) =>
-                        playlistId !== GLOBAL_FAVORITES_PLAYLIST_ID
-                ),
+                filter(([, , playlistId]) => !!playlistId),
                 switchMap(([, favorites, playlistId]) =>
                     this.playlistsService.updateFavorites(playlistId, favorites)
                 ),
@@ -81,10 +77,7 @@ export class PlaylistEffects {
             return this.actions$.pipe(
                 ofType(FavoritesActions.setFavorites),
                 combineLatestWith(this.store.select(selectActivePlaylistId)),
-                filter(
-                    ([, playlistId]) =>
-                        playlistId !== GLOBAL_FAVORITES_PLAYLIST_ID
-                ),
+                filter(([, playlistId]) => !!playlistId),
                 switchMap(([action, playlistId]) =>
                     this.playlistsService.setFavorites(
                         playlistId,
@@ -116,7 +109,8 @@ export class PlaylistEffects {
                                         activeChannel?.url +
                                         (activeChannel?.epgParams ?? ''),
                                     title: activeChannel?.name ?? '',
-                                    'user-agent': activeChannel?.http?.['user-agent'],
+                                    'user-agent':
+                                        activeChannel?.http?.['user-agent'],
                                     referer: activeChannel?.http?.referrer,
                                     origin: activeChannel?.http?.origin,
                                 });
@@ -130,7 +124,8 @@ export class PlaylistEffects {
                                         activeChannel?.url +
                                         (activeChannel?.epgParams ?? ''),
                                     title: activeChannel?.name ?? '',
-                                    'user-agent': activeChannel?.http?.['user-agent'],
+                                    'user-agent':
+                                        activeChannel?.http?.['user-agent'],
                                     referer: activeChannel?.http?.referrer,
                                     origin: activeChannel?.http?.origin,
                                 });
@@ -314,7 +309,10 @@ export class PlaylistEffects {
                             type: 'xtream',
                         });
                         this.router.navigate(['/xtreams/', playlist._id]);
-                    } else if (playlist.macAddress && this.dataService.isElectron) {
+                    } else if (
+                        playlist.macAddress &&
+                        this.dataService.isElectron
+                    ) {
                         // Create Stalker playlist in SQLite
                         await window.electron.dbCreatePlaylist({
                             id: playlist._id.toString(),
@@ -394,7 +392,9 @@ export class PlaylistEffects {
                     // Also delete from SQLite if running in Electron
                     if ((window as any).electron?.dbDeleteAllPlaylists) {
                         try {
-                            await (window as any).electron.dbDeleteAllPlaylists();
+                            await (
+                                window as any
+                            ).electron.dbDeleteAllPlaylists();
                         } catch (error) {
                             console.error(
                                 'Error deleting playlists from SQLite:',

libs/m3u-state/src/lib/reducers/epg.reducers.ts

@@ -12,14 +12,18 @@ export const epgReducers = [
         const epgParams = `?utc=${from}&lutc=${now}`;
         return {
             ...state,
-            active: { ...state.active, epgParams } as Channel,
+            active: state.active
+                ? ({ ...state.active, epgParams } as Channel)
+                : undefined,
         };
     }),
     on(
         EpgActions.resetActiveEpgProgram,
         (state): PlaylistState => ({
             ...state,
-            active: { ...state.active, epgParams: '' } as Channel,
+            active: state.active
+                ? ({ ...state.active, epgParams: '' } as Channel)
+                : undefined,
         })
     ),
     on(

libs/m3u-state/src/lib/selectors.ts

@@ -1,10 +1,6 @@
 import { EntityState } from '@ngrx/entity';
 import { createFeatureSelector, createSelector, Selector } from '@ngrx/store';
-import {
-    GLOBAL_FAVORITES_PLAYLIST_ID,
-    Playlist,
-    PlaylistMeta,
-} from 'shared-interfaces';
+import { Playlist, PlaylistMeta } from 'shared-interfaces';
 import * as fromPlaylistMetaState from './playlists.state';
 import * as fromPlaylistState from './reducers';
 import { selectRouteParam } from './router.selectors';
@@ -80,9 +76,7 @@ export const selectPlaylistTitle = createSelector(
     fromPlaylistMetaState.getPlaylistMetaEntities,
     selectCurrentPlaylistId,
     (data) => {
-        if (data.selectedId === GLOBAL_FAVORITES_PLAYLIST_ID) {
-            return 'Global favorites';
-        } else if (
+        if (
             data.entities &&
             data.selectedId &&
             data.entities[data.selectedId]

libs/services/src/lib/playlists.service.ts

@@ -13,7 +13,6 @@ import { combineLatest, map, switchMap } from 'rxjs';
 import {
     Channel,
     DbStores,
-    GLOBAL_FAVORITES_PLAYLIST_ID,
     Playlist,
     PlaylistMeta,
     PlaylistUpdateState,
@@ -44,7 +43,7 @@ export class PlaylistsService {
     }
 
     getPlaylist(id: string) {
-        if (id === GLOBAL_FAVORITES_PLAYLIST_ID) {
+        if (id === 'global-favorites') {
             return this.getPlaylistWithGlobalFavorites();
         } else {
             return this.dbService.getByID<Playlist>(DbStores.Playlists, id);
@@ -102,7 +101,10 @@ export class PlaylistsService {
                         : {}),
                     // Stalker portal optional fields
                     ...(updatedPlaylist.stalkerSerialNumber !== undefined
-                        ? { stalkerSerialNumber: updatedPlaylist.stalkerSerialNumber }
+                        ? {
+                              stalkerSerialNumber:
+                                  updatedPlaylist.stalkerSerialNumber,
+                          }
                         : {}),
                     ...(updatedPlaylist.stalkerDeviceId1 !== undefined
                         ? { stalkerDeviceId1: updatedPlaylist.stalkerDeviceId1 }
@@ -111,10 +113,16 @@ export class PlaylistsService {
                         ? { stalkerDeviceId2: updatedPlaylist.stalkerDeviceId2 }
                         : {}),
                     ...(updatedPlaylist.stalkerSignature1 !== undefined
-                        ? { stalkerSignature1: updatedPlaylist.stalkerSignature1 }
+                        ? {
+                              stalkerSignature1:
+                                  updatedPlaylist.stalkerSignature1,
+                          }
                         : {}),
                     ...(updatedPlaylist.stalkerSignature2 !== undefined
-                        ? { stalkerSignature2: updatedPlaylist.stalkerSignature2 }
+                        ? {
+                              stalkerSignature2:
+                                  updatedPlaylist.stalkerSignature2,
+                          }
                         : {}),
                 })
             )
@@ -220,29 +228,26 @@ export class PlaylistsService {
             switchMap((portal) =>
                 this.dbService.update(DbStores.Playlists, {
                     ...portal,
-                    favorites: portal.favorites?.filter(
-                        (i) => {
-                            const expectedId = String(favoriteId);
-                            const streamId = String(
-                                (i as Partial<XtreamItem>).stream_id ?? ''
-                            );
-                            const seriesId = String(
-                                (i as Partial<XtreamSerieItem>).series_id ?? ''
-                            );
-                            const movieId = String(
-                                (i as Partial<{ movie_id: string }>).movie_id ??
-                                    ''
-                            );
-                            const itemId = String((i as any).id ?? '');
+                    favorites: portal.favorites?.filter((i) => {
+                        const expectedId = String(favoriteId);
+                        const streamId = String(
+                            (i as Partial<XtreamItem>).stream_id ?? ''
+                        );
+                        const seriesId = String(
+                            (i as Partial<XtreamSerieItem>).series_id ?? ''
+                        );
+                        const movieId = String(
+                            (i as Partial<{ movie_id: string }>).movie_id ?? ''
+                        );
+                        const itemId = String((i as any).id ?? '');
 
-                            return (
-                                streamId !== expectedId &&
-                                seriesId !== expectedId &&
-                                movieId !== expectedId &&
-                                itemId !== expectedId
-                            );
-                        }
-                    ),
+                        return (
+                            streamId !== expectedId &&
+                            seriesId !== expectedId &&
+                            movieId !== expectedId &&
+                            itemId !== expectedId
+                        );
+                    }),
                 })
             )
         );

libs/shared/interfaces/src/index.ts

@@ -1,6 +1,5 @@
 export * from './lib/channel.interface';
 export * from './lib/channel.model';
-export * from './lib/constants';
 export * from './lib/epg-channel-with-programs.interface';
 export * from './lib/epg-channel.model';
 export * from './lib/epg-item.interface';
@@ -29,9 +28,9 @@ export * from './lib/xtream-vod-details.interface';
 export * from './lib/xtream-vod-stream.interface';
 
 // Stalker interfaces
-export * from './lib/stalker-vod-details.interface';
 export * from './lib/stalker-serial-details.interface';
+export * from './lib/stalker-vod-details.interface';
 
 // Unified VOD details (discriminated union + adapters)
-export * from './lib/vod-details-item.interface';
 export * from './lib/vod-details-adapters';
+export * from './lib/vod-details-item.interface';

libs/shared/interfaces/src/lib/constants.ts

@@ -1,4 +0,0 @@
-/**
- * Id of the channel with favorite channels aggregated from all added playlists
- */
-export const GLOBAL_FAVORITES_PLAYLIST_ID = 'GLOBAL_FAVORITES';

libs/shared/m3u-utils/src/lib/playlist.utils.ts

@@ -1,6 +1,5 @@
 import {
     Channel,
-    GLOBAL_FAVORITES_PLAYLIST_ID,
     ParsedPlaylist,
     ParsedPlaylistItem,
     Playlist,
@@ -39,7 +38,7 @@ export function createFavoritesPlaylist(
     channels: Channel[]
 ): Partial<Playlist> {
     return {
-        _id: GLOBAL_FAVORITES_PLAYLIST_ID,
+        _id: 'global-favorites',
         count: channels.length,
         playlist: {
             items: channels,

libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss

@@ -1,7 +1,14 @@
 @use '@angular/material' as mat;
 
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
 .scroll-viewport {
-    min-height: calc(100vh - 190px);
+    height: 100%;
     overflow-x: hidden;
     width: 100%;
 
@@ -26,9 +33,9 @@
 }
 
 #all-channels {
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
-    overflow-x: hidden;
-    max-height: calc(100vh - 167px);
 }
 
 .channel-list {
@@ -89,7 +96,5 @@
 }
 
 @media only screen and (max-width: 599px) {
-    .scroll-viewport {
-        min-height: calc(50vh - 159px);
-    }
+    /* Mobile responsive tweaks if needed */
 }

libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.ts

@@ -26,20 +26,20 @@ export interface EnrichedChannel extends Channel {
 }
 
 @Component({
-    selector: 'app-all-channels-tab',
-    templateUrl: './all-channels-tab.component.html',
-    styleUrls: ['./all-channels-tab.component.scss'],
+    selector: 'app-all-channels-view',
+    templateUrl: './all-channels-view.component.html',
+    styleUrls: ['./all-channels-view.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
-    ChannelListItemComponent,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    ScrollingModule,
-    TranslatePipe
-],
+        ChannelListItemComponent,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        ScrollingModule,
+        TranslatePipe,
+    ],
 })
-export class AllChannelsTabComponent implements OnDestroy {
+export class AllChannelsViewComponent implements OnDestroy {
     /** All channels (will be filtered by search) */
     readonly channels = input.required<Channel[]>();
 

libs/ui/components/src/lib/channel-list-container/channel-list-container.component.html

@@ -1,14 +1,16 @@
 @if (displayedChannels().length) {
-    <mat-tab-group color="primary" backgroundColor="primary">
-        <!-- All Channels Tab -->
-        <mat-tab>
-            <ng-template mat-tab-label>
-                <mat-icon class="tab-icon">list</mat-icon>
-                <div class="tab-title">
-                    {{ 'CHANNELS.ALL_CHANNELS' | translate }}
-                </div>
-            </ng-template>
-            <app-all-channels-tab
+    @if (viewTitle()) {
+        <header class="context-header">
+            <div class="context-header__top">
+                <h2>{{ viewTitle() | translate }}</h2>
+            </div>
+        </header>
+        <div class="context-divider"></div>
+    }
+
+    @switch (activeView()) {
+        @case ('all') {
+            <app-all-channels-view
                 [channels]="displayedChannels()"
                 [channelEpgMap]="channelEpgMap()"
                 [progressTick]="progressTick()"
@@ -19,17 +21,9 @@
                 (channelSelected)="onChannelSelected($event)"
                 (favoriteToggled)="onFavoriteToggled($event)"
             />
-        </mat-tab>
-
-        <!-- Groups Tab -->
-        <mat-tab>
-            <ng-template mat-tab-label>
-                <mat-icon class="tab-icon">category</mat-icon>
-                <div class="tab-title">
-                    {{ 'CHANNELS.GROUPS' | translate }}
-                </div>
-            </ng-template>
-            <app-groups-tab
+        }
+        @case ('groups') {
+            <app-groups-view
                 [groupedChannels]="groupedChannels()"
                 [channelEpgMap]="channelEpgMap()"
                 [progressTick]="progressTick()"
@@ -39,34 +33,23 @@
                 (channelSelected)="onChannelSelected($event)"
                 (favoriteToggled)="onFavoriteToggled($event)"
             />
-        </mat-tab>
-
-        <!-- Favorites Tab -->
-        @let showFavorites = (playlistId$ | async) !== 'GLOBAL_FAVORITES';
-        @if (showFavorites) {
-            <mat-tab>
-                <ng-template mat-tab-label>
-                    <mat-icon class="tab-icon">star</mat-icon>
-                    <div class="tab-title">
-                        {{ 'CHANNELS.FAVORITES' | translate }}
-                    </div>
-                </ng-template>
-                @let favorites = favorites$ | async;
-                @if (favorites) {
-                    <app-favorites-tab
-                        [favorites]="favorites"
-                        [channelEpgMap]="channelEpgMap()"
-                        [progressTick]="progressTick()"
-                        [shouldShowEpg]="shouldShowEpg()"
-                        [activeChannelUrl]="activeChannelUrl()"
-                        (channelSelected)="onChannelSelected($event)"
-                        (favoriteToggled)="onFavoriteToggled($event)"
-                        (favoritesReordered)="onFavoritesReordered($event)"
-                    />
-                }
-            </mat-tab>
         }
-    </mat-tab-group>
+        @case ('favorites') {
+            @let favorites = favorites$ | async;
+            @if (favorites) {
+                <app-favorites-view
+                    [favorites]="favorites"
+                    [channelEpgMap]="channelEpgMap()"
+                    [progressTick]="progressTick()"
+                    [shouldShowEpg]="shouldShowEpg()"
+                    [activeChannelUrl]="activeChannelUrl()"
+                    (channelSelected)="onChannelSelected($event)"
+                    (favoriteToggled)="onFavoriteToggled($event)"
+                    (favoritesReordered)="onFavoritesReordered($event)"
+                />
+            }
+        }
+    }
 } @else {
     <div class="loading-container">
         <mat-icon class="loading-spinner">sync</mat-icon>

libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss

@@ -1,5 +1,6 @@
 :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     container-type: inline-size;
@@ -52,3 +53,33 @@
         display: block;
     }
 }
+
+// ─── Header ───────────────────────────────────────────────────────────────────
+.context-header {
+    padding: 12px 16px 8px;
+    flex-shrink: 0;
+}
+
+.context-header__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+
+    h2 {
+        margin: 0;
+        font-size: 0.94rem;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--mat-sys-on-surface);
+    }
+}
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+.context-divider {
+    height: 1px;
+    background: var(--mat-sys-outline-variant);
+    margin: 0 0 6px;
+    opacity: 0.6;
+    flex-shrink: 0;
+}

libs/ui/components/src/lib/channel-list-container/channel-list-container.component.ts

@@ -5,12 +5,14 @@ import {
     computed,
     inject,
     Input,
+    input,
     OnDestroy,
     OnInit,
     signal,
 } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTabsModule } from '@angular/material/tabs';
+import { NavigationEnd, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -22,18 +24,12 @@ import {
     selectActivePlaylistId,
     selectFavorites,
 } from 'm3u-state';
-import { BehaviorSubject, combineLatest, map, skipWhile } from 'rxjs';
+import { BehaviorSubject, combineLatest, filter, map, skipWhile } from 'rxjs';
 import { EpgService } from 'services';
-import {
-    Channel,
-    EpgProgram,
-    GLOBAL_FAVORITES_PLAYLIST_ID,
-    Settings,
-    STORE_KEY,
-} from 'shared-interfaces';
-import { AllChannelsTabComponent } from './all-channels-tab/all-channels-tab.component';
-import { FavoritesTabComponent } from './favorites-tab/favorites-tab.component';
-import { GroupsTabComponent } from './groups-tab/groups-tab.component';
+import { Channel, EpgProgram, Settings, STORE_KEY } from 'shared-interfaces';
+import { AllChannelsViewComponent } from './all-channels-view/all-channels-view.component';
+import { FavoritesViewComponent } from './favorites-view/favorites-view.component';
+import { GroupsViewComponent } from './groups-view/groups-view.component';
 
 @Component({
     selector: 'app-channel-list-container',
@@ -41,12 +37,11 @@ import { GroupsTabComponent } from './groups-tab/groups-tab.component';
     styleUrls: ['./channel-list-container.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
-        AllChannelsTabComponent,
+        AllChannelsViewComponent,
         CommonModule,
-        FavoritesTabComponent,
-        GroupsTabComponent,
+        FavoritesViewComponent,
+        GroupsViewComponent,
         MatIconModule,
-        MatTabsModule,
         TranslatePipe,
     ],
 })
@@ -54,6 +49,7 @@ export class ChannelListContainerComponent implements OnInit, OnDestroy {
     private readonly epgService = inject(EpgService);
     private readonly storage = inject(StorageMap);
     private readonly store = inject(Store);
+    private readonly router = inject(Router);
 
     /** Map of channel ID to current EPG program */
     readonly channelEpgMap = signal(new Map<string, EpgProgram | null>());
@@ -73,6 +69,30 @@ export class ChannelListContainerComponent implements OnInit, OnDestroy {
     /** Item size for virtual scroll - compact when no EPG */
     readonly itemSize = computed(() => (this.shouldShowEpg() ? 68 : 48));
 
+    /** Active view (all, groups, favorites) */
+    readonly activeView = input<string>('all');
+
+    readonly currentUrl = toSignal(
+        this.router.events.pipe(
+            filter((event) => event instanceof NavigationEnd),
+            map((event) => (event as NavigationEnd).urlAfterRedirects)
+        ),
+        { initialValue: this.router.url }
+    );
+
+    readonly viewTitle = computed(() => {
+        const view = this.activeView();
+        const url = this.currentUrl();
+        if (view === 'all') return 'CHANNELS.ALL_CHANNELS';
+        if (view === 'groups') return 'CHANNELS.GROUPS';
+        if (view === 'favorites') {
+            return url.includes('/workspace/global-favorites')
+                ? 'HOME.PLAYLISTS.GLOBAL_FAVORITES'
+                : 'CHANNELS.FAVORITES';
+        }
+        return '';
+    });
+
     /** Channels array */
     _channelList: Channel[] = [];
     private readonly channelListSignal = signal<Channel[]>([]);
@@ -98,11 +118,7 @@ export class ChannelListContainerComponent implements OnInit, OnDestroy {
 
     /** Displayed channels - filters out unfavorited channels in global favorites view */
     readonly displayedChannels = computed(() => {
-        const channels = this.channelListSignal();
-        if (this.activePlaylistIdSignal() === GLOBAL_FAVORITES_PLAYLIST_ID) {
-            return channels.filter((ch) => this.favoriteIds().has(ch.url));
-        }
-        return channels;
+        return this.channelListSignal();
     });
 
     /** Object with channels sorted by groups */

libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss

@@ -1,6 +1,15 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
 #favorites-list {
-    height: calc(100vh - 105px);
+    flex: 1;
+    min-height: 0;
     overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .channel-list {

libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.ts

@@ -12,17 +12,17 @@ import {
 } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
 import { Channel, EpgProgram } from 'shared-interfaces';
-import { EnrichedChannel } from '../all-channels-tab/all-channels-tab.component';
+import { EnrichedChannel } from '../all-channels-view/all-channels-view.component';
 import { ChannelListItemComponent } from '../channel-list-item/channel-list-item.component';
 
 @Component({
-    selector: 'app-favorites-tab',
-    templateUrl: './favorites-tab.component.html',
-    styleUrls: ['./favorites-tab.component.scss'],
+    selector: 'app-favorites-view',
+    templateUrl: './favorites-view.component.html',
+    styleUrls: ['./favorites-view.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [ChannelListItemComponent, DragDropModule, TranslatePipe],
 })
-export class FavoritesTabComponent {
+export class FavoritesViewComponent {
     /** Favorite channels */
     readonly favorites = input.required<Channel[]>();
 

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss

@@ -1,6 +1,15 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
 #groups-list {
-    height: calc(100vh - 105px);
+    flex: 1;
+    min-height: 0;
     overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .channel-list {

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts

@@ -16,13 +16,13 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import { Channel, EpgProgram } from 'shared-interfaces';
-import { EnrichedChannel } from '../all-channels-tab/all-channels-tab.component';
+import { EnrichedChannel } from '../all-channels-view/all-channels-view.component';
 import { ChannelListItemComponent } from '../channel-list-item/channel-list-item.component';
 
 @Component({
-    selector: 'app-groups-tab',
-    templateUrl: './groups-tab.component.html',
-    styleUrls: ['./groups-tab.component.scss'],
+    selector: 'app-groups-view',
+    templateUrl: './groups-view.component.html',
+    styleUrls: ['./groups-view.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
         ChannelListItemComponent,
@@ -33,7 +33,7 @@ import { ChannelListItemComponent } from '../channel-list-item/channel-list-item
         TranslatePipe,
     ],
 })
-export class GroupsTabComponent implements AfterViewInit, OnDestroy {
+export class GroupsViewComponent implements AfterViewInit, OnDestroy {
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly ngZone = inject(NgZone);
 

libs/ui/components/src/lib/video-player/sidebar/sidebar.component.html

@@ -17,4 +17,7 @@
     </div>
 }
 
-<app-channel-list-container [channelList]="channels()" />
+<app-channel-list-container
+    [channelList]="channels()"
+    [activeView]="activeView()"
+/>

libs/ui/components/src/lib/video-player/sidebar/sidebar.component.ts

@@ -27,6 +27,7 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch
 export class SidebarComponent {
     readonly channels = input<Channel[]>([]);
     readonly showPlaylistHeader = input(true);
+    readonly activeView = input<string>('all');
 
     private readonly store = inject(Store);
     private readonly translate = inject(TranslateService);

libs/ui/components/src/lib/video-player/toolbar/toolbar.component.html

@@ -7,7 +7,7 @@
     >
         <mat-icon>{{ isLeftDrawerOpened ? 'menu' : 'menu_open' }}</mat-icon>
     </button>
-    @if ((playlistId$ | async) !== 'GLOBAL_FAVORITES') {
+    <!-- @if (playlistId$ | async) {
         <button
             mat-icon-button
             (click)="updateFavoriteStatus(activeChannel)"
@@ -21,7 +21,7 @@
                 }}</mat-icon
             >
         </button>
-    }
+    } -->
     <button
         mat-icon-button
         (click)="infoOverlayClicked.emit()"
@@ -31,13 +31,13 @@
     </button>
     {{ activeChannel?.name }}
     <div class="spacer"></div>
-    <button
+    <!-- <button
         mat-icon-button
         (click)="settingsClicked.emit()"
         [matTooltip]="'MENU.SETTINGS' | translate"
     >
         <mat-icon>settings</mat-icon>
-    </button>
+    </button> -->
     <button
         mat-icon-button
         (click)="multiEpgClicked.emit()"

libs/ui/components/src/lib/video-player/toolbar/toolbar.component.ts

@@ -8,10 +8,10 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { Store } from '@ngrx/store';
 import { TranslatePipe } from '@ngx-translate/core';
 import {
+    FavoritesActions,
     selectActivePlaylistId,
     selectFavorites,
     selectIsEpgAvailable,
-    FavoritesActions,
 } from 'm3u-state';
 import { Channel } from 'shared-interfaces';
 

package.json

@@ -32,7 +32,9 @@
         "package:app": "nx run electron-backend:make --prepackageOnly",
         "make:app": "nx run electron-backend:make",
         "serve:website": "nx serve website",
-        "build:website": "nx build website"
+        "build:website": "nx build website",
+        "lint": "nx lint electron-backend",
+        "build": "nx build electron-backend"
     },
     "private": true,
     "packageManager": "pnpm@10.17.1",