Merge remote-tracking branch 'origin/master' into claude/iptvnator-vod-hero-redesign-2c8950

# Conflicts:
#	apps/electron-backend-e2e/src/detail-back-lane.e2e.ts
#	apps/web-e2e/src/m3u-movie-details.e2e.ts
#	docs/architecture/iptvnator-ui-guidelines.md
#	libs/ui/components/src/lib/content-hero/content-hero.component.scss
#	libs/ui/components/src/lib/portal-detail-shell/portal-detail-shell.component.scss

.changes/dashboard-rail-focus-reveal.md

@@ -0,0 +1,8 @@
+---
+type: fix
+area: dashboard
+---
+
+Moving keyboard focus onto a dashboard rail card, such as a source in Recently
+Used Sources, now scrolls the rail so the whole card shows instead of leaving
+it half-hidden under the edge fade.

.changes/detail-back-button-lane.md

@@ -3,4 +3,4 @@ type: fix
 area: detail
 ---
 
-On movie and series pages, the Back button no longer covers the start of the "Seasons and Episodes" heading or the corner of the player while you scroll, and in narrow windows the heading no longer gets squeezed onto several lines beside its buttons.
+On movie and series pages in narrow windows, the "Seasons and Episodes" heading no longer gets squeezed onto several lines beside its buttons.

.changes/ui-destructive-confirmations.md

@@ -0,0 +1,6 @@
+---
+type: fix
+area: ui
+---
+
+Removing or clearing data now asks with a named action on a red button instead of "Yes"/"No", and delete buttons are red again. Each source type has one icon everywhere. Deleting a playlist from its error screen now confirms with a message and keeps the playlist if the delete fails.

.changes/workspace-header-back.md

@@ -0,0 +1,6 @@
+---
+type: fix
+area: workspace
+---
+
+The Back button on movie and series pages now sits at the start of the top bar, so it never covers the page and the page keeps its full width. The IPTVnator logo is gone from the side rail: it opened the same page as the Dashboard button right below it.

.codex/skills/iptvnator-theme-style/SKILL.md

@@ -29,8 +29,8 @@ consumers currently use relative `@use` paths to the needed partial.
   them outside Material components only for roles without an app token.
 - Set component tokens through `mat.*-overrides()`; retired `--mdc-*` names
   do nothing and `pnpm run styles:material-tokens:validate` rejects them.
-- Destructive buttons use `.app-destructive-button` (`color="warn"` is a no-op
-  with M3).
+- Destructive buttons use `.app-destructive-button` (the `warn` color input is
+  a no-op with M3); provider icons come from `SOURCE_TYPE_ICONS`.
 - Local semantic status colors are acceptable. Existing hard-coded layout,
   selection, and EPG surface colors are migration debt, not precedent.
 

apps/electron-backend-e2e/src/catalog-sorting.e2e.ts

