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>

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

@@ -26,7 +26,7 @@
                         ' ' +
                         item.url
                     "
-                    >cloud</mat-icon
+                    >{{ sourceIcons['m3u-url'] }}</mat-icon
                 >
                 @if (item.autoRefresh) {
                     <mat-icon
@@ -44,7 +44,7 @@
                 <mat-icon
                     class="upload-type-icon"
                     [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
-                    >folder</mat-icon
+                    >{{ sourceIcons['m3u-local'] }}</mat-icon
                 >
                 @if (item.autoRefresh) {
                     <mat-icon
@@ -62,7 +62,7 @@
                 <mat-icon
                     class="upload-type-icon"
                     [matTooltip]="'HOME.PLAYLISTS.XTREAM_PLAYLIST' | translate"
-                    >public</mat-icon
+                    >{{ sourceIcons.xtream }}</mat-icon
                 >
                 @if (!runtime.supportsSourceHealth) {
                     <span
@@ -78,7 +78,7 @@
             <mat-icon
                 class="upload-type-icon"
                 [matTooltip]="'HOME.PLAYLISTS.STALKER_PORTAL' | translate"
-                >dashboard</mat-icon
+                >{{ sourceIcons.stalker }}</mat-icon
             >
         }
     </div>
@@ -180,8 +180,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.ts

@@ -1,6 +1,9 @@
 import { Injector } from '@angular/core';
 import { SourceHealthService } from '@iptvnator/portal/shared/data-access';
-import { sourceHealthType } from '@iptvnator/shared/interfaces';
+import {
+    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 +71,7 @@ export class PlaylistItemComponent implements OnInit {
     portalStatus: PortalStatus = 'unavailable';
     private readonly portalStatusService = inject(PortalStatusService);
     readonly runtime = inject(RuntimeCapabilitiesService);
+    readonly sourceIcons = SOURCE_TYPE_ICONS;
     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/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/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/xtream/feature/src/lib/vod-details/vod-details-route.component.ts

@@ -747,6 +747,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/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts

@@ -9,6 +9,7 @@ import {
 import { toSignal } from '@angular/core/rxjs-interop';
 import { startWith } from 'rxjs';
 import {
+    getPlaylistSourceIcon,
     isStalkerAccountPlaylist,
     isXtreamAccountPlaylist,
     normalizeDashboardRailsSettings,
@@ -286,11 +287,7 @@ export class WorkspaceDashboardRailsComponent {
                 playlist.filename ||
                 this.t('WORKSPACE.DASHBOARD.UNTITLED_SOURCE'),
             subtitle: this.data.getPlaylistProvider(playlist),
-            icon: playlist.serverUrl
-                ? 'cloud'
-                : playlist.macAddress
-                  ? 'cast'
-                  : 'folder_open',
+            icon: getPlaylistSourceIcon(playlist),
             link: this.data.getPlaylistLink(playlist),
             actions: buildDashboardSourceActions(
                 playlist,
@@ -675,6 +672,8 @@ export class WorkspaceDashboardRailsComponent {
             message: this.translate.instant(
                 'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
             ),
+            confirmLabel: this.translate.instant('HOME.PLAYLISTS.REMOVE'),
+            tone: 'destructive',
             onConfirm: () => {
                 void this.removePlaylist(playlist);
             },

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

@@ -8,6 +8,7 @@ import {
     WorkspacePortalContext,
     WorkspaceShellRoute,
 } from '@iptvnator/workspace/shell/util';
+import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces';
 import { TranslateFn } from './workspace-shell-search-labels';
 
 export interface CommandBuilderActions {
@@ -275,7 +276,7 @@ export function getGlobalCommandDefinitions(
         {
             id: 'add-playlist-m3u',
             group: 'global',
-            icon: 'folder_open',
+            icon: SOURCE_TYPE_ICONS.m3u,
             labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_M3U_LABEL',
             descriptionKey:
                 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_M3U_DESCRIPTION',
@@ -286,7 +287,7 @@ export function getGlobalCommandDefinitions(
         {
             id: 'add-playlist-xtream',
             group: 'global',
-            icon: 'cloud',
+            icon: SOURCE_TYPE_ICONS.xtream,
             labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_XTREAM_LABEL',
             descriptionKey:
                 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_XTREAM_DESCRIPTION',
@@ -297,7 +298,7 @@ export function getGlobalCommandDefinitions(
         {
             id: 'add-playlist-stalker',
             group: 'global',
-            icon: 'cast',
+            icon: SOURCE_TYPE_ICONS.stalker,
             labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_STALKER_LABEL',
             descriptionKey:
                 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_STALKER_DESCRIPTION',

libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts

@@ -14,6 +14,7 @@ import {
 } from '@iptvnator/m3u-state';
 import { TranslatePipe } from '@ngx-translate/core';
 import { WorkspaceShellContextDrawerService } from '@iptvnator/workspace/shell/util';
+import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces';
 
 type PlaylistFilterId = 'all' | 'm3u' | 'xtream' | 'stalker';
 
@@ -55,17 +56,17 @@ export class WorkspaceSourcesFiltersPanelComponent {
         },
         {
             id: 'm3u',
-            icon: 'playlist_play',
+            icon: SOURCE_TYPE_ICONS.m3u,
             translationKey: 'HOME.PLAYLIST_TYPES.M3U',
         },
         {
             id: 'xtream',
-            icon: 'cloud',
+            icon: SOURCE_TYPE_ICONS.xtream,
             translationKey: 'HOME.PLAYLIST_TYPES.XTREAM',
         },
         {
             id: 'stalker',
-            icon: 'router',
+            icon: SOURCE_TYPE_ICONS.stalker,
             translationKey: 'HOME.PLAYLIST_TYPES.STALKER',
         },
     ];