From b82d47f6b68f976ba59b1da48e1114cbe0a4bdec Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 4 Dec 2025 21:02:15 +0100
Subject: [PATCH] feat(ui): add AddPlaylistMenu component for playlist imports

Introduce a reusable AddPlaylistMenuComponent that provides a Material
menu with options to add playlists via file, URL, text, Xtream or Stalker
portal. Define a PlaylistType union and expose a playlistTypeSelected
output so parent components can react to the selected import type.

- Add component TypeScript with Angular metadata and required Material
  imports.
- Add template with accessible menu items, icons, translation keys and
  click handlers that emit the selected PlaylistType.
- Organize menu items with a divider to separate common file/URL/text
  options from provider-specific imports.

This adds a focused UI building block for playlist import flows and
standardizes how import type selection is communicated to parent scopes.
---
 libs/ui/components/src/index.ts               |  1 +
 .../add-playlist-menu.component.html          | 43 +++++++++++++++++++
 .../add-playlist-menu.component.ts            | 22 ++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.html
 create mode 100644 libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.ts

diff --git a/libs/ui/components/src/index.ts b/libs/ui/components/src/index.ts
index 2c1817d76..a74ec9623 100644
--- a/libs/ui/components/src/index.ts
+++ b/libs/ui/components/src/index.ts
@@ -1,3 +1,4 @@
+export * from './lib/add-playlist-menu/add-playlist-menu.component';
 export * from './lib/art-player/art-player.component';
 export * from './lib/audio-player/audio-player.component';
 export * from './lib/channel-list-container/channel-list-container.component';
diff --git a/libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.html b/libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.html
new file mode 100644
index 000000000..124fdc7bb
--- /dev/null
+++ b/libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.html
@@ -0,0 +1,43 @@
+<mat-menu #addPlaylistMenu="matMenu">
+    <button
+        mat-menu-item
+        [attr.aria-label]="'HOME.TABS.FILE_UPLOAD' | translate"
+        (click)="onPlaylistTypeClick('file')"
+    >
+        <mat-icon>attach_file</mat-icon>
+        <span>{{ 'HOME.TABS.FILE_UPLOAD' | translate }}</span>
+    </button>
+    <button
+        mat-menu-item
+        [attr.aria-label]="'HOME.TABS.URL_UPLOAD' | translate"
+        (click)="onPlaylistTypeClick('url')"
+    >
+        <mat-icon>link</mat-icon>
+        <span>{{ 'HOME.TABS.URL_UPLOAD' | translate }}</span>
+    </button>
+    <button
+        mat-menu-item
+        [attr.aria-label]="'HOME.TABS.TEXT_IMPORT' | translate"
+        (click)="onPlaylistTypeClick('text')"
+    >
+        <mat-icon>text_format</mat-icon>
+        <span>{{ 'HOME.TABS.TEXT_IMPORT' | translate }}</span>
+    </button>
+    <mat-divider></mat-divider>
+    <button
+        mat-menu-item
+        [attr.aria-label]="'HOME.TABS.XTREME_IMPORT' | translate"
+        (click)="onPlaylistTypeClick('xtream')"
+    >
+        <mat-icon>video_library</mat-icon>
+        <span>{{ 'HOME.TABS.XTREME_IMPORT' | translate }}</span>
+    </button>
+    <button
+        mat-menu-item
+        [attr.aria-label]="'HOME.TABS.STALKER_PORTAL_IMPORT' | translate"
+        (click)="onPlaylistTypeClick('stalker')"
+    >
+        <mat-icon>dashboard</mat-icon>
+        <span>{{ 'HOME.TABS.STALKER_PORTAL_IMPORT' | translate }}</span>
+    </button>
+</mat-menu>
diff --git a/libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.ts b/libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.ts
new file mode 100644
index 000000000..7da331844
--- /dev/null
+++ b/libs/ui/components/src/lib/add-playlist-menu/add-playlist-menu.component.ts
@@ -0,0 +1,22 @@
+import { Component, output, viewChild } from '@angular/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { TranslateModule } from '@ngx-translate/core';
+
+export type PlaylistType = 'xtream' | 'url' | 'text' | 'file' | 'stalker';
+
+@Component({
+    selector: 'app-add-playlist-menu',
+    templateUrl: './add-playlist-menu.component.html',
+    imports: [MatDividerModule, MatIconModule, MatMenuModule, TranslateModule],
+})
+export class AddPlaylistMenuComponent {
+    readonly menu = viewChild.required<MatMenu>('addPlaylistMenu');
+
+    readonly playlistTypeSelected = output<PlaylistType>();
+
+    onPlaylistTypeClick(type: PlaylistType): void {
+        this.playlistTypeSelected.emit(type);
+    }
+}