Chore: Upgrade to Angular v18

Chore: Upgrade to Python 3.12
Chore: Upgrade to psycopg3

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html

@@ -8,7 +8,9 @@
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #name formControlName="name" />
-          <mat-error *ngIf="form.controls['name'].hasError('required')"> Name is <strong>required</strong> </mat-error>
+          @if (form.controls['name'].hasError('required')) {
+            <mat-error> Name is <strong>required</strong> </mat-error>
+          }
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
@@ -22,9 +24,9 @@
           [displayWith]="displayFn"
           (optionSelected)="selected($event)"
         >
-          <mat-option *ngFor="let customer of customers | async" [value]="customer"
-            >{{ customer.name }} - {{ customer.phone }}</mat-option
-          >
+          @for (customer of customers | async; track customer) {
+            <mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
+          }
         </mat-autocomplete>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
@@ -65,6 +67,8 @@
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
+    @if (!!item.id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>