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

// 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:

// 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)