From 9b1168a7452d6cf91d26d59ad14f65935a03c543 Mon Sep 17 00:00:00 2001
From: Kresna <kresna@usetada.com>
Date: Fri, 31 Jul 2026 11:11:02 +0700
Subject: [PATCH] fix(camera): always offer 'Use device camera', not just on
 error

The native <input capture> option was only rendered inside the error branch, so
once the live camera worked it disappeared. Mount the native input always and add
a 'Use device camera' button to the live-view controls too (opens the OS camera
app on phones). Stop the live stream when the native path is used.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/islands/image/CameraCapture.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/islands/image/CameraCapture.tsx b/src/islands/image/CameraCapture.tsx
index 3f946fb..2fcbaed 100644
--- a/src/islands/image/CameraCapture.tsx
+++ b/src/islands/image/CameraCapture.tsx
@@ -39,26 +39,20 @@ export default function CameraCapture({
 
   const onFallbackFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (file) onCapture(file);
+    if (file) { stop(); onCapture(file); }
   };
 
+  const useDeviceCamera = () => fileInputRef.current?.click();
+
   return (
     <div className="space-y-3 border-2 border-border p-3">
       {error ? (
         <div className="space-y-2">
           <Alert variant="error">{error.message}</Alert>
           <div className="flex flex-wrap gap-2">
-            <Button variant="secondary" onClick={() => fileInputRef.current?.click()}>Use device camera</Button>
+            <Button variant="secondary" onClick={useDeviceCamera}>Use device camera</Button>
             <Button variant="ghost" onClick={cancel}>Cancel</Button>
           </div>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/*"
-            capture="environment"
-            onChange={onFallbackFile}
-            className="hidden"
-          />
         </div>
       ) : (
         <div className="space-y-3">
@@ -66,10 +60,22 @@ export default function CameraCapture({
           <div className="flex flex-wrap gap-2">
             <Button onClick={capture} disabled={busy || !stream}>{busy ? 'Capturing…' : 'Capture'}</Button>
             {hasMultiple && <Button variant="secondary" onClick={switchCamera}>Switch camera</Button>}
+            {/* Always available — opens the OS camera app on phones. */}
+            <Button variant="secondary" onClick={useDeviceCamera}>Use device camera</Button>
             <Button variant="ghost" onClick={cancel}>Cancel</Button>
           </div>
         </div>
       )}
+
+      {/* Native capture input, always mounted so it works in either state. */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        capture="environment"
+        onChange={onFallbackFile}
+        className="hidden"
+      />
     </div>
   );
 }