# Creator-facing dashboard German UI/UX polish

Use this reference when polishing the user's AutoShorts/creator dashboard or any similar operational UI that has drifted into admin-panel language.

## Trigger

- User asks for dashboard UI/UX clarity, German UI copy, visual polish, review-flow simplification, or demo-recording readiness.
- Dashboard users should understand the next action without developer knowledge.
- Scope is UI clarity only; do not expand platform integrations unless explicitly requested.

## Core principles

1. **User-facing information architecture first**
   - Prefer creator-language sections: `Übersicht`, `Videos`, `Produktionsplan`, `Analyse`, `Content-Bibliothek`, `Protokolle`, `Verifizierung`, `Einstellungen`.
   - Keep OAuth/accounts/API/platform internals secondary unless the user is actively configuring them.

2. **Make the next action obvious**
   - A dashboard overview should start with one primary focus card: `Nächster Schritt`.
   - Then show at most a few small open tasks and a short analytics summary.
   - Avoid equal-weight grids of operational cards; they read like an admin console.

3. **Translate visible UI, not just navigation**
   - Translate nav labels, page headers, buttons, badges, empty states, form labels, table headers, warnings, and recording/demo UI.
   - Technical values can stay internal or in detail views, but not as main UI text.
   - Use central helpers such as `statusLabel`, `statusTone`, `providerLabel`, `uploadMethodLabel`, and `verificationModeLabel` instead of sprinkling raw enum values through templates.

4. **Avoid fake functionality**
   - If an action is not real, do not show it as a normal active button.
   - Use disabled labels like `Geplant`, `Noch nicht verbunden`, or `Freigabe erforderlich`.
   - Especially guard website push, discard website changes, TikTok Sandbox, YouTube OAuth, Direct Post, and real uploads.

5. **Keep review pages decision-oriented**
   - Structure review pages around: video preview, checklist, platform text summaries, verification/upload cards, and grouped actions.
   - In 10 seconds, the user should know: what the video is, what is missing, and what each button will do.
   - Use one dominant primary action per area; avoid rows of equally strong buttons.

6. **Make production queues human-readable**
   - Rename technical queues to `Produktionsplan` when user-facing.
   - Show `Nächstes zu produzierendes Video`, `Fixiert`, `Vorschläge`, `Manuell geplant`.
   - Move JSON/agent output under `Technische Details anzeigen`.
   - Label production actions clearly: starting production creates script/preview/package only when no final render/upload is intended.

7. **Use consistent thumbnails**
   - Centralize video thumbnail rendering in a reusable component.
   - Default to 9:16, no distortion, subtle frame, graceful fallback with initials, optional status badge, and small/medium/large/hero variants.
   - Apply consistently on overview, videos list, review, calendar, production plan, analytics, and website-guide cards.

8. **Demo/verification pages must be recording-friendly**
   - Use plain German labels such as `TikTok API-Verifizierung`, `Bereit für interne Generalprobe`, `Noch nicht bereit für TikTok-Einreichung`, and `Grund: Sandbox-Zugangsdaten fehlen`.
   - Show a guided demo path and links to Review and Protokolle.
   - Make mock/sandbox/real-disabled state explicit; do not imply a real API call occurred.

## Recommended implementation pattern

- Add/maintain `frontend/src/utils/labels.ts` for German labels and badge tones.
- Add/maintain a reusable `PageHeader.vue` for page kicker/title/subtitle/actions.
- Add/maintain a reusable `VideoThumb.vue` for all video thumbnail contexts.
- For copy scans, include old English phrases that must not appear as main UI text, for example:

```bash
grep -R "Readiness score\|Recordable demo path\|Current test video\|Open inbox\|Create TikTok draft\|Production Queue\|Upload requests waiting" frontend/src || true
```

## Verification checklist

- Backend tests still pass if any API payload changed.
- Frontend build passes.
- Browser QA at minimum: `/dashboard`, `/videos`, one `/videos/<id>/review`, `/production-queue`, `/analytics`, `/verification`, `/publish-logs`, `/settings`.
- Check: no console errors, no horizontal overflow, thumbnails visible, German labels on primary UI, raw statuses not prominent, fake actions disabled.
- Confirm explicitly that no website push, real platform upload, sandbox expansion, or final render occurred if those were out of scope.

## Pitfalls learned

- A verification page may have a working backend status but still display `Kein Demo-Video gefunden` if the API exposes `working_title` while the UI reads `title`. Make display components tolerant: `working_title || title`.
- If the demo page depends on a “current test video,” have the backend readiness payload select a reasonable ready/in-review/imported video rather than only relying on a prior upload attempt.
- Do not treat copy translation as cosmetic only; untranslated buttons and badges are where users lose trust fastest.