From 012df30ae7b7aceed4c753f0215b10bcae1f1465 Mon Sep 17 00:00:00 2001
From: Waog <oliver.stadie@gmail.com>
Date: Wed, 12 Aug 2026 12:50:43 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E2=9C=A8=20project=20list=20?=
 =?UTF-8?q?headers=20adapt=20to=20sorting=20and=20print=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project-list/src/lib/project-list.component.html | 12 +++++++++---
 .../project-list/src/lib/project-list.component.ts   | 12 ++++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/libs/feature/project-list/src/lib/project-list.component.html b/libs/feature/project-list/src/lib/project-list.component.html
index 3eb9adf..d367680 100644
--- a/libs/feature/project-list/src/lib/project-list.component.html
+++ b/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"
diff --git a/libs/feature/project-list/src/lib/project-list.component.ts b/libs/feature/project-list/src/lib/project-list.component.ts
index 89d6dde..6481a6d 100644
--- a/libs/feature/project-list/src/lib/project-list.component.ts
+++ b/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$;