feat(header): add global search and recent buttons with functionality

apps/web/src/app/home/home.component.html

@@ -2,6 +2,8 @@
     [title]="'HOME.TITLE' | translate"
     [subtitle]="'HOME.SUBTITLE' | translate"
     (searchQuery)="onSearchQueryChange($event)"
+    (globalSearchClicked)="openGlobalSearch()"
+    (globalRecentClicked)="openGlobalRecent()"
 />
 <app-recent-playlists
     class="recent-playlists"

apps/web/src/app/home/home.component.ts

@@ -4,6 +4,8 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { PlaylistType, RecentPlaylistsComponent } from 'components';
 import { AddPlaylistDialogComponent } from '../shared/components/add-playlist/add-playlist-dialog.component';
 import { HeaderComponent } from '../shared/components/header/header.component';
+import { GlobalRecentlyViewedComponent } from '../xtream-tauri/recently-viewed/global-recently-viewed.component';
+import { GlobalSearchResultsComponent } from '../xtream-tauri/search-results/global-search-results.component';
 
 @Component({
     selector: 'app-home',
@@ -29,4 +31,26 @@ export class HomeComponent {
             }
         );
     }
+
+    openGlobalSearch(): void {
+        this.dialog.open(GlobalSearchResultsComponent, {
+            width: '100%',
+            height: '100%',
+            maxWidth: '100%',
+            panelClass: 'global-search-overlay',
+            data: { isGlobalSearch: true },
+        });
+    }
+
+    openGlobalRecent(): void {
+        this.dialog.open(GlobalRecentlyViewedComponent, {
+            width: '100%',
+            height: '100%',
+            maxWidth: '100%',
+            panelClass: 'global-search-overlay',
+            data: { isGlobal: true },
+            hasBackdrop: true,
+            disableClose: false,
+        });
+    }
 }

apps/web/src/app/shared/components/header/header.component.html

@@ -44,6 +44,26 @@
             >
                 <mat-icon>star</mat-icon>
             </button>
+            <button
+                mat-icon-button
+                (click)="onGlobalSearchClick()"
+                [matTooltip]="
+                    ('PORTALS.SIDEBAR.SEARCH' | translate) + ' (Ctrl/Cmd+F)'
+                "
+                data-test-id="global-search"
+            >
+                <mat-icon>travel_explore</mat-icon>
+            </button>
+            <button
+                mat-icon-button
+                (click)="onGlobalRecentClick()"
+                [matTooltip]="
+                    ('PORTALS.SIDEBAR.RECENT' | translate) + ' (Ctrl/Cmd+R)'
+                "
+                data-test-id="global-recent"
+            >
+                <mat-icon>history</mat-icon>
+            </button>
             <button
                 mat-icon-button
                 #filterMenuTrigger="matMenuTrigger"
@@ -162,6 +182,28 @@
                     <mat-icon>star</mat-icon>
                     <span>{{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate }}</span>
                 </button>
+                <button
+                    mat-menu-item
+                    (click)="onGlobalSearchClick()"
+                    data-test-id="mobile-global-search"
+                >
+                    <mat-icon>travel_explore</mat-icon>
+                    <span
+                        >{{ 'PORTALS.SIDEBAR.SEARCH' | translate }}
+                        (Ctrl/Cmd+F)</span
+                    >
+                </button>
+                <button
+                    mat-menu-item
+                    (click)="onGlobalRecentClick()"
+                    data-test-id="mobile-global-recent"
+                >
+                    <mat-icon>history</mat-icon>
+                    <span
+                        >{{ 'PORTALS.SIDEBAR.RECENT' | translate }}
+                        (Ctrl/Cmd+R)</span
+                    >
+                </button>
                 <button
                     mat-menu-item
                     #mobileFilterTrigger="matMenuTrigger"

apps/web/src/app/shared/components/header/header.component.ts

@@ -64,6 +64,8 @@ export class HeaderComponent implements OnInit {
     readonly title = input.required<string>();
     readonly subtitle = input.required<string>();
     readonly searchQuery = output<string>();
+    readonly globalSearchClicked = output<void>();
+    readonly globalRecentClicked = output<void>();
 
     isHome = true;
 
@@ -124,4 +126,12 @@ export class HeaderComponent implements OnInit {
     onSearchQueryUpdate(query: string): void {
         this.searchQuery.emit(query);
     }
+
+    onGlobalSearchClick(): void {
+        this.globalSearchClicked.emit();
+    }
+
+    onGlobalRecentClick(): void {
+        this.globalRecentClicked.emit();
+    }
 }

apps/web/src/styles.scss

@@ -87,3 +87,10 @@ textarea,
 .cdk-overlay-backdrop {
     backdrop-filter: blur(4px);
 }
+
+// Full-screen overlay dialogs (global search/recent) must stay interactive in Electron.
+.global-search-overlay,
+.global-search-overlay .mat-mdc-dialog-surface,
+.global-search-overlay .mat-mdc-dialog-container {
+    app-region: no-drag;
+}