feat(recipe) shared ImageSourcePicker for Galerie/Kamera on touch devices #20

araemer · 2026-08-15T06:34:11Z

araemer commented

2026-08-15 06:34:11 +00:00

Summary

Extracts the Galerie/Kamera button pair and hidden inputs from AiImportDialog into a new reusable ImageSourcePicker component (basics/)
AiImportDialog touch branch now delegates to <ImageSourcePicker> instead of inlining the buttons
RecipeImageUpload detects touch devices and shows a BasicDialog containing <ImageSourcePicker> when tapped — desktop path unchanged (direct file picker)

Test plan

On a touch device: tap "Bild hinzufügen" on a recipe detail page → source dialog appears with Galerie and Kamera options
Galerie opens photo library, selecting an image uploads it and closes the dialog
Kamera opens camera app directly, taking a photo uploads it and closes the dialog
On desktop: "Bild hinzufügen" still opens the file picker directly (no dialog)
AI import on touch devices still shows Galerie/Kamera buttons inside the import dialog
AI import on desktop still shows the drag-and-drop zone
Build passes with no TypeScript errors

🤖 Generated with Claude Code

## Summary - Extracts the Galerie/Kamera button pair and hidden inputs from `AiImportDialog` into a new reusable `ImageSourcePicker` component (`basics/`) - `AiImportDialog` touch branch now delegates to `<ImageSourcePicker>` instead of inlining the buttons - `RecipeImageUpload` detects touch devices and shows a `BasicDialog` containing `<ImageSourcePicker>` when tapped — desktop path unchanged (direct file picker) ## Test plan - [ ] On a touch device: tap "Bild hinzufügen" on a recipe detail page → source dialog appears with Galerie and Kamera options - [ ] Galerie opens photo library, selecting an image uploads it and closes the dialog - [ ] Kamera opens camera app directly, taking a photo uploads it and closes the dialog - [x] On desktop: "Bild hinzufügen" still opens the file picker directly (no dialog) - [ ] AI import on touch devices still shows Galerie/Kamera buttons inside the import dialog - [x] AI import on desktop still shows the drag-and-drop zone - [ ] Build passes with no TypeScript errors 🤖 Generated with [Claude Code](https://claude.com/claude-code)

araemer added 1 commit

2026-08-15 06:34:11 +00:00

feat(recipe) shared ImageSourcePicker for Galerie/Kamera on touch devices 3cdfaf458d

Extracts the touch-device source selection (Galerie / Kamera buttons +
hidden inputs) from AiImportDialog into a reusable ImageSourcePicker
component in basics/. RecipeImageUpload now shows the same picker inside
a dialog on touch devices instead of opening the OS file picker directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

araemer added 1 commit

2026-08-16 05:58:37 +00:00

refactor(recipe) apply PR review: rename multiple→isPickMultiple, expand JSDoc 107e832922

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

araemer added 1 commit

2026-08-16 06:02:01 +00:00

feat(recipe) ImageSourcePicker owns desktop drop zone for multi-upload e999970bba

The picker now handles all three cases internally: touch (Galerie/Kamera),
desktop+multi (drag-and-drop zone), desktop+single (renders null).
isTouchDevice detection moves into the component as a module-level const.
AiImportDialog drops its own touch check, drop zone, fileInputRef and
handleDrop — it now delegates entirely to ImageSourcePicker.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

araemer reviewed

2026-08-16 06:03:40 +00:00

frontend/src/components/basics/ImageSourcePicker.tsx

					
				@ -0,0 +7,4 @@

				/**

				 * Props for ImageSourcePicker.

				 *

				 * The component renders two side-by-side buttons that let the user choose

Shouldn't we add an explanation for the component here? Some Devices include camera into their native file picker, others don't. So this is a convenience picker allowing users of the latter devices to capture images for direct upload

araemer marked this conversation as resolved

frontend/src/components/basics/ImageSourcePicker.tsx Outdated

					
				@ -0,0 +16,4 @@

				    /** Passed verbatim to the `accept` attribute of both hidden inputs (e.g. "image/*"). */

				    accept: string

				    /** Whether multiple files may be selected from the gallery. Defaults to false. */

				    multiple?: boolean