From 6ff3ecd54d2f417d5b81a65ace6661f5d59abee9 Mon Sep 17 00:00:00 2001
From: Brittany Ellich <brittany.ellich@outlook.com>
Date: Mon, 1 Jun 2026 07:38:48 -0700
Subject: [PATCH] feat(qr): turn camera button into a scan-to-connect trigger

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 features/common/layouts/camerabutton.templ    | 21 ++++++++++---------
 features/common/layouts/camerabutton_templ.go | 17 ++++++++-------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/features/common/layouts/camerabutton.templ b/features/common/layouts/camerabutton.templ
index 63e1bc5..7a27c3d 100644
--- a/features/common/layouts/camerabutton.templ
+++ b/features/common/layouts/camerabutton.templ
@@ -1,19 +1,20 @@
 package layouts
 
-// CameraScanButton renders a mobile-only button that opens the device's rear
-// camera. It is a plain <label> wrapping a hidden file input with
-// capture="environment" — tapping it pops the native camera capture sheet.
+// CameraScanButton renders a mobile-only "scan to connect" button. Tapping it
+// opens a fullscreen live QR scanner (js/qr-scan.js): the rear camera streams,
+// frames are decoded with jsQR, and a scanned atmo.quest connect code
+// (/c/{did} or /c/l/{id}) navigates straight into the connect flow.
 //
-// The captured photo is intentionally not processed (no change handler): this
-// is a camera-launch affordance, not a QR scanner. See
-// docs/superpowers/specs/2026-05-31-mobile-camera-button-design.md.
+// The hidden file input is a fallback: if the live camera is unavailable or
+// the user denies permission, qr-scan.js triggers it so the user can snap a
+// single photo of the QR, which is decoded the same way.
 //
-// Visibility is controlled entirely by CSS: the .camera-scan class is
+// Visibility is controlled entirely by CSS: the .camera-scan wrapper is
 // display:none by default and only shown under @media (max-width: 768px),
 // matching the .bottom-nav mobile breakpoint.
 templ CameraScanButton() {
-	<label class="btn btn-ghost camera-scan">
-		📷 open camera
+	<div class="camera-scan">
+		<button type="button" class="btn btn-ghost" data-qr-scan>📷 scan to connect</button>
 		<input type="file" accept="image/*" capture="environment" hidden/>
-	</label>
+	</div>
 }
diff --git a/features/common/layouts/camerabutton_templ.go b/features/common/layouts/camerabutton_templ.go
index 483f592..d39d12a 100644
--- a/features/common/layouts/camerabutton_templ.go
+++ b/features/common/layouts/camerabutton_templ.go
@@ -8,15 +8,16 @@ package layouts
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-// CameraScanButton renders a mobile-only button that opens the device's rear
-// camera. It is a plain <label> wrapping a hidden file input with
-// capture="environment" — tapping it pops the native camera capture sheet.
+// CameraScanButton renders a mobile-only "scan to connect" button. Tapping it
+// opens a fullscreen live QR scanner (js/qr-scan.js): the rear camera streams,
+// frames are decoded with jsQR, and a scanned atmo.quest connect code
+// (/c/{did} or /c/l/{id}) navigates straight into the connect flow.
 //
-// The captured photo is intentionally not processed (no change handler): this
-// is a camera-launch affordance, not a QR scanner. See
-// docs/superpowers/specs/2026-05-31-mobile-camera-button-design.md.
+// The hidden file input is a fallback: if the live camera is unavailable or
+// the user denies permission, qr-scan.js triggers it so the user can snap a
+// single photo of the QR, which is decoded the same way.
 //
-// Visibility is controlled entirely by CSS: the .camera-scan class is
+// Visibility is controlled entirely by CSS: the .camera-scan wrapper is
 // display:none by default and only shown under @media (max-width: 768px),
 // matching the .bottom-nav mobile breakpoint.
 func CameraScanButton() templ.Component {
@@ -40,7 +41,7 @@ func CameraScanButton() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<label class=\"btn btn-ghost camera-scan\">📷 open camera <input type=\"file\" accept=\"image/*\" capture=\"environment\" hidden></label>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"camera-scan\"><button type=\"button\" class=\"btn btn-ghost\" data-qr-scan>📷 scan to connect</button> <input type=\"file\" accept=\"image/*\" capture=\"environment\" hidden></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-- 
2.51.2