deck list neu, selektor in rot

src/app/deck-list.component.html

@@ -8,33 +8,41 @@
   </div>
 
   <!-- Decks anzeigen -->
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 flex flex-col">
+  <div class="flex flex-wrap gap-6">
+    <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 w-full md:w-1/2 lg:w-1/3 flex flex-col">
+      <!-- Deck-Header mit Toggle-Button -->
       <div class="flex justify-between items-center mb-4">
+        <div class="flex items-center space-x-2">
           <h2 class="text-xl font-semibold">{{ deck.name }}</h2>
-        
-        <!-- Anzahl der Bilder anzeigen, wenn ein Training aktiv ist -->
-        <span *ngIf="selectedDeck" class="text-gray-600">
-          {{ deck.images.length }} Bilder
-        </span>
-        
-        <!-- Löschen-Button anzeigen, wenn kein Training aktiv ist -->
-        <button *ngIf="!selectedDeck" (click)="deleteDeck(deck.name)" class="text-red-500 hover:text-red-700" title="Deck löschen">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          <span class="text-gray-600">({{ deck.images.length }} Bilder)</span>
+        </div>
+        <button (click)="toggleDeckExpansion(deck.id)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
+          <svg *ngIf="!isDeckExpanded(deck.id)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+          <svg *ngIf="isDeckExpanded(deck.id)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-180 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
           </svg>
         </button>
       </div>
 
-      <!-- Bildliste und Action-Buttons nur anzeigen, wenn kein Training aktiv ist -->
-      <ng-container *ngIf="!selectedDeck">
+      <!-- Bildliste und Action-Buttons nur anzeigen, wenn das Deck erweitert ist und kein Training aktiv ist -->
+      <ng-container *ngIf="isDeckExpanded(deck.id) && !selectedDeck">
         <!-- Liste der Bilder mit Anzahl der Boxen und Icons -->
         <ul class="mb-4">
           <li *ngFor="let image of deck.images" class="flex justify-between items-center py-2 border-b last:border-b-0">
-            <div class="flex items-center">
-              <span class="font-medium">{{ image.name }}</span>
+            <div class="flex items-center space-x-2">
+              <div class="relative group">
+                <!-- Tooltip Inhalt (Bild) -->
+                <div class="absolute left-0 bottom-full mb-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 pointer-events-none">
+                  <img src="/api/debug_image/{{image.id}}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover">
+                </div>
+                <!-- Bildname mit Tooltip -->
+                <span class="font-medium cursor-pointer">
+                  {{ image.name }}
+                </span>
+              </div>
               <span class="text-gray-600">({{ image.boxes.length }} Boxen)</span>
-              <img src="/api/debug_image/{{image.id}}/thumbnail.jpg">
             </div>
             <div class="flex space-x-2">
               <!-- Edit Icon -->

src/app/deck-list.component.ts

@@ -26,9 +26,13 @@ export class DeckListComponent implements OnInit {
 
   currentUploadDeckName: string = '';
 
+  // Set zur Verfolgung erweiterter Decks
+  expandedDecks: Set<number> = new Set<number>();
+
   constructor(private deckService: DeckService) { }
 
   ngOnInit(): void {
+    this.loadExpandedDecks();
     this.loadDecks();
   }
 
@@ -49,15 +53,12 @@ export class DeckListComponent implements OnInit {
     });
   }
 
-  // Neue Methode zum Löschen eines Bildes
   deleteImage(deck: Deck, image: DeckImage): void {
     if (!confirm(`Bist du sicher, dass du das Bild "${image.name}" löschen möchtest?`)) {
       return;
     }
 
-    // Hier gehen wir davon aus, dass das Deck eine eindeutige ID hat. Falls nicht, passe den Code entsprechend an.
-    const deckId = deck.id; // Stelle sicher, dass das Deck eine `id` hat
-    const imageId = image.id; // Stelle sicher, dass das Bild eine `id` hat
+    const imageId = image.id; 
 
     this.deckService.deleteImage(imageId).subscribe({
       next: () => this.loadDecks(),
@@ -83,4 +84,51 @@ export class DeckListComponent implements OnInit {
     this.uploadImageModal.deckName = deckName;
     this.uploadImageModal.open();
   }
+
+  // Methode zum Umschalten der Deck-Erweiterung
+  toggleDeckExpansion(deckId: number): void {
+    if (this.expandedDecks.has(deckId)) {
+      this.expandedDecks.delete(deckId);
+    } else {
+      this.expandedDecks.add(deckId);
+    }
+    this.saveExpandedDecks();
+  }
+
+  // Methode zur Überprüfung, ob ein Deck erweitert ist
+  isDeckExpanded(deckId: number): boolean {
+    return this.expandedDecks.has(deckId);
+  }
+
+  // Laden der erweiterten Decks aus dem sessionStorage
+  loadExpandedDecks(): void {
+    const stored = sessionStorage.getItem('expandedDecks');
+    if (stored) {
+      try {
+        const parsed: number[] = JSON.parse(stored);
+        this.expandedDecks = new Set<number>(parsed);
+      } catch (e) {
+        console.error('Fehler beim Parsen der erweiterten Decks aus sessionStorage', e);
+      }
+    } else {
+      // Wenn keine Daten gespeichert sind, alle Decks standardmäßig erweitern
+      this.expandedDecks = new Set<number>();
+      // Dieser Teil wird nach dem Laden der Decks initialisiert
+      // Wir erweitern alle Decks, sobald sie geladen sind
+      this.deckService.getDecks().subscribe({
+        next: (data) => {
+          data.forEach(deck => this.expandedDecks.add(deck.id));
+          this.saveExpandedDecks();
+          this.decks = data;
+        },
+        error: (err) => console.error('Fehler beim Laden der Decks', err)
+      });
+    }
+  }
+
+  // Speichern der erweiterten Decks in das sessionStorage
+  saveExpandedDecks(): void {
+    const expandedArray = Array.from(this.expandedDecks);
+    sessionStorage.setItem('expandedDecks', JSON.stringify(expandedArray));
+  }
 }

src/app/upload-image-modal/upload-image-modal.component.ts

@@ -230,7 +230,7 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
           top: top,
           width: width,
           height: height,
-          fill: 'rgba(0, 0, 0, 0.3)',
+          fill: 'rgba(255, 0, 0, 0.3)',
           selectable: true,
           hasControls: true,
           hasBorders: true,