refactor: move global favorites to header

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

@@ -34,6 +34,14 @@
             <app-add-playlist-menu
                 (playlistTypeSelected)="openAddPlaylistDialog($event)"
             />
+            <button
+                mat-icon-button
+                (click)="navigateToGlobalFavorites()"
+                [matTooltip]="'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate"
+                data-test-id="global-favorites"
+            >
+                <mat-icon>star</mat-icon>
+            </button>
             <!-- Combined Filter & Sort button -->
             <button
                 mat-icon-button

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

@@ -18,6 +18,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { DataService } from 'services';
+import { GLOBAL_FAVORITES_PLAYLIST_ID } from 'shared-interfaces';
 //import { shell } from 'electron';
 import { AddPlaylistMenuComponent, PlaylistType } from 'components';
 import { HomeComponent } from '../../../home/home.component';
@@ -78,6 +79,13 @@ export class HeaderComponent implements OnInit {
         this.router.navigate(['/settings']);
     }
 
+    /**
+     * Navigates to the global favorites view
+     */
+    navigateToGlobalFavorites(): void {
+        this.router.navigate(['playlists', GLOBAL_FAVORITES_PLAYLIST_ID]);
+    }
+
     /**
      * Opens the provided URL string in new browser window
      * @param url url to open

libs/ui/components/src/lib/recent-playlists/recent-playlists.component.html

@@ -14,23 +14,6 @@
                 }
             } @else {
                 <mat-nav-list class="playlists-list">
-                    <mat-list-item (click)="navigateToGlobalFavorites()">
-                        <mat-icon class="favorites-icon" matListItemIcon
-                            >star</mat-icon
-                        >
-                        <div matListItemTitle>
-                            {{
-                                'HOME.PLAYLISTS.GLOBAL_FAVORITES'
-                                    | translate
-                            }}
-                        </div>
-                        <div matListItemLine class="meta">
-                            {{
-                                'HOME.PLAYLISTS.GLOBAL_FAVORITES_DESCRIPTION'
-                                    | translate
-                            }}
-                        </div>
-                    </mat-list-item>
                     @for (
                         item of data.playlists;
                         track item._id;

libs/ui/components/src/lib/recent-playlists/recent-playlists.component.ts

@@ -18,11 +18,7 @@ import {
 import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
 import { BehaviorSubject, combineLatest, map, tap } from 'rxjs';
 import { DatabaseService, DataService, SortService } from 'services';
-import {
-    GLOBAL_FAVORITES_PLAYLIST_ID,
-    PLAYLIST_UPDATE,
-    PlaylistMeta,
-} from 'shared-interfaces';
+import { PLAYLIST_UPDATE, PlaylistMeta } from 'shared-interfaces';
 import { DialogService } from '../confirm-dialog/dialog.service';
 import { PlaylistType } from '../add-playlist-menu/add-playlist-menu.component';
 import { EmptyStateComponent } from './empty-state/empty-state.component';
@@ -147,11 +143,6 @@ export class RecentPlaylistsComponent {
         );
     }
 
-    navigateToGlobalFavorites() {
-        this.router.navigate(['playlists', GLOBAL_FAVORITES_PLAYLIST_ID]);
-        this.playlistClicked.emit(GLOBAL_FAVORITES_PLAYLIST_ID);
-    }
-
     onAddPlaylist(playlistType: PlaylistType) {
         this.addPlaylistClicked.emit(playlistType);
     }