Onboarding

listify-client/src/app/lists/lists.component.html

@@ -31,12 +31,100 @@
       </mat-card-content>
     </mat-card>
   } @else if (hasLists()) {
+    <section class="list-controls" aria-label="Listen filtern und sortieren">
+      <mat-form-field appearance="outline" class="search-field">
+        <mat-label>Listen suchen</mat-label>
+        <mat-icon matPrefix aria-hidden="true">search</mat-icon>
+        <input
+          matInput
+          type="search"
+          [value]="searchTerm()"
+          (input)="searchTerm.set($any($event.target).value)"
+        />
+        @if (searchTerm()) {
+          <button
+            mat-icon-button
+            matSuffix
+            type="button"
+            aria-label="Suche loeschen"
+            (click)="searchTerm.set('')"
+          >
+            <mat-icon aria-hidden="true">close</mat-icon>
+          </button>
+        }
+      </mat-form-field>
+
+      <div class="filter-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Typ</mat-label>
+          <mat-select
+            [value]="kindFilter()"
+            (selectionChange)="kindFilter.set($event.value)"
+          >
+            @for (option of kindOptions; track option.value) {
+              <mat-option [value]="option.value">{{ option.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Sortierung</mat-label>
+          <mat-select
+            [value]="sortOption()"
+            (selectionChange)="sortOption.set($event.value)"
+          >
+            @for (option of sortOptions; track option.value) {
+              <mat-option [value]="option.value">{{ option.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <div class="status-row">
+        <mat-button-toggle-group
+          [value]="statusFilter()"
+          (change)="statusFilter.set($event.value)"
+          aria-label="Statusfilter"
+        >
+          <mat-button-toggle value="all">Alle</mat-button-toggle>
+          <mat-button-toggle value="open">Offen</mat-button-toggle>
+          <mat-button-toggle value="completed">Erledigt</mat-button-toggle>
+        </mat-button-toggle-group>
+
+        @if (activeFilterCount() > 0 || sortOption() !== 'updated-desc') {
+          <button mat-button type="button" (click)="resetFilters()">
+            <mat-icon aria-hidden="true">restart_alt</mat-icon>
+            Zuruecksetzen
+          </button>
+        }
+      </div>
+    </section>
+
+    @if (!hasVisibleLists()) {
+      <mat-card class="state-card" appearance="outlined">
+        <mat-card-content>
+          <mat-icon aria-hidden="true">filter_alt_off</mat-icon>
+          <h2>Keine Treffer</h2>
+          <p>Mit den aktuellen Filtern wurde keine Liste gefunden.</p>
+          <button mat-stroked-button type="button" (click)="resetFilters()">
+            <mat-icon aria-hidden="true">restart_alt</mat-icon>
+            Filter zuruecksetzen
+          </button>
+        </mat-card-content>
+      </mat-card>
+    } @else {
+      <p class="result-count">
+        {{ visibleLists().length }} von {{ lists().length }} Listen
+      </p>
+
     <div class="template-grid">
-      @for (list of lists(); track list.id) {
+      @for (list of visibleLists(); track list.id) {
         <mat-card class="template-card" appearance="outlined">
           <mat-card-header>
             <mat-card-title>{{ list.name }}</mat-card-title>
-            <mat-card-subtitle>{{ kindLabel(list.kind) }}</mat-card-subtitle>
+            <mat-card-subtitle>
+              {{ kindLabel(list.kind) }} - {{ progressLabel(list) }}
+            </mat-card-subtitle>
           </mat-card-header>
 
           <mat-card-content>
@@ -70,7 +158,11 @@
           </mat-card-content>
 
           <mat-card-actions align="end">
-            <a mat-button [routerLink]="['/lists', list.id]">
+            <a
+              mat-button
+              [routerLink]="['/lists', list.id]"
+              [attr.data-onboarding]="onboarding.isListOpenTarget(list.id) ? 'open-list' : null"
+            >
               <mat-icon aria-hidden="true">open_in_new</mat-icon>
               Oeffnen
             </a>
@@ -78,6 +170,7 @@
         </mat-card>
       }
     </div>
+    }
   } @else {
     <mat-card class="state-card" appearance="outlined">
       <mat-card-content>