From fb7c2f0e9b733659db0ed7e2b46b7e988ab624f4 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 21 Apr 2026 13:45:37 +0200
Subject: [PATCH] feat(photo-upload): zwei Buttons fuer Kamera vs. Datei-Picker

Android-Chrome auf Tablet verhaelt sich zickig: mit capture="environment"
nur Kamera, ohne capture nur Datei-Picker -- nie beide. Zwei separate
Buttons (mit jeweils eigenem Input-Element) machen die Wahl explizit
und funktionieren ueberall eindeutig.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/routes/new/from-photo/+page.svelte | 45 +++++++++++++++++++-------
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/routes/new/from-photo/+page.svelte b/src/routes/new/from-photo/+page.svelte
index fd0e1cc..fb4e6a6 100644
--- a/src/routes/new/from-photo/+page.svelte
+++ b/src/routes/new/from-photo/+page.svelte
@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation';
   import {
     Camera,
+    ImageUp,
     Loader2,
     Wand2,
     AlertTriangle,
@@ -17,6 +18,7 @@
 
   const store = new PhotoUploadStore();
   let saving = $state(false);
+  let cameraInput = $state<HTMLInputElement | null>(null);
   let fileInput = $state<HTMLInputElement | null>(null);
 
   function onPick(e: Event) {
@@ -85,17 +87,38 @@
       Fotografiere ein gedrucktes oder handgeschriebenes Rezept. Eine Seite,
       scharf, gut ausgeleuchtet.
     </p>
-    <button
-      type="button"
-      class="btn primary"
-      onclick={() => fileInput?.click()}
-      disabled={!network.online}
-    >
-      <Camera size={18} strokeWidth={2} />
-      <span>Foto wählen oder aufnehmen</span>
-    </button>
-    <!-- Ohne `capture`-Attribut: Browser zeigt auf Mobile die volle Auswahl
-         (Kamera / Fotomediathek / Datei), statt direkt die Kamera zu oeffnen. -->
+    <div class="row">
+      <button
+        type="button"
+        class="btn primary"
+        onclick={() => cameraInput?.click()}
+        disabled={!network.online}
+      >
+        <Camera size={18} strokeWidth={2} />
+        <span>Kamera</span>
+      </button>
+      <button
+        type="button"
+        class="btn ghost"
+        onclick={() => fileInput?.click()}
+        disabled={!network.online}
+      >
+        <ImageUp size={18} strokeWidth={2} />
+        <span>Aus Dateien</span>
+      </button>
+    </div>
+    <!-- Zwei separate Inputs: capture="environment" oeffnet direkt die Kamera,
+         das andere zeigt den Datei-/Fotomediathek-Picker. Android-Chrome auf
+         Tablet zeigt sonst bei capture="environment" nur die Kamera; ohne
+         capture dagegen nur den Datei-Picker. Explizite Wahl ist eindeutig. -->
+    <input
+      bind:this={cameraInput}
+      type="file"
+      accept="image/*"
+      capture="environment"
+      hidden
+      onchange={onPick}
+    />
     <input
       bind:this={fileInput}
       type="file"