HartOMat/plan.md

# Plan: Layout Hamburger + Media Browser Fixes + Retroactive Import

## Kontext

Vier unabhängige Bereiche:
1. **Layout**: Sidebar hat kein Mobile-Support, kein Hamburger-Menü → Content füllt nicht volle Breite auf kleinen Screens
2. **Media Browser Previews**: glTF-Assets zeigen nur Icon-Placeholder; CadFile-Thumbnails wären als Preview nutzbar
3. **Media Browser Filter-Defaults**: Aktuell kein Default-Filter → alle Types (inkl. GLB/STL) sichtbar; gewünscht: Default nur still + turntable
4. **Retroactive Import**: Bestehende `cad_files.thumbnail_path` und `order_lines.result_path` sind nicht als `media_assets` erfasst

---

## Betroffene Dateien

| Datei | Änderung |
|-------|----------|
| `frontend/src/components/layout/Layout.tsx` | Hamburger-Menü + Mobile-Overlay |
| `frontend/src/pages/MediaBrowser.tsx` | Filter-Chips + Previews + Default-Filter |
| `frontend/src/api/media.ts` | `asset_types[]` statt `asset_type` + `thumbnail_url` Feld |
| `backend/app/domains/media/schemas.py` | `thumbnail_url: str | None` Feld |
| `backend/app/domains/media/router.py` | `asset_types` Multi-Query-Param + thumbnail_url befüllen |
| `backend/app/domains/media/service.py` | `get_thumbnail_url(asset)` Helper |
| `backend/app/api/routers/admin.py` | `POST /api/admin/import-media-assets` Endpoint |
| `frontend/src/pages/Admin.tsx` | Button "Import Existing Media" |

---

## Tasks (in Reihenfolge)

### Task 1: Layout — Hamburger-Menü + Mobile Sidebar
- **Datei**: `frontend/src/components/layout/Layout.tsx`
- **Was**:
  - State `sidebarOpen: boolean` (default: `false` auf mobile, `true` auf desktop via window.innerWidth)
  - Hamburger-Button (`Menu`-Icon aus lucide) in einem mobilen Header-Bar (nur sichtbar `< md`, also `md:hidden`)
  - Sidebar: auf mobile `fixed left-0 top-0 h-full z-40 transform transition-transform`, bei `sidebarOpen`: `translate-x-0`, sonst `-translate-x-full`; auf Desktop immer sichtbar (`md:relative md:translate-x-0`)
  - Overlay-Backdrop: halbtransparentes `div` hinter Sidebar, nur auf mobile sichtbar wenn open, click schließt Sidebar
  - Close-Button (X) oben in Sidebar auf mobile
  - Content-Bereich: `flex-1 overflow-auto min-w-0` damit er immer volle restliche Breite nutzt
- **Akzeptanzkriterium**: Auf <768px Hamburger sichtbar, Sidebar aus-/einblendbar; auf ≥768px Sidebar immer sichtbar

### Task 2: Backend — `asset_types[]` Multi-Filter + `thumbnail_url`
- **Datei**: `backend/app/domains/media/router.py`, `backend/app/domains/media/schemas.py`, `backend/app/domains/media/service.py`
- **Was**:
  - `list_assets` Endpoint: Zusätzlichen Query-Param `asset_types: list[MediaAssetType] = Query(default=[])` hinzufügen
  - Filter-Logik: wenn `asset_types` nicht leer → `WHERE asset_type IN (asset_types)`; sonst wenn `asset_type` gesetzt → wie bisher
  - `MediaAssetOut`: neues Feld `thumbnail_url: str | None = None`
  - `service.py`: neue Funktion `get_thumbnail_url(asset) -> str | None` — gibt `/api/cad/{cad_file_id}/thumbnail` zurück wenn `cad_file_id` gesetzt (unabhängig von asset_type)
  - In `list_assets` und `get_asset`: `a.thumbnail_url = service.get_thumbnail_url(a)` setzen (analog zu `download_url`)
- **Akzeptanzkriterium**: `GET /api/media/?asset_types=still&asset_types=turntable` gibt nur still+turntable zurück; jedes Asset mit `cad_file_id` hat `thumbnail_url` gesetzt

