From 9cfd2f29071fb004e5fd78259b47a8c829a3b009 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Sun, 1 Mar 2026 12:11:28 -0500
Subject: [PATCH] feat(machine): add scanning frame to QR code component

Wrap QrcodeVue in animated scanning frame with 4 pulsing corner
brackets and a sweep line. Increase default size from 300 to 380
for split-screen contexts. Use font-mono-code for URI preview.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/components/QRCode.vue | 68 +++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 11 deletions(-)

diff --git a/apps/machine/src/components/QRCode.vue b/apps/machine/src/components/QRCode.vue
index 19c1e2b..0e919a3 100644
--- a/apps/machine/src/components/QRCode.vue
+++ b/apps/machine/src/components/QRCode.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
   size?: number
 }>()
 
-const qrSize = computed(() => props.size ?? 200)
+const qrSize = computed(() => props.size ?? 380)
 
 // Read CSS variables for theme-aware colors
 const qrBackground = ref('#f5f0e6')
@@ -37,16 +37,62 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center rounded-xl bg-qr p-5">
-    <QrcodeVue
-      :value="value"
-      :size="qrSize"
-      level="M"
-      render-as="svg"
-      :background="qrBackground"
-      :foreground="qrForeground"
-    />
-    <code class="mt-3 block max-w-full break-all px-2 text-center text-xs text-qr-foreground">
+  <div class="flex flex-col items-center justify-center">
+    <!-- Scanning frame wrapper -->
+    <div class="relative inline-block">
+      <!-- Corner brackets -->
+      <!-- Top-left -->
+      <div
+        class="absolute -left-3 -top-3 h-8 w-8 border-l-4 border-t-4 border-primary rounded-tl-md animate-corner-pulse"
+      />
+      <!-- Top-right -->
+      <div
+        class="absolute -right-3 -top-3 h-8 w-8 border-r-4 border-t-4 border-primary rounded-tr-md animate-corner-pulse"
+        style="animation-delay: 0.5s"
+      />
+      <!-- Bottom-left -->
+      <div
+        class="absolute -bottom-3 -left-3 h-8 w-8 border-b-4 border-l-4 border-primary rounded-bl-md animate-corner-pulse"
+        style="animation-delay: 1s"
+      />
+      <!-- Bottom-right -->
+      <div
+        class="absolute -bottom-3 -right-3 h-8 w-8 border-b-4 border-r-4 border-primary rounded-br-md animate-corner-pulse"
+        style="animation-delay: 1.5s"
+      />
+
+      <!-- QR code -->
+      <div class="rounded-xl bg-qr p-6">
+        <QrcodeVue
+          :value="value"
+          :size="qrSize"
+          level="M"
+          render-as="svg"
+          :background="qrBackground"
+          :foreground="qrForeground"
+        />
+      </div>
+
+      <!-- Scanning line overlay -->
+      <div class="pointer-events-none absolute inset-0 overflow-hidden rounded-xl">
+        <div
+          class="absolute left-0 right-0 h-[3px] animate-qr-scan"
+          style="
+            background: linear-gradient(
+              90deg,
+              transparent 0%,
+              var(--primary) 50%,
+              transparent 100%
+            );
+          "
+        />
+      </div>
+    </div>
+
+    <!-- URI preview -->
+    <code
+      class="font-mono-code mt-4 block max-w-full break-all px-2 text-center text-sm text-muted-foreground"
+    >
       {{ value.slice(0, 32) }}...
     </code>
   </div>