fix(ui): destructive confirmations, verb labels and provider icons

Confirmations: ConfirmDialogData.confirmLabel is required, so no dialog can
fall back to "Yes"/"No"; the dismiss defaults to "Cancel" and
`tone: 'destructive'` styles the confirm with .app-destructive-button. Every
caller names its action ("Remove playlist", "Clear", "Refresh playlist",
"Cancel download" with a "Close" dismiss). The confirm button has the
confirm-dialog-confirm test id and drops its no-op color="primary".

The no-op `warn` color input becomes .app-destructive-button on the EPG
mapping, playlist item, error view, EPG/reset settings, delete-all and source
cleanup buttons, and on the unsaved-changes dialog's Discard.

Provider icons come from SOURCE_TYPE_ICONS in shared/interfaces (Xtream
cloud, Stalker cast, M3U playlist_play / link / description / subject) in the
add dialog, auto-import, empty state, playlist switcher, playlist rows,
dashboard source rail, command palette, Sources filters and both reset
summaries. Stalker no longer borrows the Dashboard icon, and Xtream no longer
shares a glyph with M3U URL playlists.

The playlist error view removed a playlist through the stale
PlaylistActions.removePlaylist: it dropped the playlist from state before the
delete ran, swallowed failures, skipped the source activity guard and showed
no toast. It now uses PlaylistDeleteActionService like every other removal,
commits only a completed delete, toasts and goes home. The unused action and
its effect are removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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/electron-test-fixtures.ts

@@ -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/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/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(

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

@@ -292,7 +292,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, {

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/m3-theme.scss

@@ -287,8 +287,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.