feat(type-filter): filter playlists by type

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

@@ -21,14 +21,15 @@
         data-test-id="filter-playlist-by-name"
     >
         <mat-icon>search</mat-icon>
-    </button>
+    </button> -->
     <button
         mat-icon-button
+        [matMenuTriggerFor]="filterPlaylistMenu"
         [matTooltip]="'HOME.FILTER_BY_TYPE' | translate"
         data-test-id="filter-playlist-by-type"
     >
         <mat-icon>filter_list</mat-icon>
-    </button> -->
+    </button>
     <button
         *ngIf="isElectron; else pwaMenu"
         mat-icon-button
@@ -38,6 +39,24 @@
     >
         <mat-icon>settings</mat-icon>
     </button>
+
+    <mat-menu #filterPlaylistMenu="matMenu">
+        <section (click)="$event.stopPropagation()" class="filter-container">
+            <h4>{{ 'HOME.FILTER_BY_TYPE' | translate }}:</h4>
+            @for (type of playlistTypes; track $index) {
+                <p>
+                    <mat-checkbox
+                        (click)="$event.stopPropagation()"
+                        [checked]="true"
+                        (change)="onPlaylistFilterChange()"
+                        [(ngModel)]="type.checked"
+                        >{{ type.title }}</mat-checkbox
+                    >
+                </p>
+            }
+        </section>
+    </mat-menu>
+
     <mat-menu #addPlaylistMenu="matMenu">
         <button
             mat-menu-item

src/app/shared/components/header/header.component.scss

@@ -35,6 +35,10 @@
     display: flex;
 }
 
+.filter-container {
+    padding: 0 10px;
+}
+
 .add-playlist-btn {
     background-color: #3f51b5;
 }

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

@@ -1,17 +1,22 @@
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, effect } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxWhatsNewModule } from 'ngx-whats-new';
 import { HomeComponent } from '../../../home/home.component';
 import { DataService } from '../../../services/data.service';
 import { WhatsNewService } from '../../../services/whats-new.service';
+import { setSelectedFilters } from '../../../state/actions';
+import { selectActiveTypeFilters } from '../../../state/selectors';
 import { AboutDialogComponent } from '../about-dialog/about-dialog.component';
 import {
     AddPlaylistDialogComponent,
@@ -25,14 +30,17 @@ import {
     styleUrls: ['./header.component.scss'],
     imports: [
         AsyncPipe,
-        NgIf,
-        NgFor,
         MatButtonModule,
+        MatCheckboxModule,
+        MatDividerModule,
         MatIconModule,
         MatMenuModule,
-        MatDividerModule,
         MatTooltipModule,
+        NgIf,
+        NgFor,
+        FormsModule,
         NgxWhatsNewModule,
+        ReactiveFormsModule,
         TranslateModule,
     ],
 })
@@ -57,14 +65,43 @@ export class HeaderComponent implements OnInit {
 
     isHome = true;
 
-    /** Creates an instance of HeaderComponent */
+    playlistTypes = [
+        {
+            title: 'M3U (local, url, text)',
+            id: 'm3u',
+            checked: true,
+        },
+        {
+            title: 'Xtream',
+            id: 'xtream',
+            checked: true,
+        },
+        {
+            title: 'Stalker',
+            id: 'stalker',
+            checked: true,
+        },
+    ];
+
+    selectedTypeFilters = this.store.selectSignal(selectActiveTypeFilters);
+
     constructor(
         private activatedRoute: ActivatedRoute,
         private dialog: MatDialog,
         private dataService: DataService,
         private router: Router,
+        private store: Store,
         private whatsNewService: WhatsNewService
-    ) {}
+    ) {
+        effect(() => {
+            if (this.selectedTypeFilters) {
+                this.playlistTypes = this.playlistTypes.map((type) => {
+                    type.checked = this.selectedTypeFilters().includes(type.id);
+                    return type;
+                });
+            }
+        });
+    }
 
     ngOnInit() {
         this.isHome =
@@ -117,4 +154,14 @@ export class HeaderComponent implements OnInit {
             }
         );
     }
+
+    onPlaylistFilterChange() {
+        this.store.dispatch(
+            setSelectedFilters({
+                selectedFilters: this.playlistTypes
+                    .filter((f) => f.checked)
+                    .map((f) => f.id),
+            })
+        );
+    }
 }