breakpilot-pwa/backend/frontend/static/js/modules/README.md

# Studio JavaScript Modules

Das monolithische studio.js (9.787 Zeilen) wurde in modulare ES6-Module aufgeteilt.

## Modul-Struktur

```
backend/frontend/static/js/
├── studio.js                        # Original (noch nicht aktualisiert)
└── modules/
    ├── theme.js                     # Dark/Light Mode (105 Zeilen)
    ├── translations.js              # Übersetzungen DE/EN (971 Zeilen)
    ├── i18n.js                      # Internationalisierung (250 Zeilen)
    ├── lightbox.js                  # Bildvorschau (234 Zeilen)
    ├── api-helpers.js               # API-Utilities (360 Zeilen)
    ├── file-manager.js              # Dateiverwaltung (614 Zeilen)
    ├── learning-units-module.js     # Lerneinheiten (517 Zeilen)
    ├── mc-module.js                 # Multiple Choice (474 Zeilen)
    ├── cloze-module.js              # Lückentext (430 Zeilen)
    ├── mindmap-module.js            # Mindmap (223 Zeilen)
    └── qa-leitner-module.js         # Q&A / Leitner (444 Zeilen)
```

## Module-Übersicht

### theme.js
- Dark/Light Mode Toggle
- Speichert Präferenz in localStorage
- Exports: `getCurrentTheme()`, `setTheme()`, `initThemeToggle()`

### translations.js
- Übersetzungswörterbuch für DE/EN
- Export: `translations` Objekt

### i18n.js
- Internationalisierungsfunktionen
- Exports: `t()`, `applyLanguage()`, `updateUITexts()`

### lightbox.js
- Bildvorschau-Modal
- Exports: `openLightbox()`, `closeLightbox()`

### api-helpers.js
- API-Fetch mit Fehlerbehandlung
- Status-Anzeige
- Exports: `apiFetch()`, `setStatus()`

### file-manager.js
- Arbeitsblatt-Upload und -Verwaltung
- Eingang-Dateien laden
- Exports: `loadEingangFiles()`, `renderEingangList()`, usw.

### learning-units-module.js
- Lerneinheiten CRUD
- Arbeitsblatt-Zuordnung
- Exports: `loadLearningUnits()`, `addUnitFromForm()`, usw.

### mc-module.js
- Multiple Choice Generierung
- Quiz-Vorschau und Bewertung
- Exports: `generateMcQuestions()`, `renderMcPreview()`, usw.

### cloze-module.js
- Lückentext-Generierung
- Interaktive Ausfüllung
- Exports: `generateClozeTexts()`, `renderClozePreview()`, usw.

### mindmap-module.js
- Mindmap-Generierung
- SVG-Rendering
- Exports: `generateMindmap()`, `renderMindmapPreview()`, usw.

### qa-leitner-module.js
- Frage-Antwort-Generierung
- Leitner-System Integration
- Exports: `generateQaQuestions()`, `renderQaPreview()`, usw.

## Verwendung

```javascript
// Als ES6 Modul importieren
import { getCurrentTheme, setTheme, initThemeToggle } from './modules/theme.js';
import { t, applyLanguage } from './modules/i18n.js';
import { openLightbox, closeLightbox } from './modules/lightbox.js';
// ...

// Theme initialisieren
initThemeToggle();

// Übersetzung abrufen
const label = t('btn_create');
```

## TODO

Die Haupt-studio.js sollte aktualisiert werden, um diese Module zu importieren:

```javascript
// In studio.js
import * as Theme from './modules/theme.js';
import * as I18n from './modules/i18n.js';
import * as FileManager from './modules/file-manager.js';
// ...
```

## Statistiken

| Komponente | Zeilen |
|------------|--------|
| theme.js | 105 |
| translations.js | 971 |
| i18n.js | 250 |
| lightbox.js | 234 |
| api-helpers.js | 360 |
| file-manager.js | 614 |
| learning-units-module.js | 517 |
| mc-module.js | 474 |
| cloze-module.js | 430 |
| mindmap-module.js | 223 |
| qa-leitner-module.js | 444 |
| **Gesamt Module** | **4.622** |
| studio.js (Original) | 9.787 |

## Remaining to Extract (~5,165 lines)

The following sections remain in studio.js and should be extracted:

| Section | Lines | Target Module |
|---------|-------|---------------|
| GDPR Functions | ~150 | gdpr-module.js |
| Legal Modal | ~200 | legal-module.js |
| Authentication | ~450 | auth-module.js |
| Notifications | ~400 | notifications-module.js |
| Word Upload | ~140 | upload-module.js |
| Admin Documents | ~940 | admin/documents.js |
| Cookie Categories Admin | ~130 | admin/cookies.js |
| Admin Stats | ~170 | admin/stats.js |
| User Data Export | ~55 | admin/export.js |
| DSR Management | ~450 | admin/dsr.js |
| DSMS Functions | ~520 | dsms-module.js |
| Email Templates | ~400 | admin/email-templates.js |
| Communication Panel | ~2,140 | communication-module.js |

## Refactoring-Historie

**03.02.2026**: Refactoring status documented
- Existing modules cover ~47% of original studio.js (4,622 of 9,787 lines)
- Remaining ~5,165 lines identified for future extraction
- Build tooling (Webpack/Vite) recommended for ES6 module bundling

**19.01.2026**: Module aus studio.js extrahiert:
- Alle funktionalen Bereiche in separate ES6-Module aufgeteilt
- Module verwenden Export/Import-Syntax
- Original studio.js noch nicht aktualisiert (backward compatibility)