Add CLAUDE.md, use snackbar for WebGPU errors

Add a new CLAUDE.md project guidelines file. Update BabylonCanvas to replace alert() with an Angular Material MatSnackBar and use ngx-translate for a localized WebGPU-not-supported message (injects MatSnackBar and TranslateService and updates imports). Add the corresponding WEBGPU.NOT_SUPPORTED entries to en.json and de.json for localization.

src/app/shared/components/render-canvas/babylon-canvas.component.ts

@@ -1,4 +1,6 @@
 import {AfterViewInit, Component, ElementRef, EventEmitter, inject, Input, NgZone, OnDestroy, Output, ViewChild} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {TranslateService} from '@ngx-translate/core';
 import {ArcRotateCamera, Camera, MeshBuilder, Scene, ShaderLanguage, ShaderMaterial, Vector2, Vector3, WebGPUEngine} from '@babylonjs/core';
 
 export interface RenderConfig {
@@ -26,6 +28,8 @@ export interface SceneEventData {
 })
 export class BabylonCanvas implements AfterViewInit, OnDestroy {
   readonly ngZone = inject(NgZone);
+  private readonly snackBar = inject(MatSnackBar);
+  private readonly translate = inject(TranslateService);
 
   @ViewChild('renderCanvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
 
@@ -72,9 +76,11 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
         engine: this.engine
       });
       this.addRenderLoop(canvas);
+
     })
       .catch(() => {
-        alert("WebGPU could not be started. Please check your browser if it supports WebGPU.");
+        const message = this.translate.instant('WEBGPU.NOT_SUPPORTED');
+        this.snackBar.open(message, 'OK', { duration: 8000, horizontalPosition: "center", verticalPosition: "top" });
         this.engine = null!;
       });
   }