@@ -590,12 +590,9 @@ async function firstVisibleGridTitle(page: Page): Promise<string> {
 }
 
 async function goBackFromDetail(page: Page): Promise<void> {
-    // Return to the list: the shell's sticky Back is route-level in browse
-    // and watch alike (closing the player is the bar's own Close button).
-    const backButton = page
-        .locator('app-portal-detail-shell')
-        .first()
-        .getByRole('button', { name: 'Back', exact: true });
+    // Return to the list: the header's Back is route-level in browse and
+    // watch alike (closing the player is the bar's own Close button).
+    const backButton = page.getByTestId('workspace-header-back');
 
     await expect(backButton).toBeVisible({ timeout: 20000 });
     try {

apps/electron-backend-e2e/src/category-management.e2e.ts

@@ -551,7 +551,9 @@ async function refreshFromWorkspaceHeader(page: Page): Promise<void> {
 
     const dialog = page.locator('mat-dialog-container');
     await expect(dialog).toBeVisible();
-    await dialog.getByRole('button', { name: 'Yes', exact: true }).click();
+    await dialog
+        .getByRole('button', { name: 'Refresh playlist', exact: true })
+        .click();
 
     const refreshOverlay = page.locator('app-workspace-shell-import-overlay');
     await expect(refreshOverlay).toBeVisible({ timeout: 5000 });

apps/electron-backend-e2e/src/dashboard-activation.e2e.ts

@@ -306,12 +306,9 @@ function dashboardRailCardByTitle(
 }
 
 async function goBackFromDetail(page: Page): Promise<void> {
-    // Return to the list: the shell's sticky Back is route-level in browse
-    // and watch alike (closing the player is the bar's own Close button).
-    const backButton = page
-        .locator('app-portal-detail-shell')
-        .first()
-        .getByRole('button', { name: 'Back', exact: true });
+    // Return to the list: the header's Back is route-level in browse and
+    // watch alike (closing the player is the bar's own Close button).
+    const backButton = page.getByTestId('workspace-header-back');
 
     await expect(backButton).toBeVisible({ timeout: 20000 });
     try {
@@ -350,9 +347,9 @@ async function expectInlineCollectionDetail(
     await expectPathname(page, params.pathname);
     await expect(page.locator('app-workspace-context-panel')).toHaveCount(0);
     await expect(page.locator('app-content-hero')).toContainText(params.title);
-    await expect(
-        page.locator('app-portal-detail-shell .shell__back-button').first()
-    ).toBeVisible({ timeout: 20000 });
+    await expect(page.getByTestId('workspace-header-back')).toBeVisible({
+        timeout: 20000,
+    });
 }
 
 async function playCurrentDetail(page: Page): Promise<void> {

apps/electron-backend-e2e/src/dashboard-rail-focus.e2e.ts

@@ -0,0 +1,175 @@
+import { Locator, Page } from '@playwright/test';
+import {
+    closeElectronApp,
+    expect,
+    goToDashboard,
+    importM3uPlaylistFromNativeDialog,
+    launchElectronApp,
+    test,
+    writeTemporaryM3uFile,
+} from './electron-test-fixtures';
+
+const sourcesRailId = 'dashboard-recent-sources-rail';
+const sourceCount = 4;
+/** The rail's stable `data-test-id` hooks, as CSS selectors. */
+const hooks = {
+    viewport: `[data-test-id="${sourcesRailId}-viewport"]`,
+    track: `[data-test-id="${sourcesRailId}-track"]`,
+    card: `[data-test-id="${sourcesRailId}-card"]`,
+    cardLink: `[data-test-id="${sourcesRailId}-card-link"]`,
+};
+
+/**
+ * Sizes the sources rail's cards so the last one is half visible: the rail
+ * overflows by less than a card, and Chromium skips its own focus scroll for
+ * an element that already shows 32px or more. Returns the card width.
+ */
+async function makeLastCardHalfVisible(rail: Locator): Promise<number> {
+    const width = await rail.evaluate(
+        (section, { count, selectors }) => {
+            const host = section.parentElement as HTMLElement;
+            const viewport = section.querySelector(
+                selectors.viewport
+            ) as HTMLElement;
+            const track = section.querySelector(selectors.track) as HTMLElement;
+            const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
+            // count cards + (count - 1) gaps = viewport + half a card.
+            const cardWidth = Math.floor(
+                (viewport.clientWidth - gap * (count - 1)) / (count - 0.5)
+            );
+            host.style.setProperty('--cover-rail-width', `${cardWidth}px`);
+            track.scrollTo({ left: 0, behavior: 'auto' });
+            return cardWidth;
+        },
+        { count: sourceCount, selectors: hooks }
+    );
+    await expect
+        .poll(() => lastCardVisibleWidth(rail))
+        .toBeGreaterThan(Math.min(64, width / 4));
+    return width;
+}
+
+/** Pixels of the last card inside the rail's visible viewport. */
+function lastCardVisibleWidth(rail: Locator): Promise<number> {
+    return rail.evaluate((section, selectors) => {
+        const viewport = section
+            .querySelector(selectors.viewport)
+            ?.getBoundingClientRect();
+        const cards = section.querySelectorAll(selectors.card);
+        const card = cards[cards.length - 1]?.getBoundingClientRect();
+        if (!viewport || !card) return 0;
+        return (
+            Math.min(card.right, viewport.right) -
+            Math.max(card.left, viewport.left)
+        );
+    }, hooks);
+}
+
+async function lastCardFullyVisible(rail: Locator): Promise<boolean> {
+    return rail.evaluate((section, selectors) => {
+        const viewport = section
+            .querySelector(selectors.viewport)
+            ?.getBoundingClientRect();
+        const cards = section.querySelectorAll(selectors.card);
+        const card = cards[cards.length - 1]?.getBoundingClientRect();
+        if (!viewport || !card) return false;
+        return (
+            card.left >= viewport.left - 1 && card.right <= viewport.right + 1
+        );
+    }, hooks);
+}
+
+function lastCardLinkFocused(page: Page): Promise<boolean> {
+    return page.evaluate((selector) => {
+        const links = document.querySelectorAll(selector);
+        return document.activeElement === links[links.length - 1];
+    }, hooks.cardLink);
+}
+
+test.describe('Dashboard rail focus', () => {
+    test('reveals a partly hidden card on keyboard and programmatic focus, and keeps mouse clicks on it', async ({
+        dataDir,
+    }) => {
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            for (let index = 1; index <= sourceCount; index++) {
+                const filePath = writeTemporaryM3uFile(
+                    dataDir,
+                    `rail-focus-source-${index}.m3u`,
+                    [
+                        {
+                            groupTitle: 'News',
+                            name: `Rail Focus Channel ${index}`,
+                            url: `https://streams.example.test/rail-${index}.m3u8`,
+                        },
+                    ]
+                );
+                await importM3uPlaylistFromNativeDialog(app, filePath);
+            }
+
+            await goToDashboard(app.mainWindow);
+            const rail = app.mainWindow.getByTestId(sourcesRailId);
+            await expect(rail.locator(hooks.card)).toHaveCount(sourceCount);
+            const cardLinks = rail.locator(hooks.cardLink);
+
+            // Tab from the first card to the last card's link.
+            await makeLastCardHalfVisible(rail);
+            await cardLinks.first().focus();
+            for (
+                let presses = 0;
+                presses < sourceCount * 3 &&
+                !(await lastCardLinkFocused(app.mainWindow));
+                presses++
+            ) {
+                await app.mainWindow.keyboard.press('Tab');
+            }
+            expect(await lastCardLinkFocused(app.mainWindow)).toBe(true);
+            await expect.poll(() => lastCardFullyVisible(rail)).toBe(true);
+
+            // `focus()` from script after a mouse click elsewhere, starting
+            // at the rail's start again.
+            await rail.getByRole('heading').click();
+            await rail.evaluate((section, selector) => {
+                (document.activeElement as HTMLElement | null)?.blur();
+                section
+                    .querySelector(selector)
+                    ?.scrollTo({ left: 0, behavior: 'auto' });
+            }, hooks.track);
+            await expect.poll(() => lastCardFullyVisible(rail)).toBe(false);
+            await cardLinks.last().evaluate((link) => {
+                (link as HTMLElement).focus();
+            });
+            await expect.poll(() => lastCardFullyVisible(rail)).toBe(true);
+
+            // A mouse press focuses the link too; the rail must not slide it
+            // away from under the pointer before the click lands.
+            await rail.evaluate((section, selector) => {
+                (document.activeElement as HTMLElement | null)?.blur();
+                section
+                    .querySelector(selector)
+                    ?.scrollTo({ left: 0, behavior: 'auto' });
+            }, hooks.track);
+            await expect.poll(() => lastCardFullyVisible(rail)).toBe(false);
+            const box = await cardLinks.last().boundingBox();
+            expect(box).not.toBeNull();
+            await app.mainWindow.mouse.move(
+                (box?.x ?? 0) + 24,
+                (box?.y ?? 0) + (box?.height ?? 0) / 2
+            );
+            await app.mainWindow.mouse.down();
+            expect(await lastCardLinkFocused(app.mainWindow)).toBe(true);
+            expect(
+                await rail
+                    .locator(hooks.track)
+                    .evaluate((track) => track.scrollLeft)
+            ).toBe(0);
+            await app.mainWindow.mouse.up();
+            await expect(app.mainWindow).not.toHaveURL(
+                /\/workspace\/dashboard$/
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});

apps/electron-backend-e2e/src/detail-back-lane.e2e.ts

@@ -1,343 +0,0 @@
-import type { Locator, Page } from '@playwright/test';
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import {
-    addXtreamPortal,
-    clickFirstGridListCard,
-    closeElectronApp,
-    expect,
-    launchElectronApp,
-    openSettings,
-    resetMockServers,
-    saveSettings,
-    test,
-    waitForXtreamWorkspaceReady,
-} from './electron-test-fixtures';
-
-// ---------------------------------------------------------------------------
-// The detail shell's sticky Back control floats over its scroll owner. While
-// it is shown, every content column reserves the control's lane, so no
-// scroll position may put it over the "Episodes" heading or the inline
-// player's top-left corner. Tested at a wide and a narrow window; the
-// workspace rail and category panel leave the detail pane far narrower than
-// either, and the heading used to wrap beside its actions (two lines at
-// 1280px, three at 780px) with its first word under the arrow.
-//
-// A pane under 400px cannot spare the lane: a 700px window beside the
-// category panel, or a phone. There the control sits in an opaque sticky bar,
-// and whatever reaches the arrow's band must be hidden beneath the bar, never
-// visible beside the arrow.
-// ---------------------------------------------------------------------------
-
-const widths = [1280, 780];
-const compactWidths = [700, 375];
-const playerCorner = 56;
-/** The widest translation of the heading; it must fit wherever English does. */
-const widestLocale = 'nl';
-const widestHeading = (
-    JSON.parse(
-        readFileSync(
-            join(__dirname, `../../web/src/assets/i18n/${widestLocale}.json`),
-            'utf8'
-        )
-    ) as { PORTALS: { DETAIL: { EPISODES: string } } }
-).PORTALS.DETAIL.EPISODES;
-
-type Sweep = {
-    overlaps: string[];
-    /** Scroll positions where the target shared the arrow's vertical band. */
-    beside: { player: number; title: number };
-};
-
-/**
- * Scrolls the shell from top to bottom in steps shorter than the arrow and
- * records every position where the arrow's box intersects the heading or the
- * player's top-left corner. Reads layout synchronously after each scroll
- * write, so a hidden or throttled window cannot skip frames.
- */
-function sweepDetail(shell: Locator): Promise<Sweep> {
-    return shell.evaluate((element, corner) => {
-        const back = element.querySelector('.shell__back-button');
-        if (!back) throw new Error('The detail shows no Back control.');
-        const sweep = {
-            overlaps: [] as string[],
-            beside: { player: 0, title: 0 },
-        };
-        const max = element.scrollHeight - element.clientHeight;
-        for (let top = 0; ; top = Math.min(max, top + 24)) {
-            element.scrollTop = top;
-            const arrow = back.getBoundingClientRect();
-            const title = element
-                .querySelector('[data-test-id="episodes-heading"]')
-                ?.getBoundingClientRect();
-            const player = element
-                .querySelector('app-portal-inline-player')
-                ?.getBoundingClientRect();
-            const targets = {
-                title,
-                player: player && {
-                    left: player.left,
-                    top: player.top,
-                    right: player.left + corner,
-                    bottom: player.top + corner,
-                },
-            };
-            for (const [name, box] of Object.entries(targets)) {
-                if (!box) continue;
-                const sameBand =
-                    box.top < arrow.bottom && arrow.top < box.bottom;
-                if (!sameBand) continue;
-                sweep.beside[name as keyof Sweep['beside']] += 1;
-                if (box.left < arrow.right && arrow.left < box.right) {
-                    sweep.overlaps.push(`${name} at scrollTop ${top}`);
-                }
-            }
-            if (top >= max) break;
-        }
-        element.scrollTop = 0;
-        return sweep;
-    }, playerCorner);
-}
-
-type BarSweep = {
-    background: string;
-    /** Scroll positions where a target reached the bar's band. */
-    beneath: number;
-    /** Points of a target in the bar's band that hit content, not the bar. */
-    exposed: string[];
-};
-
-/**
- * Compact counterpart of {@link sweepDetail}: the bar sits in flow and
- * content scrolls beneath it, so boxes do intersect. Instead, every sampled
- * point of the heading or the player's corner that is inside the bar's band
- * must hit-test to the bar: hidden beneath it, and unreachable by a tap.
- */
-function sweepBar(shell: Locator): Promise<BarSweep> {
-    return shell.evaluate((element, corner) => {
-        const bar = element.querySelector('.shell__navigation');
-        if (!bar) throw new Error('The detail shows no Back control.');
-        const sweep = {
-            background: getComputedStyle(bar).backgroundColor,
-            beneath: 0,
-            exposed: [] as string[],
-        };
-        const max = element.scrollHeight - element.clientHeight;
-        for (let top = 0; ; top = Math.min(max, top + 24)) {
-            element.scrollTop = top;
-            const band = bar.getBoundingClientRect();
-            const title = element
-                .querySelector('[data-test-id="episodes-heading"]')
-                ?.getBoundingClientRect();
-            const player = element
-                .querySelector('app-portal-inline-player')
-                ?.getBoundingClientRect();
-            const targets = {
-                title,
-                player: player && {
-                    left: player.left,
-                    top: player.top,
-                    right: player.left + corner,
-                    bottom: player.top + corner,
-                },
-            };
-            for (const [name, box] of Object.entries(targets)) {
-                if (!box) continue;
-                const from = Math.max(box.top, band.top);
-                const to = Math.min(box.bottom, band.bottom);
-                if (to <= from) continue;
-                sweep.beneath += 1;
-                const y = (from + to) / 2;
-                for (const x of [box.left + 2, box.right - 2]) {
-                    const hit = element.ownerDocument.elementFromPoint(x, y);
-                    if (!hit || !bar.contains(hit)) {
-                        sweep.exposed.push(
-                            `${name} at scrollTop ${top} hits ${hit?.tagName}.${String(hit?.className)}`
-                        );
-                    }
-                }
-            }
-            if (top >= max) break;
-        }
-        element.scrollTop = 0;
-        return sweep;
-    }, playerCorner);
-}
-
-/** Line boxes of the heading's text; 1 means it did not wrap. */
-function headingLineCount(page: Page): Promise<number> {
-    return page
-        .locator('[data-test-id="episodes-heading"]')
-        .evaluate((heading) => {
-            const range = document.createRange();
-            range.selectNodeContents(heading);
-            const lines = [...range.getClientRects()]
-                .filter((rect) => rect.width > 0)
-                .map((rect) => Math.round(rect.top));
-            return new Set(lines).size;
-        });
-}
-
-/**
- * Lets the browse↔watch morph, the player's fade-in and the workspace's own
- * transitions settle — crossing into the phone layout slides the category
- * drawer out over the page for 200ms. Bounded, so a paused animation
- * elsewhere cannot stall the test.
- */
-async function settle(shell: Locator): Promise<void> {
-    await shell.evaluate((element) =>
-        Promise.race([
-            Promise.all(
-                element.ownerDocument
-                    .getAnimations()
-                    .filter(
-                        (animation) =>
-                            animation.effect?.getTiming().iterations !==
-                            Infinity
-                    )
-                    .map((animation) =>
-                        animation.finished.catch(() => undefined)
-                    )
-            ),
-            new Promise((resolve) => setTimeout(resolve, 2_000)),
-        ])
-    );
-}
-
-async function expectBackClearOfContent(
-    page: Page,
-    state: 'browse' | 'watch'
-): Promise<void> {
-    const shell = page.locator('app-portal-detail-shell');
-    for (const width of widths) {
-        await page.setViewportSize({ width, height: 800 });
-        // Fail on the mode first: a lane assertion against the bar would
-        // only report confusing intersections.
-        await expect(shell, `${state} at ${width}px`).not.toHaveClass(
-            /shell-host--compact/
-        );
-        await settle(shell);
-        const sweep = await sweepDetail(shell);
-
-        expect(sweep.overlaps, `${state} at ${width}px`).toEqual([]);
-        // The sweep has to carry the heading (and the player) past the arrow,
-        // or the empty overlap list proves nothing.
-        expect(sweep.beside.title, `${state} at ${width}px`).toBeGreaterThan(0);
-        if (state === 'watch') {
-            expect(
-                sweep.beside.player,
-                `${state} at ${width}px`
-            ).toBeGreaterThan(0);
-        }
-        expect(await headingLineCount(page), `${state} at ${width}px`).toBe(1);
-    }
-
-    for (const width of compactWidths) {
-        await page.setViewportSize({ width, height: 800 });
-        await expect(shell, `${state} at ${width}px`).toHaveClass(
-            /shell-host--compact/
-        );
-        await settle(shell);
-        const sweep = await sweepBar(shell);
-
-        expect(sweep.exposed, `${state} at ${width}px`).toEqual([]);
-        expect(sweep.beneath, `${state} at ${width}px`).toBeGreaterThan(0);
-        // Opaque, or what scrolls beneath would show through.
-        expect(sweep.background, `${state} at ${width}px`).toMatch(/^rgb\(/);
-        expect(await headingLineCount(page), `${state} at ${width}px`).toBe(1);
-    }
-}
-
-/**
- * Re-checks the heading in the widest translation at the lane and bar widths.
- * Below them (a ~220px header beside the category panel) a translation wider
- * than the pane itself wraps by design rather than losing words to an
- * ellipsis.
- */
-async function expectWidestHeadingOnOneLine(
-    page: Page,
-    detailUrl: string
-): Promise<void> {
-    await page.setViewportSize({ width: widths[0], height: 800 });
-    await openSettings(page);
-    await page.getByTestId('select-language').click();
-    await page.getByTestId(widestLocale).click();
-    await saveSettings(page);
-    await page.goBack();
-    await page.waitForURL(detailUrl);
-    await expect(page.locator('[data-test-id="episodes-heading"]')).toHaveText(
-        widestHeading,
-        {
-            timeout: 20_000,
-        }
-    );
-    for (const width of [...widths, ...compactWidths]) {
-        await page.setViewportSize({ width, height: 800 });
-        expect(
-            await headingLineCount(page),
-            `${widestLocale} at ${width}px`
-        ).toBe(1);
-    }
-}
-
-/**
- * The actions move onto their own row before the heading wraps, at every
- * pane width that can hold the heading at all — including the widths where
- * the lane gives way to the bar.
- */
-async function expectHeadingOnOneLine(page: Page): Promise<void> {
-    const wrapped: number[] = [];
-    for (let width = 680; width <= 1600; width += 20) {
-        await page.setViewportSize({ width, height: 800 });
-        if ((await headingLineCount(page)) !== 1) wrapped.push(width);
-    }
-    expect(wrapped).toEqual([]);
-}
-
-test.describe('Portal detail Back lane', () => {
-    test('@xtream @electron keeps the Back arrow off the heading and the player while scrolling', async ({
-        dataDir,
-        request,
-    }) => {
-        await resetMockServers(request, ['xtream']);
-        const app = await launchElectronApp(dataDir);
-
-        try {
-            const page = app.mainWindow;
-            await addXtreamPortal(page);
-            await waitForXtreamWorkspaceReady(page);
-            await page
-                .getByRole('link', { name: 'Series', exact: true })
-                .click();
-            await clickFirstGridListCard(page);
-            await page.waitForURL(
-                /\/workspace\/xtreams\/[^/]+\/series\/[^/]+\/[^/]+$/
-            );
-
-            const detailUrl = page.url();
-            const shell = page.locator('app-portal-detail-shell');
-            const episodes = page.locator('.episode-card');
-            await expect(
-                page.locator('[data-test-id="episodes-heading"]')
-            ).toBeVisible({
-                timeout: 20_000,
-            });
-            await expect(episodes.first()).toBeVisible({ timeout: 20_000 });
-
-            await expectBackClearOfContent(page, 'browse');
-            await expectHeadingOnOneLine(page);
-
-            await page.setViewportSize({ width: widths[0], height: 800 });
-            await episodes.first().click();
-            await expect(shell).toHaveClass(/shell-host--watch/);
-            await expect(
-                shell.locator('app-portal-inline-player app-web-player-view')
-            ).toBeVisible({ timeout: 20_000 });
-
-            await expectBackClearOfContent(page, 'watch');
-            await expectWidestHeadingOnOneLine(page, detailUrl);
-        } finally {
-            await closeElectronApp(app);
-        }
-    });
-});

apps/electron-backend-e2e/src/detail-header-back.e2e.ts

@@ -0,0 +1,283 @@
+import type { Locator, Page } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import {
+    addXtreamPortal,
+    clickFirstGridListCard,
+    closeElectronApp,
+    expect,
+    launchElectronApp,
+    openSettings,
+    resetMockServers,
+    saveSettings,
+    test,
+    waitForXtreamWorkspaceReady,
+} from './electron-test-fixtures';
+
+// ---------------------------------------------------------------------------
+// A detail page's Back lives in the workspace header's leading slot, not in
+// the page. Nothing floats over the scroll owner, so the content keeps its
+// full width: every column has symmetric insets instead of a reserved Back
+// lane. Checked at a wide and a narrow desktop window and at phone width,
+// where Back takes the context drawer toggle's slot.
+//
+// The "Seasons and Episodes" heading must also stay on one line: the detail
+// pane is far narrower than the window beside the rail and category panel,
+// and the heading used to wrap beside its actions.
+// ---------------------------------------------------------------------------
+
+const widths = [1280, 780, 375];
+const phoneWidth = 640;
+/** The widest translation of the heading; it must fit wherever English does. */
+const widestLocale = 'nl';
+const widestHeading = (
+    JSON.parse(
+        readFileSync(
+            join(__dirname, `../../web/src/assets/i18n/${widestLocale}.json`),
+            'utf8'
+        )
+    ) as { PORTALS: { SEASONS_AND_EPISODES: string } }
+).PORTALS.SEASONS_AND_EPISODES;
+
+const detailUrlPattern = /\/workspace\/xtreams\/[^/]+\/series\/[^/]+\/[^/]+$/;
+
+function headerBack(page: Page): Locator {
+    return page.getByTestId('workspace-header-back');
+}
+
+/** Line boxes of the heading's text; 1 means it did not wrap. */
+function headingLineCount(page: Page): Promise<number> {
+    return page.locator('.section-title').evaluate((heading) => {
+        const range = document.createRange();
+        range.selectNodeContents(heading);
+        const lines = [...range.getClientRects()]
+            .filter((rect) => rect.width > 0)
+            .map((rect) => Math.round(rect.top));
+        return new Set(lines).size;
+    });
+}
+
+/**
+ * Columns whose start inset differs from their end inset. A reserved Back
+ * lane shows up here as a wider start inset.
+ */
+function asymmetricColumns(shell: Locator): Promise<string[]> {
+    return shell.evaluate((element) =>
+        [
+            '.hero__content',
+            '.shell__player--active',
+            '.shell__episodes',
+            '.shell__extras',
+            'app-content-about .about',
+        ].flatMap((selector) => {
+            const column = element.querySelector(selector);
+            if (!column || !column.getClientRects().length) return [];
+            const style = getComputedStyle(column);
+            return style.paddingLeft === style.paddingRight
+                ? []
+                : [`${selector}: ${style.paddingLeft} / ${style.paddingRight}`];
+        })
+    );
+}
+
+/**
+ * Lets the browse↔watch morph, the player's fade-in and the workspace's own
+ * transitions settle — crossing into the phone layout slides the category
+ * drawer out over the page for 200ms. Bounded, so a paused animation
+ * elsewhere cannot stall the test.
+ */
+async function settle(shell: Locator): Promise<void> {
+    await shell.evaluate((element) =>
+        Promise.race([
+            Promise.all(
+                element.ownerDocument
+                    .getAnimations()
+                    .filter(
+                        (animation) =>
+                            animation.effect?.getTiming().iterations !==
+                            Infinity
+                    )
+                    .map((animation) =>
+                        animation.finished.catch(() => undefined)
+                    )
+            ),
+            new Promise((resolve) => setTimeout(resolve, 2_000)),
+        ])
+    );
+}
+
+async function expectBackInHeader(
+    page: Page,
+    state: 'browse' | 'watch'
+): Promise<void> {
+    const shell = page.locator('app-portal-detail-shell');
+    for (const width of widths) {
+        const label = `${state} at ${width}px`;
+        await page.setViewportSize({ width, height: 800 });
+        await settle(shell);
+
+        const back = headerBack(page);
+        await expect(back, label).toBeVisible();
+        await expect(back, label).toHaveAccessibleName('Back');
+        // Escape unwinds the page in browse; in watch it closes the player.
+        if (state === 'browse') {
+            await expect(back, label).toHaveAttribute(
+                'aria-keyshortcuts',
+                'Escape'
+            );
+        } else {
+            await expect(back, label).not.toHaveAttribute('aria-keyshortcuts');
+        }
+        await expect(
+            page
+                .locator('app-workspace-shell-header')
+                .getByTestId('workspace-header-back'),
+            label
+        ).toHaveCount(1);
+        // The page itself carries no second arrow.
+        await expect(
+            shell.getByRole('button', { name: 'Back', exact: true }),
+            label
+        ).toHaveCount(0);
+        expect(await asymmetricColumns(shell), label).toEqual([]);
+        // On a phone, Back takes the drawer toggle's slot in the header.
+        await expect(
+            page.getByTestId('context-drawer-toggle'),
+            label
+        ).toHaveCount(0);
+        if (width <= phoneWidth) {
+            const [backBox, switcherBox] = await Promise.all([
+                back.boundingBox(),
+                page.locator('app-playlist-switcher').boundingBox(),
+            ]);
+            expect(backBox?.x ?? Infinity, label).toBeLessThan(
+                switcherBox?.x ?? -Infinity
+            );
+        }
+        expect(await headingLineCount(page), label).toBe(1);
+    }
+}
+
+/**
+ * Re-checks the heading in the widest translation. Below these widths (a
+ * ~220px header beside the category panel) a translation wider than the pane
+ * itself wraps by design rather than losing words to an ellipsis.
+ */
+async function expectWidestHeadingOnOneLine(
+    page: Page,
+    detailUrl: string
+): Promise<void> {
+    await page.setViewportSize({ width: widths[0], height: 800 });
+    await openSettings(page);
+    await page.getByTestId('select-language').click();
+    await page.getByTestId(widestLocale).click();
+    await saveSettings(page);
+    await page.goBack();
+    await page.waitForURL(detailUrl);
+    await expect(page.locator('.section-title')).toHaveText(widestHeading, {
+        timeout: 20_000,
+    });
+    for (const width of [...widths, 700]) {
+        await page.setViewportSize({ width, height: 800 });
+        expect(
+            await headingLineCount(page),
+            `${widestLocale} at ${width}px`
+        ).toBe(1);
+    }
+}
+
+/**
+ * The actions move onto their own row before the heading wraps, at every
+ * pane width that can hold the heading at all.
+ */
+async function expectHeadingOnOneLine(page: Page): Promise<void> {
+    const wrapped: number[] = [];
+    for (let width = 680; width <= 1600; width += 20) {
+        await page.setViewportSize({ width, height: 800 });
+        if ((await headingLineCount(page)) !== 1) wrapped.push(width);
+    }
+    expect(wrapped).toEqual([]);
+}
+
+async function openFirstSeries(page: Page): Promise<string> {
+    await page.getByRole('link', { name: 'Series', exact: true }).click();
+    await clickFirstGridListCard(page);
+    await page.waitForURL(detailUrlPattern);
+    await expect(page.locator('.section-title')).toBeVisible({
+        timeout: 20_000,
+    });
+    await expect(page.locator('.episode-card').first()).toBeVisible({
+        timeout: 20_000,
+    });
+    return page.url();
+}
+
+async function startFirstEpisode(page: Page): Promise<void> {
+    const shell = page.locator('app-portal-detail-shell');
+    await page.locator('.episode-card').first().click();
+    await expect(shell).toHaveClass(/shell-host--watch/);
+    await expect(
+        shell.locator('app-portal-inline-player app-web-player-view')
+    ).toBeVisible({ timeout: 20_000 });
+}
+
+/** The header Back leaves the detail and is gone from the list it opens. */
+async function expectHeaderBackReturnsToList(page: Page): Promise<void> {
+    await headerBack(page).click();
+    await expect(page).not.toHaveURL(detailUrlPattern);
+    await expect(page.locator('app-portal-detail-shell')).toHaveCount(0);
+    await expect(headerBack(page)).toHaveCount(0);
+}
+
+test.describe('Portal detail header Back', () => {
+    test('@xtream @electron keeps Back in the header and the detail columns at full width', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            const page = app.mainWindow;
+            await addXtreamPortal(page);
+            await waitForXtreamWorkspaceReady(page);
+            await expect(headerBack(page)).toHaveCount(0);
+
+            const detailUrl = await openFirstSeries(page);
+            await expectBackInHeader(page, 'browse');
+            await expectHeadingOnOneLine(page);
+
+            await page.setViewportSize({ width: widths[0], height: 800 });
+            await startFirstEpisode(page);
+            await expectBackInHeader(page, 'watch');
+            await expectWidestHeadingOnOneLine(page, detailUrl);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@xtream @electron returns to the list from the header in browse and watch', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            const page = app.mainWindow;
+            await addXtreamPortal(page);
+            await waitForXtreamWorkspaceReady(page);
+
+            await openFirstSeries(page);
+            await expectHeaderBackReturnsToList(page);
+
+            await clickFirstGridListCard(page);
+            await page.waitForURL(detailUrlPattern);
+            await startFirstEpisode(page);
+            // Route-level in watch too: it leaves the page, not just the player.
+            await expectHeaderBackReturnsToList(page);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});

apps/electron-backend-e2e/src/electron-test-fixtures.ts

@@ -1013,7 +1013,7 @@ export async function saveSettings(page: Page): Promise<void> {
 
 export async function goToDashboard(page: Page): Promise<void> {
     const dashboardLink = page
-        .locator('a.brand[href$="/workspace/dashboard"]')
+        .locator('app-workspace-shell-rail a[href$="/workspace/dashboard"]')
         .first();
 
     await expect(dashboardLink).toBeVisible();
@@ -1266,7 +1266,7 @@ export async function clearCurrentUnifiedCollection(page: Page): Promise<void> {
 
     const dialog = page.locator('mat-dialog-container').last();
     await expect(dialog).toBeVisible();
-    await dialog.getByRole('button', { name: /^Yes$/i }).click();
+    await dialog.getByRole('button', { name: 'Clear', exact: true }).click();
     await expect(dialog).toBeHidden();
 }
 
@@ -1664,7 +1664,7 @@ export async function deleteSource(page: Page, title: string): Promise<void> {
 
     await expect(row).toBeVisible();
     await row.locator('.delete-btn').click();
-    await confirmDialog(page);
+    await confirmDialog(page, 'Remove playlist');
 }
 
 export async function refreshSource(
@@ -1681,7 +1681,7 @@ export async function refreshSource(
     await row.locator('.refresh-btn').click();
 
     if (confirm) {
-        await confirmDialog(page);
+        await confirmDialog(page, 'Refresh playlist');
     }
 }
 
@@ -2098,7 +2098,7 @@ async function openCommandPalette(page: Page): Promise<Locator> {
     return dialog;
 }
 
-async function confirmDialog(page: Page, buttonLabel = 'Yes'): Promise<void> {
+async function confirmDialog(page: Page, buttonLabel: string): Promise<void> {
     const dialog = page.locator('mat-dialog-container');
 
     await expect(dialog).toBeVisible();

apps/electron-backend-e2e/src/favorites.e2e.ts

@@ -606,12 +606,9 @@ async function addCurrentDetailToFavorites(page: Page): Promise<void> {
 }
 
 async function goBackFromDetail(page: Page): Promise<void> {
-    // Return to the list: the shell's sticky Back is route-level in browse
-    // and watch alike (closing the player is the bar's own Close button).
-    const backButton = page
-        .locator('app-portal-detail-shell')
-        .first()
-        .getByRole('button', { name: 'Back', exact: true });
+    // Return to the list: the header's Back is route-level in browse and
+    // watch alike (closing the player is the bar's own Close button).
+    const backButton = page.getByTestId('workspace-header-back');
 
     await expect(backButton).toBeVisible({ timeout: 20000 });
     try {
@@ -637,9 +634,9 @@ async function expectInlineCollectionDetail(
     );
     await expect(page.locator('app-workspace-context-panel')).toHaveCount(0);
     await expect(page.locator('app-content-hero')).toContainText(params.title);
-    await expect(
-        page.locator('app-portal-detail-shell .shell__back-button').first()
-    ).toBeVisible({ timeout: 20000 });
+    await expect(page.getByTestId('workspace-header-back')).toBeVisible({
+        timeout: 20000,
+    });
 }
 
 async function expectInlinePlayerWithoutDialog(page: Page): Promise<void> {

apps/electron-backend-e2e/src/live-sidebar-collapse.e2e.ts

@@ -163,7 +163,10 @@ test.describe('Live channel rail collapse (#1458)', () => {
             await app.mainWindow
                 .getByRole('button', { name: 'Clear recently viewed Live TV' })
                 .click();
-            await app.mainWindow.getByRole('button', { name: 'Yes' }).click();
+            await app.mainWindow
+                .locator('mat-dialog-container')
+                .getByRole('button', { name: 'Clear', exact: true })
+                .click();
             await expect(
                 channelItemByTitle(app.mainWindow, 'Channel Alpha')
             ).toHaveCount(0);

apps/electron-backend-e2e/src/performance/xtream-scenario-driver-wiring.spec.ts

@@ -35,7 +35,8 @@ describe('Xtream scenario driver source wiring', () => {
             "'app-playlist-item'",
             "'.refresh-btn'",
             "'.delete-btn'",
-            "'Yes'",
+            "'Refresh playlist'",
+            "'Remove playlist'",
             "'.busy-state__message'",
             "'.action-spinner'",
             "'.cancel-btn'",

apps/electron-backend-e2e/src/performance/xtream-scenario-driver.spec.ts

@@ -157,10 +157,15 @@ describe('Xtream Playwright scenario driver', () => {
     });
 
     it('does not require a misleading portal-status badge before refresh or delete', async () => {
-        for (const [scenarioId, selector] of [
-            [XTREAM_SCENARIO_ID.REFRESH_LARGE, '.refresh-btn'],
-            [XTREAM_SCENARIO_ID.DELETE_LARGE, '.delete-btn'],
+        for (const [scenarioId, selector, confirmLabel] of [
+            [
+                XTREAM_SCENARIO_ID.REFRESH_LARGE,
+                '.refresh-btn',
+                'Refresh playlist',
+            ],
+            [XTREAM_SCENARIO_ID.DELETE_LARGE, '.delete-btn', 'Remove playlist'],
         ] as const) {
+            const confirmClick = `name=${confirmLabel};exact=true`;
             const fake = new FakePage();
             const prepared = await prepareXtreamScenario(
                 fake.asPage(),
@@ -168,7 +173,7 @@ describe('Xtream Playwright scenario driver', () => {
             );
 
             assert.equal(fake.clicksMatching(selector), 1);
-            assert.equal(fake.clicksMatching('name=Yes;exact=true'), 0);
+            assert.equal(fake.clicksMatching(confirmClick), 0);
             const portalReadyIndex = fake.log.findIndex((entry) =>
                 entry.includes('[aria-label="Portal status: active"]:visible')
             );
@@ -179,7 +184,7 @@ describe('Xtream Playwright scenario driver', () => {
             assert.equal(portalReadyIndex, -1);
             assert.ok(sourceActionIndex >= 0);
             await prepared.trigger();
-            assert.equal(fake.clicksMatching('name=Yes;exact=true'), 1);
+            assert.equal(fake.clicksMatching(confirmClick), 1);
         }
     });
 

apps/electron-backend-e2e/src/performance/xtream-scenario-ui.ts

@@ -83,7 +83,10 @@ export async function prepareXtreamSourceActionTrigger(
     const dialog = page.locator('mat-dialog-container').last();
     await dialog.waitFor({ state: 'visible' });
     const confirmation = dialog
-        .getByRole('button', { name: 'Yes', exact: true })
+        .getByRole('button', {
+            name: action === 'refresh' ? 'Refresh playlist' : 'Remove playlist',
+            exact: true,
+        })
         .last();
     await assertTriggerReady(confirmation, `xtream-source-${action}-confirm`);
     return confirmation;

apps/electron-backend-e2e/src/performance/xtream-ui-action-probe.ts

@@ -87,7 +87,7 @@ export async function runXtreamBackgroundUiActions(
             async () => {
                 const start = await clickSelector(
                     page,
-                    'a.brand[href$="/workspace/dashboard"]'
+                    'app-workspace-shell-rail a[href$="/workspace/dashboard"]'
                 );
                 await page.waitForFunction(() => {
                     const overlay = document.querySelector(

apps/electron-backend-e2e/src/providers.e2e.ts

@@ -245,7 +245,9 @@ async function refreshRecentXtreamSourceFromDashboard(
 
     const dialog = page.locator('mat-dialog-container');
     await expect(dialog).toBeVisible();
-    await dialog.getByRole('button', { name: 'Yes', exact: true }).click();
+    await dialog
+        .getByRole('button', { name: 'Refresh playlist', exact: true })
+        .click();
 
     const refreshOverlay = page.locator('app-workspace-shell-import-overlay');
     await expect(refreshOverlay).toBeVisible({ timeout: 5000 });

apps/electron-backend-e2e/src/recent.e2e.ts

@@ -676,7 +676,10 @@ async function clearRecentItems(page: Page, typeLabel: string): Promise<void> {
     await page
         .getByRole('button', { name: `Clear recently viewed ${typeLabel}` })
         .click();
-    await page.getByRole('button', { name: 'Yes' }).click();
+    await page
+        .locator('mat-dialog-container')
+        .getByRole('button', { name: 'Clear', exact: true })
+        .click();
 }
 
 async function expectUnifiedLiveDetailOpen(
@@ -694,12 +697,9 @@ async function expectUnifiedLiveDetailOpen(
 }
 
 async function goBackFromDetail(page: Page): Promise<void> {
-    // Return to the list: the shell's sticky Back is route-level in browse
-    // and watch alike (closing the player is the bar's own Close button).
-    const backButton = page
-        .locator('app-portal-detail-shell')
-        .first()
-        .getByRole('button', { name: 'Back', exact: true });
+    // Return to the list: the header's Back is route-level in browse and
+    // watch alike (closing the player is the bar's own Close button).
+    const backButton = page.getByTestId('workspace-header-back');
 
     await expect(backButton).toBeVisible({ timeout: 20000 });
     try {
@@ -725,9 +725,9 @@ async function expectInlineCollectionDetail(
     );
     await expect(page.locator('app-workspace-context-panel')).toHaveCount(0);
     await expect(page.locator('app-content-hero')).toContainText(params.title);
-    await expect(
-        page.locator('app-portal-detail-shell .shell__back-button').first()
-    ).toBeVisible({ timeout: 20000 });
+    await expect(page.getByTestId('workspace-header-back')).toBeVisible({
+        timeout: 20000,
+    });
 }
 
 async function expectInlinePlayerWithoutDialog(page: Page): Promise<void> {

apps/electron-backend-e2e/src/search.e2e.ts

@@ -1540,12 +1540,9 @@ async function addCurrentDetailToFavorites(page: Page): Promise<void> {
 }
 
 async function goBackFromDetail(page: Page): Promise<void> {
-    // Return to the list: the shell's sticky Back is route-level in browse
-    // and watch alike (closing the player is the bar's own Close button).
-    const backButton = page
-        .locator('app-portal-detail-shell')
-        .first()
-        .getByRole('button', { name: 'Back', exact: true });
+    // Return to the list: the header's Back is route-level in browse and
+    // watch alike (closing the player is the bar's own Close button).
+    const backButton = page.getByTestId('workspace-header-back');
 
     await expect(backButton).toBeVisible({ timeout: 20000 });
     await backButton.click();

apps/electron-backend-e2e/src/settings.e2e.ts

@@ -657,10 +657,11 @@ test.describe('Electron Settings', () => {
                     exact: true,
                 })
             ).toHaveCount(0);
-            await expect(secondLaunch.mainWindow.locator('a.brand')).toHaveAttribute(
-                'href',
-                /\/workspace\/sources$/
-            );
+            await expect(
+                secondLaunch.mainWindow
+                    .locator('app-workspace-shell-rail a.nav-item')
+                    .first()
+            ).toHaveAttribute('href', /\/workspace\/sources$/);
         } finally {
             await closeElectronApp(secondLaunch);
         }

apps/electron-backend-e2e/src/theme-tokens.e2e.ts

@@ -4,6 +4,7 @@ import {
     expect,
     launchElectronApp,
     openSettings,
+    openSettingsSection,
     test,
 } from './electron-test-fixtures';
 import { applyTheme } from './theme-contrast';
@@ -193,4 +194,55 @@ test.describe('Theme tokens', () => {
             await closeElectronApp(app);
         }
     });
+
+    test('@theme @electron destructive actions name the action and use the error color', async ({
+        dataDir,
+    }) => {
+        const app = await launchElectronApp(dataDir);
+        const page = app.mainWindow;
+        try {
+            await openSettings(page);
+            await openSettingsSection(page, 'epg');
+
+            for (const theme of ['light', 'dark'] as const) {
+                await applyTheme(page, theme);
+                const error = await resolveColor(page, 'var(--mat-sys-error)');
+                const trigger = page.getByRole('button', {
+                    name: 'Clear EPG data',
+                    exact: true,
+                });
+                // The `warn` color input was a no-op with M3: the trigger
+                // rendered in the primary color.
+                await expect
+                    .poll(() =>
+                        trigger.evaluate((el) => getComputedStyle(el).color)
+                    )
+                    .toBe(error);
+                await trigger.click();
+
+                const dialog = page.locator('mat-dialog-container');
+                await expect(dialog).toBeVisible();
+                await expect(
+                    dialog.getByRole('button', { name: 'Yes' })
+                ).toHaveCount(0);
+                const confirm = dialog.getByTestId('confirm-dialog-confirm');
+                await expect(confirm).toHaveText('Clear EPG data');
+                await expect(confirm).toHaveClass(/app-destructive-button/);
+                await expect
+                    .poll(() =>
+                        confirm.evaluate(
+                            (el) => getComputedStyle(el).backgroundColor
+                        )
+                    )
+                    .toBe(error);
+
+                await dialog
+                    .getByRole('button', { name: 'Cancel', exact: true })
+                    .click();
+                await expect(dialog).toBeHidden();
+            }
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
 });

apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts

@@ -11,6 +11,7 @@ import {
     waitForXtreamCatalog,
     xtreamMockServer,
 } from './electron-test-fixtures';
+import { applyTheme } from './theme-contrast';
 
 const stressPortalName = 'Stress Xtream Portal';
 const stressXtreamUsername = 'stress';
@@ -292,7 +293,7 @@ test.describe('Electron Xtream Responsiveness', () => {
             );
             await expect(confirmDialog).toBeVisible();
             await confirmDialog
-                .getByRole('button', { name: 'Yes', exact: true })
+                .getByRole('button', { name: 'Remove playlist', exact: true })
                 .click();
 
             await waitForDbOperationEvent(app.mainWindow, {
@@ -304,7 +305,25 @@ test.describe('Electron Xtream Responsiveness', () => {
             await expect(
                 playlistRow.locator('.busy-state__message')
             ).toBeVisible({ timeout: 20000 });
-            await expect(playlistRow.locator('.cancel-btn')).toBeVisible();
+            const cancel = playlistRow.locator('.cancel-btn');
+            await expect(cancel).toBeVisible();
+            // The row's action buttons inherit its color; the cancel action
+            // must still read as destructive on the selected row.
+            for (const theme of ['light', 'dark'] as const) {
+                await applyTheme(app.mainWindow, theme);
+                const error = await app.mainWindow.evaluate(() => {
+                    const probe = document.createElement('div');
+                    probe.style.color = 'var(--mat-sys-error)';
+                    document.body.appendChild(probe);
+                    const color = getComputedStyle(probe).color;
+                    probe.remove();
+                    return color;
+                });
+                expect(
+                    await cancel.evaluate((el) => getComputedStyle(el).color),
+                    `cancel color in ${theme} theme`
+                ).toBe(error);
+            }
 
             await waitForDbOperationEvent(app.mainWindow, {
                 operation: 'delete-playlist',

apps/electron-backend-e2e/src/xtream-vod-details.e2e.ts

@@ -247,10 +247,10 @@ for (const theme of ['light', 'dark']) {
                 await expect
                     .poll(() => shell.evaluate((el) => el.scrollTop))
                     .toBeGreaterThan(0);
-                await page.keyboard.press('Tab');
-                await expect(
-                    shell.locator('.shell__back-button')
-                ).toBeFocused();
+                // Back lives in the header, which never scrolls away.
+                const back = page.getByTestId('workspace-header-back');
+                await expect(back).toBeInViewport();
+                await back.focus();
                 await page.keyboard.press('Enter');
                 await expect(shell).toHaveCount(0);
             }

apps/web-e2e/src/m3u-movie-details.e2e.ts

@@ -345,17 +345,15 @@ test('@web @m3u @tmdb recognized movies open the VOD detail view', async ({
     ).toEqual(['app-html-video-player']);
 
     // Metadata patches the mounted view asynchronously. The shell stamps the
-    // host templates into BOTH the hero and the watch-state About block, so
-    // every metadata string legitimately resolves twice.
+    // host templates into BOTH the hero and the watch-state About block, but
+    // the collapsed hero turns `visibility: hidden` 300ms after mount,
+    // sometimes before TMDB answers. Assert the copy a watching user sees.
+    const about = detail(page).locator('app-content-about');
     await expect(
-        detail(page).getByText('Paul Atreides arrives on Arrakis.').first()
-    ).toBeVisible();
-    await expect(
-        detail(page).getByText('Denis Villeneuve').first()
-    ).toBeVisible();
-    await expect(
-        detail(page).getByText('Science Fiction').first()
+        about.getByText('Paul Atreides arrives on Arrakis.')
     ).toBeVisible();
+    await expect(about.getByText('Denis Villeneuve')).toBeVisible();
+    await expect(about.getByText('Science Fiction')).toBeVisible();
 
     // A live channel keeps the classic layout.
     await sidebarEntry(page, 'Live One').click();
@@ -406,19 +404,19 @@ test('@web @m3u @tmdb browse and watch keep the adjusted volume', async ({
             )
         )
         .toBe(0.25);
-    // M3U has no browse Back target, so the shell shows no arrow in either
+    // M3U has no browse Back target, so the header shows no arrow in either
     // state; the now-playing bar's own Close button returns to browse.
     const shell = detail(page).locator('app-portal-detail-shell');
-    await expect(shell.locator('.shell__back-button')).toHaveCount(0);
+    const headerBack = page.locator('[data-test-id="workspace-header-back"]');
+    await expect(headerBack).toHaveCount(0);
     await shell
         .locator('app-portal-inline-player')
         .getByRole('button', { name: 'Close player', exact: true })
         .click();
     await expect(inlineVideo(page)).toHaveCount(0);
-    await expect(shell.locator('.shell__back-button')).toHaveCount(0);
-    // Without the arrow there is no lane to reserve: the hero keeps its own
-    // inset (32px, or 20px in a pane narrower than 760px) instead of the
-    // 72px column portal details give the Back control.
+    await expect(headerBack).toHaveCount(0);
+    // The hero keeps its own inset (32px, or 20px in a pane narrower than
+    // 760px) in both states.
     expect(
         await shell
             .locator('.hero__content')

apps/web-e2e/src/settings-unsaved-dialog-layout.e2e.ts

@@ -90,8 +90,7 @@ async function openUnsavedDialog(page: Page, locale: Locale): Promise<Locator> {
         page.locator('[data-test-id="settings-unsaved-bar"]')
     ).toBeVisible();
 
-    // The rail's Dashboard link stays visible in the phone top bar, unlike
-    // the brand link.
+    // The rail's Dashboard link stays visible in the phone top bar.
     await page
         .getByRole('navigation')
         .locator('a[href$="/workspace/dashboard"]')

apps/web-e2e/src/xtream.e2e.ts

@@ -1156,7 +1156,11 @@ for (const theme of ['light', 'dark']) {
                 .click();
             await page.locator('app-grid-list mat-card').first().click();
             const shell = page.locator('app-portal-detail-shell');
-            await expect(shell).toBeVisible();
+            // The loading skeleton is a scrollable shell of its own; a key
+            // sent to it is lost when the loaded shell replaces it.
+            await expect(
+                shell.getByRole('heading', { level: 1 })
+            ).toBeVisible();
             await page.evaluate(
                 (dark) => document.body.classList.toggle('dark-theme', dark),
                 theme === 'dark'
@@ -1178,7 +1182,7 @@ for (const theme of ['light', 'dark']) {
                 .toBeGreaterThan(0);
         });
 
-        test(`@xtream sticky detail Back ${section} (${theme})`, async ({
+        test(`@xtream header detail Back ${section} (${theme})`, async ({
             page,
         }, testInfo) => {
             await page.setViewportSize({ width: 1200, height: 540 });
@@ -1196,30 +1200,28 @@ for (const theme of ['light', 'dark']) {
                 (dark) => document.body.classList.toggle('dark-theme', dark),
                 theme === 'dark'
             );
-            const back = shell.getByRole('button', {
-                name: 'Back',
-                exact: true,
-            });
+            // Back is the header's leading control, not a page overlay.
+            const back = page.locator(
+                'app-workspace-shell-header [data-test-id="workspace-header-back"]'
+            );
             await expect(back).toBeVisible();
-            const backOffset = () =>
-                back.evaluate((el) => {
-                    const owner = el.closest('app-portal-detail-shell');
-                    return owner
-                        ? el.getBoundingClientRect().top -
-                              owner.getBoundingClientRect().top
-                        : NaN;
-                });
-            await expect.poll(backOffset).toBeCloseTo(16, 0);
+            await expect(back).toHaveAccessibleName('Back');
+            await expect(
+                shell.getByRole('button', { name: 'Back', exact: true })
+            ).toHaveCount(0);
+            const backTop = () =>
+                back.evaluate((el) => el.getBoundingClientRect().top);
+            const initialTop = await backTop();
             await page.keyboard.press('End');
             await expect
                 .poll(() => shell.evaluate((el) => el.scrollTop))
                 .toBeGreaterThan(0);
             await waitForScrollIdle(shell);
-            await expect.poll(backOffset).toBeCloseTo(16, 0);
+            expect(await backTop()).toBe(initialTop);
             await expect(back).toBeInViewport();
-            await shell.screenshot({
+            await page.screenshot({
                 path: testInfo.outputPath(
-                    `sticky-back-${section}-${theme}.png`
+                    `header-back-${section}-${theme}.png`
                 ),
             });
             await back.click();
@@ -1230,7 +1232,8 @@ for (const theme of ['light', 'dark']) {
             ).toBeVisible();
             await shell.focus();
             await page.keyboard.press('End');
-            // Hover/focus must not make a tooltip consume the advertised Esc.
+            // Hover/focus must not make a tooltip consume the advertised Esc,
+            // even with focus on the header rather than inside the page.
             await page.clock.install();
             await back.focus();
             await back.hover();

apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html

@@ -49,7 +49,11 @@
     <button mat-button mat-dialog-close cdkFocusInitial>
         {{ 'CANCEL' | translate }}
     </button>
-    <button mat-flat-button [mat-dialog-close]="true" color="warn">
+    <button
+        mat-flat-button
+        class="app-destructive-button"
+        [mat-dialog-close]="true"
+    >
         {{ 'SETTINGS.REMOVE_DIALOG.CONFIRM' | translate }}
     </button>
 </mat-dialog-actions>

apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts

@@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
+import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces';
 
 export interface SettingsDeleteAllPlaylistsDialogData {
     summary: {
@@ -48,19 +49,19 @@ export class SettingsDeleteAllPlaylistsDialogComponent {
         {
             id: 'm3u',
             count: this.dialogData.summary.m3u,
-            icon: 'playlist_play',
+            icon: SOURCE_TYPE_ICONS.m3u,
             labelKey: 'HOME.PLAYLIST_TYPES.M3U',
         },
         {
             id: 'xtream',
             count: this.dialogData.summary.xtream,
-            icon: 'cloud',
+            icon: SOURCE_TYPE_ICONS.xtream,
             labelKey: 'HOME.PLAYLIST_TYPES.XTREAM',
         },
         {
             id: 'stalker',
             count: this.dialogData.summary.stalker,
-            icon: 'router',
+            icon: SOURCE_TYPE_ICONS.stalker,
             labelKey: 'HOME.PLAYLIST_TYPES.STALKER',
         },
     ]);

apps/web/src/app/settings/settings-epg-section.component.html

@@ -217,7 +217,7 @@
             </button>
             <button
                 mat-button
-                color="warn"
+                class="app-destructive-button"
                 type="button"
                 [disabled]="isClearingEpgData()"
                 (click)="clearEpgData.emit()"

apps/web/src/app/settings/settings-epg.facade.ts

@@ -89,6 +89,8 @@ export class SettingsEpgFacade {
             message: this.translate.instant(
                 'SETTINGS.CLEAR_EPG_DIALOG.MESSAGE'
             ),
+            confirmLabel: this.translate.instant('SETTINGS.CLEAR_EPG_DATA'),
+            tone: 'destructive',
             onConfirm: async (): Promise<void> => {
                 if (
                     !this.epgBridge.supportsDataManagement ||

apps/web/src/app/settings/settings-reset-section.component.html

@@ -20,7 +20,7 @@
             </div>
             <button
                 mat-button
-                class="danger-zone__button"
+                class="danger-zone__button app-destructive-button"
                 [class.danger-zone__button--busy]="isRemovingAllPlaylists()"
                 [disabled]="!canRemoveAllPlaylists()"
                 [attr.aria-busy]="isRemovingAllPlaylists()"
@@ -29,7 +29,6 @@
                     $event.stopPropagation();
                     removeAll.emit()
                 "
-                color="warn"
             >
                 @if (isRemovingAllPlaylists()) {
                     <mat-progress-spinner
@@ -49,9 +48,9 @@
         </div>
         <div class="danger-zone__summary" aria-live="polite">
             <span class="danger-zone__summary-pill">
-                <mat-icon class="danger-zone__summary-icon"
-                    >folder_open</mat-icon
-                >
+                <mat-icon class="danger-zone__summary-icon">{{
+                    sourceIcons.m3u
+                }}</mat-icon>
                 <span class="danger-zone__summary-label">{{
                     'HOME.PLAYLIST_TYPES.M3U' | translate
                 }}</span>
@@ -60,7 +59,9 @@
                 }}</span>
             </span>
             <span class="danger-zone__summary-pill">
-                <mat-icon class="danger-zone__summary-icon">cloud</mat-icon>
+                <mat-icon class="danger-zone__summary-icon">{{
+                    sourceIcons.xtream
+                }}</mat-icon>
                 <span class="danger-zone__summary-label">{{
                     'HOME.PLAYLIST_TYPES.XTREAM' | translate
                 }}</span>
@@ -69,7 +70,9 @@
                 }}</span>
             </span>
             <span class="danger-zone__summary-pill">
-                <mat-icon class="danger-zone__summary-icon">cast</mat-icon>
+                <mat-icon class="danger-zone__summary-icon">{{
+                    sourceIcons.stalker
+                }}</mat-icon>
                 <span class="danger-zone__summary-label">{{
                     'HOME.PLAYLIST_TYPES.STALKER' | translate
                 }}</span>

apps/web/src/app/settings/settings-reset-section.component.ts

@@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TranslateModule } from '@ngx-translate/core';
+import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces';
 import { SettingsPlaylistDeleteSummary } from './settings.models';
 
 @Component({
@@ -26,6 +27,7 @@ import { SettingsPlaylistDeleteSummary } from './settings.models';
     styles: [':host { display: contents; }'],
 })
 export class SettingsResetSectionComponent {
+    readonly sourceIcons = SOURCE_TYPE_ICONS;
     readonly isRemovingAllPlaylists = input(false);
     readonly canRemoveAllPlaylists = input(false);
     readonly playlistDeleteSummary =

apps/web/src/app/settings/settings-unsaved-changes-dialog.component.spec.ts

@@ -68,6 +68,16 @@ describe('SettingsUnsavedChangesDialogComponent', () => {
         expect(save.hasAttribute('cdkFocusInitial')).toBe(false);
     });
 
+    it('marks only Discard as destructive: it throws away the edits', async () => {
+        await render({ canSave: true });
+
+        expect(
+            actionButtons().map((button) =>
+                button.classList.contains('app-destructive-button')
+            )
+        ).toEqual([false, true, false]);
+    });
+
     it('disables save while the form cannot be saved', async () => {
         await render({ canSave: false });
 

apps/web/src/app/settings/settings-unsaved-changes-dialog.component.ts

@@ -82,6 +82,7 @@ export interface SettingsUnsavedChangesDialogData {
             </button>
             <button
                 mat-button
+                class="app-destructive-button"
                 [mat-dialog-close]="'discard'"
                 data-test-id="unsaved-dialog-discard"
             >

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "تشغيل العرض"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "لوحة التحكم",
-            "OPEN_DASHBOARD": "فتح لوحة التحكم",
             "RAIL_SOURCES": "المصادر",
-            "OPEN_SOURCES": "فتح المصادر",
             "RAIL_GLOBAL_FAVORITES": "المفضلة",
             "RAIL_GLOBAL_RECENT": "تمت مشاهدتها مؤخرًا",
             "RAIL_GLOBAL_SEARCH": "بحث عام",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "شغّل العرض"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "لوحة التحكم",
-            "OPEN_DASHBOARD": "حل لوحة التحكم",
             "RAIL_SOURCES": "المصادر",
-            "OPEN_SOURCES": "حل المصادر",
             "RAIL_GLOBAL_FAVORITES": "المفضلة",
             "RAIL_GLOBAL_RECENT": "متشافين مؤخراً",
             "RAIL_GLOBAL_SEARCH": "بحث عام",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Аднавіць паказ"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Панэль",
-            "OPEN_DASHBOARD": "Адкрыць панэль",
             "RAIL_SOURCES": "Крыніцы",
-            "OPEN_SOURCES": "Адкрыць крыніцы",
             "RAIL_GLOBAL_FAVORITES": "Выбранае",
             "RAIL_GLOBAL_RECENT": "Нядаўна праглянутае",
             "RAIL_GLOBAL_SEARCH": "Глабальны пошук",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Diashow abspielen"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Dashboard",
-            "OPEN_DASHBOARD": "Dashboard öffnen",
             "RAIL_SOURCES": "Quellen",
-            "OPEN_SOURCES": "Quellen öffnen",
             "RAIL_GLOBAL_FAVORITES": "Favoriten",
             "RAIL_GLOBAL_RECENT": "Zuletzt angesehen",
             "RAIL_GLOBAL_SEARCH": "Globale Suche",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Αναπαραγωγή προβολής"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Πίνακας ελέγχου",
-            "OPEN_DASHBOARD": "Άνοιγμα πίνακα ελέγχου",
             "RAIL_SOURCES": "Πηγές",
-            "OPEN_SOURCES": "Άνοιγμα πηγών",
             "RAIL_GLOBAL_FAVORITES": "Αγαπημένα",
             "RAIL_GLOBAL_RECENT": "Πρόσφατα προβληθέντα",
             "RAIL_GLOBAL_SEARCH": "Καθολική αναζήτηση",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Play slideshow"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Dashboard",
-            "OPEN_DASHBOARD": "Open dashboard",
             "RAIL_SOURCES": "Sources",
-            "OPEN_SOURCES": "Open sources",
             "RAIL_GLOBAL_FAVORITES": "Favorites",
             "RAIL_GLOBAL_RECENT": "Recently viewed",
             "RAIL_GLOBAL_SEARCH": "Global search",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Reproducir presentación"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Panel",
-            "OPEN_DASHBOARD": "Abrir panel",
             "RAIL_SOURCES": "Fuentes",
-            "OPEN_SOURCES": "Abrir fuentes",
             "RAIL_GLOBAL_FAVORITES": "Favoritos",
             "RAIL_GLOBAL_RECENT": "Vistos recientemente",
             "RAIL_GLOBAL_SEARCH": "Búsqueda global",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Lancer le diaporama"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Tableau de bord",
-            "OPEN_DASHBOARD": "Ouvrir le tableau de bord",
             "RAIL_SOURCES": "Sources",
-            "OPEN_SOURCES": "Ouvrir les sources",
             "RAIL_GLOBAL_FAVORITES": "Favoris",
             "RAIL_GLOBAL_RECENT": "Récemment consultés",
             "RAIL_GLOBAL_SEARCH": "Recherche globale",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Diavetítés lejátszása"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Vezérlőpult",
-            "OPEN_DASHBOARD": "Vezérlőpult megnyitása",
             "RAIL_SOURCES": "Források",
-            "OPEN_SOURCES": "Források megnyitása",
             "RAIL_GLOBAL_FAVORITES": "Kedvencek",
             "RAIL_GLOBAL_RECENT": "Megtekintési előzmények",
             "RAIL_GLOBAL_SEARCH": "Globális keresés",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Avvia la presentazione"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Dashboard",
-            "OPEN_DASHBOARD": "Apri dashboard",
             "RAIL_SOURCES": "Sorgenti",
-            "OPEN_SOURCES": "Apri sorgenti",
             "RAIL_GLOBAL_FAVORITES": "Preferiti",
             "RAIL_GLOBAL_RECENT": "Visti di recente",
             "RAIL_GLOBAL_SEARCH": "Ricerca globale",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "スライドショーを再生"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "ダッシュボード",
-            "OPEN_DASHBOARD": "ダッシュボードを開く",
             "RAIL_SOURCES": "ソース",
-            "OPEN_SOURCES": "ソースを開く",
             "RAIL_GLOBAL_FAVORITES": "お気に入り",
             "RAIL_GLOBAL_RECENT": "最近表示した項目",
             "RAIL_GLOBAL_SEARCH": "グローバル検索",

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

@@ -65,7 +65,7 @@
             "CHANNELS": "채널",
             "ADDED": "추가되었습니다",
             "SHOW_DETAILS": "재생 목록 세부 정보 표시",
-            "REMOVE": "재생 목록이 제거되었습니다",
+            "REMOVE": "재생 목록 제거",
             "SEARCH_PLAYLISTS": "제목으로 재생목록 검색",
             "INFO_DIALOG": {
                 "PLAYLIST_DETAILS": "재생 목록 세부 사항",
@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "슬라이드쇼 재생"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "대시보드",
-            "OPEN_DASHBOARD": "대시보드 열기",
             "RAIL_SOURCES": "소스",
-            "OPEN_SOURCES": "소스 열기",
             "RAIL_GLOBAL_FAVORITES": "즐겨찾기",
             "RAIL_GLOBAL_RECENT": "최근 본 항목",
             "RAIL_GLOBAL_SEARCH": "전역 검색",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Diavoorstelling afspelen"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Dashboard",
-            "OPEN_DASHBOARD": "Open dashboard",
             "RAIL_SOURCES": "Bronnen",
-            "OPEN_SOURCES": "Open bronnen",
             "RAIL_GLOBAL_FAVORITES": "Favorieten",
             "RAIL_GLOBAL_RECENT": "Recent bekeken",
             "RAIL_GLOBAL_SEARCH": "Globaal zoeken",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Odtwórz pokaz"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Pulpit",
-            "OPEN_DASHBOARD": "Otwórz pulpit",
             "RAIL_SOURCES": "Źródła",
-            "OPEN_SOURCES": "Otwórz źródła",
             "RAIL_GLOBAL_FAVORITES": "Ulubione",
             "RAIL_GLOBAL_RECENT": "Ostatnio oglądane",
             "RAIL_GLOBAL_SEARCH": "Wyszukiwanie globalne",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Reproduzir apresentação"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Dashboard",
-            "OPEN_DASHBOARD": "Abrir dashboard",
             "RAIL_SOURCES": "Fontes",
-            "OPEN_SOURCES": "Abrir fontes",
             "RAIL_GLOBAL_FAVORITES": "Favoritos",
             "RAIL_GLOBAL_RECENT": "Visualizados recentemente",
             "RAIL_GLOBAL_SEARCH": "Pesquisa global",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Возобновить показ"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Панель",
-            "OPEN_DASHBOARD": "Открыть панель",
             "RAIL_SOURCES": "Источники",
-            "OPEN_SOURCES": "Открыть источники",
             "RAIL_GLOBAL_FAVORITES": "Избранное",
             "RAIL_GLOBAL_RECENT": "Недавно просмотренные",
             "RAIL_GLOBAL_SEARCH": "Глобальный поиск",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "Slayt gösterisini oynat"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "Pano",
-            "OPEN_DASHBOARD": "Panoyu aç",
             "RAIL_SOURCES": "Kaynaklar",
-            "OPEN_SOURCES": "Kaynakları aç",
             "RAIL_GLOBAL_FAVORITES": "Favoriler",
             "RAIL_GLOBAL_RECENT": "Son izlenenler",
             "RAIL_GLOBAL_SEARCH": "Genel arama",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "播放轮播"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "仪表盘",
-            "OPEN_DASHBOARD": "打开仪表盘",
             "RAIL_SOURCES": "源",
-            "OPEN_SOURCES": "打开源",
             "RAIL_GLOBAL_FAVORITES": "收藏",
             "RAIL_GLOBAL_RECENT": "最近观看",
             "RAIL_GLOBAL_SEARCH": "全局搜索",

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

@@ -1614,11 +1614,8 @@
             "HERO_PLAY": "播放輪播"
         },
         "SHELL": {
-            "BRAND_ALT": "IPTVnator",
             "RAIL_DASHBOARD": "儀表板",
-            "OPEN_DASHBOARD": "開啟儀表板",
             "RAIL_SOURCES": "來源",
-            "OPEN_SOURCES": "開啟來源",
             "RAIL_GLOBAL_FAVORITES": "我的最愛",
             "RAIL_GLOBAL_RECENT": "最近觀看",
             "RAIL_GLOBAL_SEARCH": "全域搜尋",

apps/web/src/m3-theme.scss

@@ -304,8 +304,8 @@ html {
     }
 
     // ─── Destructive actions ───────────────────────────────────────────────
-    // Material only emits `.mat-warn` button colors for M2 themes, so
-    // `color="warn"` is a no-op with this M3 theme. Buttons that remove or
+    // Material only emits `.mat-warn` button colors for M2 themes, so the
+    // `warn` color input is a no-op with this M3 theme. Buttons that remove or
     // discard user data opt in with this class instead; the error tokens are
     // declared per theme context above, so light and dark each get their own
     // error/on-error pair.

docs/architecture/embedded-inline-playback.md

@@ -162,8 +162,9 @@ Contracts:
   player subtree, so shell state changes cannot recreate the `<video>`.
 - **External MPV/VLC sessions do not flip the layout to watch** — browse
   layout stays, and the primary CTA keeps its "Stop <player>" behavior.
-- The shell's sticky arrow emits the host-owned `backClicked` in browse and
-  watch alike (unless `backAvailable=false`, when it is not rendered at all):
+- The shell's Back, rendered by the workspace header, emits the host-owned
+  `backClicked` in browse and watch alike (unless `backAvailable=false`, when
+  the shell registers none):
   hosts wire it to their route-level `goBack()`, straight back to the list —
   everything browse offers is also visible in watch, so a two-step unwind
   would be ceremony. Escape alone unwinds one level: in watch it emits
@@ -174,7 +175,7 @@ Contracts:
   [Portal Detail Navigation](./portal-detail-navigation.md).
 - The now-playing bar has one exit of its own: the "Close player" button
   emits `closed` and returns to browse without navigating. It carries no back
-  arrow — a second arrow beside the sticky one, with a different meaning,
+  arrow — a second arrow beside the header's, with a different meaning,
   was the duplicate this contract removes.
 - Entering watch scrolls the shell to the top; leaving keeps the scroll
   position.

docs/architecture/iptvnator-ui-guidelines.md

@@ -725,6 +725,27 @@ Settings use the same system but are flatter than content-heavy views.
   `EpgProgrammeDialogService` opens the programme dialog at 540px from the
   timeline, list, guide and channel rows, with a panel class that scopes its
   surface overrides.
+- **Destructive actions.** Material only emits `warn` button colors for M2
+  themes, so the `color` input is a no-op here. A button that removes or
+  discards user data uses the global `.app-destructive-button` class from
+  `m3-theme.scss` (error/on-error tokens per theme, for filled, text,
+  outlined and icon buttons), as the unsaved-changes dialog's Discard does.
+  Confirmations go through `DialogService.openConfirmDialog` with a
+  translated verb as the required `confirmLabel` ("Remove playlist",
+  "Clear") and `tone: 'destructive'` when the action loses data; the dismiss
+  defaults to "Cancel". Never confirm with "Yes"/"No". When the verb itself
+  is "Cancel …", pass `cancelLabel` "Close" so the two buttons do not read
+  alike. `theme-tokens.e2e.ts` checks the label and the error fill in both
+  themes.
+
+## Source Type Icons
+
+`SOURCE_TYPE_ICONS` in `@iptvnator/shared/interfaces` is the only source of
+provider icons: Xtream `cloud`, Stalker `cast`, the M3U family
+`playlist_play`, and per playlist `link` (URL), `description` (local file or
+text) and `subject` (pasted text in the add flow). Use
+`getPlaylistSourceIcon()` for a stored playlist. An icon never stands for two
+providers, and the Dashboard rail icon is never a provider icon.
 
 ## Phone Layout
 

docs/architecture/portal-detail-navigation.md

@@ -23,30 +23,29 @@ do not reach global player shortcuts. Descendant controls retain their native
 keys and Tab order. Entering watch still scrolls to the top; Back and saved
 catalog scroll positions retain the existing navigation contract below.
 
-The shell owns a single sticky Back control, outside the collapsing hero. Its
-zero-height wrapper is a direct child of the scroll owner, so the control stays
-16 px from the top throughout long episode lists without shifting the hero.
-The button has an opaque app-themed surface, visible keyboard focus, an Escape
-shortcut hint via native `title` and Electron `no-drag` hit testing. The hint
-does not create an overlay that could consume the first Escape press.
+The shell owns the page's Back action, but the workspace header renders it.
+While `backAvailable()` is true, the shell registers a target with
+`WorkspaceBackNavigationService` (`@iptvnator/portal/shared/data-access`). The
+target, the `WorkspaceBackTarget` contract in `@iptvnator/portal/shared/util`,
+carries a label (the host's `backLabel`, else the translated "Back"), whether
+Escape currently runs it, and `run()`, which emits `backClicked`. The service
+keeps a stack in which the newest registration wins, and each release removes
+only its own target. A loading shell replaced by the loaded one therefore
+cannot clear its successor, whichever is destroyed first. The header shows the target as an `arrow_back`
+icon button in its leading slot (`data-test-id="workspace-header-back"`), to
+the right of the macOS traffic lights. That is where desktop apps and Material's
+top app bar keep navigation. The header never scrolls, so the control stays
+visible over long episode lists, and nothing floats over the scroll owner:
+detail columns keep symmetric insets and their full width. The button has
+Electron `no-drag` hit testing. In browse its tooltip and `aria-keyshortcuts`
+advertise Escape, and an Escape pressed on the focused button runs Back
+itself, because the shell's browse Escape requires focus inside the page. At
+≤640 px Back takes the context drawer toggle's slot (one navigation icon); the
+list it returns to shows the toggle again. This replaced #1763's 72 px lane
+reserved beside a sticky in-page arrow, along with its phone bar. Electron E2E
+`detail-header-back.e2e.ts` covers 1280, 780 and 375 px in browse and watch.
 
-The control floats, so the content makes room for it: while it is shown, every
-content column (hero content, watch-state player, episodes, About and extras)
-starts after a 72 px lane — 16 px inset, 40 px button, 16 px gap — and no scroll
-position puts the arrow over a heading or the player. The shell derives the lane
-from the button's geometry and publishes it as `--detail-back-lane`, which
-`content-hero` and `content-about` read too; hosts with `backAvailable=false`
-keep their own inset. The lane is horizontal because watch state is short of
-height, not width. A pane narrower than 400 px is the exception — a phone, or a
-desktop pane beside the context panel — because a 72 px column there would clip
-the player's controls. The pane decides, not the viewport: a `ResizeObserver`
-on the shell's border box (scrollbar-independent) sets `shell-host--compact`,
-and the wrapper becomes an in-flow 56 px sticky bar on `--app-header-bg` that
-content scrolls beneath and that takes the taps over it. Electron E2E
-(`detail-back-lane.e2e.ts`) sweeps both states with the lane at 1280 and
-780 px and with the bar at 700 and 375 px.
-
-The sticky control is route-level Back in both states: it emits `backClicked`
+The header Back is route-level in both states: it emits `backClicked`
 whether or not inline playback is active, so the arrow keeps one meaning and
 the list is one click away while watching. Only Escape unwinds one level: watch
 emits `closePlayerRequested`, browse emits `backClicked`. Hosts retain their
@@ -61,13 +60,13 @@ Escape bubbles through the shell before Material's body-level tooltip dispatcher
 so focused detail actions return with one press even while their tooltip is open.
 The document listener remains the outside-shell watch fallback; `defaultPrevented`
 prevents duplicate actions and preserves descendant handlers' priority.
-After Escape closes a player, lost focus moves to the sticky control (or the
-shell when there is no browse Back), without scrolling or stealing existing
-focus.
+After Escape closes a player, lost focus moves to the shell itself, without
+scrolling or stealing existing focus, so the next Escape and the scroll keys
+keep working on the page.
 
 Hosts without browse navigation set `backAvailable=false`: M3U uses its channel
 sidebar, and collection bootstrap placeholders have no return handler. They
-render no sticky arrow in either state and have no browse Escape action; their
+register no header Back in either state and have no browse Escape action; their
 watch exits are the bar's Close player button and Escape. Loading/error shells
 with a return handler keep Back available.
 
@@ -77,8 +76,8 @@ with a return handler keep Back available.
 - Stalker uses an inline/store-state detail model.
 - Detail pages themselves are two-state (browse ↔ watch) inside
   `PortalDetailShellComponent`; entering/leaving watch is a layout state,
-  not a navigation. Route-level back semantics are unchanged; the one
-  sticky arrow returns to the list from either state, while Escape and the
+  not a navigation. Route-level back semantics are unchanged; the header's
+  one Back arrow returns to the list from either state, while Escape and the
   now-playing bar's Close button close the inline player. See
   [Embedded Inline Playback](./embedded-inline-playback.md).
 - Favorites and recently viewed collections now use collection-owned inline detail

docs/architecture/workspace-dashboard.md

@@ -172,11 +172,18 @@ and that pause holds the slide.
    hover lift are not clipped; the fades are offset by the same variable so
    they reach the track's clipping edge and no card strip shows beyond them.
 4. Cards are keyboard-focusable router links; `scroll-snap-align: start`
-   means arrow-key nav lands on card boundaries.
+   means arrow-key nav lands on card boundaries. A card that receives
+   keyboard or script focus scrolls fully into the viewport: Chromium skips
+   its own focus scroll once 32px of an element shows, so the track's
+   `focusin` handler moves to the first card-start snap position revealing
+   the whole card (a card wider than the viewport aligns at its own start).
+   Focus caused by a press inside the track (within 100ms of `pointerdown`,
+   650ms for touch) leaves the rail still, so the card does not slide from
+   under the pointer before the click.
 5. Image handling: `loading="lazy"`, `decoding="async"`, fallback icon tile
    when `imageUrl` is missing or `error` fires.
-6. Dashboard hero, rail containers, rail cards, and "Manage all" links expose
-   stable `data-test-id` hooks. Treat these as the supported Electron E2E
+6. Dashboard hero, rail containers, rail viewports and tracks, rail cards and
+   their links, and "Manage all" links expose stable `data-test-id` hooks. Treat these as the supported Electron E2E
    selector surface; do not target internal CSS class names.
 
 ## Data Flow

docs/architecture/workspace-shell.md

@@ -90,12 +90,18 @@ The shell is intentionally split into four persistent regions:
        because its data source is the SQLite worker bridge.
     2. Provider-aware context links derived from the active or current playlist.
     3. Settings remains a persistent footer shortcut in the rail.
+    4. No brand mark: it only repeated the first workspace link (Dashboard,
+       or Sources when the dashboard is off).
 2. Top header:
-    1. Playlist switcher.
-    2. Route-aware search input and command palette trigger.
-    3. Add source action.
-    4. Optional playlist refresh and route-specific shortcut actions.
-    5. Downloads shortcut in Electron.
+    1. Leading Back slot, shown while the current page registers a target
+       with `WorkspaceBackNavigationService` (detail pages today). At
+       ≤640 px it takes the context drawer toggle's place. See
+       [Portal Detail Navigation](./portal-detail-navigation.md).
+    2. Playlist switcher.
+    3. Route-aware search input and command palette trigger.
+    4. Add source action.
+    5. Optional playlist refresh and route-specific shortcut actions.
+    6. Downloads shortcut in Electron.
 3. Main body:
     1. Optional left context panel.
     2. Main router outlet content.

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

@@ -15,7 +15,6 @@ export const PlaylistActions = createActionGroup({
         'Load Playlists Failure': emptyProps(),
         'Add Playlist': props<{ playlist: Playlist }>(),
         'Add Many Playlists': props<{ playlists: Playlist[] }>(),
-        'Remove Playlist': props<{ playlistId: string }>(),
         'Playlist Removal Committed': props<{ playlistId: string }>(),
         'Update Playlist Meta': props<{
             playlist: PlaylistMetaUpdate;

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

@@ -336,21 +336,6 @@ export class PlaylistEffects {
         { dispatch: false }
     );
 
-    removePlaylist$ = createEffect(
-        () => {
-            return this.actions$.pipe(
-                ofType(PlaylistActions.removePlaylist),
-                switchMap(async (action) => {
-                    this.playlistScopedEpgFetchKeys.delete(action.playlistId);
-                    await firstValueFrom(
-                        this.playlistsService.deletePlaylist(action.playlistId)
-                    );
-                })
-            );
-        },
-        { dispatch: false }
-    );
-
     updatePlaylist$ = createEffect(
         () => {
             return this.actions$.pipe(

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

@@ -29,7 +29,6 @@ export const playlistReducers = [
         };
     }),
     on(
-        PlaylistActions.removePlaylist,
         PlaylistActions.playlistRemovalCommitted,
         (state, action): PlaylistState => {
             const playlists = playlistsAdapter.removeOne(

libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.ts

@@ -24,6 +24,7 @@ import { DataService } from '@iptvnator/services';
 import {
     PLAYLIST_PARSE_BY_URL,
     ProviderImportCandidate,
+    SOURCE_TYPE_ICONS,
 } from '@iptvnator/shared/interfaces';
 import { AutoImportComponent } from '../auto-import/auto-import.component';
 import { FileUploadComponent } from '../file-upload/file-upload.component';
@@ -119,31 +120,31 @@ export class AddPlaylistDialogComponent {
     readonly methodOptions: PlaylistMethodOption[] = [
         {
             value: 'url',
-            icon: 'public',
+            icon: SOURCE_TYPE_ICONS['m3u-url'],
             labelKey: 'HOME.ADD_PLAYLIST.METHOD_URL_LABEL',
             subKey: 'HOME.ADD_PLAYLIST.METHOD_URL_SUB',
         },
         {
             value: 'file',
-            icon: 'folder_open',
+            icon: SOURCE_TYPE_ICONS['m3u-local'],
             labelKey: 'HOME.ADD_PLAYLIST.METHOD_FILE_LABEL',
             subKey: 'HOME.ADD_PLAYLIST.METHOD_FILE_SUB',
         },
         {
             value: 'xtream',
-            icon: 'vpn_key',
+            icon: SOURCE_TYPE_ICONS.xtream,
             labelKey: 'HOME.ADD_PLAYLIST.METHOD_XTREAM_LABEL',
             subKey: 'HOME.ADD_PLAYLIST.METHOD_XTREAM_SUB',
         },
         {
             value: 'stalker',
-            icon: 'cast',
+            icon: SOURCE_TYPE_ICONS.stalker,
             labelKey: 'HOME.ADD_PLAYLIST.METHOD_STALKER_LABEL',
             subKey: 'HOME.ADD_PLAYLIST.METHOD_STALKER_SUB',
         },
         {
             value: 'text',
-            icon: 'subject',
+            icon: SOURCE_TYPE_ICONS['m3u-text'],
             labelKey: 'HOME.ADD_PLAYLIST.METHOD_TEXT_LABEL',
             subKey: 'HOME.ADD_PLAYLIST.METHOD_TEXT_SUB',
         },

libs/playlist/import/feature/src/lib/auto-import/auto-import.component.ts

@@ -18,6 +18,7 @@ import {
     ProviderImportCandidate,
     ProviderImportConfidence,
     ProviderImportKind,
+    SOURCE_TYPE_ICONS,
 } from '@iptvnator/shared/interfaces';
 
 interface CandidateSummaryRow {
@@ -26,10 +27,10 @@ interface CandidateSummaryRow {
 }
 
 const KIND_ICONS: Record<ProviderImportKind, string> = {
-    xtream: 'vpn_key',
-    stalker: 'cast',
-    'm3u-url': 'public',
-    'm3u-text': 'subject',
+    xtream: SOURCE_TYPE_ICONS.xtream,
+    stalker: SOURCE_TYPE_ICONS.stalker,
+    'm3u-url': SOURCE_TYPE_ICONS['m3u-url'],
+    'm3u-text': SOURCE_TYPE_ICONS['m3u-text'],
 };
 
 const KIND_LABEL_KEYS: Record<ProviderImportKind, string> = {

libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts

@@ -39,6 +39,7 @@ import {
     PortalStatusService,
 } from '@iptvnator/services';
 import {
+    getPlaylistSourceIcon,
     isPortalAccountPlaylist,
     PlaylistMeta,
 } from '@iptvnator/shared/interfaces';
@@ -330,6 +331,8 @@ export class PlaylistSwitcherComponent {
             message: this.translate.instant(
                 'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
             ),
+            confirmLabel: this.translate.instant('HOME.PLAYLISTS.REMOVE'),
+            tone: 'destructive',
             onConfirm: () => this.removePlaylistConfirmed(playlist),
         });
     }
@@ -357,16 +360,7 @@ export class PlaylistSwitcherComponent {
     }
 
     getPlaylistIcon(playlist: PlaylistMeta): string {
-        if (playlist.macAddress) {
-            return 'dashboard';
-        }
-        if (playlist.serverUrl) {
-            return 'public';
-        }
-        if (playlist.url) {
-            return 'cloud';
-        }
-        return 'folder';
+        return getPlaylistSourceIcon(playlist);
     }
 
     getPlaylistTypeLabel(playlist: PlaylistMeta): string {

libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.ts

@@ -8,6 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import type { PlaylistType } from '../../add-playlist-menu/playlist-type';
+import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces';
 
 export type EmptyStateType =
     'welcome-dashboard' | 'welcome-sources' | 'no-results' | 'no-data';
@@ -55,7 +56,7 @@ const FEATURE_CARDS: readonly FeatureCard[] = [
 const SOURCE_CARDS: readonly SourceCard[] = [
     {
         type: 'url',
-        icon: 'folder_open',
+        icon: SOURCE_TYPE_ICONS.m3u,
         nameKey: 'HOME.PLAYLISTS.FEATURE_M3U',
         needsKey: 'HOME.PLAYLISTS.SOURCE_M3U_NEEDS',
         addLabelKey: 'HOME.PLAYLISTS.SOURCE_M3U_ADD',
@@ -66,7 +67,7 @@ const SOURCE_CARDS: readonly SourceCard[] = [
     },
     {
         type: 'xtream',
-        icon: 'cloud',
+        icon: SOURCE_TYPE_ICONS.xtream,
         nameKey: 'HOME.PLAYLISTS.FEATURE_XTREAM',
         needsKey: 'HOME.PLAYLISTS.SOURCE_XTREAM_NEEDS',
         addLabelKey: 'HOME.PLAYLISTS.SOURCE_XTREAM_ADD',
@@ -79,7 +80,7 @@ const SOURCE_CARDS: readonly SourceCard[] = [
     },
     {
         type: 'stalker',
-        icon: 'cast',
+        icon: SOURCE_TYPE_ICONS.stalker,
         nameKey: 'HOME.PLAYLISTS.FEATURE_STALKER',
         needsKey: 'HOME.PLAYLISTS.SOURCE_STALKER_NEEDS',
         addLabelKey: 'HOME.PLAYLISTS.SOURCE_STALKER_ADD',

libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.html

@@ -17,70 +17,66 @@
                 [enabled]="!isBusy()"
             />
         }
-        @if (item.url) {
-            <div class="icon-container">
+        <!-- One provider icon per row, by the shared precedence: a restored
+             Stalker or Xtream playlist can also carry a URL. -->
+        <div class="icon-container">
+            @switch (sourceIconKey) {
+                @case ('stalker') {
+                    <mat-icon
+                        class="upload-type-icon"
+                        [matTooltip]="
+                            'HOME.PLAYLISTS.STALKER_PORTAL' | translate
+                        "
+                        >{{ sourceIcons.stalker }}</mat-icon
+                    >
+                }
+                @case ('xtream') {
+                    <mat-icon
+                        class="upload-type-icon"
+                        [matTooltip]="
+                            'HOME.PLAYLISTS.XTREAM_PLAYLIST' | translate
+                        "
+                        >{{ sourceIcons.xtream }}</mat-icon
+                    >
+                }
+                @case ('m3u-url') {
+                    <mat-icon
+                        class="upload-type-icon"
+                        [matTooltip]="
+                            ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) +
+                            ' ' +
+                            item.url
+                        "
+                        >{{ sourceIcons['m3u-url'] }}</mat-icon
+                    >
+                }
+                @default {
+                    <mat-icon
+                        class="upload-type-icon"
+                        [matTooltip]="
+                            'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate
+                        "
+                        >{{ sourceIcons['m3u-local'] }}</mat-icon
+                    >
+                }
+            }
+            @if (showsPortalStatusDot) {
+                <span
+                    class="status-dot"
+                    [class]="getStatusClass()"
+                    [matTooltip]="'Portal status: ' + portalStatus"
+                    [attr.aria-label]="'Portal status: ' + portalStatus"
+                ></span>
+            } @else if (showsAutoRefresh) {
                 <mat-icon
-                    class="upload-type-icon"
+                    class="auto-refresh-indicator"
                     [matTooltip]="
-                        ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) +
-                        ' ' +
-                        item.url
+                        'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate
                     "
-                    >cloud</mat-icon
+                    >autorenew</mat-icon
                 >
-                @if (item.autoRefresh) {
-                    <mat-icon
-                        class="auto-refresh-indicator"
-                        [matTooltip]="
-                            'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate
-                        "
-                        >autorenew</mat-icon
-                    >
-                }
-            </div>
-        }
-        @if (!item.url && !item.serverUrl && !item.macAddress) {
-            <div class="icon-container">
-                <mat-icon
-                    class="upload-type-icon"
-                    [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
-                    >folder</mat-icon
-                >
-                @if (item.autoRefresh) {
-                    <mat-icon
-                        class="auto-refresh-indicator"
-                        [matTooltip]="
-                            'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate
-                        "
-                        >autorenew</mat-icon
-                    >
-                }
-            </div>
-        }
-        @if (item.serverUrl) {
-            <div class="icon-container">
-                <mat-icon
-                    class="upload-type-icon"
-                    [matTooltip]="'HOME.PLAYLISTS.XTREAM_PLAYLIST' | translate"
-                    >public</mat-icon
-                >
-                @if (!runtime.supportsSourceHealth) {
-                    <span
-                        class="status-dot"
-                        [class]="getStatusClass()"
-                        [matTooltip]="'Portal status: ' + portalStatus"
-                        [attr.aria-label]="'Portal status: ' + portalStatus"
-                    ></span>
-                }
-            </div>
-        }
-        @if (item.macAddress) {
-            <mat-icon
-                class="upload-type-icon"
-                [matTooltip]="'HOME.PLAYLISTS.STALKER_PORTAL' | translate"
-                >dashboard</mat-icon
-            >
-        }
+            }
+        </div>
     </div>
     <div class="playlist-content">
         <div class="playlist-title">
@@ -180,8 +176,7 @@
             @if (canCancelBusyAction()) {
                 <button
                     mat-icon-button
-                    color="warn"
-                    class="cancel-btn"
+                    class="cancel-btn app-destructive-button"
                     (click)="
                         $event.stopPropagation(); cancelBusyActionClicked.emit()
                     "

libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss

@@ -189,6 +189,13 @@
     }
 }
 
+// The action buttons inherit the row color, including the selected row's,
+// which masks the .app-destructive-button token on the cancel action.
+.playlist-item .action-buttons .cancel-btn,
+.playlist-item.selected .action-buttons .cancel-btn {
+    color: var(--mat-sys-error);
+}
+
 .action-spinner {
     display: block;
     margin: 0 auto;

libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.spec.ts

@@ -221,4 +221,41 @@ describe('PlaylistItemComponent', () => {
         ).toContain('42%');
         expect(nativeElement.querySelector('.cancel-btn')).not.toBeNull();
     });
+
+    it.each([
+        [
+            { macAddress: '00:1A:79:00:00:01', url: 'http://portal.test' },
+            'cast',
+            true,
+        ],
+        [{ macAddress: '00:1A:79:00:00:01' }, 'cast', false],
+        [{ serverUrl: 'http://xtream.test' }, 'cloud', false],
+        [{ url: 'http://list.test/playlist.m3u' }, 'link', true],
+        [{}, 'description', true],
+    ])(
+        'shows one provider icon for %o (%s) and keeps the auto-refresh badge: %s',
+        (source, icon, autoRefreshBadge) => {
+            fixture.destroy();
+            fixture = TestBed.createComponent(PlaylistItemComponent);
+            fixture.componentInstance.item = {
+                title: 'Source',
+                _id: 'source',
+                count: 10,
+                importDate: Date.now().toString(),
+                autoRefresh: true,
+                ...source,
+            };
+            fixture.detectChanges();
+
+            const row = fixture.nativeElement as HTMLElement;
+            const icons = Array.from(
+                row.querySelectorAll('.upload-type-icon'),
+                (element) => element.textContent?.trim()
+            );
+            expect(icons).toEqual([icon]);
+            expect(row.querySelector('.auto-refresh-indicator') !== null).toBe(
+                autoRefreshBadge
+            );
+        }
+    );
 });

libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.ts

@@ -1,6 +1,11 @@
 import { Injector } from '@angular/core';
 import { SourceHealthService } from '@iptvnator/portal/shared/data-access';
-import { sourceHealthType } from '@iptvnator/shared/interfaces';
+import {
+    PlaylistSourceIconKey,
+    resolvePlaylistSourceIconKey,
+    SOURCE_TYPE_ICONS,
+    sourceHealthType,
+} from '@iptvnator/shared/interfaces';
 import { SourceHealthIndicatorComponent } from '../../source-health/source-health-indicator.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { DatePipe } from '@angular/common';
@@ -68,6 +73,30 @@ export class PlaylistItemComponent implements OnInit {
     portalStatus: PortalStatus = 'unavailable';
     private readonly portalStatusService = inject(PortalStatusService);
     readonly runtime = inject(RuntimeCapabilitiesService);
+    readonly sourceIcons = SOURCE_TYPE_ICONS;
+
+    get sourceIconKey(): PlaylistSourceIconKey {
+        return resolvePlaylistSourceIconKey(this.item);
+    }
+
+    /** Without source health, Xtream rows badge the portal status instead. */
+    get showsPortalStatusDot(): boolean {
+        return (
+            this.sourceIconKey === 'xtream' &&
+            !this.runtime.supportsSourceHealth
+        );
+    }
+
+    /**
+     * Auto-refresh re-fetches a URL or a local file, so any row with a URL
+     * keeps the badge, whichever provider icon it shows.
+     */
+    get showsAutoRefresh(): boolean {
+        return (
+            !!this.item.autoRefresh &&
+            (!!this.item.url || this.sourceIconKey === 'm3u-local')
+        );
+    }
     private readonly translate = inject(TranslateService);
     private readonly languageTick = toSignal(
         this.translate.onLangChange.pipe(startWith(null)),

libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.ts

@@ -250,6 +250,8 @@ export class RecentPlaylistsComponent {
             message: this.translate.instant(
                 'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
             ),
+            confirmLabel: this.translate.instant('HOME.PLAYLISTS.REMOVE'),
+            tone: 'destructive',
             onConfirm: () => {
                 this.removePlaylist(item);
             },

libs/playlist/shared/ui/src/lib/source-health/source-cleanup-dialog.component.ts

@@ -170,6 +170,7 @@ export interface SourceCleanupDialogData extends SourceCleanupContext {
                 </button>
                 <button
                     mat-flat-button
+                    class="app-destructive-button"
                     [disabled]="!selectedCount() || checking()"
                     (click)="model.removeSelected()"
                 >

libs/playlist/shared/ui/src/lib/xtream-refresh-flow.service.ts

@@ -109,6 +109,7 @@ export class XtreamRefreshFlowService {
             message: this.translate.instant(
                 'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.MESSAGE'
             ),
+            confirmLabel: this.translate.instant('HOME.PLAYLISTS.REFRESH'),
             width: '400px',
             onConfirm: () => this.runRefresh(item, reporter),
         });

libs/portal/downloads/feature/src/lib/download-manager-actions.service.ts

@@ -58,6 +58,7 @@ export class DownloadManagerActionsService {
                 'DOWNLOADS.CLEAR_FINISHED_DIALOG.MESSAGE'
             ),
             confirmLabel: this.translate.instant('DOWNLOADS.CLEAR_FINISHED'),
+            tone: 'destructive',
             onConfirm: () => this.performClearFinished(scopePlaylistId),
         });
     }
@@ -88,6 +89,7 @@ export class DownloadManagerActionsService {
             confirmLabel: this.translate.instant(
                 'DOWNLOADS.REMOVE_FROM_MANAGER'
             ),
+            tone: 'destructive',
             onConfirm: () =>
                 this.withPending(item.id, () =>
                     this.downloads.removeDownload(item.id)

libs/portal/downloads/feature/src/lib/offline-detail/download-offline-detail.component.spec.ts

@@ -10,6 +10,7 @@ import {
     SettingsStore,
 } from '@iptvnator/services';
 import type { DownloadMetadataSnapshot } from '@iptvnator/shared/interfaces';
+import { WorkspaceBackNavigationService } from '@iptvnator/portal/shared/data-access';
 import type { WorkspaceNavigationTarget } from '@iptvnator/portal/shared/util';
 import { BehaviorSubject } from 'rxjs';
 import type {
@@ -1076,11 +1077,10 @@ describe('DownloadOfflineDetailComponent', () => {
             router.url = detailUrl;
             await render([download(17)]);
 
-            (
-                (fixture.nativeElement as HTMLElement).querySelector(
-                    '.shell__back-button'
-                ) as HTMLButtonElement
-            ).click();
+            // The workspace header renders the page's Back.
+            expect(
+                TestBed.inject(WorkspaceBackNavigationService).goBack()
+            ).toBe(true);
             await fixture.whenStable();
 
             expect(location.back).toHaveBeenCalledTimes(1);
@@ -1096,11 +1096,9 @@ describe('DownloadOfflineDetailComponent', () => {
         router.url = '/workspace/stalker/playlist-a/downloads/17';
         await render([download(17)]);
 
-        (
-            (fixture.nativeElement as HTMLElement).querySelector(
-                '.shell__back-button'
-            ) as HTMLButtonElement
-        ).click();
+        expect(TestBed.inject(WorkspaceBackNavigationService).goBack()).toBe(
+            true
+        );
         await fixture.whenStable();
 
         expect(location.back).not.toHaveBeenCalled();

libs/portal/downloads/feature/src/lib/recording-manager-actions.service.ts

@@ -70,6 +70,7 @@ export class RecordingManagerActionsService {
             confirmLabel: this.translate.instant(
                 'DOWNLOADS.REMOVE_FROM_MANAGER'
             ),
+            tone: 'destructive',
             onConfirm: () =>
                 this.withPending(item.id, () =>
                     this.recordings.removeRecording(item.id)

libs/portal/shared/data-access/src/index.ts

@@ -6,3 +6,5 @@ export * from './lib/live-channel-playback-queue';
 export * from './lib/source-health.service';
 
 export * from './lib/source-cleanup.service';
+
+export * from './lib/workspace-back-navigation.service';

libs/portal/shared/data-access/src/lib/workspace-back-navigation.service.spec.ts

@@ -0,0 +1,77 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { WorkspaceBackTarget } from '@iptvnator/portal/shared/util';
+import { WorkspaceBackNavigationService } from './workspace-back-navigation.service';
+
+describe('WorkspaceBackNavigationService', () => {
+    function createService(): WorkspaceBackNavigationService {
+        TestBed.resetTestingModule();
+        return TestBed.inject(WorkspaceBackNavigationService);
+    }
+
+    function createTarget(run = jest.fn()): WorkspaceBackTarget {
+        return {
+            label: signal<string | null>(null),
+            escapeShortcut: signal(true),
+            run,
+        };
+    }
+
+    it('has no target until a page registers one', () => {
+        const service = createService();
+
+        expect(service.target()).toBeNull();
+        expect(service.goBack()).toBe(false);
+    });
+
+    it('runs the most recently registered target', () => {
+        const service = createService();
+        const first = createTarget();
+        const second = createTarget();
+
+        service.register(first);
+        service.register(second);
+
+        expect(service.target()).toBe(second);
+        expect(service.goBack()).toBe(true);
+        expect(second.run).toHaveBeenCalledTimes(1);
+        expect(first.run).not.toHaveBeenCalled();
+    });
+
+    it('hands the slot back to the previous target on release', () => {
+        const service = createService();
+        const first = createTarget();
+        const second = createTarget();
+
+        service.register(first);
+        const releaseSecond = service.register(second);
+        releaseSecond();
+
+        expect(service.target()).toBe(first);
+    });
+
+    it('keeps a replacement page when the replaced one releases afterwards', () => {
+        const service = createService();
+        const loading = createTarget();
+        const loaded = createTarget();
+
+        const releaseLoading = service.register(loading);
+        service.register(loaded);
+        releaseLoading();
+
+        expect(service.target()).toBe(loaded);
+    });
+
+    it('moves a re-registered target to the top without duplicating it', () => {
+        const service = createService();
+        const first = createTarget();
+        const second = createTarget();
+
+        const releaseFirst = service.register(first);
+        service.register(second);
+        service.register(first);
+        releaseFirst();
+
+        expect(service.target()).toBe(second);
+    });
+});

libs/portal/shared/data-access/src/lib/workspace-back-navigation.service.ts

@@ -0,0 +1,41 @@
+import { computed, Injectable, signal } from '@angular/core';
+import { WorkspaceBackTarget } from '@iptvnator/portal/shared/util';
+
+/**
+ * Owns the header's Back slot. Pages register while they offer Back; the most
+ * recent registration wins, so a page opened above another one takes the slot
+ * and hands it back when it goes away.
+ */
+@Injectable({ providedIn: 'root' })
+export class WorkspaceBackNavigationService {
+    private readonly targets = signal<readonly WorkspaceBackTarget[]>([]);
+
+    readonly target = computed(() => {
+        const targets = this.targets();
+        return targets[targets.length - 1] ?? null;
+    });
+
+    /**
+     * Returns the release function. It removes only this target: when one
+     * page replaces another (a loading shell by the loaded one), creation and
+     * destruction can interleave in either order.
+     */
+    register(target: WorkspaceBackTarget): () => void {
+        this.targets.update((targets) => [
+            ...targets.filter((entry) => entry !== target),
+            target,
+        ]);
+        return () =>
+            this.targets.update((targets) =>
+                targets.filter((entry) => entry !== target)
+            );
+    }
+
+    /** Runs the current target; false when no page offers Back. */
+    goBack(): boolean {
+        const target = this.target();
+        if (!target) return false;
+        target.run();
+        return true;
+    }
+}

libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.html

@@ -36,7 +36,11 @@
                 <mat-icon>settings</mat-icon>
                 {{ 'PORTALS.ERROR_VIEW.PLAYLIST_SETTINGS' | translate }}
             </button>
-            <button mat-stroked-button color="warn" (click)="removeClicked()">
+            <button
+                mat-stroked-button
+                class="app-destructive-button"
+                (click)="removeClicked()"
+            >
                 <mat-icon>delete</mat-icon>
                 {{ 'PORTALS.ERROR_VIEW.DELETE' | translate }}
             </button>

libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.spec.ts

@@ -0,0 +1,156 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { provideRouter, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
+import { Observable, of } from 'rxjs';
+import { PlaylistActions } from '@iptvnator/m3u-state';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    DatabaseService,
+    PlaylistsService,
+    RuntimeCapabilitiesService,
+    SourceActivityService,
+} from '@iptvnator/services';
+import { PlaylistMeta } from '@iptvnator/shared/interfaces';
+import { ConfirmDialogData, DialogService } from '@iptvnator/ui/components';
+import { PlaylistErrorViewComponent } from './playlist-error-view.component';
+
+const XTREAM_PLAYLIST = {
+    _id: 'xtream-1',
+    title: 'Portal',
+    serverUrl: 'http://portal.test',
+    username: 'user',
+    password: 'pass',
+    importDate: '2026-09-30T10:00:00.000Z',
+} as PlaylistMeta;
+
+describe('PlaylistErrorViewComponent removal', () => {
+    let activity: SourceActivityService;
+    let busyDuringDelete: boolean[];
+    let deleteResult: Observable<{ success: boolean }>;
+    let playlistsService: { deletePlaylist: jest.Mock };
+    let dialogService: { openConfirmDialog: jest.Mock };
+    let store: { dispatch: jest.Mock };
+    let snackBar: { open: jest.Mock };
+    let navigate: jest.SpyInstance;
+
+    function setup(): PlaylistErrorViewComponent {
+        busyDuringDelete = [];
+        deleteResult = of({ success: true });
+        playlistsService = {
+            deletePlaylist: jest.fn((id: string) => {
+                busyDuringDelete.push(activity.isBusy(id));
+                return deleteResult;
+            }),
+        };
+        dialogService = { openConfirmDialog: jest.fn() };
+        store = { dispatch: jest.fn() };
+        snackBar = { open: jest.fn() };
+
+        TestBed.configureTestingModule({
+            imports: [PlaylistErrorViewComponent, TranslateModule.forRoot()],
+            providers: [
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: { activePlaylist: signal(XTREAM_PLAYLIST) },
+                },
+                { provide: PlaylistsService, useValue: playlistsService },
+                {
+                    provide: DatabaseService,
+                    useValue: { createOperationId: () => 'op-1' },
+                },
+                {
+                    provide: RuntimeCapabilitiesService,
+                    useValue: { supportsXtreamSqliteDataSource: true },
+                },
+                { provide: DialogService, useValue: dialogService },
+                { provide: MatDialog, useValue: { open: jest.fn() } },
+                { provide: MatSnackBar, useValue: snackBar },
+                { provide: Store, useValue: store },
+                provideRouter([]),
+            ],
+        });
+        activity = TestBed.inject(SourceActivityService);
+        navigate = jest
+            .spyOn(TestBed.inject(Router), 'navigate')
+            .mockResolvedValue(true);
+        return TestBed.createComponent(PlaylistErrorViewComponent)
+            .componentInstance;
+    }
+
+    function confirmRemoval(component: PlaylistErrorViewComponent) {
+        component.removeClicked();
+        const data = dialogService.openConfirmDialog.mock
+            .calls[0][0] as ConfirmDialogData;
+        data.onConfirm();
+        return data;
+    }
+
+    it('asks with a named destructive action', () => {
+        const component = setup();
+        component.removeClicked();
+
+        expect(dialogService.openConfirmDialog).toHaveBeenCalledWith(
+            expect.objectContaining({
+                confirmLabel: 'HOME.PLAYLISTS.REMOVE',
+                tone: 'destructive',
+            })
+        );
+    });
+
+    it('removes through the shared delete action: busy source, Xtream cache, commit, toast', async () => {
+        const component = setup();
+        confirmRemoval(component);
+
+        await new Promise((resolve) => setTimeout(resolve));
+
+        // The worker delete (with an operation id) drops the Xtream cache.
+        expect(playlistsService.deletePlaylist).toHaveBeenCalledWith(
+            'xtream-1',
+            expect.objectContaining({ operationId: 'op-1' })
+        );
+        // The source is marked busy while it is deleted, then released.
+        expect(busyDuringDelete).toEqual([true]);
+        expect(activity.isBusy('xtream-1')).toBe(false);
+        expect(store.dispatch).toHaveBeenCalledWith(
+            PlaylistActions.playlistRemovalCommitted({
+                playlistId: 'xtream-1',
+            })
+        );
+        expect(snackBar.open).toHaveBeenCalledWith(
+            'HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS',
+            undefined,
+            { duration: 2000 }
+        );
+        expect(navigate).toHaveBeenCalledWith(['/']);
+    });
+
+    it('keeps the playlist and stays put when the delete fails', async () => {
+        const component = setup();
+        deleteResult = new Observable((subscriber) =>
+            subscriber.error(new Error('worker failed'))
+        );
+
+        await component.removePlaylist(XTREAM_PLAYLIST);
+
+        expect(store.dispatch).not.toHaveBeenCalled();
+        expect(snackBar.open).not.toHaveBeenCalled();
+        expect(navigate).not.toHaveBeenCalled();
+        expect(activity.isBusy('xtream-1')).toBe(false);
+    });
+
+    it('does not start a second removal while the source is busy', async () => {
+        const component = setup();
+        const release = activity.begin(['xtream-1']);
+
+        component.removeClicked();
+        await component.removePlaylist(XTREAM_PLAYLIST);
+
+        expect(dialogService.openConfirmDialog).not.toHaveBeenCalled();
+        expect(playlistsService.deletePlaylist).not.toHaveBeenCalled();
+        release();
+    });
+});

libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts

@@ -7,13 +7,19 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { PlaylistActions } from '@iptvnator/m3u-state';
 import { PlaylistInfoComponent } from '@iptvnator/playlist/shared/ui';
 import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    PlaylistDeleteActionService,
+    SourceActivityService,
+} from '@iptvnator/services';
+import { PlaylistMeta } from '@iptvnator/shared/interfaces';
 import { DialogService } from '@iptvnator/ui/components';
-import { PlaylistActions } from '@iptvnator/m3u-state';
 
 @Component({
     selector: 'app-playlist-error-view',
@@ -25,8 +31,11 @@ import { PlaylistActions } from '@iptvnator/m3u-state';
 export class PlaylistErrorViewComponent {
     private dialog = inject(MatDialog);
     private dialogService = inject(DialogService);
+    private readonly activity = inject(SourceActivityService);
     private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly playlistDeleteAction = inject(PlaylistDeleteActionService);
     private router = inject(Router);
+    private readonly snackBar = inject(MatSnackBar);
     private store = inject(Store);
     private translate = inject(TranslateService);
 
@@ -48,7 +57,10 @@ export class PlaylistErrorViewComponent {
 
     removeClicked(): void {
         const currentPlaylist = this.currentPlaylist();
-        if (!currentPlaylist?._id) {
+        if (
+            !currentPlaylist?._id ||
+            this.activity.isBusy(currentPlaylist._id)
+        ) {
             return;
         }
 
@@ -57,12 +69,38 @@ export class PlaylistErrorViewComponent {
             message: this.translate.instant(
                 'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
             ),
-            onConfirm: (): void => this.removePlaylist(currentPlaylist._id),
+            confirmLabel: this.translate.instant('HOME.PLAYLISTS.REMOVE'),
+            tone: 'destructive',
+            onConfirm: (): void => void this.removePlaylist(currentPlaylist),
         });
     }
 
-    removePlaylist(playlistId: string): void {
-        this.store.dispatch(PlaylistActions.removePlaylist({ playlistId }));
-        this.router.navigate(['/']);
+    /**
+     * Same path as every other source removal: the shared delete action marks
+     * the source busy, lets persistence drop the Xtream cache and cleanups,
+     * and only a completed delete is committed to the store.
+     */
+    async removePlaylist(playlist: PlaylistMeta): Promise<void> {
+        if (this.activity.isBusy(playlist._id)) {
+            return;
+        }
+
+        const deleted =
+            await this.playlistDeleteAction.deletePlaylist(playlist);
+        if (!deleted) {
+            return;
+        }
+
+        this.store.dispatch(
+            PlaylistActions.playlistRemovalCommitted({
+                playlistId: playlist._id,
+            })
+        );
+        this.snackBar.open(
+            this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS'),
+            undefined,
+            { duration: 2000 }
+        );
+        void this.router.navigate(['/']);
     }
 }

libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-clear-action.ts

@@ -67,6 +67,8 @@ export function createClearCollectionAction(options: {
             dialogService.openConfirmDialog({
                 title: translate.instant(titleKey, { type }),
                 message: translate.instant(messageKey, { type }),
+                confirmLabel: translate.instant('CLEAR'),
+                tone: 'destructive',
                 onConfirm: async () => {
                     if (isFavorites) {
                         await clearFavorites(itemsToRemove);

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

@@ -23,6 +23,7 @@ export * from './lib/category-sort-state.service';
 export * from './lib/keyboard';
 export * from './lib/keyboard-shortcuts';
 export * from './lib/remote-channel-navigation';
+export * from './lib/workspace-back-target';
 export * from './lib/workspace-header-context.service';
 export * from './lib/workspace-view-command.types';
 export * from './lib/workspace-view-command.service';

libs/portal/shared/util/src/lib/workspace-back-target.ts

@@ -0,0 +1,10 @@
+import { Signal } from '@angular/core';
+
+/** A page's Back action, rendered in the workspace header's leading slot. */
+export interface WorkspaceBackTarget {
+    /** Accessible name and tooltip; null falls back to the generic "Back". */
+    readonly label: Signal<string | null>;
+    /** True while Escape on the page runs the same action. */
+    readonly escapeShortcut: Signal<boolean>;
+    run(): void;
+}

libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts

@@ -822,6 +822,12 @@ export class VodDetailsRouteComponent implements OnInit, OnDestroy {
             message: this.translateService.instant(
                 'DOWNLOADS.CANCEL_CONFIRM_MESSAGE'
             ),
+            confirmLabel: this.translateService.instant(
+                'DOWNLOADS.CANCEL_CONFIRM_TITLE'
+            ),
+            // "Cancel" next to "Cancel download" would read as the same action.
+            cancelLabel: this.translateService.instant('CLOSE'),
+            tone: 'destructive',
             onConfirm: () => void this.downloads.cancelActive(),
         });
     }

libs/shared/interfaces/src/index.ts

@@ -47,6 +47,7 @@ export * from './lib/portal-debug.interface';
 export * from './lib/playlist-display-label.util';
 export * from './lib/portal-playback.interface';
 export * from './lib/provider-import-detection.util';
+export * from './lib/source-type-icons.util';
 export * from './lib/provider-overview.util';
 export * from './lib/random-id.util';
 export * from './lib/recording-metadata.interface';

libs/shared/interfaces/src/lib/source-type-icons.util.spec.ts

@@ -0,0 +1,43 @@
+import {
+    getPlaylistSourceIcon,
+    resolvePlaylistSourceIconKey,
+    SOURCE_TYPE_ICONS,
+} from './source-type-icons.util';
+
+describe('source type icons', () => {
+    it('never lets one icon stand for two providers', () => {
+        const byProvider = {
+            xtream: [SOURCE_TYPE_ICONS.xtream],
+            stalker: [SOURCE_TYPE_ICONS.stalker],
+            m3u: [
+                SOURCE_TYPE_ICONS.m3u,
+                SOURCE_TYPE_ICONS['m3u-url'],
+                SOURCE_TYPE_ICONS['m3u-local'],
+                SOURCE_TYPE_ICONS['m3u-text'],
+            ],
+        };
+        const owners = new Map<string, string>();
+        for (const [provider, icons] of Object.entries(byProvider)) {
+            for (const icon of icons) {
+                expect(owners.get(icon) ?? provider).toBe(provider);
+                owners.set(icon, provider);
+            }
+        }
+    });
+
+    it('does not reuse the Dashboard rail icon for a provider', () => {
+        expect(Object.values(SOURCE_TYPE_ICONS)).not.toContain('dashboard');
+    });
+
+    it.each([
+        [{ macAddress: '00:1A:79:00:00:01', url: 'http://portal' }, 'stalker'],
+        [{ serverUrl: 'http://xtream' }, 'xtream'],
+        [{ url: 'http://list.m3u' }, 'm3u-url'],
+        [{}, 'm3u-local'],
+    ] as const)('resolves %o to %s', (playlist, expected) => {
+        expect(resolvePlaylistSourceIconKey(playlist)).toBe(expected);
+        expect(getPlaylistSourceIcon(playlist)).toBe(
+            SOURCE_TYPE_ICONS[expected]
+        );
+    });
+});

libs/shared/interfaces/src/lib/source-type-icons.util.ts

@@ -0,0 +1,50 @@
+import type { PlaylistMeta } from './playlist-meta.type';
+
+/**
+ * One Material icon ligature per source type, used everywhere a source is
+ * shown: the add dialog, provider auto-detection, the Sources list and its
+ * filters, the playlist switcher, dashboard cards, the command palette and
+ * the reset summaries. A provider must look the same on every screen, and no
+ * icon may stand for two providers.
+ *
+ * `m3u` is the provider family (filters and summaries that count every M3U
+ * source); the other M3U keys name how a single playlist was added. Stored
+ * playlists cannot tell a local file from pasted text, so both render as
+ * `m3u-local`; only the add dialog and auto-detection show `m3u-text`.
+ */
+export const SOURCE_TYPE_ICONS = {
+    m3u: 'playlist_play',
+    'm3u-url': 'link',
+    'm3u-local': 'description',
+    'm3u-text': 'subject',
+    xtream: 'cloud',
+    stalker: 'cast',
+} as const;
+
+export type SourceTypeIconKey = keyof typeof SOURCE_TYPE_ICONS;
+
+export type PlaylistSourceIconKey = Extract<
+    SourceTypeIconKey,
+    'm3u-url' | 'm3u-local' | 'xtream' | 'stalker'
+>;
+
+export function resolvePlaylistSourceIconKey(
+    playlist: Pick<PlaylistMeta, 'macAddress' | 'serverUrl' | 'url'>
+): PlaylistSourceIconKey {
+    if (playlist.macAddress) {
+        return 'stalker';
+    }
+    if (playlist.serverUrl) {
+        return 'xtream';
+    }
+    if (playlist.url) {
+        return 'm3u-url';
+    }
+    return 'm3u-local';
+}
+
+export function getPlaylistSourceIcon(
+    playlist: Pick<PlaylistMeta, 'macAddress' | 'serverUrl' | 'url'>
+): string {
+    return SOURCE_TYPE_ICONS[resolvePlaylistSourceIconKey(playlist)];
+}

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

@@ -59,7 +59,11 @@
 
 <mat-dialog-actions align="end">
     @if (currentMapping()) {
-        <button mat-button color="warn" (click)="removeMapping()">
+        <button
+            mat-button
+            class="app-destructive-button"
+            (click)="removeMapping()"
+        >
             {{ 'EPG_MAPPING_DIALOG.REMOVE' | translate }}
         </button>
     }

libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.spec.ts

@@ -52,3 +52,49 @@ describe('ConfirmDialogComponent actions', () => {
         }
     );
 });
+
+describe('ConfirmDialogComponent labels and tone', () => {
+    async function render(data: Record<string, unknown>) {
+        await TestBed.configureTestingModule({
+            imports: [
+                ConfirmDialogComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: {
+                        title: 'Remove playlist',
+                        message: 'Delete it?',
+                        confirmLabel: 'Remove playlist',
+                        onConfirm: jest.fn(),
+                        ...data,
+                    },
+                },
+                { provide: MatDialogRef, useValue: { close: jest.fn() } },
+            ],
+        }).compileComponents();
+        const fixture = TestBed.createComponent(ConfirmDialogComponent);
+        fixture.detectChanges();
+        const buttons = fixture.nativeElement.querySelectorAll(
+            'button'
+        ) as NodeListOf<HTMLButtonElement>;
+        return { cancel: buttons[0], confirm: buttons[1] };
+    }
+
+    it('names the action instead of answering "Yes", and cancels by default', async () => {
+        const { cancel, confirm } = await render({});
+
+        expect(confirm.textContent?.trim()).toBe('Remove playlist');
+        // No translations are loaded, so the key is the rendered text.
+        expect(cancel.textContent?.trim()).toBe('CANCEL');
+        expect(confirm.classList).not.toContain('app-destructive-button');
+    });
+
+    it('styles destructive confirmations as destructive', async () => {
+        const { confirm } = await render({ tone: 'destructive' });
+
+        expect(confirm.classList).toContain('app-destructive-button');
+    });
+});

libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts

@@ -3,12 +3,25 @@ import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 
+/**
+ * `destructive` renders the confirm action with the app-wide error styling
+ * (`.app-destructive-button`). Use it whenever confirming removes or discards
+ * user data; Material's `warn` color input has no effect with the M3 theme.
+ */
+export type ConfirmDialogTone = 'default' | 'destructive';
+
 export interface ConfirmDialogData {
     title: string;
     message: string;
     width?: string;
-    confirmLabel?: string;
+    /**
+     * Translated verb that names the action ("Remove playlist", "Clear").
+     * Required so a confirmation never falls back to an ambiguous "Yes".
+     */
+    confirmLabel: string;
+    /** Translated dismiss label; defaults to "Cancel". */
     cancelLabel?: string;
+    tone?: ConfirmDialogTone;
     /** Run the action in the dialog; only Close/backdrop/Escape dismiss it. */
     keepOpenOnConfirm?: boolean;
     onConfirm: () => void;
@@ -27,23 +40,25 @@ export interface ConfirmDialogData {
         </mat-dialog-content>
         <mat-dialog-actions align="end">
             <button mat-button mat-dialog-close cdkFocusInitial>
-                {{ dialogData.cancelLabel || 'NO' | translate }}
+                {{ dialogData.cancelLabel || ('CANCEL' | translate) }}
             </button>
             @if (dialogData.keepOpenOnConfirm) {
                 <button
                     mat-flat-button
+                    data-test-id="confirm-dialog-confirm"
+                    [class.app-destructive-button]="isDestructive"
                     (click)="dialogData.onConfirm()"
-                    color="primary"
                 >
-                    {{ dialogData.confirmLabel || 'YES' | translate }}
+                    {{ dialogData.confirmLabel }}
                 </button>
             } @else {
                 <button
                     mat-flat-button
+                    data-test-id="confirm-dialog-confirm"
+                    [class.app-destructive-button]="isDestructive"
                     [mat-dialog-close]="true"
-                    color="primary"
                 >
-                    {{ dialogData.confirmLabel || 'YES' | translate }}
+                    {{ dialogData.confirmLabel }}
                 </button>
             }
         </mat-dialog-actions>
@@ -56,4 +71,8 @@ export class ConfirmDialogComponent {
     constructor() {
         this.dialogData = this.data;
     }
+
+    get isDestructive(): boolean {
+        return this.dialogData.tone === 'destructive';
+    }
 }

libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts

@@ -33,6 +33,7 @@ describe('DialogService', () => {
         service.openConfirmDialog({
             title: 'Remove',
             message: 'Confirm removal?',
+            confirmLabel: 'Remove playlist',
             onConfirm: jest.fn(),
         });
 
@@ -57,6 +58,7 @@ describe('DialogService', () => {
         service.openConfirmDialog({
             title: 'Refresh Xtream Playlist',
             message: 'Confirm refresh?',
+            confirmLabel: 'Refresh playlist',
             width: '400px',
             onConfirm: jest.fn(),
         });
@@ -78,6 +80,7 @@ describe('DialogService', () => {
         service.openConfirmDialog({
             title: 'Remove',
             message: 'Confirm removal?',
+            confirmLabel: 'Remove playlist',
             onConfirm,
         });
 
@@ -89,6 +92,7 @@ describe('DialogService', () => {
         service.openConfirmDialog({
             title: 'Recovery',
             message: 'Path',
+            confirmLabel: 'Copy path',
             keepOpenOnConfirm: true,
             onConfirm,
         });

libs/ui/components/src/lib/content-hero/content-hero.component.scss

@@ -157,8 +157,6 @@
         max-width: var(--content-max-width);
         margin: 0 auto;
         padding: 48px 32px 24px;
-        // Reserved by the detail shell while its sticky Back control shows.
-        padding-inline-start: max(32px, var(--detail-back-lane, 0px));
         box-sizing: border-box;
 
         &--skeleton {
@@ -435,7 +433,6 @@
 
     .hero__content {
         padding: 40px 20px 24px;
-        padding-inline-start: max(20px, var(--detail-back-lane, 0px));
     }
 
     .details {
@@ -450,7 +447,6 @@
 @media (max-width: 640px) {
     .hero__content {
         padding-inline: 16px;
-        padding-inline-start: max(16px, var(--detail-back-lane, 0px));
     }
 
     .details__title {

libs/ui/components/src/lib/portal-detail-shell/content-about.component.scss

@@ -6,8 +6,6 @@
     max-width: var(--content-max-width, 1400px);
     margin: 0 auto;
     padding: 24px 40px 40px;
-    // The detail shell's sticky Back lane (0 when there is no Back).
-    padding-inline-start: max(40px, var(--detail-back-lane, 0px));
     border-top: 1px solid var(--tag-border, rgba(255, 255, 255, 0.12));
 
     &__heading {
@@ -129,7 +127,6 @@
 @media (max-width: 800px) {
     .about {
         padding: 20px 20px 32px;
-        padding-inline-start: max(20px, var(--detail-back-lane, 0px));
 
         &__poster {
             width: 92px;

libs/ui/components/src/lib/portal-detail-shell/portal-detail-shell.component.html

@@ -1,22 +1,3 @@
-@if (backAvailable()) {
-    @let label = backLabel() || ('BACK' | translate);
-    <!-- Route-level Back in both states. Watch keeps the arrow's meaning;
-         closing the player belongs to the player's own Close button and Escape. -->
-    <div class="shell__navigation">
-        <button
-            #backButton
-            class="shell__back-button"
-            type="button"
-            [attr.aria-label]="label"
-            [attr.aria-keyshortcuts]="isWatch() ? null : 'Escape'"
-            [title]="isWatch() ? label : label + ' (Esc)'"
-            (click)="backClicked.emit()"
-        >
-            <mat-icon aria-hidden="true">arrow_back</mat-icon>
-        </button>
-    </div>
-}
-
 <!-- Hero (browse state) — collapses when playback is active -->
 <div class="shell__hero" [class.shell__hero--collapsed]="isWatch()">
     <div class="shell__hero-inner">

libs/ui/components/src/lib/portal-detail-shell/portal-detail-shell.component.scss

@@ -13,13 +13,6 @@
     --tag-border: color-mix(in srgb, var(--app-on-surface, #1d1b1e) 14%, transparent);
     --poster-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
     --content-max-width: 1400px;
-    // The sticky Back control floats over the scroll owner. While it is shown,
-    // every content column (hero, player, episodes, About, extras) starts
-    // after its lane — inset + button + the same inset again — so nothing
-    // scrolls beneath it. content-hero and content-about read the lane too.
-    --shell-back-inset: 16px;
-    --shell-back-size: 40px;
-    --detail-back-lane: 0px;
 
     display: block;
     height: 100%;
@@ -40,58 +33,10 @@
     }
 }
 
-:host(.shell-host--back) {
-    --detail-back-lane: calc(
-        2 * var(--shell-back-inset) + var(--shell-back-size)
-    );
-}
-
 :host-context(.dark-theme) {
     --poster-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
 }
 
-.shell__navigation {
-    // Direct child of the scroll owner: sticky lasts through the entire page.
-    position: sticky;
-    top: var(--shell-back-inset);
-    height: 0;
-    z-index: 10;
-    pointer-events: none;
-}
-
-.shell__back-button {
-    position: absolute;
-    inset-inline-start: var(--shell-back-inset);
-    pointer-events: auto;
-    app-region: no-drag;
-    -webkit-app-region: no-drag;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--shell-back-size);
-    height: var(--shell-back-size);
-    border-radius: 50%;
-    background: var(--app-widget-bg, var(--surface-bg));
-    color: var(--app-on-surface, var(--text-primary));
-    border: 1px solid var(--app-separator, var(--tag-border));
-    cursor: pointer;
-
-    &:hover {
-        background: var(--app-card-hover-bg, var(--surface-bg));
-    }
-
-    &:focus-visible {
-        outline: 2px solid var(--app-selection-color);
-        outline-offset: 2px;
-    }
-
-    mat-icon {
-        font-size: 24px;
-        width: 24px;
-        height: 24px;
-    }
-}
-
 // ============================================================================
 // Hero collapse (browse ↔ watch morph, ~300ms, no height measuring)
 // ============================================================================
@@ -132,7 +77,6 @@
 
     &--active {
         padding: 16px 40px 0;
-        padding-inline-start: max(40px, var(--detail-back-lane));
         animation: shell-fade-in 300ms ease 50ms both;
     }
 }
@@ -141,7 +85,6 @@
     max-width: var(--content-max-width);
     margin: 0 auto;
     padding: 0 32px;
-    padding-inline-start: max(32px, var(--detail-back-lane));
 
     &:empty {
         display: none;
@@ -162,7 +105,6 @@
     max-width: var(--content-max-width);
     margin: 0 auto;
     padding: 8px 32px 40px;
-    padding-inline-start: max(32px, var(--detail-back-lane));
 
     &:empty {
         display: none;
@@ -183,38 +125,14 @@
 @media (max-width: 800px) {
     .shell__player--active {
         padding: 8px 12px 0;
-        padding-inline-start: max(12px, var(--detail-back-lane));
     }
 
     .shell__episodes {
         padding: 0 20px;
-        padding-inline-start: max(20px, var(--detail-back-lane));
     }
 
     .shell__extras {
         padding: 0 20px 32px;
-        padding-inline-start: max(20px, var(--detail-back-lane));
-    }
-}
-
-// A pane too narrow to spare a 72px column (a phone, or a desktop pane beside
-// the context panel; the component sets the class from the pane's width)
-// would clip the player's controls. There the control takes a row instead —
-// an opaque sticky bar in flow that content scrolls beneath, never alongside.
-:host(.shell-host--compact) {
-    --detail-back-lane: 0px;
-
-    .shell__navigation {
-        top: 0;
-        height: calc(var(--shell-back-size) + 16px);
-        background: var(--app-header-bg);
-        // The bar hides what scrolls beneath it, so it must not let taps
-        // through to that hidden content either.
-        pointer-events: auto;
-    }
-
-    .shell__back-button {
-        top: 8px;
     }
 }
 

libs/ui/components/src/lib/portal-detail-shell/portal-detail-shell.component.spec.ts

@@ -1,6 +1,7 @@
 import { Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { WorkspaceBackNavigationService } from '@iptvnator/portal/shared/data-access';
 import {
     DetailActionsTemplateDirective,
     DetailMetaTemplateDirective,
@@ -69,6 +70,9 @@ describe('PortalDetailShellComponent', () => {
         return element;
     };
 
+    const backTarget = () =>
+        TestBed.inject(WorkspaceBackNavigationService).target();
+
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [HostComponent, TranslateModule.forRoot()],
@@ -130,13 +134,13 @@ describe('PortalDetailShellComponent', () => {
         expect(query('.details__meta .details__meta-item')).toBeTruthy();
         expect(query('.action-buttons .play-btn')).toBeTruthy();
         expect(query('app-content-about')).toBeNull();
-        expect(query('.shell__back-button')?.getAttribute('aria-label')).toBe(
-            'Return to downloads'
-        );
+        // The header renders Back; the page itself keeps no arrow.
+        expect(query('button[aria-label="Return to downloads"]')).toBeNull();
+        expect(backTarget()?.label()).toBe('Return to downloads');
     });
 
     it.each([{ isLoading: true }, { errorMessage: 'Unavailable' }])(
-        'keeps the translated fallback Back available in loading/error states',
+        'keeps the generic Back available in loading/error states',
         (state) => {
             fixture.destroy();
             const shellFixture = TestBed.createComponent(
@@ -145,16 +149,14 @@ describe('PortalDetailShellComponent', () => {
             for (const [key, value] of Object.entries(state))
                 shellFixture.componentRef.setInput(key, value);
             shellFixture.detectChanges();
-            const element = shellFixture.nativeElement as HTMLElement;
-            const button = element.querySelector<HTMLButtonElement>(
-                '.shell__back-button'
-            );
-            expect(button?.type).toBe('button');
-            expect(button?.getAttribute('aria-label')).toBe('Go back');
+            // No host label: the header falls back to the translated "Back".
+            expect(backTarget()?.label()).toBeNull();
             const back = jest.fn();
             shellFixture.componentInstance.backClicked.subscribe(back);
-            button?.click();
+            backTarget()?.run();
             expect(back).toHaveBeenCalledTimes(1);
+            shellFixture.destroy();
+            expect(backTarget()).toBeNull();
         }
     );
 
@@ -277,30 +279,33 @@ describe('PortalDetailShellComponent', () => {
         expect(host.closeRequests).toBe(0);
     });
 
-    it('keeps one route-back control outside the collapsing hero in both states', () => {
-        const back = requiredQuery('.shell__back-button');
-        expect(back.closest('app-content-hero')).toBeNull();
-        expect(back.getAttribute('aria-label')).toBe('Return to downloads');
-        expect(back.getAttribute('aria-keyshortcuts')).toBe('Escape');
-        back.click();
+    it('offers one route-level Back to the header in both states', () => {
+        const target = backTarget();
+        expect(target?.label()).toBe('Return to downloads');
+        expect(target?.escapeShortcut()).toBe(true);
+        target?.run();
         expect(host.backRequests).toBe(1);
         host.playbackActive.set(true);
         fixture.detectChanges();
-        expect(query('.shell__back-button')).toBe(back);
+        expect(backTarget()).toBe(target);
         // Watch keeps the arrow's meaning: it leaves the page, it does not
         // close the player. Escape is the close shortcut, so the hint goes.
-        expect(back.getAttribute('aria-label')).toBe('Return to downloads');
-        expect(back.getAttribute('aria-keyshortcuts')).toBeNull();
-        expect(back.getAttribute('title')).toBe('Return to downloads');
-        back.click();
+        expect(target?.escapeShortcut()).toBe(false);
+        target?.run();
         expect(host.backRequests).toBe(2);
         expect(host.closeRequests).toBe(0);
     });
 
-    it('moves lost focus to the back control after Escape closes the player', async () => {
+    it('releases the header Back when the page goes away', () => {
+        expect(backTarget()).not.toBeNull();
+        fixture.destroy();
+        expect(backTarget()).toBeNull();
+    });
+
+    it('keeps focus on the page after Escape closes the player', async () => {
         host.playbackActive.set(true);
         fixture.detectChanges();
-        const back = requiredQuery('.shell__back-button');
+        const shell = requiredQuery('app-portal-detail-shell');
         const player = requiredQuery('.fake-player');
         player.tabIndex = 0;
         player.focus();
@@ -315,13 +320,13 @@ describe('PortalDetailShellComponent', () => {
         await fixture.whenStable();
         expect(host.closeRequests).toBe(1);
         expect(host.backRequests).toBe(0);
-        expect(document.activeElement).toBe(back);
+        expect(document.activeElement).toBe(shell);
     });
 
     it('has no dead-end browse action for a host without back navigation', () => {
         host.backAvailable.set(false);
         fixture.detectChanges();
-        expect(query('.shell__back-button')).toBeNull();
+        expect(backTarget()).toBeNull();
         requiredQuery('app-portal-detail-shell').dispatchEvent(
             new KeyboardEvent('keydown', {
                 key: 'Escape',
@@ -334,7 +339,7 @@ describe('PortalDetailShellComponent', () => {
         fixture.detectChanges();
         // No route to go back to, so no arrow in watch either; the player's
         // own Close button and Escape remain the exits.
-        expect(query('.shell__back-button')).toBeNull();
+        expect(backTarget()).toBeNull();
         requiredQuery('app-portal-detail-shell').dispatchEvent(
             new KeyboardEvent('keydown', {
                 key: 'Escape',
@@ -451,67 +456,3 @@ describe('PortalDetailShellComponent', () => {
         expect(host.closeRequests).toBe(0);
     });
 });
-
-describe('PortalDetailShellComponent pane width', () => {
-    const original = globalThis.ResizeObserver;
-    const disconnect = jest.fn();
-    // The hero observes itself too, so keep each callback with its target.
-    let observers: { callback: ResizeObserverCallback; target?: Element }[];
-
-    beforeEach(() => {
-        observers = [];
-        disconnect.mockClear();
-        globalThis.ResizeObserver = class {
-            private readonly entry: (typeof observers)[number];
-            constructor(callback: ResizeObserverCallback) {
-                this.entry = { callback };
-                observers.push(this.entry);
-            }
-            observe(target: Element): void {
-                this.entry.target = target;
-            }
-            unobserve = jest.fn();
-            disconnect = disconnect;
-        } as unknown as typeof ResizeObserver;
-        TestBed.configureTestingModule({
-            imports: [HostComponent, TranslateModule.forRoot()],
-        });
-    });
-
-    afterEach(() => {
-        globalThis.ResizeObserver = original;
-    });
-
-    const resize = (shell: HTMLElement, inlineSize: number): void => {
-        const observer = observers.find(({ target }) => target === shell);
-        if (!observer) throw new Error('The shell does not observe itself.');
-        observer.callback(
-            [
-                {
-                    borderBoxSize: [{ inlineSize, blockSize: 800 }],
-                } as unknown as ResizeObserverEntry,
-            ],
-            {} as ResizeObserver
-        );
-    };
-
-    it('trades the Back lane for a bar when the pane itself is narrow', () => {
-        const fixture = TestBed.createComponent(HostComponent);
-        fixture.detectChanges();
-        const shell = (fixture.nativeElement as HTMLElement).querySelector(
-            'app-portal-detail-shell'
-        ) as HTMLElement;
-
-        // A 780px window leaves the pane ~402px beside the context panel.
-        resize(shell, 402);
-        expect(shell.classList).not.toContain('shell-host--compact');
-        // A 641px window leaves it ~260px: too narrow for the lane.
-        resize(shell, 260);
-        expect(shell.classList).toContain('shell-host--compact');
-        resize(shell, 1280);
-        expect(shell.classList).not.toContain('shell-host--compact');
-
-        fixture.destroy();
-        expect(disconnect).toHaveBeenCalled();
-    });
-});