feat(web): Bildvorschau mit manueller Rotation vor der OCR-Analyse #89

Merged

admin-mrrm merged 1 commit from feat/web-image-rotate-preview into main

2026-04-26 11:59:16 +02:00

admin-mrrm commented

2026-04-26 11:55:41 +02:00

Owner

Behebt #87 fuer die Web-App (apps/web).

Der Mobile-Teil wurde bereits in #88 gemerged. Dieser PR ergaenzt dieselbe Funktion fuer die Vite/TanStack-Router-App.

Aenderungen

apps/web/src/ocr-image-store.ts (neu) - Singleton-Store fuer das File-Objekt zwischen list-detail und image-preview Route.

apps/web/src/routes/list-image-preview.tsx (neu) - Vorschau-Route mit Rotate-Buttons. Nutzt createImageBitmap() (respektiert EXIF nativ) + Canvas fuer die physische Rotation vor dem OCR-Upload. Kein Extra-Paket noetig.

apps/web/src/router.tsx - Route /lists//image-preview registriert.

apps/web/src/routes/list-detail.tsx - handleFileChange navigiert zur Vorschau statt direkt zur OCR. parseImage-Mutation entfernt.

Test plan

Bild auswaehlen: Vorschau erscheint korrekt orientiert (Browser + createImageBitmap wenden EXIF an)
Rotate-Buttons: Bild dreht sich um 90 Grad
Analysieren: OCR laeuft auf dem (gedrehten) Bild, Review-Screen erscheint
Fehlerfall: Fehlermeldung in der Vorschau sichtbar
Zurueck: kehrt zur Liste zurueck ohne OCR auszuloesen

Behebt #87 fuer die Web-App (apps/web). Der Mobile-Teil wurde bereits in #88 gemerged. Dieser PR ergaenzt dieselbe Funktion fuer die Vite/TanStack-Router-App. ## Aenderungen **apps/web/src/ocr-image-store.ts** (neu) - Singleton-Store fuer das File-Objekt zwischen list-detail und image-preview Route. **apps/web/src/routes/list-image-preview.tsx** (neu) - Vorschau-Route mit Rotate-Buttons. Nutzt createImageBitmap() (respektiert EXIF nativ) + Canvas fuer die physische Rotation vor dem OCR-Upload. Kein Extra-Paket noetig. **apps/web/src/router.tsx** - Route /lists//image-preview registriert. **apps/web/src/routes/list-detail.tsx** - handleFileChange navigiert zur Vorschau statt direkt zur OCR. parseImage-Mutation entfernt. ## Test plan - [ ] Bild auswaehlen: Vorschau erscheint korrekt orientiert (Browser + createImageBitmap wenden EXIF an) - [ ] Rotate-Buttons: Bild dreht sich um 90 Grad - [ ] Analysieren: OCR laeuft auf dem (gedrehten) Bild, Review-Screen erscheint - [ ] Fehlerfall: Fehlermeldung in der Vorschau sichtbar - [ ] Zurueck: kehrt zur Liste zurueck ohne OCR auszuloesen

admin-mrrm added 1 commit

2026-04-26 11:55:41 +02:00

feat(web): Bildvorschau mit manueller Rotation vor der OCR-Analyse (#87 )

continuous-integration/drone/push Build is passing

Details

continuous-integration/drone/pr Build is passing

Details

349135bbca

- Neue Route /lists/$listId/image-preview mit Rotate-Buttons (+/-90 Grad)
  via Canvas-API (createImageBitmap respektiert EXIF, kein Extra-Paket noetig)
- list-detail.tsx: navigiert nach Dateiauswahl zur Vorschau statt direkt
  zur OCR; parseImage-Mutation aus der Detail-Route entfernt
- ocrImageStore: Singleton fuer das File-Objekt zwischen den Routen

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>