feat(portals): add option to see playlist info

src/app/xtream/navigation-bar/navigation-bar.component.html

@@ -10,6 +10,7 @@
         aria-label="Content Type"
         [value]="contentType"
         (change)="changeContentType($event.value)"
+        hideSingleSelectionIndicator
     >
         <mat-button-toggle
             *ngFor="
@@ -23,10 +24,19 @@
         </mat-button-toggle>
     </mat-button-toggle-group>
 
-    <button mat-button (click)="favoritesClicked.emit()">
-        <mat-icon>star</mat-icon>
-        <span class="button-label">{{ 'CHANNELS.FAVORITES' | translate }}</span>
-    </button>
+    <div>
+        <button mat-button (click)="openPlaylistDetails()">
+            <mat-icon>info</mat-icon>
+            <span class="button-label">{{ 'Info' | translate }}</span>
+        </button>
+
+        <button mat-button (click)="favoritesClicked.emit()">
+            <mat-icon>star</mat-icon>
+            <span class="button-label">{{
+                'CHANNELS.FAVORITES' | translate
+            }}</span>
+        </button>
+    </div>
 </div>
 <div id="sub-panel">
     <div class="breadcrumbs">
@@ -41,12 +51,15 @@
         </div>
     </div>
     <div class="search" *ngIf="searchVisible">
-        <input
-            class="search-input"
-            placeholder="Search by name"
-            type="search"
-            [ngModel]="searchPhrase()"
-            (ngModelChange)="searchPhraseUpdate.next($event)"
-        />
+        <mat-form-field class="search-input">
+            <mat-icon matPrefix>search</mat-icon>
+            <input
+                matInput
+                placeholder="Search by name"
+                type="search"
+                [ngModel]="searchPhrase()"
+                (ngModelChange)="searchPhraseUpdate.next($event)"
+            />
+        </mat-form-field>
     </div>
 </div>

src/app/xtream/navigation-bar/navigation-bar.component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 :host {
     position: relative;
 }
@@ -40,31 +42,36 @@
 
     .search {
         text-align: center;
-
-        .search-input {
-            padding: 6px 8px 6px 40px;
-            width: 250px;
-            border-radius: 5px;
-            border: 1px solid #333;
-            color: #000;
-            background: #ccc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
-            display: block;
-        }
     }
 }
 
+.search-input {
+    @include mat.form-field-density(-5);
+}
+
 /* stylelint-disable-next-line no-descending-specificity */
 ::ng-deep {
+
+    .search-input {
+        div {
+            border-radius: 20px;
+        }
+    }
+    
     .dark-theme {
         #navigation,
         #sub-panel {
-            background: black;
+            background: #1b1c1c;
         }
 
         #sub-panel {
             border-bottom: 1px solid #333;
         }
     }
+
+    div[matformfieldlineripple] {
+        display: none;
+    }
 }
 
 @media (max-width: 800px) {

src/app/xtream/navigation-bar/navigation-bar.component.ts

@@ -3,10 +3,16 @@ import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatDialog } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { RouterLink } from '@angular/router';
+import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
+import { PlaylistInfoComponent } from '../../home/recent-playlists/playlist-info/playlist-info.component';
+import { selectCurrentPlaylist } from '../../state/selectors';
 import { Breadcrumb } from '../breadcrumb.interface';
 import { ContentTypeNavigationItem } from '../content-type-navigation-item.interface';
 import { ContentType } from '../content-type.enum';
@@ -22,6 +28,8 @@ import { PortalStore } from '../portal.store';
         MatButtonModule,
         MatButtonToggleModule,
         MatIconModule,
+        MatInputModule,
+        MatFormFieldModule,
         NgFor,
         NgIf,
         RouterLink,
@@ -42,9 +50,12 @@ export class NavigationBarComponent {
     @Output() searchTextChanged = new EventEmitter<string>();
 
     ContentTypeEnum = ContentType;
+    dialog = inject(MatDialog);
     portalStore = inject(PortalStore);
+    store = inject(Store);
     searchPhrase = this.portalStore.searchPhrase;
     searchPhraseUpdate = new Subject<string>();
+    currentPlaylist = this.store.selectSignal(selectCurrentPlaylist);
 
     constructor() {
         this.searchPhraseUpdate
@@ -54,6 +65,12 @@ export class NavigationBarComponent {
             });
     }
 
+    openPlaylistDetails() {
+        this.dialog.open(PlaylistInfoComponent, {
+            data: this.currentPlaylist(),
+        });
+    }
+
     processBreadcrumbClick(item: Breadcrumb) {
         this.setSearchText('');
         this.breadcrumbClicked.emit(item);