Kontakt-Modul

CLAUDE.md

@@ -49,6 +49,16 @@ curl http://localhost:3000/api/health
 - **JEDE Änderung MUSS umkehrbar sein** - Live-System!
 - **Backup vor kritischen Änderungen** ist Pflicht
 
+**⚠️ NUTZERDATEN-SCHUTZ - ABSOLUTES VERBOT**: 
+- **KEINE Änderungen an Nutzerdaten oder Kennwörtern**
+- **Geschützte Benutzer (NICHT modifizieren)**:
+  - admin
+  - Hendrik (hendrik_gebhardt@gmx.de)
+  - Monami (momohomma@googlemail.com)
+- **Diese Benutzer sind produktiv im Einsatz**
+- **Keine Passwort-Resets oder Änderungen an diesen Accounts**
+- **Bei Anmeldeproblemen: Nur Debugging, keine Datenänderung**
+
 ### Rollback-Strategie für Live-Betrieb
 Bei JEDER Änderung sicherstellen:
 
@@ -298,6 +308,228 @@ docker exec -it taskmate sh
 docker logs taskmate -f --tail 100
 ```
 
+### KRITISCHES PROBLEM: Frontend-Änderungen werden nicht sichtbar
+
+**Problem**: Frontend-Dateien (HTML, CSS, JS) werden beim Docker Build nach `/app/public/` kopiert und sind NICHT live gemountet. Änderungen in `/home/claude-dev/TaskMate/frontend/` werden daher nicht automatisch übernommen.
+
+**Symptome**:
+- CSS/JS-Änderungen funktionieren nicht trotz Browser-Cache-Löschung
+- Service Worker Cache-Version Erhöhung hilft nicht
+- Änderungen werden sporadisch nach längerer Zeit sichtbar
+
+**Ursache**:
+1. **Dockerfile kopiert Frontend-Dateien**: `COPY frontend/ ./public/`
+2. **Express.js cached statische Dateien** mit ETags und Last-Modified Headers
+3. **Mehrschichtiges Caching**: Service Worker + Browser + Express.js
+
+**LÖSUNG A - Sofortige Änderungen (Development)**:
+```bash
+# Einzelne Datei kopieren
+docker cp frontend/css/style.css taskmate:/app/public/css/style.css
+
+# Mehrere Dateien kopieren
+docker cp frontend/js/app.js taskmate:/app/public/js/app.js
+docker cp frontend/index.html taskmate:/app/public/index.html
+
+# CSS + JS zusammen kopieren
+docker cp frontend/css/ taskmate:/app/public/css/
+docker cp frontend/js/ taskmate:/app/public/js/
+```
+
+**LÖSUNG B - Vollständige Aktualisierung (Production)**:
+```bash
+# Docker Image neu bauen und Container ersetzen
+docker build -t taskmate . && docker restart taskmate
+```
+
+**Express.js Caching deaktiviert**:
+```javascript
+// In server.js - statische Dateien ohne Caching
+app.use(express.static(path.join(__dirname, 'public'), {
+  etag: false,
+  lastModified: false,
+  cacheControl: false,
+  setHeaders: (res, path) => {
+    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+  }
+}));
+```
+
+**Debugging-Workflow**:
+1. Prüfe Datei-Timestamps im Container: `docker exec taskmate ls -la /app/public/css/`
+2. Vergleiche mit lokalen Dateien: `ls -la frontend/css/`
+3. Bei Diskrepanz: Files mit `docker cp` aktualisieren
+4. Bei JavaScript-Problemen: Browser-Console auf Fehler prüfen
+
+**Warum passiert das**:
+- Container-Pfad `/app/public/` = Static Files (nicht live)
+- Container-Pfad `/app/taskmate-source/` = Git-Operationen (live gemountet)
+- Frontend wird NUR beim Build-Time kopiert, nicht zur Laufzeit
+
+## 🚨 KRITISCHE LEKTIONEN AUS PROBLEMEN
+
+### ⚠️ Kontakte-Modul Implementation Probleme (07.01.2025)
+
+**FEHLER 1: Backend API-Route nicht gefunden (404)**
+- **Problem**: GET /api/contacts gibt 404 - Endpoint nicht gefunden
+- **Ursache**: Backend-Dateien nicht im Docker-Container, Container nicht neu gestartet
+- **Lösung**: Backend-Dateien kopieren und Container neu starten
+- **Prävention**:
+  ```bash
+  # Backend-Änderungen: Alle Dateien kopieren
+  docker cp backend/routes/contacts.js taskmate:/app/routes/
+  docker cp backend/middleware/validation.js taskmate:/app/middleware/
+  docker cp backend/server.js taskmate:/app/server.js
+  docker restart taskmate  # IMMER nach Backend-Änderungen
+  ```
+
+**FEHLER 2: Database Table existiert nicht (500 Internal Server Error)**
+- **Problem**: "no such table: contacts" - Tabelle wurde nicht erstellt
+- **Ursache**: database.js Änderungen nicht übernommen, bestehende DB erweitert sich nicht automatisch
+- **Lösung**: database.js kopieren + Tabelle manuell erstellen
+- **Pattern für neue Tabellen**:
+  ```bash
+  docker cp backend/database.js taskmate:/app/database.js
+  docker exec taskmate node -e "
+    const Database = require('better-sqlite3');
+    const db = new Database('/app/data/taskmate.db');
+    db.exec('CREATE TABLE IF NOT EXISTS new_table (...);');
+    console.log('Table created successfully');
+  "
+  ```
+
+**FEHLER 3: store.showMessage ist undefined**
+- **Problem**: `store.showMessage()` Funktion existiert nicht
+- **Ursache**: Falsche API für Toast-Nachrichten
+- **Lösung**: Verwende `window.dispatchEvent` mit `toast:show`
+- **Pattern für Toast-Messages**:
+  ```javascript
+  // FALSCH: store.showMessage('Text', 'success')
+  // RICHTIG:
+  window.dispatchEvent(new CustomEvent('toast:show', {
+    detail: { message: 'Text', type: 'success' }
+  }));
+  ```
+
+**FEHLER 4: Event-Handler nicht gebunden**
+- **Problem**: Button-Clicks funktionieren nicht trotz Event-Listener
+- **Ursache**: Timing-Problem - DOM noch nicht bereit, Modal-Overlay fehlt
+- **Lösung**: Korrekte Modal-Struktur + Overlay-Management
+- **Debugging-Pattern**:
+  ```javascript
+  console.log('[Module] Element check:', this.buttonElement);
+  if (this.buttonElement) {
+    console.log('[Module] Binding event');
+    this.buttonElement.addEventListener('click', () => {
+      console.log('[Module] Button clicked!');
+    });
+  }
+  ```
+
+**FEHLER 5: Modal Design inkonsistent**
+- **Problem**: Custom Modal-Styles passen nicht zum App-Design
+- **Ursache**: Eigene CSS-Klassen statt Standard-Modal-Pattern
+- **Lösung**: Standard Modal-Struktur verwenden
+- **Standard Modal-Pattern**:
+  ```html
+  <div class="modal modal-medium hidden">
+    <div class="modal-header">
+      <h2>Title</h2>
+      <button class="modal-close" data-close-modal>&times;</button>
+    </div>
+    <div class="modal-body"><!-- Content --></div>
+    <div class="modal-footer"><!-- Buttons --></div>
+  </div>
+  ```
+
+### ⚠️ Erinnerung-Implementation Probleme (06.01.2026)
+
+**FEHLER 1: Syntax-Fehler in JavaScript blockierte Login**
+- **Problem**: Missing closing brace in calendar.js verhinderte Login komplett
+- **Ursache**: Unvollständige Code-Blöcke beim Multi-Edit
+- **Lösung**: IMMER Syntax-Check nach JavaScript-Änderungen
+- **Prävention**: 
+  ```bash
+  # Nach JS-Änderungen prüfen:
+  node -c frontend/js/calendar.js
+  docker logs taskmate --tail 20  # Auf Syntax-Fehler prüfen
+  ```
+
+**FEHLER 2: "Verschwundene" Projekte durch 401-Fehler**
+- **Problem**: User dachte AegisSight-Projekt sei gelöscht
+- **Ursache**: Authentifizierungs-Token abgelaufen, API gibt 401 zurück
+- **Diagnose**: `docker logs taskmate` zeigt 401-Fehler
+- **Lösung**: Einfach neu anmelden, Daten sind intakt
+- **Prävention**: Bei "verschwundenen" Daten IMMER zuerst Auth prüfen
+
+**FEHLER 3: Checkbox-Styling funktioniert nicht**
+- **Problem**: CSS-Selektoren greifen nicht, komplexe Pseudo-Element-Struktur
+- **Ursache**: Browser-CSS-Konflikte, CSS-Variable-Probleme
+- **Lösung**: Direktes Styling nativer Checkboxes mit `appearance: none`
+- **Lesson**: Bei CSS-Problemen: **Einfachster Ansatz zuerst**
+  ```css
+  /* FALSCH: Komplexe Pseudo-Struktur */
+  input:checked + span::after { content: '✓'; }
+  
+  /* RICHTIG: Direktes Styling */
+  input[type="checkbox"] {
+    appearance: none;
+    background: #3B82F6 when :checked;
+  }
+  ```
+
+**FEHLER 4: Event-Handler Konflikte bei Modal-Updates**
+- **Problem**: Dropdown-Handler werden überschrieben
+- **Ursache**: Mehrfache Event-Binding ohne Cleanup
+- **Lösung**: Element-Kloning für saubere Event-Handler
+- **Pattern**:
+  ```javascript
+  // Event-Handler cleanup durch Klonen
+  const newElement = element.cloneNode(true);
+  element.parentNode.replaceChild(newElement, element);
+  // Dann neue Handler binden
+  ```
+
+**FEHLER 5: Visuelle Darstellung unterbricht Funktionalität**
+- **Problem**: Erinnerungen unterbrachen Aufgaben-Balken
+- **Ursache**: Falsche Render-Reihenfolge (Erinnerungen vor Aufgaben)
+- **Lösung**: Aufgaben zuerst, dann Erinnerungen
+- **Lesson**: UI-Reihenfolge muss Funktionalität folgen, nicht umgekehrt
+
+### 🔧 TROUBLESHOOTING-WORKFLOW
+
+**Bei JavaScript-Fehlern:**
+1. `docker logs taskmate --tail 50` prüfen
+2. Browser-Console auf Syntax-Fehler prüfen
+3. Node.js Syntax-Check: `node -c datei.js`
+
+**Bei "verschwundenen" Daten:**
+1. **NIEMALS** sofort Backup/Restore - erst debuggen!
+2. API-Logs prüfen auf 401/403 Fehler
+3. Auth-Status prüfen: `localStorage.getItem('token')`
+4. Datenbank direkt prüfen: `sqlite3 data/taskmate.db "SELECT COUNT(*) FROM projects"`
+
+**Bei CSS-Problemen:**
+1. Simplest approach first - keine komplexen Selektoren
+2. `!important` nur als letzter Ausweg
+3. Browser-DevTools: Computed Styles prüfen
+4. Cache leeren: `CACHE_VERSION++` in sw.js
+
+**Bei neuen Modulen mit globaler Suche:**
+1. Module in app.js setupSearch() registrieren:
+   ```javascript
+   } else if (currentView === 'mymodule') {
+     import('./mymodule.js').then(module => {
+       if (module.myManager) {
+         module.myManager.searchQuery = value;
+         module.myManager.filterData();
+       }
+     });
+   ```
+2. Manager-Instanz exportieren: `export { myManager }`
+3. clearSearch() Funktion ebenfalls erweitern
+4. Lokale Suchfelder entfernen - nur Header-Suche nutzen
+
 ## 🐛 Troubleshooting
 
 ### Häufige Probleme