From 613604f3c4de7a07f5b1e2fac024eb76941111a8 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Fri, 27 Feb 2026 17:52:36 +0000
Subject: [PATCH] feat(qr-scanner): remove frame, add shape detection overlay,
 improve fullscreen desktop layout

---
 src/App.vue                        |  6 +-
 src/components/Header.vue          |  2 +-
 src/components/tools/QrScanner.vue | 88 +++++++++++++++++++++---------
 src/style.css                      |  2 +
 4 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 94d1c7c..8505031 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -83,12 +83,12 @@ onUnmounted(() => {
 
 @media (min-width: 768px) {
   .app-body {
-    overflow: hidden;
+    overflow: visible;
   }
 
   .main-content {
-    overflow-y: auto;
-    height: 100%;
+    overflow: visible;
+    height: auto;
     padding-bottom: 2rem;
   }
 }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index e06bfe9..cf11707 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -63,7 +63,7 @@ onMounted(() => {
 <style scoped>
 .app-header {
   /* Remove hardcoded colors and use theme variables */
-  background: var(--glass-bg);
+  background: var(--header-bg);
   color: var(--text-color);
   padding: 1rem;
   /* box-shadow handled by glass-panel class */
diff --git a/src/components/tools/QrScanner.vue b/src/components/tools/QrScanner.vue
index d606f73..0cde6b9 100644
--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
 import { QrcodeStream } from 'vue-qrcode-reader'
 import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
 
@@ -8,6 +8,21 @@ const facingMode = ref('environment')
 const scannedCodes = ref([])
 const hasMultipleCameras = ref(false)
 const isFullscreen = ref(false)
+const videoAspect = ref(1)
+const updateVideoAspect = () => {
+  const videoEl = document.querySelector('.camera-wrapper video')
+  if (videoEl && videoEl.videoWidth && videoEl.videoHeight) {
+    videoAspect.value = videoEl.videoWidth / videoEl.videoHeight
+  }
+}
+const desktopFullscreenStyle = computed(() => {
+  if (!isFullscreen.value) return {}
+  const isDesktop = window.innerWidth >= 768
+  if (!isDesktop) return {}
+  const halfHeight = Math.floor(window.innerHeight * 0.5)
+  const widthPx = Math.min(window.innerWidth, Math.floor(halfHeight * videoAspect.value))
+  return { height: `${halfHeight}px`, width: `${widthPx}px`, margin: '0 auto' }
+})
 
 const processCodes = (codes) => {
   codes.forEach(code => {
@@ -79,8 +94,41 @@ const onDetect = (detectedCodes) => {
 
 const onCameraOn = async (capabilities) => {
   // Camera is ready
+  setTimeout(updateVideoAspect, 100)
 }
 
+const paintDetections = (detectedCodes, ctx) => {
+  try {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+    const styles = getComputedStyle(document.documentElement)
+    const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
+    detectedCodes.forEach(code => {
+      if (code.format && code.format !== 'qr_code') return
+      const points = code.cornerPoints || []
+      if (points.length < 4) return
+      ctx.beginPath()
+      ctx.moveTo(points[0].x, points[0].y)
+      for (let i = 1; i < points.length; i++) {
+        ctx.lineTo(points[i].x, points[i].y)
+      }
+      ctx.closePath()
+      ctx.lineWidth = 3
+      ctx.strokeStyle = accent
+      ctx.shadowColor = accent
+      ctx.shadowBlur = 8
+      ctx.stroke()
+      ctx.shadowBlur = 0
+      ctx.fillStyle = accent
+      points.forEach(p => {
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 2.5, 0, Math.PI * 2)
+        ctx.fill()
+      })
+    })
+  } catch (e) {
+    // ignore drawing errors
+  }
+}
 const onError = (err) => {
   if (err.name === 'NotAllowedError') {
     error.value = 'Camera permission denied'
@@ -122,6 +170,11 @@ watch(scannedCodes, (newVal) => {
 onMounted(() => {
   checkCameras()
   loadHistory()
+  window.addEventListener('resize', updateVideoAspect)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateVideoAspect)
 })
 
 const switchCamera = (event) => {
@@ -195,12 +248,13 @@ const isUrl = (string) => {
             <X size="24" />
           </button>
 
-          <div class="camera-wrapper" :class="{ 'clickable': !isFullscreen }" @click="!isFullscreen && toggleFullscreen()">
+          <div class="camera-wrapper" :class="{ 'clickable': !isFullscreen }" :style="desktopFullscreenStyle" @click="!isFullscreen && toggleFullscreen()">
             <QrcodeStream
               :constraints="{ facingMode }"
               @detect="onDetect"
               @error="onError"
               @camera-on="onCameraOn"
+              :track="paintDetections"
             >
               <div v-if="error" class="error-overlay">
                 <p>{{ error }}</p>
@@ -214,10 +268,6 @@ const isUrl = (string) => {
               >
                 <SwitchCamera size="24" />
               </button>
-
-              <div class="scan-overlay">
-                <div class="scan-frame"></div>
-              </div>
             </QrcodeStream>
           </div>
 
@@ -395,25 +445,7 @@ const isUrl = (string) => {
   backdrop-filter: blur(4px);
 }
 
-.scan-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.scan-frame {
-  width: 70%;
-  height: 70%;
-  border: 2px solid rgba(255, 255, 255, 0.5);
-  border-radius: 12px;
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
-}
+/* Removed legacy scan frame overlay - using shape detection rendering via track instead */
 
 .results-section {
   flex: 1;
@@ -581,4 +613,10 @@ const isUrl = (string) => {
   position: absolute !important;
   inset: 0 !important;
 }
+
+@media (min-width: 768px) {
+  :deep(.scanner-content.is-fullscreen .camera-wrapper video) {
+    object-fit: contain !important;
+  }
+}
 </style>
diff --git a/src/style.css b/src/style.css
index c2f8d45..548947f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -43,6 +43,7 @@
   --ripple-color: rgba(255, 255, 255, 0.3);
   --nav-item-weight: 400;
   --list-hover-bg: rgba(255, 255, 255, 0.05);
+  --header-bg: rgba(0, 0, 0, 0.6);
 
   color: var(--text-color);
   background-color: #242424; /* Fallback */
@@ -86,6 +87,7 @@
   --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
   --ripple-color: rgba(0, 0, 0, 0.1);
   --list-hover-bg: rgba(0, 0, 0, 0.05);
+  --header-bg: rgba(255, 255, 255, 0.9);
 }
 
 body {