emails

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

@@ -99,6 +99,23 @@
               <textarea matInput formControlName="description" rows="4"></textarea>
             </mat-form-field>
 
+            <mat-form-field appearance="outline">
+              <mat-label>E-Mail-Erinnerung</mat-label>
+              <input matInput type="datetime-local" formControlName="reminderAt" />
+              <mat-icon matPrefix aria-hidden="true">notifications</mat-icon>
+              @if (listForm.controls.reminderAt.value) {
+                <button
+                  mat-icon-button
+                  matSuffix
+                  type="button"
+                  aria-label="Erinnerung entfernen"
+                  (click)="clearReminder()"
+                >
+                  <mat-icon aria-hidden="true">close</mat-icon>
+                </button>
+              }
+            </mat-form-field>
+
             <div class="list-form-actions" [class.create-actions]="isCreateMode()">
               <button mat-flat-button type="submit" [disabled]="saving() || creatingWithAi()">
                 @if (saving()) {
@@ -129,6 +146,14 @@
         } @else {
           <div class="list-summary">
             <p>{{ list()?.description || 'Keine Beschreibung hinterlegt.' }}</p>
+            @if (list()?.reminderAt) {
+              <div class="inline-empty">
+                <mat-icon aria-hidden="true">notifications</mat-icon>
+                <span>
+                  Erinnerung am {{ list()!.reminderAt | date: 'dd.MM.yyyy, HH:mm' }}
+                </span>
+              </div>
+            }
           </div>
         }
       </mat-card-content>

listify-client/src/app/lists/list-detail/list-detail.component.ts

@@ -105,6 +105,7 @@ export class ListDetailComponent implements OnInit {
   protected readonly listForm = this.formBuilder.group({
     name: ['', [Validators.required]],
     description: [''],
+    reminderAt: [''],
   });
 
   protected readonly itemForm = this.formBuilder.group({
@@ -118,7 +119,7 @@ export class ListDetailComponent implements OnInit {
     if (this.isCreateMode()) {
       this.loading.set(false);
       this.editing.set(true);
-      this.listForm.reset({ name: '', description: '' });
+      this.listForm.reset({ name: '', description: '', reminderAt: '' });
       return;
     }
 
@@ -420,6 +421,7 @@ export class ListDetailComponent implements OnInit {
       this.listForm.reset({
         name: list.name,
         description: list.description ?? '',
+        reminderAt: this.toDatetimeLocalValue(list.reminderAt),
       });
     }
 
@@ -544,6 +546,7 @@ export class ListDetailComponent implements OnInit {
       this.listForm.reset({
         name: list.name,
         description: list.description ?? '',
+        reminderAt: this.toDatetimeLocalValue(list.reminderAt),
       });
     }
   }
@@ -562,9 +565,40 @@ export class ListDetailComponent implements OnInit {
     return {
       name: formValue.name.trim(),
       description: formValue.description.trim() || undefined,
+      reminderAt: this.datetimeLocalToIso(formValue.reminderAt),
     };
   }
 
+  protected clearReminder(): void {
+    this.listForm.controls.reminderAt.setValue('');
+  }
+
+  private datetimeLocalToIso(value: string): string | null {
+    const normalizedValue = value.trim();
+
+    if (!normalizedValue) {
+      return null;
+    }
+
+    const date = new Date(normalizedValue);
+    return Number.isNaN(date.getTime()) ? null : date.toISOString();
+  }
+
+  private toDatetimeLocalValue(value?: string | null): string {
+    if (!value) {
+      return '';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    const timezoneOffsetMs = date.getTimezoneOffset() * 60 * 1000;
+    return new Date(date.getTime() - timezoneOffsetMs).toISOString().slice(0, 16);
+  }
+
   private uncheckedFirst(items: UserListItem[]): UserListItem[] {
     return items
       .map((item, index) => ({ item, index }))

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

@@ -144,6 +144,12 @@
                 <mat-icon aria-hidden="true">schedule</mat-icon>
                 {{ list.updatedAt | date: 'dd.MM.yyyy' }}
               </span>
+              @if (list.reminderAt) {
+                <span>
+                  <mat-icon aria-hidden="true">notifications</mat-icon>
+                  {{ list.reminderAt | date: 'dd.MM.yyyy, HH:mm' }}
+                </span>
+              }
               @if (list.collaborators.length > 0) {
                 <span>
                   <mat-icon aria-hidden="true">group</mat-icon>

listify-client/src/app/lists/lists.models.ts

@@ -35,6 +35,7 @@ export interface UserList {
   name: string;
   description?: string;
   kind: ListTemplateKind;
+  reminderAt?: string | null;
   items: UserListItem[];
   collaborators: UserListCollaborator[];
   createdAt: string;
@@ -45,12 +46,14 @@ export interface CreateListRequest {
   name: string;
   description?: string;
   kind?: ListTemplateKind;
+  reminderAt?: string | null;
 }
 
 export interface UpdateListRequest {
   name?: string;
   description?: string;
   kind?: ListTemplateKind;
+  reminderAt?: string | null;
 }
 
 export interface AddListItemRequest {

listify-client/src/app/templates/templates.models.ts

@@ -42,6 +42,7 @@ export interface UserList {
   name: string;
   description?: string;
   kind: ListTemplateKind;
+  reminderAt?: string | null;
   items: UserListItem[];
   createdAt: string;
   updatedAt: string;