refactor(stalker): adapt store calls, enhance recently viewed, favorites, download manger layout

apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html

@@ -33,6 +33,16 @@
                     ')'
             }}
         </h2>
+        @if (showHeaderAction()) {
+            <button
+                mat-icon-button
+                [matTooltip]="headerActionTooltip()"
+                [disabled]="!favorites().length"
+                (click)="onHeaderActionClick()"
+            >
+                <mat-icon>{{ headerActionIcon() }}</mat-icon>
+            </button>
+        }
     </div>
     <div class="scrollable-content">
         @if (favorites().length) {
@@ -44,7 +54,10 @@
                         [type]="item.type"
                         [date]="item.added_at"
                         [showRemoveButton]="true"
-                        [removeTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
+                        [removeTooltip]="
+                            removeTooltip() ||
+                            ('CHANNELS.REMOVE_FAVORITE' | translate)
+                        "
                         (cardClick)="openFavorite(item)"
                         (remove)="removeFromFavorites(item)"
                     />
@@ -52,7 +65,7 @@
             </div>
         } @else {
             <div class="no-items">
-                <mat-icon>favorite_border</mat-icon>
+                <mat-icon>{{ emptyIcon() }}</mat-icon>
                 <p>No items in the selected category</p>
             </div>
         }

apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.scss

@@ -20,6 +20,10 @@
     text-transform: capitalize;
     padding: 16px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
 
     h2 {
         margin: 0;

apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.ts

@@ -1,6 +1,7 @@
 import { Component, input, output } from '@angular/core';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
 import { TranslatePipe } from '@ngx-translate/core';
 import { PlaylistSwitcherComponent, ResizableDirective } from 'components';
 import { CategoryViewComponent } from '../../../xtream-tauri/category-view/category-view.component';
@@ -21,6 +22,7 @@ import { ContentCardComponent } from '../content-card/content-card.component';
         PlaylistSwitcherComponent,
         ResizableDirective,
         TranslatePipe,
+        MatTooltip,
     ],
 })
 export class FavoritesLayoutComponent {
@@ -30,10 +32,16 @@ export class FavoritesLayoutComponent {
     readonly playlistTitle = input<string>('Playlist');
     readonly selectedCategoryId = input<string>('movie');
     readonly titleTranslationString = input<string>('CHANNELS.FAVORITES');
+    readonly removeTooltip = input<string>('');
+    readonly emptyIcon = input<string>('favorite_border');
+    readonly showHeaderAction = input<boolean>(false);
+    readonly headerActionIcon = input<string>('delete_sweep');
+    readonly headerActionTooltip = input<string>('');
 
     readonly categoryClicked = output<any>();
     readonly removeFavorite = output<any>();
     readonly openItem = output<any>();
+    readonly headerActionClicked = output<void>();
 
     setCategoryId(categoryId: any) {
         this.categoryClicked.emit({ category_id: categoryId });
@@ -46,4 +54,8 @@ export class FavoritesLayoutComponent {
     openFavorite(item: any) {
         this.openItem.emit(item);
     }
+
+    onHeaderActionClick() {
+        this.headerActionClicked.emit();
+    }
 }