feat(qr): sync generator text to url path payload and add generator button to scanner list

src/components/tools/QrCode.vue

@@ -4,6 +4,11 @@ import { Download } from 'lucide-vue-next'
 import QRCode from 'qrcode'
 import { useFillHeight } from '../../composables/useFillHeight'
 import { useLocalStorage } from '../../composables/useLocalStorage'
+import { useRoute, useRouter } from 'vue-router'
+import { fromBase64Url, toBase64Url } from '@gkucmierz/utils'
+
+const route = useRoute()
+const router = useRouter()
 
 const text = useLocalStorage('text', '', 'qr-code')
 const ecc = useLocalStorage('ecc', 'M', 'qr-code')
@@ -55,7 +60,26 @@ watch([text, ecc], () => {
   generateQR()
 })
 
+watch(text, (newText) => {
+  if (newText) {
+    router.replace({ name: 'QrCode', params: { payload: toBase64Url(newText) } })
+  } else {
+    router.replace({ name: 'QrCode', params: {} })
+  }
+})
+
 onMounted(() => {
+  if (route.params.payload) {
+    try {
+      const decodedPayload = fromBase64Url(route.params.payload)
+      text.value = decodedPayload
+    } catch (e) {
+      console.error('Failed to parse QR payload from URL', e)
+    }
+  } else if (text.value) {
+    router.replace({ name: 'QrCode', params: { payload: toBase64Url(text.value) } })
+  }
+
   if (text.value) generateQR()
 })
 

src/components/tools/QrScanner.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
-import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
+import { SwitchCamera, Trash2, Copy, Download, X, QrCode } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { toBase64Url } from '@gkucmierz/utils'
 import { useCamera } from '../../composables/useCamera'
 import { useQrDetection } from '../../composables/useQrDetection'
 
@@ -12,6 +14,12 @@ const bgCanvas = ref(null)
 let bgRafId = null
 
 const videoRef = ref(null)
+const router = useRouter()
+
+const navigateToGenerateQr = (text) => {
+  const payload = toBase64Url(text)
+  router.push({ name: 'QrCode', params: { payload } })
+}
 const overlayCanvas = ref(null)
 
 const {
@@ -353,6 +361,9 @@ const isUrl = (string) => {
                   <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
                     <Copy size="18" />
                   </button>
+                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" title="Generate QR Code" v-ripple>
+                    <QrCode size="18" />
+                  </button>
                   <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
                     <Trash2 size="18" />
                   </button>

src/router/index.js

@@ -34,7 +34,7 @@ const routes = [
     component: QrScanner
   },
   {
-    path: '/qr-code',
+    path: '/qr-code/:payload?',
     name: 'QrCode',
     component: QrCode
   },