feat(sort): implement sorting functionality for playlists with user-defined options

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

@@ -16,6 +16,7 @@ import { open } from '@tauri-apps/plugin-shell';
 import { NgxWhatsNewModule } from 'ngx-whats-new';
 import { HomeComponent } from '../../../home/home.component';
 import { DataService } from '../../../services/data.service';
+import { SortBy, SortOrder, SortService } from '../../../services/sort.service';
 import { WhatsNewService } from '../../../services/whats-new.service';
 import { setSelectedFilters } from '../../../state/actions';
 import { selectActiveTypeFilters } from '../../../state/selectors';
@@ -91,13 +92,18 @@ export class HeaderComponent implements OnInit {
 
     selectedTypeFilters = this.store.selectSignal(selectActiveTypeFilters);
 
+    SortBy = SortBy;
+    SortOrder = SortOrder;
+    currentSortOptions: { by: SortBy; order: SortOrder };
+
     constructor(
         private activatedRoute: ActivatedRoute,
         private dialog: MatDialog,
         private dataService: DataService,
         private router: Router,
         private store: Store,
-        private whatsNewService: WhatsNewService
+        private whatsNewService: WhatsNewService,
+        private sortService: SortService
     ) {
         effect(() => {
             if (this.selectedTypeFilters) {
@@ -107,6 +113,10 @@ export class HeaderComponent implements OnInit {
                 });
             }
         });
+
+        this.sortService.getSortOptions().subscribe((options) => {
+            this.currentSortOptions = options;
+        });
     }
 
     ngOnInit() {
@@ -174,4 +184,15 @@ export class HeaderComponent implements OnInit {
             })
         );
     }
+
+    setSortOptions(by: SortBy, order: SortOrder): void {
+        this.sortService.setSortOptions({ by, order });
+    }
+
+    isSortActive(by: SortBy, order: SortOrder): boolean {
+        return (
+            this.currentSortOptions?.by === by &&
+            this.currentSortOptions?.order === order
+        );
+    }
 }