Initial

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

@@ -0,0 +1,90 @@
+<section class="workspace-page">
+  <header class="page-header">
+    <div>
+      <h1>Listen</h1>
+      <p>Deine persoenlichen Listify-Listen.</p>
+    </div>
+
+    <a mat-flat-button routerLink="/lists/new">
+      <mat-icon aria-hidden="true">add</mat-icon>
+      Neue Liste
+    </a>
+  </header>
+
+  @if (loading()) {
+    <mat-card class="state-card" appearance="outlined">
+      <mat-card-content>
+        <mat-progress-spinner mode="indeterminate" diameter="40" />
+        <h2>Listen werden geladen</h2>
+      </mat-card-content>
+    </mat-card>
+  } @else if (errorMessage()) {
+    <mat-card class="state-card error-state" appearance="outlined">
+      <mat-card-content>
+        <mat-icon aria-hidden="true">error</mat-icon>
+        <h2>Listen konnten nicht geladen werden</h2>
+        <p>{{ errorMessage() }}</p>
+        <button mat-stroked-button type="button" (click)="loadLists()">
+          <mat-icon aria-hidden="true">refresh</mat-icon>
+          Erneut laden
+        </button>
+      </mat-card-content>
+    </mat-card>
+  } @else if (hasLists()) {
+    <div class="template-grid">
+      @for (list of lists(); 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-header>
+
+          <mat-card-content>
+            @if (list.description) {
+              <p class="template-description">{{ list.description }}</p>
+            }
+
+            <div class="template-meta">
+              <span>
+                <mat-icon aria-hidden="true">done_all</mat-icon>
+                {{ checkedCount(list) }} / {{ list.items.length }} erledigt
+              </span>
+              <span>
+                <mat-icon aria-hidden="true">schedule</mat-icon>
+                {{ list.updatedAt | date: 'dd.MM.yyyy' }}
+              </span>
+            </div>
+
+            @if (list.items.length > 0) {
+              <ul class="template-items">
+                @for (item of list.items.slice(0, 4); track item.id) {
+                  <li>
+                    <mat-icon aria-hidden="true">
+                      {{ item.checked ? 'check_circle' : 'radio_button_unchecked' }}
+                    </mat-icon>
+                    <span>{{ item.title }}</span>
+                  </li>
+                }
+              </ul>
+            }
+          </mat-card-content>
+
+          <mat-card-actions align="end">
+            <a mat-button [routerLink]="['/lists', list.id]">
+              <mat-icon aria-hidden="true">open_in_new</mat-icon>
+              Oeffnen
+            </a>
+          </mat-card-actions>
+        </mat-card>
+      }
+    </div>
+  } @else {
+    <mat-card class="state-card" appearance="outlined">
+      <mat-card-content>
+        <mat-icon aria-hidden="true">format_list_bulleted</mat-icon>
+        <h2>Noch keine Listen</h2>
+        <p>Erstelle eine Liste aus einem Template oder lege eine neue Liste an.</p>
+      </mat-card-content>
+    </mat-card>
+  }
+</section>