# StudioFlow — Frontend

## Übersicht
Die Weboberfläche von StudioFlow dient zur Verwaltung von YouTube-Metadaten, zur Konfiguration von Videobeschreibungen und zur Überwachung von Bulk-Jobs.

## Technologie-Stack
- **Framework:** Next.js 15 (App Router, TypeScript)
- **Styling:** Vanilla CSS (bevorzugt) oder Shadcn UI / Radix UI für Komponenten
- **State Management:** Zustand (Client State), TanStack Query (Server State)
- **Tabellen:** TanStack Table (virtuelle Listen, Filter, Batch-Select)
- **Icons:** Lucide React
- **Datum:** date-fns

## Kernbereiche (Seiten)
1. **Dashboard:** Quota-Verbrauch, Lint-Fehler, aktive Bulk-Jobs.
2. **Video-Tabelle:** Zentrale Liste mit Filtern, Suche und Bulk-Aktionen.
3. **Video-Config-Editor:** Drag-and-Drop Editor für Block-Reihenfolge und Variablen.
4. **Block-Library:** Verwaltung der Textbausteine.
5. **Kollaboratoren:** Übersicht und Detailseiten für Gast-Creator.
6. **Content Calendar:** Monats-/Wochenansicht der Upload-Planung.

## UI-Komponenten
- `video-table/`: Hochperformante Tabelle für hunderte Datensätze.
- `config-editor/`: Interaktiver Editor für Video-Strukturen.
- `quota-indicator/`: Visuelle Anzeige des täglichen YouTube-Limits.
- `lint-badge/`: Status-Anzeige für Metadaten-Validierung.

## API-Kommunikation
Alle Anfragen erfolgen an den API-Container (Standard: `http://localhost:3001`). Der API-Client sollte in `src/lib/api-client.ts` zentralisiert sein.