refactor(components): use OnPush and signals in components

Angular 22 defaults to OnPush, so Eager is removed.
Template state is now signals, so sorting needs no detectChanges.
Game of Life execution time now updates live.
Remove the unused ImageDialogComponent and turn the OnPush lint rule
back on.

src/app/layout/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import {TopbarComponent} from '../topbar/topbar.component';
 import {TranslatePipe} from '@ngx-translate/core';
@@ -10,7 +10,6 @@ import {SeoService} from '../../service/seo.service';
   selector: 'app-root',
   imports: [RouterLink, RouterOutlet, TopbarComponent, TranslatePipe, ParticleBackgroundComponent],
   templateUrl: './app.component.html',
-  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './app.component.scss'
 })
 export class AppComponent {

src/app/layout/imageDialog/image.component.ts

@@ -1,72 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-
-@Component({
-  imports: [MatDialogModule, MatButtonModule, MatIconModule],
-  template: `
-    <div class="dialog">
-      <div class="topbar">
-        <div class="title">{{ data.title }}</div>
-        <button mat-icon-button mat-dialog-close aria-label="Schließen">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
-
-      <div class="stage">
-        <img class="full" [src]="data.src" [alt]="data.title" />
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  styles: [`
-    .dialog {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-
-    .topbar {
-      flex: 0 0 auto;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-
-      padding: 14px 16px;
-    }
-
-    .title {
-      font-weight: 600;
-      line-height: 1.2;
-      max-width: calc(100% - 56px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .stage {
-      flex: 1 1 auto;
-      padding: 0 16px 16px;
-      min-height: 0;
-      display: grid;
-      place-items: center;
-    }
-
-    .full {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      border-radius: 12px;
-    }
-  `],
-})
-export class ImageDialogComponent {
-  data = inject<{
-    title: string;
-    src: string;
-}>(MAT_DIALOG_DATA);
-
-
-}

src/app/layout/topbar/topbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
@@ -21,7 +21,6 @@ import {RouterConstants} from '../../constants/RouterConstants';
     TranslatePipe, MatDivider, NgOptimizedImage
   ],
   templateUrl: './topbar.component.html',
-  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './topbar.component.scss'
 })
 export class TopbarComponent {