diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.html b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.html index 306754964..2c4756564 100644 --- a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.html +++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.html @@ -137,4 +137,32 @@ } + + @if (showPlaylistInfo() || showAccountInfo()) { + +
+ @if (showPlaylistInfo()) { + + } + @if (showAccountInfo()) { + + } +
+ } diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss index 560251765..39cf02424 100644 --- a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss +++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss @@ -371,6 +371,40 @@ } } +.context-actions-section { + padding: 6px 8px 8px; + + .context-action-item { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 8px 10px; + border: none; + border-radius: 8px; + background: transparent; + color: var(--mat-sys-on-surface-variant); + font: inherit; + font-size: 0.86em; + font-weight: 500; + cursor: pointer; + transition: + background 0.15s ease, + color 0.15s ease; + + &:hover { + background: var(--mat-sys-surface-container); + color: var(--mat-sys-on-surface); + } + + mat-icon { + font-size: 18px; + width: 18px; + height: 18px; + } + } +} + @media only screen and (max-width: 480px) { .playlist-info { max-width: 140px; diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts index 6decf0151..782b61ffc 100644 --- a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts +++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts @@ -15,6 +15,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; import { MatIconButton } from '@angular/material/button'; import { MatRippleModule } from '@angular/material/core'; +import { MatDivider } from '@angular/material/divider'; import { MatIcon } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatMenu, MatMenuModule, MatMenuTrigger } from '@angular/material/menu'; @@ -92,6 +93,7 @@ const M3U_SECTIONS = ['all', 'groups', 'favorites', 'recent'] as const; imports: [ DatePipe, FormsModule, + MatDivider, MatIcon, MatIconButton, MatInputModule, @@ -112,8 +114,16 @@ export class PlaylistSwitcherComponent { readonly currentTitle = input.required(); /** Subtitle to display (e.g., "123 Channels" or "Xtream Code") */ readonly subtitle = input(''); + /** Whether the "Playlist Info" action is available */ + readonly showPlaylistInfo = input(false); + /** Whether the "Account Info" action is available */ + readonly showAccountInfo = input(false); /** Emitted when a different playlist is selected */ readonly playlistSelected = output(); + /** Emitted when user clicks "Playlist Info" */ + readonly playlistInfoRequested = output(); + /** Emitted when user clicks "Account Info" */ + readonly accountInfoRequested = output(); readonly menuTrigger = viewChild.required('menuTrigger'); readonly playlistMenu = viewChild.required('playlistMenu'); diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html index 4fb9d984f..a1bb84c70 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html @@ -21,6 +21,13 @@ @if (primaryContextLinks().length > 0) {
+ @if (railPlaylistLabel(); as label) { + {{ label }} + }