UI-Anpassungen

CLAUDE.md

@@ -442,6 +442,53 @@ app.use(express.static(path.join(__dirname, 'public'), {
   </div>
   ```
 
+### ⚠️ SVG Icon-Rendering Probleme (07.01.2025)
+
+**FEHLER: SVG Icons werden nicht angezeigt**
+- **Problem**: SVG-Icons verschwinden oder zeigen nicht korrekt an
+- **Ursache**: `createElement()` unterstützt kein SVG-Namespace
+- **Lösung**: SVG mit `innerHTML` oder als String-Template einfügen
+- **Pattern**:
+  ```javascript
+  // FALSCH - SVG wird nicht gerendert
+  const icon = createElement('svg', { viewBox: '0 0 24 24' });
+  
+  // RICHTIG - SVG als HTML-String
+  element.innerHTML = `<svg viewBox="0 0 24 24">...</svg>`;
+  ```
+- **Prävention**: Bei dynamischen SVGs immer innerHTML oder DOMParser nutzen
+
+### ⚠️ API Field Name Mismatches (07.01.2025)
+
+**FEHLER: Frontend/Backend Feldnamen-Diskrepanz**
+- **Problem**: Daten werden mit 0 Bytes oder leer angezeigt
+- **Ursache**: Backend sendet camelCase, Frontend erwartet snake_case
+- **Beispiel**: `originalName` vs `original_name`, `sizeBytes` vs `size_bytes`
+- **Lösung**: Fallback-Pattern für beide Schreibweisen
+- **Pattern**:
+  ```javascript
+  // Robuste Feldabfrage mit Fallback
+  const fileName = data.originalName || data.original_name || '';
+  const fileSize = data.sizeBytes || data.size_bytes || 0;
+  ```
+- **Prävention**: API-Dokumentation prüfen, einheitliche Naming-Convention
+
+### ⚠️ File Upload Field Names (07.01.2025)
+
+**FEHLER: Multer "Unexpected field" Error**
+- **Problem**: 500 Error bei File-Upload
+- **Ursache**: Frontend sendet 'files' (plural), Backend erwartet 'file' (singular)
+- **Lösung**: Backend-Konsistenz herstellen
+- **Pattern**:
+  ```javascript
+  // Backend - Konsistent 'files' verwenden
+  upload.single('files')  // NICHT 'file'
+  
+  // Frontend - FormData immer mit 'files'
+  formData.append('files', file);
+  ```
+- **Prävention**: Einheitliche Field-Names über alle Upload-Endpoints
+
 ### ⚠️ Erinnerung-Implementation Probleme (06.01.2026)
 
 **FEHLER 1: Syntax-Fehler in JavaScript blockierte Login**
@@ -496,6 +543,34 @@ app.use(express.static(path.join(__dirname, 'public'), {
 - **Lösung**: Aufgaben zuerst, dann Erinnerungen
 - **Lesson**: UI-Reihenfolge muss Funktionalität folgen, nicht umgekehrt
 
+### ⚠️ Dropdown-Transparenz-Probleme (09.01.2026)
+
+**FEHLER: Dropdown-Menüs haben unerwünschte Transparenz**
+- **Problem**: Dropdown-Menüs zeigen durchscheinenden Hintergrund, besonders bei dunklen Themes
+- **Symptome**: 
+  - Text schwer lesbar durch transparenten Hintergrund
+  - Inhalte dahinter scheinen durch
+  - Besonders auffällig bei Kontakte-Modul und anderen Dropdown-Menüs
+- **Ursache**: CSS-Variablen für Hintergründe verwenden `rgba()` mit Transparenz
+- **Lösung**: Explizite, nicht-transparente Hintergrundfarben für Dropdowns setzen
+- **Pattern**:
+  ```css
+  /* FALSCH - Transparente Hintergründe */
+  .dropdown {
+    background: var(--bg-secondary); /* rgba mit 0.95 opacity */
+  }
+  
+  /* RICHTIG - Solide Hintergründe für Dropdowns */
+  .dropdown {
+    background: #ffffff; /* Hell-Theme */
+    background: #1a1a1a; /* Dunkel-Theme */
+  }
+  ```
+- **Prävention**: 
+  - Dropdown-Komponenten immer mit soliden Hintergründen
+  - Keine CSS-Variablen mit Transparenz für interaktive Elemente
+  - Bei Theme-Support: Explizite Farben ohne Alpha-Kanal
+
 ### 🔧 TROUBLESHOOTING-WORKFLOW
 
 **Bei JavaScript-Fehlern:**
@@ -530,6 +605,12 @@ app.use(express.static(path.join(__dirname, 'public'), {
 3. clearSearch() Funktion ebenfalls erweitern
 4. Lokale Suchfelder entfernen - nur Header-Suche nutzen
 
+**Bei File-Upload Problemen:**
+1. Prüfe ob Entry/Task bereits gespeichert ist (ID vorhanden)
+2. Bei neuen Einträgen: Erst speichern, dann Upload
+3. Field-Name Konsistenz prüfen: 'files' (plural) überall
+4. `docker logs taskmate` für Multer-Errors checken
+
 ## 🐛 Troubleshooting
 
 ### Häufige Probleme