fix(live-tv): keep a hidden channel list discoverable and scoped per surface (#1555)

* fix(live-tv): keep a hidden channel list discoverable and scoped per surface

The second report in #1458 ("all channels disappear after clearing the
playback history, reset does not bring them back") was not data loss: the
history write never touches playlist items. The reporter's screenshot shows
a collapsed channel rail, a state persisted under one localStorage key
shared by the M3U player, the Xtream/Stalker live layouts and the
favorites/recent live tab. It survived restart, "Remove all playlists" and
re-import, and the only way back was a 32px chevron or Ctrl/Cmd+B.

- LiveLayoutSidebarStateService keeps the state per surface (m3u / portal /
  collection) under live-sidebar-state:<surface>; the M3U player now goes
  through the service instead of its own signal. The legacy shared key is
  forgotten on startup and never read, so the update itself restores the
  list for everyone who got stuck.
- The workspace header renders a view_sidebar toggle on every route that
  renders its own rail (M3U all/groups, Xtream live, Stalker itv/radio), so
  the control exists in both states instead of disappearing with the rail.
  Collection pages keep their own toggle beside the content switch.
- While the rail is collapsed and nothing plays, every live host shows
  app-channel-list-hidden-state (title, shortcut hint, full-size "Show
  channels list" button) instead of asking to pick from a list that is not
  on screen. app-portal-empty-state gained optional hint/action inputs.
- New LAYOUT.CHANNELS_LIST_HIDDEN(_HINT) strings in en plus 18 locales.

Tests: service, empty-state, hidden-state and header component specs, a
separate video-player-sidebar spec (the main M3U spec sits at the test
line budget), and an Electron E2E covering history clearing, restore via
button/header/shortcut across restart and re-import, per-surface scoping
against an Xtream portal, and legacy-key cleanup.

Refs #1458

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* test(live-tv): mirror the EPG offset setting in the sidebar spec mock

Master's player reads `resolvedEpgOffsetMinutes` from the settings store; the
new sidebar spec was cloned from the movie-gate harness before that field
landed, so its playing-channel case threw inside the EPG effect.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* test(web-e2e): scope the Stalker radio rail toggles to the rail

The workspace header now carries a second "Hide/Show channels list" toggle,
so the role+name locators matched more than one button and tripped
Playwright's strict mode. Target the rail's own chevron and the floating
restore button, and assert the header toggle mirrors the state.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(live-tv): honour Cmd/Ctrl+B on collection pages and hide the header rail toggle on phones

Codex review follow-ups on #1555:

- The hidden-list state advertises Cmd/Ctrl+B, but the favorites/recent
  collection page had no handler; only the routed M3U/Xtream/Stalker live
  layouts did. The page now toggles the collection surface while its live
  tab is on screen, with the same typing/inert guards as the other hosts.
- At the phone breakpoint the header already holds the drawer toggle,
  switcher, search and Add; the live rail is a bottom drawer with its own
  toggle there, so the header rail toggle is hidden below 640px.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(live-tv): migrate the live navigation helpers to the per-surface sidebar API

master (#1554) added `XtreamLiveChannelNavigationService` and
`stalker-live-navigation.ts`, which expand the rail through
`sidebar.setState('expanded')` on the pre-split signature. Point them at the
`portal` surface and update their specs; drop the now-unused hidden-state
stub from the Xtream layout spec, which master pushed to the max-lines
budget.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

libs/playlist/m3u/feature-player/src/lib/video-player/video-player-sidebar.spec.ts

@@ -0,0 +1,352 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, NO_ERRORS_SCHEMA, output, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Overlay } from '@angular/cdk/overlay';
+import { Store } from '@ngrx/store';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+import { BehaviorSubject, of } from 'rxjs';
+import {
+    selectActive,
+    selectActiveEpgProgram,
+    selectActivePlaybackUrl,
+    selectChannels,
+    selectChannelsLoading,
+    selectCurrentEpgProgram,
+} from '@iptvnator/m3u-state';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    LiveLayoutSidebarStateService,
+    liveSidebarStateStorageKey,
+    PORTAL_EXTERNAL_PLAYBACK,
+} from '@iptvnator/portal/shared/util';
+import {
+    DataService,
+    PlaylistsService,
+    RuntimeCapabilitiesService,
+    SettingsStore,
+    TmdbEnrichmentService,
+} from '@iptvnator/services';
+import {
+    Channel,
+    EpgProgram,
+    Settings,
+    VideoPlayer,
+} from '@iptvnator/shared/interfaces';
+import type { VideoPlayerComponent as VideoPlayerComponentInstance } from './video-player.component';
+
+// The component's chain reaches video.js (ui/playback → VjsPlayer); the CJS
+// bundle breaks under the ESM jest environment, so it is mocked before the
+// dynamic import evaluates the chain.
+jest.unstable_mockModule('video.js', () => ({
+    default: jest.fn(),
+}));
+jest.unstable_mockModule('@yangkghjh/videojs-aspect-ratio-panel', () => ({}));
+jest.unstable_mockModule('videojs-contrib-quality-levels', () => ({}));
+jest.unstable_mockModule('videojs-quality-selector-hls', () => ({}));
+
+@Component({
+    selector: 'app-channel-list-hidden-state',
+    standalone: true,
+    template: '',
+})
+class StubChannelListHiddenStateComponent {
+    readonly restore = output<void>();
+}
+
+/**
+ * The collapsible channels rail of the M3U player. Separate from
+ * `video-player.component.spec.ts` only because that file sits at the
+ * max-lines test budget; the harness here is the minimal subset needed to
+ * render the rail and the content-area empty states.
+ */
+describe('VideoPlayerComponent — collapsible channels rail', () => {
+    let VideoPlayerComponent: typeof import('./video-player.component').VideoPlayerComponent;
+    let fixture: ComponentFixture<VideoPlayerComponentInstance>;
+    let component: VideoPlayerComponentInstance;
+    let sidebarState: LiveLayoutSidebarStateService;
+
+    const playlistId = signal('playlist-1');
+    const activeChannel = signal<Channel | null>(null);
+    const activePlaybackUrl = signal<string | null>(null);
+    const channels = signal<Channel[]>([]);
+    const channelsLoading = signal(false);
+    const currentEpgProgram = signal<EpgProgram | null>(null);
+    const activeEpgProgram = signal<EpgProgram | null>(null);
+    const channels$ = new BehaviorSubject<Channel[]>([]);
+    const activeChannel$ = new BehaviorSubject<Channel | null>(null);
+    const currentEpgProgram$ = new BehaviorSubject<EpgProgram | null>(null);
+    const epgPrograms$ = new BehaviorSubject<EpgProgram[]>([]);
+
+    const player = signal<VideoPlayer>(VideoPlayer.VideoJs);
+    const showCaptions = signal(false);
+    const stripCountryPrefix = signal(false);
+
+    const storeMock = {
+        dispatch: jest.fn(),
+        selectSignal: jest.fn((selector: unknown) => {
+            switch (selector) {
+                case selectActive:
+                    return activeChannel;
+                case selectActivePlaybackUrl:
+                    return activePlaybackUrl;
+                case selectChannels:
+                    return channels;
+                case selectChannelsLoading:
+                    return channelsLoading;
+                case selectCurrentEpgProgram:
+                    return currentEpgProgram;
+                case selectActiveEpgProgram:
+                    return activeEpgProgram;
+                default:
+                    return signal(null);
+            }
+        }),
+        select: jest.fn((selector: unknown) => {
+            switch (selector) {
+                case selectChannels:
+                    return channels$.asObservable();
+                case selectActive:
+                    return activeChannel$.asObservable();
+                case selectCurrentEpgProgram:
+                    return currentEpgProgram$.asObservable();
+                default:
+                    return of(null);
+            }
+        }),
+    };
+
+    function clearSidebarStorage(): void {
+        localStorage.removeItem(liveSidebarStateStorageKey('m3u'));
+        localStorage.removeItem(liveSidebarStateStorageKey('portal'));
+        localStorage.removeItem(liveSidebarStateStorageKey('collection'));
+    }
+
+    function query(selector: string): Element | null {
+        return fixture.nativeElement.querySelector(selector);
+    }
+
+    function hiddenState() {
+        return fixture.debugElement.query(
+            By.directive(StubChannelListHiddenStateComponent)
+        );
+    }
+
+    beforeAll(async () => {
+        ({ VideoPlayerComponent } = await import('./video-player.component'));
+    });
+
+    beforeEach(async () => {
+        clearSidebarStorage();
+        activeChannel.set(null);
+        activeChannel$.next(null);
+        channels.set([]);
+        channels$.next([]);
+
+        await TestBed.configureTestingModule({
+            imports: [VideoPlayerComponent],
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        params: of({ id: playlistId(), view: 'all' }),
+                        queryParams: of({}),
+                        snapshot: {
+                            data: { layout: 'workspace' },
+                            queryParams: {},
+                        },
+                    },
+                },
+                {
+                    provide: Router,
+                    useValue: {
+                        url: '/workspace/playlists/playlist-1/all',
+                        navigate: jest.fn(),
+                        currentNavigation: jest.fn().mockReturnValue(null),
+                    },
+                },
+                { provide: Store, useValue: storeMock },
+                {
+                    provide: Overlay,
+                    useValue: { position: jest.fn(), create: jest.fn() },
+                },
+                { provide: DataService, useValue: { sendIpcEvent: jest.fn() } },
+                {
+                    provide: RuntimeCapabilitiesService,
+                    useValue: {
+                        supportsEpg: true,
+                        isElectron: false,
+                        supportsRemoteControl: false,
+                    },
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: {
+                        getPlaylist: jest.fn(() =>
+                            of({ playlist: { items: [] }, favorites: [] })
+                        ),
+                        getPlaylistWithGlobalFavorites: jest.fn(() =>
+                            of({ playlist: { items: [] }, favorites: [] })
+                        ),
+                        addM3uRecentlyViewed: jest.fn(() =>
+                            of({ recentlyViewed: [] })
+                        ),
+                    },
+                },
+                {
+                    provide: EpgService,
+                    useValue: {
+                        currentEpgPrograms$: epgPrograms$.asObservable(),
+                        getChannelMetadataForChannels: () => of(new Map()),
+                    },
+                },
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: { resolvedPlaylistId: playlistId },
+                },
+                {
+                    provide: SettingsStore,
+                    useValue: {
+                        player,
+                        showCaptions,
+                        stripCountryPrefix,
+                        m3uVodDetails: signal(true),
+                        resolvedEpgViewMode: signal('timeline'),
+                        resolvedEpgOffsetMinutes: signal(0),
+                        epgUrl: signal<string[]>([]),
+                    },
+                },
+                {
+                    provide: StorageMap,
+                    useValue: {
+                        get: jest.fn(() =>
+                            of({
+                                player: player(),
+                                showCaptions: showCaptions(),
+                            } as Partial<Settings>)
+                        ),
+                    },
+                },
+                {
+                    provide: PORTAL_EXTERNAL_PLAYBACK,
+                    useValue: { activeSession: signal(null) },
+                },
+                {
+                    provide: TmdbEnrichmentService,
+                    useValue: { isEnabled: () => true },
+                },
+            ],
+        })
+            // The rail and the content-area empty states are the subject;
+            // everything else renders as inert unknown elements.
+            .overrideComponent(VideoPlayerComponent, {
+                set: {
+                    imports: [
+                        AsyncPipe,
+                        StubChannelListHiddenStateComponent,
+                        MockPipe(
+                            TranslatePipe,
+                            (value: string | null | undefined) => value ?? ''
+                        ),
+                    ],
+                    schemas: [NO_ERRORS_SCHEMA],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(VideoPlayerComponent);
+        component = fixture.componentInstance;
+        sidebarState = TestBed.inject(LiveLayoutSidebarStateService);
+    });
+
+    afterEach(() => {
+        fixture?.destroy();
+        clearSidebarStorage();
+    });
+
+    it('starts with the rail visible and the "select a channel" empty state', () => {
+        fixture.detectChanges();
+
+        expect(component.isSidebarCollapsed()).toBe(false);
+        expect(query('.sidebar')?.classList.contains('sidebar-collapsed')).toBe(
+            false
+        );
+        expect(query('.sidebar-restore')).toBeNull();
+        expect(query('app-portal-empty-state')).not.toBeNull();
+        expect(hiddenState()).toBeNull();
+    });
+
+    it('hides the rail through the shared per-surface state and swaps the empty state for a full-size way back', () => {
+        fixture.detectChanges();
+
+        component.toggleSidebar();
+        fixture.detectChanges();
+
+        expect(component.isSidebarCollapsed()).toBe(true);
+        expect(query('.sidebar')?.classList.contains('sidebar-collapsed')).toBe(
+            true
+        );
+        expect(query('.sidebar-restore')).not.toBeNull();
+        expect(query('app-portal-empty-state')).toBeNull();
+        expect(hiddenState()).not.toBeNull();
+        expect(localStorage.getItem(liveSidebarStateStorageKey('m3u'))).toBe(
+            'collapsed'
+        );
+
+        hiddenState().componentInstance.restore.emit();
+        fixture.detectChanges();
+
+        expect(component.isSidebarCollapsed()).toBe(false);
+        expect(query('.sidebar-restore')).toBeNull();
+        expect(hiddenState()).toBeNull();
+        expect(query('app-portal-empty-state')).not.toBeNull();
+        expect(localStorage.getItem(liveSidebarStateStorageKey('m3u'))).toBe(
+            'expanded'
+        );
+    });
+
+    it('reflects a toggle made elsewhere for the M3U surface (the header) and ignores other surfaces', () => {
+        fixture.detectChanges();
+
+        sidebarState.setState('portal', 'collapsed');
+        sidebarState.setState('collection', 'collapsed');
+        fixture.detectChanges();
+
+        expect(component.isSidebarCollapsed()).toBe(false);
+        expect(query('.sidebar-restore')).toBeNull();
+
+        sidebarState.toggle('m3u');
+        fixture.detectChanges();
+
+        expect(component.isSidebarCollapsed()).toBe(true);
+        expect(query('.sidebar-restore')).not.toBeNull();
+    });
+
+    it('does not show the hidden-list state while a channel is playing', () => {
+        const liveChannel = {
+            id: 'channel-1',
+            url: 'http://localhost/live.m3u8',
+            name: 'Sample TV',
+            epgParams: '',
+            radio: 'false',
+            tvg: { id: '', logo: '', name: 'Sample TV' },
+        } as Channel;
+        activeChannel.set(liveChannel);
+        activeChannel$.next(liveChannel);
+        channels.set([liveChannel]);
+        channels$.next([liveChannel]);
+        fixture.detectChanges();
+
+        component.toggleSidebar();
+        fixture.detectChanges();
+
+        expect(component.isSidebarCollapsed()).toBe(true);
+        expect(query('.sidebar-restore')).not.toBeNull();
+        expect(hiddenState()).toBeNull();
+        expect(query('.video-player')).not.toBeNull();
+    });
+});

libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html

@@ -206,6 +206,8 @@
                 </div>
             </div>
         }
+    } @else if (isSidebarCollapsed()) {
+        <app-channel-list-hidden-state (restore)="toggleSidebar()" />
     } @else {
         <app-portal-empty-state
             icon="live_tv"

libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts

@@ -83,17 +83,18 @@ import {
     isTypingInInput,
     isWorkspaceLayoutRoute,
     LiveEpgPanelState,
-    LiveSidebarState,
+    LiveLayoutSidebarStateService,
     persistLiveEpgPanelState,
-    persistLiveSidebarState,
     PORTAL_EXTERNAL_PLAYBACK,
     isLiveExternalPlayerSession,
     REMOTE_CONTROL_RESET_STATUS,
     restoreLiveEpgPanelState,
-    restoreLiveSidebarState,
     WorkspaceHeaderContextService,
 } from '@iptvnator/portal/shared/util';
-import { PortalEmptyStateComponent } from '@iptvnator/portal/shared/ui';
+import {
+    ChannelListHiddenStateComponent,
+    PortalEmptyStateComponent,
+} from '@iptvnator/portal/shared/ui';
 import {
     AudioPlayerComponent,
     FULLSCREEN_CHANNEL_PANEL,
@@ -200,6 +201,7 @@ function isInsideScrollableRegion(
         MatButtonModule,
         MatIconModule,
         MatTooltipModule,
+        ChannelListHiddenStateComponent,
         PortalEmptyStateComponent,
         ResizableDirective,
         SidebarComponent,
@@ -232,6 +234,9 @@ export class VideoPlayerComponent
     private readonly storage = inject(StorageMap);
     private readonly store = inject(Store);
     private readonly epgService = inject(EpgService);
+    private readonly liveSidebarStateService = inject(
+        LiveLayoutSidebarStateService
+    );
     private readonly tmdbEnrichment = inject(TmdbEnrichmentService);
     private readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
     private readonly workspaceHeaderContext = inject(
@@ -481,12 +486,9 @@ export class VideoPlayerComponent
     readonly isLiveEpgPanelCollapsed = computed(
         () => this.liveEpgPanelState() === 'collapsed'
     );
-    readonly liveSidebarState = signal<LiveSidebarState>(
-        restoreLiveSidebarState()
-    );
-    readonly isSidebarCollapsed = computed(
-        () => this.liveSidebarState() === 'collapsed'
-    );
+    /** Shared with the workspace header toggle; persisted per surface. */
+    readonly isSidebarCollapsed =
+        this.liveSidebarStateService.isCollapsedFor('m3u');
 
     /** Channels list */
     readonly channels$: Observable<Channel[]> = this.store.select(
@@ -1007,11 +1009,7 @@ export class VideoPlayerComponent
     }
 
     toggleSidebar(): void {
-        const next: LiveSidebarState = this.isSidebarCollapsed()
-            ? 'expanded'
-            : 'collapsed';
-        this.liveSidebarState.set(next);
-        persistLiveSidebarState(next);
+        this.liveSidebarStateService.toggle('m3u');
     }
 
     onLiveEpgDateNavigation(direction: EpgDateNavigationDirection): void {

libs/portal/shared/ui/src/index.ts

@@ -8,6 +8,7 @@ export * from './lib/components/grid-list/grid-list.component';
 export * from './lib/components/playlist-error-view/playlist-error-view.component';
 export { ProgressCapsuleComponent } from '@iptvnator/ui/components';
 export * from './lib/components/portal-empty-state/portal-empty-state.component';
+export * from './lib/components/channel-list-hidden-state/channel-list-hidden-state.component';
 export * from './lib/components/search-form/search-form.component';
 export * from './lib/components/search-layout/search-layout.component';
 export { WatchedBadgeComponent } from '@iptvnator/ui/components';

libs/portal/shared/ui/src/lib/components/channel-list-hidden-state/channel-list-hidden-state.component.spec.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+import { ChannelListHiddenStateComponent } from './channel-list-hidden-state.component';
+
+describe('ChannelListHiddenStateComponent', () => {
+    let fixture: ComponentFixture<ChannelListHiddenStateComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ChannelListHiddenStateComponent],
+        })
+            .overrideComponent(ChannelListHiddenStateComponent, {
+                remove: { imports: [TranslatePipe] },
+                add: {
+                    imports: [MockPipe(TranslatePipe, (key: string) => key)],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(ChannelListHiddenStateComponent);
+        fixture.detectChanges();
+    });
+
+    it('explains that the list is hidden instead of asking to pick a channel', () => {
+        const host: HTMLElement = fixture.nativeElement;
+
+        expect(host.querySelector('.empty-state-title')?.textContent).toContain(
+            'LAYOUT.CHANNELS_LIST_HIDDEN'
+        );
+        expect(host.querySelector('.empty-state-hint')?.textContent).toContain(
+            'LAYOUT.CHANNELS_LIST_HIDDEN_HINT'
+        );
+        expect(host.textContent).not.toContain('SELECT_CHANNEL_PLAYBACK');
+    });
+
+    it('offers a full-size restore action that emits once per click', () => {
+        const restore = jest.fn();
+        fixture.componentInstance.restore.subscribe(restore);
+        const button: HTMLButtonElement | null =
+            fixture.nativeElement.querySelector('button.empty-state-action');
+
+        expect(button?.textContent).toContain('LAYOUT.SHOW_CHANNELS_LIST');
+
+        button?.click();
+
+        expect(restore).toHaveBeenCalledTimes(1);
+    });
+});

libs/portal/shared/ui/src/lib/components/channel-list-hidden-state/channel-list-hidden-state.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { PortalEmptyStateComponent } from '../portal-empty-state/portal-empty-state.component';
+
+/**
+ * Content-area placeholder for a live layout whose channel rail is collapsed
+ * and nothing is playing. It replaces the "select a channel" empty state,
+ * which would otherwise ask the user to pick from a list they cannot see,
+ * and gives the collapsed state a full-size way back next to the 32px
+ * restore chevron. Every live host (M3U player, Xtream/Stalker live layouts,
+ * unified live tab) renders this same component so the copy stays identical.
+ */
+@Component({
+    selector: 'app-channel-list-hidden-state',
+    imports: [PortalEmptyStateComponent, TranslatePipe],
+    template: `
+        <app-portal-empty-state
+            icon="view_sidebar"
+            [message]="'LAYOUT.CHANNELS_LIST_HIDDEN' | translate"
+            [hint]="'LAYOUT.CHANNELS_LIST_HIDDEN_HINT' | translate"
+            [actionLabel]="'LAYOUT.SHOW_CHANNELS_LIST' | translate"
+            actionIcon="chevron_right"
+            (action)="restore.emit()"
+        />
+    `,
+    styles: `
+        :host {
+            display: flex;
+            flex: 1;
+            min-height: 0;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChannelListHiddenStateComponent {
+    readonly restore = output<void>();
+}

libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.html

@@ -1,4 +1,20 @@
 <div class="empty-state-container">
     <mat-icon class="empty-state-icon">{{ icon() }}</mat-icon>
     <h2 class="empty-state-title">{{ message() }}</h2>
+    @if (hint(); as hint) {
+        <p class="empty-state-hint">{{ hint }}</p>
+    }
+    @if (actionLabel(); as label) {
+        <button
+            type="button"
+            mat-stroked-button
+            class="empty-state-action"
+            (click)="action.emit()"
+        >
+            @if (actionIcon(); as actionIcon) {
+                <mat-icon>{{ actionIcon }}</mat-icon>
+            }
+            {{ label }}
+        </button>
+    }
 </div>

libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss

@@ -33,6 +33,27 @@
     opacity: 0.6;
 }
 
+.empty-state-hint {
+    margin: 8px 0 0;
+    max-width: 36ch;
+    font-size: 0.88rem;
+    line-height: 1.4;
+    text-wrap: balance;
+    opacity: 0.55;
+}
+
+// The action is the one element here that must not fade into the backdrop:
+// it is the way out of the state, so it keeps full opacity and a real
+// hit target while the icon and copy stay muted.
+.empty-state-action {
+    margin-top: 20px;
+    min-height: 40px;
+
+    mat-icon {
+        margin-right: 6px;
+    }
+}
+
 @keyframes portal-empty-state-fade-in {
     from {
         opacity: 0;

libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.spec.ts

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PortalEmptyStateComponent } from './portal-empty-state.component';
+
+describe('PortalEmptyStateComponent', () => {
+    let fixture: ComponentFixture<PortalEmptyStateComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [PortalEmptyStateComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(PortalEmptyStateComponent);
+        fixture.componentRef.setInput('message', 'Nothing here');
+        fixture.detectChanges();
+    });
+
+    it('renders only the icon and message by default', () => {
+        const host: HTMLElement = fixture.nativeElement;
+
+        expect(host.querySelector('.empty-state-icon')?.textContent).toBe(
+            'live_tv'
+        );
+        expect(host.querySelector('.empty-state-title')?.textContent).toBe(
+            'Nothing here'
+        );
+        expect(host.querySelector('.empty-state-hint')).toBeNull();
+        expect(host.querySelector('.empty-state-action')).toBeNull();
+    });
+
+    it('renders the hint and a labelled action that emits on click', () => {
+        const action = jest.fn();
+        fixture.componentInstance.action.subscribe(action);
+        fixture.componentRef.setInput('hint', 'Try the button');
+        fixture.componentRef.setInput('actionLabel', 'Do it');
+        fixture.componentRef.setInput('actionIcon', 'chevron_right');
+        fixture.detectChanges();
+
+        const host: HTMLElement = fixture.nativeElement;
+        const button = host.querySelector<HTMLButtonElement>(
+            'button.empty-state-action'
+        );
+
+        expect(host.querySelector('.empty-state-hint')?.textContent).toBe(
+            'Try the button'
+        );
+        expect(button?.textContent).toContain('Do it');
+        expect(button?.querySelector('mat-icon')?.textContent).toBe(
+            'chevron_right'
+        );
+
+        button?.click();
+
+        expect(action).toHaveBeenCalledTimes(1);
+    });
+});

libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.ts

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+    output,
+} from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -6,9 +12,15 @@ import { MatIcon } from '@angular/material/icon';
     templateUrl: './portal-empty-state.component.html',
     styleUrl: './portal-empty-state.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [MatIcon],
+    imports: [MatButton, MatIcon],
 })
 export class PortalEmptyStateComponent {
     readonly icon = input<string>('live_tv');
     readonly message = input.required<string>();
+    /** One short secondary sentence under the title. */
+    readonly hint = input<string | null>(null);
+    /** Renders the primary action button; the host reacts to `action`. */
+    readonly actionLabel = input<string | null>(null);
+    readonly actionIcon = input<string | null>(null);
+    readonly action = output<void>();
 }

libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html

@@ -191,6 +191,7 @@
                     (reorderItems)="onReorder($event)"
                     (itemPlayed)="onItemPlayed($event)"
                     (autoOpenHandled)="onLiveAutoOpenHandled()"
+                    (restoreSidebarRequested)="toggleSidebar()"
                 />
             }
         }

libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.spec.ts

@@ -20,12 +20,17 @@ import {
     ScopeToggleService,
     UnifiedCollectionItem,
     WorkspaceViewCommandService,
+    LiveLayoutSidebarStateService,
+    liveSidebarStateStorageKey,
 } from '@iptvnator/portal/shared/util';
 import {
     UnifiedFavoritesDataService,
     UnifiedRecentDataService,
 } from '@iptvnator/portal/shared/data-access';
-import { selectAllPlaylistsMeta, selectPlaylistsLoadingFlag } from '@iptvnator/m3u-state';
+import {
+    selectAllPlaylistsMeta,
+    selectPlaylistsLoadingFlag,
+} from '@iptvnator/m3u-state';
 import { RuntimeCapabilitiesService } from '@iptvnator/services';
 import { BehaviorSubject } from 'rxjs';
 import { PlaylistMeta } from '@iptvnator/shared/interfaces';
@@ -53,6 +58,7 @@ class StubUnifiedLiveTabComponent {
     readonly reorderItems = output<UnifiedCollectionItem[]>();
     readonly itemPlayed = output<UnifiedCollectionItem>();
     readonly autoOpenHandled = output<void>();
+    readonly restoreSidebarRequested = output<void>();
 }
 
 @Component({
@@ -507,19 +513,70 @@ describe('UnifiedCollectionPageComponent', () => {
         await fixture.whenStable();
 
         expect(favoritesData.removeFavorite).toHaveBeenCalledWith(recentItem);
-        expect(fixture.componentInstance.favoriteUidSet().has(recentItem.uid))
-            .toBe(false);
+        expect(
+            fixture.componentInstance.favoriteUidSet().has(recentItem.uid)
+        ).toBe(false);
         expect(fixture.componentInstance.allItems()).toEqual([recentItem]);
 
         liveTab.favoriteToggled.emit(recentItem);
         await fixture.whenStable();
 
         expect(favoritesData.addFavorite).toHaveBeenCalledWith(recentItem);
-        expect(fixture.componentInstance.favoriteUidSet().has(recentItem.uid))
-            .toBe(true);
+        expect(
+            fixture.componentInstance.favoriteUidSet().has(recentItem.uid)
+        ).toBe(true);
         expect(fixture.componentInstance.allItems()).toEqual([recentItem]);
     });
 
+    it('toggles the collection live rail with Cmd/Ctrl+B only while the live tab is on screen', async () => {
+        const recentItem = {
+            uid: 'm3u::playlist-1::https://example.com/one.m3u8',
+            name: 'Recent One',
+            contentType: 'live',
+            sourceType: 'm3u',
+            playlistId: 'playlist-1',
+            playlistName: 'Playlist One',
+            streamUrl: 'https://example.com/one.m3u8',
+        } satisfies UnifiedCollectionItem;
+        recentData.getRecentItems.mockResolvedValueOnce([recentItem]);
+        const sidebarState = TestBed.inject(LiveLayoutSidebarStateService);
+        sidebarState.setState('collection', 'expanded');
+
+        fixture.componentRef.setInput('mode', 'recent');
+        fixture.detectChanges();
+        await fixture.whenStable();
+        await new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+        fixture.componentInstance.isLoading.set(false);
+        fixture.componentInstance.selectedContentType.set('live');
+        fixture.componentInstance.allItems.set([recentItem]);
+        fixture.detectChanges();
+
+        const press = () => {
+            const event = new KeyboardEvent('keydown', {
+                key: 'b',
+                ctrlKey: true,
+                cancelable: true,
+                bubbles: true,
+            });
+            document.dispatchEvent(event);
+            return event;
+        };
+
+        expect(press().defaultPrevented).toBe(true);
+        expect(sidebarState.isCollapsedFor('collection')()).toBe(true);
+        expect(sidebarState.isCollapsedFor('m3u')()).toBe(false);
+
+        // Not on the movies grid: there is no rail to hide there.
+        fixture.componentInstance.selectedContentType.set('movie');
+        fixture.detectChanges();
+        expect(press().defaultPrevented).toBe(false);
+        expect(sidebarState.isCollapsedFor('collection')()).toBe(true);
+
+        sidebarState.setState('collection', 'expanded');
+        localStorage.removeItem(liveSidebarStateStorageKey('collection'));
+    });
+
     it('removes one recent live row through the live tab remove event', async () => {
         const recentItems = [
             {
@@ -826,9 +883,7 @@ describe('UnifiedCollectionPageComponent', () => {
                     },
                 }
             );
-            expect(
-                fixture.componentInstance.selectedDetailItem()
-            ).toBeNull();
+            expect(fixture.componentInstance.selectedDetailItem()).toBeNull();
         } finally {
             router.url = originalUrl;
         }

libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts

@@ -7,6 +7,8 @@ import {
     contentChild,
     DestroyRef,
     effect,
+    ElementRef,
+    HostListener,
     inject,
     linkedSignal,
     input,
@@ -38,6 +40,7 @@ import {
     getOpenLiveCollectionItemState,
     getUnifiedCollectionNavigation,
     isWorkspaceLayoutRoute,
+    isTypingInInput,
     LiveLayoutSidebarStateService,
     OPEN_COLLECTION_DETAIL_STATE_KEY,
     OPEN_LIVE_COLLECTION_ITEM_STATE_KEY,
@@ -96,6 +99,7 @@ export class UnifiedCollectionPageComponent implements AfterContentInit {
     private readonly router = inject(Router);
     private readonly store = inject(Store);
     private readonly destroyRef = inject(DestroyRef);
+    private readonly hostElement = inject(ElementRef<HTMLElement>);
     private readonly scopeService = inject(ScopeToggleService);
     private readonly favoritesData = inject(UnifiedFavoritesDataService);
     private readonly recentData = inject(UnifiedRecentDataService);
@@ -276,7 +280,8 @@ export class UnifiedCollectionPageComponent implements AfterContentInit {
             this.selectedContentType() === 'live' &&
             this.hasLive()
     );
-    readonly isSidebarCollapsed = this.liveSidebarStateService.isCollapsed;
+    readonly isSidebarCollapsed =
+        this.liveSidebarStateService.isCollapsedFor('collection');
     readonly showSidebarToggle = computed(
         () => this.selectedContentType() === 'live' && this.hasLive()
     );
@@ -469,7 +474,30 @@ export class UnifiedCollectionPageComponent implements AfterContentInit {
     }
 
     toggleSidebar(): void {
-        this.liveSidebarStateService.toggle();
+        this.liveSidebarStateService.toggle('collection');
+    }
+
+    /**
+     * Cmd/Ctrl+B mirrors the routed live layouts (M3U, Xtream, Stalker): the
+     * hidden-list state advertises the shortcut, so the collection live tab
+     * must honour it too. Only while that tab, and therefore the rail, is on
+     * screen; the movies/series grids have nothing to hide.
+     */
+    @HostListener('document:keydown', ['$event'])
+    handleSidebarShortcut(event: KeyboardEvent): void {
+        if (
+            this.showSidebarToggle() &&
+            (event.metaKey || event.ctrlKey) &&
+            event.key.toLowerCase() === 'b' &&
+            !isTypingInInput(event) &&
+            // Behind the workspace's phone context drawer the route content
+            // is inert; this document-level listener still fires, so it
+            // opts out itself instead of toggling an obscured rail.
+            !this.hostElement.nativeElement.closest('[inert]')
+        ) {
+            event.preventDefault();
+            this.toggleSidebar();
+        }
     }
 
     setFavSortMode(mode: FavoritesChannelSortMode): void {

libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html

@@ -148,6 +148,10 @@
                 </div>
             </div>
         }
+    } @else if (isSidebarCollapsed()) {
+        <app-channel-list-hidden-state
+            (restore)="restoreSidebarRequested.emit()"
+        />
     } @else {
         <app-portal-empty-state
             icon="live_tv"

libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts

@@ -58,6 +58,7 @@ import {
     toLiveEpgPanelSummary,
 } from './unified-live-epg-summary.util';
 import { GlobalFavoritesListComponent } from '../global-favorites-list/global-favorites-list.component';
+import { ChannelListHiddenStateComponent } from '../channel-list-hidden-state/channel-list-hidden-state.component';
 import { PortalEmptyStateComponent } from '../portal-empty-state/portal-empty-state.component';
 import {
     AudioPlayerComponent,
@@ -100,6 +101,7 @@ import { createUnifiedLivePlaybackSessionKey } from './unified-live-playback-ses
         MatButtonModule,
         MatIconModule,
         MatProgressSpinnerModule,
+        ChannelListHiddenStateComponent,
         PortalEmptyStateComponent,
         ResizableDirective,
         TranslatePipe,
@@ -130,6 +132,8 @@ export class UnifiedLiveTabComponent implements FullscreenChannelPanelHost {
     readonly itemPlayed = output<UnifiedCollectionItem>();
     readonly autoOpenHandled = output<void>();
     readonly isSidebarCollapsed = input(false);
+    /** The rail is owned by the page header toggle; ask it to expand. */
+    readonly restoreSidebarRequested = output<void>();
 
     private readonly streamResolver = inject(StreamResolverService);
     private readonly recentData = inject(UnifiedRecentDataService);

libs/portal/shared/util/src/lib/live-layout-sidebar-state.service.spec.ts

@@ -0,0 +1,91 @@
+import { TestBed } from '@angular/core/testing';
+import { LiveLayoutSidebarStateService } from './live-layout-sidebar-state.service';
+import {
+    LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY,
+    LIVE_SIDEBAR_SURFACES,
+    liveSidebarStateStorageKey,
+} from './live-sidebar-state';
+
+describe('LiveLayoutSidebarStateService', () => {
+    function clearStorage(): void {
+        localStorage.removeItem(LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY);
+        for (const surface of LIVE_SIDEBAR_SURFACES) {
+            localStorage.removeItem(liveSidebarStateStorageKey(surface));
+        }
+    }
+
+    function createService(): LiveLayoutSidebarStateService {
+        TestBed.resetTestingModule();
+        return TestBed.inject(LiveLayoutSidebarStateService);
+    }
+
+    beforeEach(clearStorage);
+    afterEach(clearStorage);
+
+    it('starts every surface expanded', () => {
+        const service = createService();
+
+        for (const surface of LIVE_SIDEBAR_SURFACES) {
+            expect(service.stateOf(surface)()).toBe('expanded');
+            expect(service.isCollapsedFor(surface)()).toBe(false);
+        }
+    });
+
+    it('keeps surfaces independent: collapsing the M3U rail leaves portals and collections alone', () => {
+        const service = createService();
+
+        service.toggle('m3u');
+
+        expect(service.isCollapsedFor('m3u')()).toBe(true);
+        expect(service.isCollapsedFor('portal')()).toBe(false);
+        expect(service.isCollapsedFor('collection')()).toBe(false);
+        expect(localStorage.getItem(liveSidebarStateStorageKey('m3u'))).toBe(
+            'collapsed'
+        );
+        expect(
+            localStorage.getItem(liveSidebarStateStorageKey('portal'))
+        ).toBeNull();
+    });
+
+    it('returns the same signal instance per surface so components can hold it', () => {
+        const service = createService();
+
+        expect(service.isCollapsedFor('portal')).toBe(
+            service.isCollapsedFor('portal')
+        );
+        expect(service.isCollapsedFor('portal')).not.toBe(
+            service.isCollapsedFor('collection')
+        );
+    });
+
+    it('restores each surface from its own storage key', () => {
+        localStorage.setItem(liveSidebarStateStorageKey('portal'), 'collapsed');
+
+        const service = createService();
+
+        expect(service.isCollapsedFor('portal')()).toBe(true);
+        expect(service.isCollapsedFor('m3u')()).toBe(false);
+
+        service.setState('portal', 'expanded');
+
+        expect(localStorage.getItem(liveSidebarStateStorageKey('portal'))).toBe(
+            'expanded'
+        );
+    });
+
+    it('ignores and removes the legacy shared key instead of inheriting it', () => {
+        localStorage.setItem(
+            LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY,
+            'collapsed'
+        );
+
+        const service = createService();
+
+        for (const surface of LIVE_SIDEBAR_SURFACES) {
+            expect(service.isCollapsedFor(surface)()).toBe(false);
+        }
+        expect(
+            localStorage.getItem(LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY)
+        ).toBeNull();
+    });
+});

libs/portal/shared/util/src/lib/live-layout-sidebar-state.service.ts

@@ -1,31 +1,76 @@
-import { computed, Injectable, signal } from '@angular/core';
 import {
+    computed,
+    Injectable,
+    Signal,
+    signal,
+    WritableSignal,
+} from '@angular/core';
+import {
+    forgetLegacyLiveSidebarState,
     LiveSidebarState,
+    LiveSidebarSurface,
+    liveSidebarStateStorageKey,
     persistLiveSidebarState,
     restoreLiveSidebarState,
 } from './live-sidebar-state';
 
+function bySurface<T>(
+    create: (surface: LiveSidebarSurface) => T
+): Record<LiveSidebarSurface, T> {
+    return {
+        m3u: create('m3u'),
+        portal: create('portal'),
+        collection: create('collection'),
+    };
+}
+
 /**
- * Shared collapse state for the live-TV sidebar across the workspace shell
- * categories rail (Xtream/Stalker), the inline channels rail, and the
- * unified-collection live tab. A single signal keeps all surfaces in sync
- * within a session; localStorage persistence is delegated to the existing
- * `live-sidebar-state` helpers so the storage key stays unchanged.
+ * Single owner of the live-TV sidebar collapse state. Every surface that
+ * renders a collapsible channel rail — the M3U player, the Xtream/Stalker
+ * live layouts together with the workspace shell categories rail, the
+ * unified favorites/recent live tab, and the workspace header toggle — reads
+ * and writes through this service, so a toggle in one place is reflected
+ * everywhere the same surface is rendered within the session.
+ *
+ * State is kept per surface (`live-sidebar-state:<surface>` in
+ * localStorage). The pre-split shared key is forgotten on construction.
  */
 @Injectable({ providedIn: 'root' })
 export class LiveLayoutSidebarStateService {
-    private readonly _state = signal<LiveSidebarState>(
-        restoreLiveSidebarState()
-    );
-    readonly state = this._state.asReadonly();
-    readonly isCollapsed = computed(() => this._state() === 'collapsed');
+    private readonly states: Record<
+        LiveSidebarSurface,
+        WritableSignal<LiveSidebarState>
+    >;
+    private readonly collapsed: Record<LiveSidebarSurface, Signal<boolean>>;
 
-    toggle(): void {
-        this.setState(this.isCollapsed() ? 'expanded' : 'collapsed');
+    constructor() {
+        forgetLegacyLiveSidebarState();
+        this.states = bySurface((surface) =>
+            signal(restoreLiveSidebarState(liveSidebarStateStorageKey(surface)))
+        );
+        this.collapsed = bySurface((surface) =>
+            computed(() => this.states[surface]() === 'collapsed')
+        );
     }
 
-    setState(state: LiveSidebarState): void {
-        this._state.set(state);
-        persistLiveSidebarState(state);
+    stateOf(surface: LiveSidebarSurface): Signal<LiveSidebarState> {
+        return this.states[surface].asReadonly();
+    }
+
+    /** Stable per-surface signal; safe to assign to a component field. */
+    isCollapsedFor(surface: LiveSidebarSurface): Signal<boolean> {
+        return this.collapsed[surface];
+    }
+
+    toggle(surface: LiveSidebarSurface): void {
+        this.setState(
+            surface,
+            this.collapsed[surface]() ? 'expanded' : 'collapsed'
+        );
+    }
+
+    setState(surface: LiveSidebarSurface, state: LiveSidebarState): void {
+        this.states[surface].set(state);
+        persistLiveSidebarState(state, liveSidebarStateStorageKey(surface));
     }
 }

libs/portal/shared/util/src/lib/live-sidebar-state.spec.ts

@@ -1,15 +1,21 @@
 import {
     DEFAULT_LIVE_SIDEBAR_STATE,
-    LIVE_SIDEBAR_STATE_STORAGE_KEY,
+    forgetLegacyLiveSidebarState,
     isLiveSidebarState,
+    LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY,
+    LIVE_SIDEBAR_SURFACES,
+    liveSidebarStateStorageKey,
     persistLiveSidebarState,
+    resolveRouteLiveSidebarSurface,
     restoreLiveSidebarState,
 } from './live-sidebar-state';
 
 describe('live sidebar state', () => {
+    const key = liveSidebarStateStorageKey('m3u');
+
     afterEach(() => {
-        localStorage.removeItem(LIVE_SIDEBAR_STATE_STORAGE_KEY);
-        localStorage.removeItem('custom-live-sidebar-state');
+        localStorage.removeItem(key);
+        localStorage.removeItem(LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY);
     });
 
     it('accepts only known sidebar states', () => {
@@ -19,32 +25,73 @@ describe('live sidebar state', () => {
         expect(isLiveSidebarState(null)).toBe(false);
     });
 
-    it('restores expanded as the default for missing or invalid storage', () => {
-        expect(restoreLiveSidebarState()).toBe(DEFAULT_LIVE_SIDEBAR_STATE);
+    it('derives one storage key per surface under the legacy prefix', () => {
+        const keys = LIVE_SIDEBAR_SURFACES.map(liveSidebarStateStorageKey);
 
-        localStorage.setItem(LIVE_SIDEBAR_STATE_STORAGE_KEY, 'hidden');
-
-        expect(restoreLiveSidebarState()).toBe(DEFAULT_LIVE_SIDEBAR_STATE);
+        expect(keys).toEqual([
+            'live-sidebar-state:m3u',
+            'live-sidebar-state:portal',
+            'live-sidebar-state:collection',
+        ]);
+        expect(new Set(keys).size).toBe(keys.length);
+        expect(keys).not.toContain(LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY);
     });
 
-    it('restores and persists collapsed state', () => {
-        persistLiveSidebarState('collapsed');
+    it('restores expanded as the default for missing or invalid storage', () => {
+        expect(restoreLiveSidebarState(key)).toBe(DEFAULT_LIVE_SIDEBAR_STATE);
 
-        expect(localStorage.getItem(LIVE_SIDEBAR_STATE_STORAGE_KEY)).toBe(
+        localStorage.setItem(key, 'hidden');
+
+        expect(restoreLiveSidebarState(key)).toBe(DEFAULT_LIVE_SIDEBAR_STATE);
+    });
+
+    it('restores and persists collapsed state under the given key', () => {
+        persistLiveSidebarState('collapsed', key);
+
+        expect(localStorage.getItem(key)).toBe('collapsed');
+        expect(restoreLiveSidebarState(key)).toBe('collapsed');
+        expect(restoreLiveSidebarState(key, 'expanded')).toBe('collapsed');
+    });
+
+    it('never reads the legacy shared key and can forget it', () => {
+        localStorage.setItem(
+            LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY,
             'collapsed'
         );
-        expect(restoreLiveSidebarState()).toBe('collapsed');
+
+        expect(restoreLiveSidebarState(key)).toBe('expanded');
+
+        forgetLegacyLiveSidebarState();
+
+        expect(
+            localStorage.getItem(LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY)
+        ).toBeNull();
     });
 
-    it('supports custom storage keys and fallback values', () => {
-        expect(
-            restoreLiveSidebarState('custom-live-sidebar-state', 'collapsed')
-        ).toBe('collapsed');
-
-        persistLiveSidebarState('expanded', 'custom-live-sidebar-state');
-
-        expect(restoreLiveSidebarState('custom-live-sidebar-state')).toBe(
-            'expanded'
+    it('maps only routes that render their own live rail to a surface', () => {
+        expect(resolveRouteLiveSidebarSurface('playlists', 'all')).toBe('m3u');
+        expect(resolveRouteLiveSidebarSurface('playlists', 'groups')).toBe(
+            'm3u'
         );
+        expect(resolveRouteLiveSidebarSurface('xtreams', 'live')).toBe(
+            'portal'
+        );
+        expect(resolveRouteLiveSidebarSurface('stalker', 'itv')).toBe('portal');
+        expect(resolveRouteLiveSidebarSurface('stalker', 'radio')).toBe(
+            'portal'
+        );
+
+        // Collection pages own their toggle: only they know whether the live
+        // tab is on screen.
+        expect(
+            resolveRouteLiveSidebarSurface('playlists', 'recent')
+        ).toBeNull();
+        expect(
+            resolveRouteLiveSidebarSurface('xtreams', 'favorites')
+        ).toBeNull();
+        expect(resolveRouteLiveSidebarSurface('xtreams', 'vod')).toBeNull();
+        expect(resolveRouteLiveSidebarSurface('stalker', 'series')).toBeNull();
+        expect(resolveRouteLiveSidebarSurface(null, 'live')).toBeNull();
+        expect(resolveRouteLiveSidebarSurface('xtreams', null)).toBeNull();
     });
 });

libs/portal/shared/util/src/lib/live-sidebar-state.ts

@@ -1,14 +1,48 @@
+import type {
+    PortalProvider,
+    PortalRailSection,
+} from './navigation/portal-rail-links';
+
 export type LiveSidebarState = 'expanded' | 'collapsed';
 
-export const LIVE_SIDEBAR_STATE_STORAGE_KEY = 'live-sidebar-state';
+/**
+ * Collapsible live-channel rails. Each surface remembers its own state:
+ * hiding the list in the M3U player must not hide the channel rail of an
+ * Xtream/Stalker portal or of the favorites/recent collection pages — the
+ * user made that choice in one context, not in all of them.
+ */
+export type LiveSidebarSurface = 'm3u' | 'portal' | 'collection';
+
+export const LIVE_SIDEBAR_SURFACES: readonly LiveSidebarSurface[] = [
+    'm3u',
+    'portal',
+    'collection',
+];
+
+/**
+ * Key every live surface shared before the per-surface split. It is no longer
+ * read: a stored `collapsed` left every playlist and portal without a channel
+ * list and only a 32px chevron to recover it (issue #1458). The state service
+ * removes it once, so the update itself restores the list for everyone.
+ */
+export const LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY = 'live-sidebar-state';
+/** @deprecated The legacy shared key; use `liveSidebarStateStorageKey()`. */
+export const LIVE_SIDEBAR_STATE_STORAGE_KEY =
+    LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY;
 export const DEFAULT_LIVE_SIDEBAR_STATE: LiveSidebarState = 'expanded';
 
+export function liveSidebarStateStorageKey(
+    surface: LiveSidebarSurface
+): string {
+    return `${LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY}:${surface}`;
+}
+
 export function isLiveSidebarState(value: unknown): value is LiveSidebarState {
     return value === 'expanded' || value === 'collapsed';
 }
 
 export function restoreLiveSidebarState(
-    storageKey: string = LIVE_SIDEBAR_STATE_STORAGE_KEY,
+    storageKey: string,
     fallback: LiveSidebarState = DEFAULT_LIVE_SIDEBAR_STATE
 ): LiveSidebarState {
     const storedValue = localStorage.getItem(storageKey);
@@ -17,7 +51,41 @@ export function restoreLiveSidebarState(
 
 export function persistLiveSidebarState(
     state: LiveSidebarState,
-    storageKey: string = LIVE_SIDEBAR_STATE_STORAGE_KEY
+    storageKey: string
 ): void {
     localStorage.setItem(storageKey, state);
 }
+
+export function forgetLegacyLiveSidebarState(): void {
+    try {
+        localStorage.removeItem(LEGACY_LIVE_SIDEBAR_STATE_STORAGE_KEY);
+    } catch {
+        // Storage unavailable (private mode, blocked site data): nothing to forget.
+    }
+}
+
+/**
+ * The rail a portal route renders itself, for a toggle that lives outside the
+ * rail (the workspace header). Favorites/recent routes return `null` on
+ * purpose: the collection page owns that toggle, because only it knows
+ * whether the live tab, and therefore the rail, is on screen.
+ */
+export function resolveRouteLiveSidebarSurface(
+    provider: PortalProvider | null | undefined,
+    section: PortalRailSection | null | undefined
+): LiveSidebarSurface | null {
+    if (!provider || !section) {
+        return null;
+    }
+
+    switch (provider) {
+        case 'playlists':
+            return section === 'all' || section === 'groups' ? 'm3u' : null;
+        case 'xtreams':
+            return section === 'live' ? 'portal' : null;
+        case 'stalker':
+            return section === 'itv' || section === 'radio' ? 'portal' : null;
+        default:
+            return null;
+    }
+}

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-navigation.spec.ts

@@ -209,7 +209,7 @@ describe('StalkerLiveNavigation', () => {
         );
         expect(store.selectedCategoryId()).toBe('news');
         expect(store.searchPhrase()).toBe('');
-        expect(sidebar.setState).toHaveBeenCalledWith('expanded');
+        expect(sidebar.setState).toHaveBeenCalledWith('portal', 'expanded');
         expect(revealRow).toHaveBeenCalledWith('1');
         expect(play).not.toHaveBeenCalled();
         expect(navigation.canReveal()).toBe(false);

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-navigation.ts

@@ -266,7 +266,7 @@ export class StalkerLiveNavigation {
         this.options.store.setSearchPhrase('');
         this.options.store.setSelectedCategory(category);
         this.options.store.setPage(0);
-        this.options.sidebar.setState('expanded');
+        this.options.sidebar.setState('portal', 'expanded');
         this.revealed.set({ owner, category, item: active });
         this.pendingReveal.set({
             owner,

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html

@@ -142,6 +142,8 @@
                 <ng-container *ngTemplateOutlet="epgPanelContent" />
             </div>
         }
+    } @else if (isSidebarCollapsed()) {
+        <app-channel-list-hidden-state (restore)="toggleSidebar()" />
     } @else {
         <app-portal-empty-state
             icon="live_tv"

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts

@@ -84,7 +84,10 @@ import {
     REMOTE_CONTROL_RESET_STATUS,
     restoreLiveEpgPanelState,
 } from '@iptvnator/portal/shared/util';
-import { PortalEmptyStateComponent } from '@iptvnator/portal/shared/ui';
+import {
+    ChannelListHiddenStateComponent,
+    PortalEmptyStateComponent,
+} from '@iptvnator/portal/shared/ui';
 import {
     ACTIVE_EPG_FALLBACK_SIZE,
     StalkerFavoriteItem,
@@ -152,6 +155,7 @@ import { StalkerLiveNavigation } from './stalker-live-navigation';
         MatProgressSpinnerModule,
         MatTooltipModule,
         NgTemplateOutlet,
+        ChannelListHiddenStateComponent,
         PortalEmptyStateComponent,
         ResizableDirective,
         StalkerItvAllItemsComponent,
@@ -484,7 +488,8 @@ export class StalkerLiveStreamLayoutComponent
     /** Live EPG panel layout chosen in settings; hosts swap timeline ↔ list. */
     readonly epgViewMode = this.settingsStore.resolvedEpgViewMode;
     readonly epgOffsetMinutes = this.settingsStore.resolvedEpgOffsetMinutes;
-    readonly isSidebarCollapsed = this.liveSidebarStateService.isCollapsed;
+    readonly isSidebarCollapsed =
+        this.liveSidebarStateService.isCollapsedFor('portal');
     readonly liveEpgPanelSummary = computed(() =>
         this.toLiveEpgPanelSummary(this.currentProgram())
     );
@@ -1155,7 +1160,7 @@ export class StalkerLiveStreamLayoutComponent
     }
 
     toggleSidebar(): void {
-        this.liveSidebarStateService.toggle();
+        this.liveSidebarStateService.toggle('portal');
     }
 
     handleRadioChannelSwitch(direction: 'next' | 'previous'): void {

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.epg-races.spec.ts

@@ -165,7 +165,10 @@ describe('StalkerLiveStreamLayoutComponent EPG fallback races', () => {
                 },
                 {
                     provide: LiveLayoutSidebarStateService,
-                    useValue: { isCollapsed: signal(false), toggle: jest.fn() },
+                    useValue: {
+                        isCollapsedFor: () => signal(false),
+                        toggle: jest.fn(),
+                    },
                 },
                 { provide: EpgRuntimeBridgeService, useValue: {} },
                 { provide: MatDialog, useValue: { open: jest.fn() } },

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.panel-search.spec.ts

@@ -141,7 +141,10 @@ describe('StalkerLiveStreamLayoutComponent fullscreen panel search', () => {
                 },
                 {
                     provide: LiveLayoutSidebarStateService,
-                    useValue: { isCollapsed: signal(false), toggle: jest.fn() },
+                    useValue: {
+                        isCollapsedFor: () => signal(false),
+                        toggle: jest.fn(),
+                    },
                 },
                 { provide: EpgRuntimeBridgeService, useValue: {} },
                 { provide: MatDialog, useValue: { open: jest.fn() } },

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.playback-session-key.spec.ts

@@ -138,7 +138,10 @@ describe('StalkerLiveStreamLayoutComponent playback session ownership', () => {
                 },
                 {
                     provide: LiveLayoutSidebarStateService,
-                    useValue: { isCollapsed: signal(false), toggle: jest.fn() },
+                    useValue: {
+                        isCollapsedFor: () => signal(false),
+                        toggle: jest.fn(),
+                    },
                 },
                 { provide: EpgRuntimeBridgeService, useValue: {} },
                 { provide: MatDialog, useValue: { open: jest.fn() } },

libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.html

@@ -170,6 +170,8 @@
                 />
             </div>
         }
+    } @else if (isSidebarCollapsed()) {
+        <app-channel-list-hidden-state (restore)="toggleSidebar()" />
     } @else {
         <app-portal-empty-state
             icon="live_tv"

libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.spec.ts

@@ -13,7 +13,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { BehaviorSubject, Subject, of } from 'rxjs';
 import {
     LIVE_EPG_PANEL_STATE_STORAGE_KEY,
-    LIVE_SIDEBAR_STATE_STORAGE_KEY,
+    liveSidebarStateStorageKey,
     LiveLayoutSidebarStateService,
     PORTAL_PLAYER,
     ResizableDirective,
@@ -222,7 +222,7 @@ describe('LiveStreamLayoutComponent', () => {
         settingsStore.resolvedEpgViewMode.set('timeline');
         localStorage.removeItem(LIVE_CHANNEL_SORT_STORAGE_KEY);
         localStorage.removeItem(LIVE_EPG_PANEL_STATE_STORAGE_KEY);
-        localStorage.removeItem(LIVE_SIDEBAR_STATE_STORAGE_KEY);
+        localStorage.removeItem(liveSidebarStateStorageKey('portal'));
         settingsStore.openStreamOnDoubleClick.set(false);
 
         window.electron = {
@@ -345,16 +345,16 @@ describe('LiveStreamLayoutComponent', () => {
         fixture = TestBed.createComponent(LiveStreamLayoutComponent);
         component = fixture.componentInstance;
 
-        TestBed.inject(LiveLayoutSidebarStateService).setState('expanded');
+        TestBed.inject(LiveLayoutSidebarStateService).setState('portal', 'expanded');
     });
 
     afterEach(() => {
-        TestBed.inject(LiveLayoutSidebarStateService).setState('expanded');
+        TestBed.inject(LiveLayoutSidebarStateService).setState('portal', 'expanded');
         fixture.destroy();
         jest.useRealTimers();
         localStorage.removeItem(LIVE_CHANNEL_SORT_STORAGE_KEY);
         localStorage.removeItem(LIVE_EPG_PANEL_STATE_STORAGE_KEY);
-        localStorage.removeItem(LIVE_SIDEBAR_STATE_STORAGE_KEY);
+        localStorage.removeItem(liveSidebarStateStorageKey('portal'));
         window.electron = originalElectron;
     });
 
@@ -1149,9 +1149,13 @@ describe('LiveStreamLayoutComponent', () => {
         );
     });
 
+    // Collapsing with a selected category and no stream renders the real
+    // `app-channel-list-hidden-state` (its TranslatePipe needs a
+    // TranslateService); this spec is at the max-lines budget, so that branch
+    // is covered by video-player-sidebar.spec.ts and the Electron E2E instead.
     it('shows the floating restore button when the sidebar is collapsed even without a selected category', () => {
         selectedCategoryId.set(null);
-        TestBed.inject(LiveLayoutSidebarStateService).setState('collapsed');
+        TestBed.inject(LiveLayoutSidebarStateService).setState('portal', 'collapsed');
         fixture.detectChanges();
 
         expect(
@@ -1161,7 +1165,7 @@ describe('LiveStreamLayoutComponent', () => {
 
     it('hides the floating restore button when the sidebar is expanded', () => {
         selectedCategoryId.set(1);
-        TestBed.inject(LiveLayoutSidebarStateService).setState('expanded');
+        TestBed.inject(LiveLayoutSidebarStateService).setState('portal', 'expanded');
         fixture.detectChanges();
 
         expect(

libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.ts

@@ -26,6 +26,7 @@ import { ResizableDirective } from '@iptvnator/ui/components';
 import {
     GridListComponent,
     InfiniteScrollDirective,
+    ChannelListHiddenStateComponent,
     PortalEmptyStateComponent,
 } from '@iptvnator/portal/shared/ui';
 import {
@@ -127,6 +128,7 @@ const LIVE_CHANNEL_SORT_STORAGE_KEY = 'xtream-live-channel-sort-mode';
         GridListComponent,
         InfiniteScrollDirective,
         PortalChannelsListComponent,
+        ChannelListHiddenStateComponent,
         PortalEmptyStateComponent,
         ResizableDirective,
         TranslatePipe,
@@ -320,7 +322,8 @@ export class LiveStreamLayoutComponent
     /** Live EPG panel layout chosen in settings; hosts swap timeline ↔ list. */
     readonly epgViewMode = this.settingsStore.resolvedEpgViewMode;
     readonly epgOffsetMinutes = this.settingsStore.resolvedEpgOffsetMinutes;
-    readonly isSidebarCollapsed = this.liveSidebarStateService.isCollapsed;
+    readonly isSidebarCollapsed =
+        this.liveSidebarStateService.isCollapsedFor('portal');
     readonly liveEpgPanelSummary = computed(() =>
         this.toLiveEpgPanelSummary(
             this.activeCatchupProgram() ?? this.currentEpgItem()
@@ -623,7 +626,7 @@ export class LiveStreamLayoutComponent
     }
 
     toggleSidebar(): void {
-        this.liveSidebarStateService.toggle();
+        this.liveSidebarStateService.toggle('portal');
     }
 
     @HostListener('document:keydown', ['$event'])

libs/portal/xtream/feature/src/lib/live-stream-layout/xtream-live-channel-navigation.service.spec.ts

@@ -187,7 +187,7 @@ describe('XtreamLiveChannelNavigationService', () => {
             );
             expect(selectedCategoryId()).toBe(10);
             expect(categorySearchTerm()).toBe('');
-            expect(sidebar.setState).toHaveBeenCalledWith('expanded');
+            expect(sidebar.setState).toHaveBeenCalledWith('portal', 'expanded');
             expect(service.revealRequest()).toEqual(
                 expect.objectContaining({ channelId: 1 })
             );

libs/portal/xtream/feature/src/lib/live-stream-layout/xtream-live-channel-navigation.service.ts

@@ -232,7 +232,7 @@ export class XtreamLiveChannelNavigationService {
                 return;
             this.store.setCategorySearchTerm('');
             this.store.setSelectedCategory(categoryId);
-            this.sidebar.setState('expanded');
+            this.sidebar.setState('portal', 'expanded');
             this.pendingReveal.set({
                 channelId: target.xtream_id,
                 categoryId,

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.spec.ts

@@ -58,7 +58,7 @@ describe('WorkspaceShellContextSidebarComponent', () => {
     let liveSidebarService: LiveLayoutSidebarStateService;
 
     beforeEach(async () => {
-        localStorage.removeItem('live-sidebar-state');
+        localStorage.removeItem('live-sidebar-state:portal');
 
         await TestBed.configureTestingModule({
             imports: [WorkspaceShellContextSidebarComponent],
@@ -99,7 +99,7 @@ describe('WorkspaceShellContextSidebarComponent', () => {
 
         fixture = TestBed.createComponent(WorkspaceShellContextSidebarComponent);
         liveSidebarService = TestBed.inject(LiveLayoutSidebarStateService);
-        liveSidebarService.setState('expanded');
+        liveSidebarService.setState('portal', 'expanded');
     });
 
     it('closes the phone drawer from its always-available close button', () => {
@@ -170,7 +170,7 @@ describe('WorkspaceShellContextSidebarComponent', () => {
         it('collapses the categories rail when the shared service is collapsed on a live route', () => {
             setupLiveCategory('live');
 
-            liveSidebarService.setState('collapsed');
+            liveSidebarService.setState('portal', 'collapsed');
             fixture.detectChanges();
 
             const aside = fixture.nativeElement.querySelector(
@@ -184,7 +184,7 @@ describe('WorkspaceShellContextSidebarComponent', () => {
         it('also collapses on the Stalker itv section', () => {
             setupLiveCategory('itv');
 
-            liveSidebarService.setState('collapsed');
+            liveSidebarService.setState('portal', 'collapsed');
             fixture.detectChanges();
 
             const aside = fixture.nativeElement.querySelector(
@@ -198,7 +198,7 @@ describe('WorkspaceShellContextSidebarComponent', () => {
         it('does not collapse the categories rail on non-live sections', () => {
             setupLiveCategory('vod');
 
-            liveSidebarService.setState('collapsed');
+            liveSidebarService.setState('portal', 'collapsed');
             fixture.detectChanges();
 
             const aside = fixture.nativeElement.querySelector(

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.ts

@@ -70,7 +70,7 @@ export class WorkspaceShellContextSidebarComponent {
     readonly isContextPanelCollapsed = computed(
         () =>
             this.isLiveCategoryRoute() &&
-            this.liveSidebarStateService.isCollapsed()
+            this.liveSidebarStateService.isCollapsedFor('portal')()
     );
 
     closeDrawer(): void {

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html

@@ -115,6 +115,22 @@
             <mat-icon>add</mat-icon>
         </button>
         @if (!isSettingsRoute()) {
+            @if (headerSidebarToggle(); as sidebarToggle) {
+                <button
+                    type="button"
+                    class="header-shortcut header-sidebar-toggle"
+                    [class.header-sidebar-toggle--collapsed]="
+                        !sidebarToggle.expanded
+                    "
+                    mat-icon-button
+                    (click)="onHeaderSidebarToggleRequested()"
+                    [matTooltip]="sidebarToggle.tooltip"
+                    [attr.aria-label]="sidebarToggle.ariaLabel"
+                    [attr.aria-pressed]="sidebarToggle.expanded"
+                >
+                    <mat-icon>view_sidebar</mat-icon>
+                </button>
+            }
             @if (headerShortcut(); as action) {
                 <button
                     type="button"

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss

@@ -209,6 +209,12 @@
     }
 }
 
+// The rail is visible most of the time, so the toggle stays neutral then and
+// only tints once the rail is hidden: the exception is what deserves the cue.
+.header-sidebar-toggle--collapsed {
+    color: var(--mat-sys-primary);
+}
+
 .header-actions--leading {
     margin-left: -4px;
 }
@@ -392,5 +398,12 @@
         .shortcuts-trigger {
             display: none;
         }
+
+        // At the phone breakpoint the live rail is a bottom drawer with its
+        // own toggle, and the header has no room left for another permanent
+        // icon: it already holds the drawer toggle, switcher, search and Add.
+        .header-sidebar-toggle {
+            display: none;
+        }
     }
 }

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.spec.ts

@@ -158,6 +158,71 @@ describe('WorkspaceShellHeaderComponent', () => {
         expect(requested).toHaveBeenCalledTimes(1);
     });
 
+    it('does not render the live rail toggle when the route has no rail', () => {
+        expect(
+            fixture.nativeElement.querySelector('.header-sidebar-toggle')
+        ).toBeNull();
+    });
+
+    it('renders the live rail toggle in both rail states and emits toggle requests', () => {
+        const requested = jest.fn();
+        component.headerSidebarToggleRequested.subscribe(requested);
+        fixture.componentRef.setInput('headerSidebarToggle', {
+            expanded: true,
+            tooltip: 'LAYOUT.TOGGLE_SIDEBAR_TOOLTIP',
+            ariaLabel: 'LAYOUT.HIDE_CHANNELS_LIST',
+        });
+        fixture.detectChanges();
+
+        const button: HTMLButtonElement = fixture.nativeElement.querySelector(
+            '.header-sidebar-toggle'
+        );
+        expect(button.getAttribute('aria-pressed')).toBe('true');
+        expect(button.getAttribute('aria-label')).toBe(
+            'LAYOUT.HIDE_CHANNELS_LIST'
+        );
+        expect(button.classList).not.toContain(
+            'header-sidebar-toggle--collapsed'
+        );
+
+        button.click();
+        expect(requested).toHaveBeenCalledTimes(1);
+
+        // The control stays in place once the rail is hidden; only its
+        // pressed state, label and tint change.
+        fixture.componentRef.setInput('headerSidebarToggle', {
+            expanded: false,
+            tooltip: 'LAYOUT.TOGGLE_SIDEBAR_TOOLTIP',
+            ariaLabel: 'LAYOUT.SHOW_CHANNELS_LIST',
+        });
+        fixture.detectChanges();
+
+        const collapsedButton: HTMLButtonElement =
+            fixture.nativeElement.querySelector('.header-sidebar-toggle');
+        expect(collapsedButton).toBe(button);
+        expect(collapsedButton.getAttribute('aria-pressed')).toBe('false');
+        expect(collapsedButton.getAttribute('aria-label')).toBe(
+            'LAYOUT.SHOW_CHANNELS_LIST'
+        );
+        expect(collapsedButton.classList).toContain(
+            'header-sidebar-toggle--collapsed'
+        );
+    });
+
+    it('hides the live rail toggle on the settings route', () => {
+        fixture.componentRef.setInput('headerSidebarToggle', {
+            expanded: true,
+            tooltip: 'tooltip',
+            ariaLabel: 'aria',
+        });
+        fixture.componentRef.setInput('isSettingsRoute', true);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.header-sidebar-toggle')
+        ).toBeNull();
+    });
+
     it('renders scope and status chips when search metadata is provided', () => {
         fixture.componentRef.setInput('searchScopeLabel', 'Movies / All Items');
         fixture.componentRef.setInput(

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts

@@ -14,7 +14,10 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { PlaylistSwitcherComponent } from '@iptvnator/playlist/shared/ui';
 import { WorkspaceHeaderAction } from '@iptvnator/portal/shared/util';
 import { PlaylistMeta } from '@iptvnator/shared/interfaces';
-import { WorkspaceHeaderBulkAction } from '../../services/helpers/workspace-shell-constants';
+import {
+    WorkspaceHeaderBulkAction,
+    WorkspaceHeaderSidebarToggle,
+} from '../../services/helpers/workspace-shell-constants';
 
 @Component({
     selector: 'app-workspace-shell-header',
@@ -54,6 +57,9 @@ export class WorkspaceShellHeaderComponent {
     readonly searchStatusLabel = input('');
     readonly headerShortcut = input<WorkspaceHeaderAction | null>(null);
     readonly headerBulkAction = input<WorkspaceHeaderBulkAction | null>(null);
+    readonly headerSidebarToggle = input<WorkspaceHeaderSidebarToggle | null>(
+        null
+    );
     readonly canRefreshPlaylist = input(false);
     readonly isRefreshingPlaylist = input(false);
     readonly isElectron = input(false);
@@ -101,6 +107,7 @@ export class WorkspaceShellHeaderComponent {
     readonly addPlaylistRequested = output<void>();
     readonly headerShortcutRequested = output<void>();
     readonly headerBulkActionRequested = output<void>();
+    readonly headerSidebarToggleRequested = output<void>();
     readonly refreshPlaylistRequested = output<void>();
     readonly downloadsRequested = output<void>();
     readonly playlistInfoRequested = output<void>();
@@ -167,6 +174,10 @@ export class WorkspaceShellHeaderComponent {
         this.headerBulkActionRequested.emit();
     }
 
+    onHeaderSidebarToggleRequested(): void {
+        this.headerSidebarToggleRequested.emit();
+    }
+
     onRefreshPlaylistRequested(): void {
         this.refreshPlaylistRequested.emit();
     }

libs/workspace/shell/feature/src/lib/workspace-shell/services/helpers/workspace-shell-constants.ts

@@ -43,3 +43,15 @@ export interface WorkspaceHeaderBulkAction {
     ariaLabel: string;
     disabled: boolean;
 }
+
+/**
+ * Header toggle for the live-channel rail of the current route. It exists in
+ * both rail states so the control never moves: inside the rail the chevron
+ * disappears together with the rail it hides.
+ */
+export interface WorkspaceHeaderSidebarToggle {
+    /** True while the rail is visible; drives `aria-pressed`. */
+    expanded: boolean;
+    tooltip: string;
+    ariaLabel: string;
+}

libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell-header.service.ts

@@ -10,6 +10,8 @@ import {
     PlaylistRefreshActionService,
 } from '@iptvnator/playlist/shared/ui';
 import {
+    LiveLayoutSidebarStateService,
+    resolveRouteLiveSidebarSurface,
     WorkspaceHeaderAction,
     WorkspaceHeaderContextService,
 } from '@iptvnator/portal/shared/util';
@@ -30,6 +32,7 @@ import {
     CLEAR_RECENTLY_VIEWED_ARIA,
     CLEAR_RECENTLY_VIEWED_TOOLTIP,
     WorkspaceHeaderBulkAction,
+    WorkspaceHeaderSidebarToggle,
 } from './helpers/workspace-shell-constants';
 import { bumpRefreshQueryParam } from './helpers/workspace-shell-route-utils';
 import { WorkspaceShellRouteStateService } from './workspace-shell-route-state.service';
@@ -48,6 +51,7 @@ export class WorkspaceShellHeaderService {
     private readonly playlistRefreshAction = inject(
         PlaylistRefreshActionService
     );
+    private readonly liveSidebar = inject(LiveLayoutSidebarStateService);
 
     private readonly languageTick = toSignal(
         this.translate.onLangChange.pipe(startWith(null)),
@@ -75,6 +79,38 @@ export class WorkspaceShellHeaderService {
 
         return action;
     });
+    /**
+     * The live rail of the current route, when the route renders one itself.
+     * The header toggle needs a rail that exists in both states; collection
+     * pages keep their own toggle beside the live/movies/series switch.
+     */
+    private readonly liveSidebarSurface = computed(() =>
+        resolveRouteLiveSidebarSurface(
+            this.routeState.currentContext()?.provider,
+            this.routeState.currentSection()
+        )
+    );
+    readonly headerSidebarToggle = computed<WorkspaceHeaderSidebarToggle | null>(
+        () => {
+            this.languageTick();
+
+            const surface = this.liveSidebarSurface();
+            if (!surface) {
+                return null;
+            }
+
+            const collapsed = this.liveSidebar.isCollapsedFor(surface)();
+            return {
+                expanded: !collapsed,
+                tooltip: this.translateText('LAYOUT.TOGGLE_SIDEBAR_TOOLTIP'),
+                ariaLabel: this.translateText(
+                    collapsed
+                        ? 'LAYOUT.SHOW_CHANNELS_LIST'
+                        : 'LAYOUT.HIDE_CHANNELS_LIST'
+                ),
+            };
+        }
+    );
     readonly canOpenPlaylistInfo = computed(() =>
         Boolean(this.routeState.activePlaylist())
     );
@@ -219,6 +255,13 @@ export class WorkspaceShellHeaderService {
         }
     }
 
+    toggleLiveSidebar(): void {
+        const surface = this.liveSidebarSurface();
+        if (surface) {
+            this.liveSidebar.toggle(surface);
+        }
+    }
+
     navigateToGlobalFavorites(): void {
         void this.router.navigate(['/workspace/global-favorites']);
     }

libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts

@@ -127,6 +127,7 @@ export class WorkspaceShellFacade {
     readonly canRefreshPlaylist = this.header.canRefreshPlaylist;
     readonly isRefreshingPlaylist = this.header.isRefreshingPlaylist;
     readonly headerBulkAction = this.header.headerBulkAction;
+    readonly headerSidebarToggle = this.header.headerSidebarToggle;
     readonly playlistSubtitle = this.header.playlistSubtitle;
     readonly activeDownloadsCount = computed(() =>
         this.supportsDownloads ? this.downloadsService.activeCount() : 0
@@ -205,6 +206,10 @@ export class WorkspaceShellFacade {
         return this.header.runHeaderBulkAction();
     }
 
+    toggleLiveSidebar(): void {
+        this.header.toggleLiveSidebar();
+    }
+
     navigateToGlobalFavorites(): void {
         this.header.navigateToGlobalFavorites();
     }

libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html

@@ -39,6 +39,7 @@
         [searchStatusLabel]="facade.searchStatusLabel()"
         [headerShortcut]="facade.headerShortcut()"
         [headerBulkAction]="facade.headerBulkAction()"
+        [headerSidebarToggle]="facade.headerSidebarToggle()"
         [canRefreshPlaylist]="facade.canRefreshPlaylist()"
         [isRefreshingPlaylist]="facade.isRefreshingPlaylist()"
         [isElectron]="facade.isElectron"
@@ -59,6 +60,7 @@
         (addPlaylistRequested)="facade.openAddPlaylistDialog()"
         (headerShortcutRequested)="facade.runHeaderShortcut()"
         (headerBulkActionRequested)="facade.runHeaderBulkAction()"
+        (headerSidebarToggleRequested)="facade.toggleLiveSidebar()"
         (downloadsRequested)="facade.openDownloadsShortcut()"
         (playlistInfoRequested)="facade.openPlaylistInfo()"
         (accountInfoRequested)="facade.openAccountInfo()"

libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts

@@ -64,6 +64,7 @@ class MockWorkspaceShellHeaderComponent {
     readonly contextDrawerToggleAriaKey = input('');
     readonly contextDrawerTooltipKey = input('');
     readonly headerBulkAction = input<WorkspaceHeaderBulkAction | null>(null);
+    readonly headerSidebarToggle = input<unknown>(null);
     readonly searchChanged = output<string>();
     readonly searchSubmitted = output<string>();
     readonly commandPaletteRequested = output<void>();
@@ -73,6 +74,7 @@ class MockWorkspaceShellHeaderComponent {
     readonly refreshPlaylistRequested = output<void>();
     readonly downloadsRequested = output<void>();
     readonly headerBulkActionRequested = output<void>();
+    readonly headerSidebarToggleRequested = output<void>();
     readonly playlistInfoRequested = output<void>();
     readonly accountInfoRequested = output<void>();
     readonly contextDrawerToggleRequested = output<void>();
@@ -162,6 +164,8 @@ class MockWorkspaceShellFacade {
     readonly isDownloadsView = signal(false);
     readonly activeDownloadsCount = signal(3);
     readonly headerBulkAction = signal<WorkspaceHeaderBulkAction | null>(null);
+    readonly headerSidebarToggle = signal(null);
+    toggleLiveSidebar = jest.fn();
     readonly showContextPanel = signal(true);
     readonly hasContextPanelContent = signal(true);
     readonly contextDrawerLabelKeys = signal({