feat(frontend): ✨ project list headers adapt to sorting and print mode

libs/feature/project-list/src/lib/project-list.component.html

@@ -3,7 +3,13 @@
   @if (shouldShowTopProjectsSection()) {
   <section class="top-projects-section page-break-after">
     <lib-section-header
-      text="Top Matching Projects"
+      [text]="
+        projectSortOrder() === 'date'
+          ? 'Projects (sorted by Date)'
+          : isPrintMode()
+          ? 'Projects (sorted by Relevance)'
+          : 'Top Matching Projects'
+      "
       [printMode]="isPrintMode()"
     />
 
@@ -42,9 +48,9 @@
   <!-- Other projects section -->
   @if (shouldShowOtherProjectsSection()) {
   <section class="other-projects-section">
+    @if (!isPrintMode()) {
     <lib-section-header text="Other Projects" [printMode]="isPrintMode()" />
-
-    @if (showSkeletons$ | async) { @for (skeleton of
+    } @if (showSkeletons$ | async) { @for (skeleton of
     filteredOtherProjectSkeletons(); track skeleton) {
     <ngx-skeleton-loader
       class="project-item-skeleton project-item-skeleton--compact"

libs/feature/project-list/src/lib/project-list.component.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, DestroyRef, inject, input } from '@angular/core';
+import { Component, DestroyRef, inject, input, Signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { CustomizationStateService } from '@portfolio/customization-state';
 import { SearchEngineService } from '@portfolio/search-engine-angular';
-import { Project } from '@portfolio/search-engine-domain';
+import { Project, ProjectSortOrder } from '@portfolio/search-engine-domain';
 import { SearchTagService } from '@portfolio/search-tags';
 import { SectionHeaderComponent } from '@portfolio/section-header';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -33,8 +33,12 @@ export class ProjectListComponent {
   private readonly searchEngineService = inject(SearchEngineService);
   private readonly searchTagService = inject(SearchTagService);
   private readonly destroyRef = inject(DestroyRef);
-  protected readonly isPrintMode = inject(CustomizationStateService)
-    .isPrintMode;
+  private readonly customizationStateService = inject(
+    CustomizationStateService
+  );
+  protected readonly isPrintMode = this.customizationStateService.isPrintMode;
+  protected readonly projectSortOrder: Signal<ProjectSortOrder> =
+    this.customizationStateService.projectSortOrder;
 
   protected readonly projectsOrder$: Observable<Project[]> =
     this.customOrderService.projectsInOrder$;