### Task 3: Frontend — Media Browser Filter-Chips + Previews
- **Datei**: `frontend/src/pages/MediaBrowser.tsx`, `frontend/src/api/media.ts`
- **Was**:
  - `api/media.ts`: `MediaFilter.asset_types?: MediaAssetType[]` (statt `asset_type`); `getMediaAssets` sendet `asset_types` als repeated params; `MediaAsset` bekommt `thumbnail_url: string | null`
  - `MediaBrowser.tsx`:
    - State: `activeTypes: Set<MediaAssetType>` — Default: `new Set(['still', 'turntable'])`
    - Filter-UI: Chip-Grid mit allen Types; `still`/`turntable`/`thumbnail` in der Hauptreihe; `gltf_geometry`/`gltf_production`/`blend_production`/`stl_low`/`stl_high` hinter "Advanced" Toggle (collapsed by default)
    - Chip aktiv = farbiger Hintergrund entsprechend `TYPE_COLORS`; inaktiv = grau
    - Chip-Klick toggled den Type aus `activeTypes`
    - `getMediaAssets({ asset_types: [...activeTypes], ... })`
    - `AssetCard`: wenn `isImageAsset(type)` → `download_url`; wenn `thumbnail_url` vorhanden → `thumbnail_url` als Preview; sonst Icon
    - Video-Assets (`turntable`): Video-Poster via `thumbnail_url` (falls vorhanden) mit `<video>`-Tag anzeigen oder Bild
- **Akzeptanzkriterium**: Default zeigt nur still+turntable; Chip-Klick filtert korrekt; GLB-Assets zeigen CadFile-Thumbnail

### Task 4: Backend — Retroactive MediaAsset Import Endpoint
- **Datei**: `backend/app/api/routers/admin.py`
- **Was**: Neuer Endpoint `POST /api/admin/import-media-assets` (require_admin):
  ```python
  # 1. CadFiles mit thumbnail_path + status='completed'
  SELECT id, thumbnail_path FROM cad_files
  WHERE thumbnail_path IS NOT NULL AND status = 'completed'

  # 2. OrderLines mit result_path + render_status='completed' + output_type
  SELECT ol.id, ol.result_path, ol.product_id, ol.output_type_id, ot.is_animation
  FROM order_lines ol LEFT JOIN output_types ot ON ot.id = ol.output_type_id
  WHERE ol.result_path IS NOT NULL AND ol.render_status = 'completed'
  ```
  - De-dup: `SELECT id FROM media_assets WHERE storage_key = ?` vor jedem Insert
  - CadFile → `MediaAsset(asset_type='thumbnail', cad_file_id=..., storage_key=thumbnail_path, mime_type='image/jpeg')`
  - OrderLine → `MediaAsset(asset_type='turntable' if is_animation else 'still', order_line_id=..., storage_key=result_path)`
  - Returns: `{"created": N, "skipped": N}`
- **Akzeptanzkriterium**: Nach Aufruf erscheinen alle bestehenden Thumbnails + Renders im Media Browser

### Task 5: Frontend — Admin "Import Existing Media" Button
- **Datei**: `frontend/src/pages/Admin.tsx`
- **Was**: Im Admin-Panel (Media/Settings-Bereich) neuer Button "Import Existing Media" → `POST /api/admin/import-media-assets` → Toast mit `{created, skipped}` Ergebnis
- **Abhängigkeiten**: Task 4
- **Akzeptanzkriterium**: Button klickbar, zeigt Ergebnis

---

## Migrations-Check

Keine neue Migration nötig — alle Felder bereits vorhanden.

---

## Reihenfolge-Empfehlung

Task 1 (Layout) + Task 2 (Backend) parallel →
Task 3 (Frontend MediaBrowser, braucht Task 2) + Task 4 (Backend Admin) parallel →
Task 5 (Frontend Admin Button, braucht Task 4)

Tasks 1 + 2 + 4 können vollständig parallel implementiert werden.
Task 3 + 5 können dann parallel implementiert werden.

---

## Risiken / Offene Fragen

- `thumbnail_url` für GLBs zeigt immer das CadFile-Thumbnail — das ist korrekt (kein spezifisches Render vorhanden)
- `result_path` bei OrderLines kann Pfad zu PNG oder MP4 sein — kein Media-Type prüfen, einfach MIME aus Extension ableiten
- Bestehende `thumbnail_path` Werte sind absolute Paths (`/app/uploads/...`) — gleicher Proxy-Mechanismus wie bei GLBs nötig (der download endpoint kann damit umgehen)
- Video-Preview (turntable): `<video>` Tag mit `thumbnail_url` als Poster + `download_url` als src — falls download_url MP4 ist