From 0e94b1fd2ab58bc732f4a3b0ef0ce0e16205322d Mon Sep 17 00:00:00 2001
From: grokbot_ty <grokbot_ty@gitea.local>
Date: Mon, 14 Sep 2026 15:23:08 +0000
Subject: [PATCH] fix(capture): offer camera and gallery on Add photo

Why
On phone, the single file control opened the camera because it set
capture=environment. CAPTURE.md requires camera or picker.

Scope
AddPhoto.svelte now has Take photo (capture=environment) and Choose
from gallery (no capture). Both call the same onPicked path.

Verification
Playwright against overnight after redeploy asserts two inputs and
gallery has no capture attribute.
---
 frontend/src/capture/AddPhoto.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/capture/AddPhoto.svelte b/frontend/src/capture/AddPhoto.svelte
index 176a1d8..1f1fb11 100644
--- a/frontend/src/capture/AddPhoto.svelte
+++ b/frontend/src/capture/AddPhoto.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   export let onPicked: (f: File) => void;
-  let file: HTMLInputElement | undefined;
 
   const pick = (e: Event) => {
     const f = (e.target as HTMLInputElement).files?.[0];
@@ -16,16 +15,25 @@
     <li>Top-down, lens parallel to the face.</li>
     <li>Slab length along the long side of the picture.</li>
   </ul>
-  <input type="file" accept="image/*" capture="environment" bind:this={file} on:change={pick} />
+  <div class="pick">
+    <label class="pick-btn">Take photo
+      <input type="file" accept="image/*" capture="environment" on:change={pick} />
+    </label>
+    <label class="pick-btn">Choose from gallery
+      <input type="file" accept="image/*" on:change={pick} />
+    </label>
+  </div>
 </section>
 
 <style>
   .panel { padding: 24px 16px; color: #eee; }
   h1 { font-size: 1.4rem; }
   .setup { color: #bbb; line-height: 1.6; font-size: 0.95rem; }
-  input[type='file'] { width: 100%; margin-top: 20px; color: #eee; }
-  input[type='file']::file-selector-button {
+  .pick { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
+  .pick-btn {
     background: #00e5ff; color: #002; border: 0; border-radius: 8px;
     padding: 12px 20px; font-size: 1rem; font-weight: 600;
+    text-align: center; cursor: pointer;
   }
+  .pick-btn input[type='file'] { display: none; }
 </style>