0.6.24

chore: add open graph meta tags and preview image
0.6.23
2026-03-04 05:29:38 +00:00 · 2026-03-04 05:28:31 +00:00 · 2026-03-04 05:22:07 +00:00 · 2026-03-04 05:21:53 +00:00 · 2026-03-04 04:30:46 +00:00 · 2026-03-04 04:30:38 +00:00
18 changed files with 733 additions and 69 deletions
--- a/index.html
+++ b/index.html
@@ -7,6 +7,10 @@
    <meta name="theme-color" content="#4facfe" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tools App</title>
    <meta property="og:title" content="Tools App" />
    <meta property="og:description" content="A versatile collection of developer and everyday tools including a Password Generator, QR Code Scanner/Generator, URL Cleaner, and more." />
    <meta property="og:image" content="/preview.png" />
    <meta property="og:type" content="website" />
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
  "name": "tools-app",
-  "version": "0.6.20",
+  "version": "0.6.24",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "tools-app",
-      "version": "0.6.20",
+      "version": "0.6.24",
      "hasInstallScript": true,
      "dependencies": {
        "@gkucmierz/utils": "^1.28.7",
        "barcode-detector": "^3.1.0",
        "lucide-vue-next": "^0.575.0",
        "marked": "^17.0.3",
@@ -2135,6 +2136,12 @@
        "node": "^20.19.0 || ^22.13.0 || >=24"
      }
    },
    "node_modules/@gkucmierz/utils": {
      "version": "1.28.7",
      "resolved": "https://registry.npmjs.org/@gkucmierz/utils/-/utils-1.28.7.tgz",
      "integrity": "sha512-ekN8W4PL+SEeG0adWlkxxmTv6StLgxqtGRB9eBdWmkT5S4GSfJHYmzLY1ebc4jlL40OEa992ryvsT/TJS7eMmA==",
      "license": "MIT"
    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tools-app",
  "private": true,
-  "version": "0.6.20",
+  "version": "0.6.24",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -13,6 +13,7 @@
    "prepare": "husky"
  },
  "dependencies": {
    "@gkucmierz/utils": "^1.28.7",
    "barcode-detector": "^3.1.0",
    "lucide-vue-next": "^0.575.0",
    "marked": "^17.0.3",
--- a/public/preview.png
+++ b/public/preview.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 import ReloadPrompt from './components/ReloadPrompt.vue'
 import GlobalTooltip from './components/common/GlobalTooltip.vue'
 import { UI_CONFIG } from './config/ui'
 const isSidebarOpen = ref(window.innerWidth >= 768)
@@ -61,6 +62,7 @@ onUnmounted(() => {
  <Footer />
  <InstallPrompt />
  <ReloadPrompt />
  <GlobalTooltip />
 </template>
 <style scoped>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -35,7 +35,7 @@ onMounted(() => {
          class="menu-btn"
          @click="$emit('toggleSidebar')"
          aria-label="Toggle Menu"
-          title="Toggle Menu"
+          v-tooltip="'Toggle Menu'"
          v-ripple
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -50,7 +50,7 @@ onMounted(() => {
      <button
        class="btn-neon nav-btn icon-only"
        @click="toggleTheme"
-        :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+        v-tooltip="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
        v-ripple
      >
        <Sun v-if="isDark" :size="20" />
--- a/src/components/common/GlobalTooltip.vue
+++ b/src/components/common/GlobalTooltip.vue
@@ -0,0 +1,138 @@
 <script setup>
 import { tooltipState } from '../../composables/useTooltip'
 import { ref, watch, nextTick } from 'vue'
 const tooltipRef = ref(null)
 const x = ref(0)
 const y = ref(0)
 const arrowX = ref(0)
 const isBottom = ref(false)
 watch(() => tooltipState.isVisible, async (visible) => {
  if (visible) {
    // Wait for DOM update to ensure the text content affects height before measuring
    await nextTick()
    if (!tooltipRef.value || !tooltipState.targetRect) return
    const rect = tooltipState.targetRect
    const tooltipRect = tooltipRef.value.getBoundingClientRect()
    let top = rect.top - tooltipRect.height - 8
    let idealCenter = rect.left + (rect.width / 2)
    let left = idealCenter - (tooltipRect.width / 2)
    isBottom.value = false
    if (top < 8) {
      top = rect.bottom + 8
      isBottom.value = true
    }
    // Bounds checking for the tooltip box
    let actualLeft = left
    if (actualLeft < 8) {
      actualLeft = 8
    } else if (actualLeft + tooltipRect.width > window.innerWidth - 8) {
      actualLeft = window.innerWidth - tooltipRect.width - 8
    }
    // Calculate the difference between where the box is forced to be,
    // and where it naturally wanted to be. We move the arrow by the opposite amount.
    arrowX.value = idealCenter - (actualLeft + (tooltipRect.width / 2))
    x.value = actualLeft
    y.value = top
  }
 })
 </script>
 <template>
  <div
    ref="tooltipRef"
    class="global-tooltip"
    :class="{ 'visible': tooltipState.isVisible, 'tooltip-bottom': isBottom }"
    :style="{
      transform: `translate(${x}px, ${y}px)`,
      '--arrow-offset': `${arrowX}px`
    }"
  >
    {{ tooltipState.text }}
  </div>
 </template>
 <style scoped>
 .global-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f8fafc;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(4px) scale(0.95);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  visibility: hidden;
 }
 .global-tooltip::after {
  content: '';
  position: absolute;
  left: calc(50% + var(--arrow-offset, 0px));
  bottom: -5px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
 }
 .global-tooltip.tooltip-bottom::after {
  bottom: auto;
  top: -5px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px 0 0 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
 }
 .global-tooltip.visible {
  opacity: 1;
  visibility: visible;
  /* Transform returns to natural pos defined by inline styles when visible */
 }
 :root[data-theme="light"] .global-tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
 }
 :root[data-theme="light"] .global-tooltip::after {
  background: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(15, 23, 42, 0.1);
  border-bottom-color: rgba(15, 23, 42, 0.1);
 }
 :root[data-theme="light"] .global-tooltip.tooltip-bottom::after {
  border-left-color: rgba(15, 23, 42, 0.1);
  border-top-color: rgba(15, 23, 42, 0.1);
 }
 </style>
--- a/src/components/tools/ClipboardSniffer.vue
+++ b/src/components/tools/ClipboardSniffer.vue
@@ -62,7 +62,7 @@ const clearText = () => {
          class="btn-neon"
          @click="startListening"
          :disabled="!isExtensionReady"
-          :title="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
+          v-tooltip="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
          v-ripple
        >
          Start Sniffing
--- a/src/components/tools/QrCode.vue
+++ b/src/components/tools/QrCode.vue
@@ -1,16 +1,139 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, computed, onUnmounted } from 'vue'
-import { Download } from 'lucide-vue-next'
+import { Download, Eye, EyeOff } 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')
 const size = useLocalStorage('size', 300, 'qr-code')
 const isBgTransparent = useLocalStorage('isBgTransparent', true, 'qr-code')
 const bgType = useLocalStorage('bgType', 'solid', 'qr-code')
 const bgColor1 = useLocalStorage('bgColor1', '#ffffff', 'qr-code')
 const bgColor2 = useLocalStorage('bgColor2', '#e2e8f0', 'qr-code')
 const bgGradPos = useLocalStorage('bgGradPos', { x1: 50, y1: 50, x2: 100, y2: 100 }, 'qr-code')
 const fgType = useLocalStorage('fgType', 'solid', 'qr-code')
 const fgColor1 = useLocalStorage('fgColor1', '#000000', 'qr-code')
 const fgColor2 = useLocalStorage('fgColor2', '#10b981', 'qr-code')
 const fgGradPos = useLocalStorage('fgGradPos', { x1: 0, y1: 0, x2: 100, y2: 100 }, 'qr-code')
 const showHandles = useLocalStorage('showHandles', true, 'qr-code')
 const format = useLocalStorage('format', 'png', 'qr-code')
 const svgContent = ref('')
 const previewRef = ref(null)
 const qrFrameRef = ref(null)
 const fgLinePts = computed(() => getLineEndPoints(fgGradPos.value))
 const bgLinePts = computed(() => getLineEndPoints(bgGradPos.value))
 const getLineEndPoints = (pos) => {
  if (!qrFrameRef.value) return { x1: pos.x1, y1: pos.y1, x2: pos.x2, y2: pos.y2 }
  const rect = qrFrameRef.value.getBoundingClientRect()
  if (rect.width === 0 || rect.height === 0) return { x1: pos.x1, y1: pos.y1, x2: pos.x2, y2: pos.y2 }
  // Handle radius in pixels (14/2 = 7px) plus half the line stroke width (1/2 = 0.5px) if needed
  const VISUAL_OFFSET_PX = 1;
  const rPx = 7 - VISUAL_OFFSET_PX;
  const dx = (pos.x2 - pos.x1) * rect.width / 100
  const dy = (pos.y2 - pos.y1) * rect.height / 100
  const distPx = Math.sqrt(dx * dx + dy * dy)
  if (distPx <= rPx * 2) {
    // Too close, don't show line
    return { x1: pos.x1, y1: pos.y1, x2: pos.x1, y2: pos.y1 }
  }
  const angle = Math.atan2(dy, dx)
  // Calculate offsets in percentages (using radius, not diameter)
  // adding extra 1px to accommodate the stroke/shadow
  const effectiveRPx = rPx + 1
  const xOffsetPct = (Math.cos(angle) * effectiveRPx / rect.width) * 100
  const yOffsetPct = (Math.sin(angle) * effectiveRPx / rect.height) * 100
  return {
    x1: pos.x1 + xOffsetPct,
    y1: pos.y1 + yOffsetPct,
    x2: pos.x2 - xOffsetPct,
    y2: pos.y2 - yOffsetPct
  }
 }
 const activeHandle = ref(null)
 const startDrag = (e, handleStr) => {
  e.preventDefault()
  activeHandle.value = handleStr
  window.addEventListener('mousemove', onDrag)
  window.addEventListener('mouseup', stopDrag)
  window.addEventListener('touchmove', onDrag, { passive: false })
  window.addEventListener('touchend', stopDrag)
 }
 const onDrag = (e) => {
  if (!activeHandle.value || !qrFrameRef.value) return
  if (e.type === 'touchmove') e.preventDefault()
  const rect = qrFrameRef.value.getBoundingClientRect()
  const clientX = e.touches ? e.touches[0].clientX : e.clientX
  const clientY = e.touches ? e.touches[0].clientY : e.clientY
  let x = ((clientX - rect.left) / rect.width) * 100
  let y = ((clientY - rect.top) / rect.height) * 100
  x = Math.max(0, Math.min(100, x))
  y = Math.max(0, Math.min(100, y))
  // Snap to 5 points (Corners + Center)
  // Distance threshold in percentages, roughly matching handle diameter mapping
  const snapDist = 5
  const snapPoints = [
    { x: 0, y: 0 }, { x: 100, y: 0 },
    { x: 0, y: 100 }, { x: 100, y: 100 },
    { x: 50, y: 50 }
  ]
  for (const pt of snapPoints) {
    if (Math.abs(x - pt.x) < snapDist && Math.abs(y - pt.y) < snapDist) {
      x = pt.x
      y = pt.y
      break
    }
  }
  const [type, point] = activeHandle.value.split(':')
  const posRef = type === 'fg' ? fgGradPos : bgGradPos
  posRef.value[`x${point}`] = Math.round(x)
  posRef.value[`y${point}`] = Math.round(y)
 }
 let justDragged = false
 const stopDrag = () => {
  if (activeHandle.value) {
    justDragged = true
    setTimeout(() => { justDragged = false }, 50)
  }
  activeHandle.value = null
  window.removeEventListener('mousemove', onDrag)
  window.removeEventListener('mouseup', stopDrag)
  window.removeEventListener('touchmove', onDrag)
  window.removeEventListener('touchend', stopDrag)
 }
 const handleFrameClick = (event) => {
  if (justDragged) return
  if (!activeHandle.value) {
    showHandles.value = !showHandles.value
  }
 }
 const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
@@ -47,20 +170,46 @@ const generateQR = () => {
  worker.postMessage({
    id: latestJobId,
    text: text.value,
-    ecc: ecc.value
+    ecc: ecc.value,
    isBgTransparent: isBgTransparent.value,
    bgType: bgType.value,
    bgColor1: bgColor1.value,
    bgColor2: bgColor2.value,
    bgGradPos: { ...bgGradPos.value },
    fgType: fgType.value,
    fgColor1: fgColor1.value,
    fgColor2: fgColor2.value,
    fgGradPos: { ...fgGradPos.value }
  })
 }
-watch([text, ecc], () => {
+watch([text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos], () => {
  generateQR()
 }, { deep: true })
 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()
 })
 import { onUnmounted } from 'vue'
 onUnmounted(() => {
  if (worker) {
    worker.terminate()
@@ -68,36 +217,48 @@ onUnmounted(() => {
 })
 const downloadFile = async () => {
-  if (!text.value) return
+  if (!text.value || !svgContent.value) return
  const filename = `qr-code-${Date.now()}.${format.value}`
  if (format.value === 'svg') {
-    // For SVG download, we might want to inject the size if user specifically requested it,
+    let finalSvg = svgContent.value
-    // but usually raw SVG is better.
+    if (!finalSvg.includes('width=')) {
-    // If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
+      finalSvg = finalSvg.replace('<svg ', `<svg width="${size.value}" height="${size.value}" `)
-    const svgWithSize = await QRCode.toString(text.value, {
+    }
-      type: 'svg',
+    const blob = new Blob([finalSvg], { type: 'image/svg+xml' })
      errorCorrectionLevel: ecc.value,
      margin: 1,
      width: size.value
    })
    const blob = new Blob([svgWithSize], { type: 'image/svg+xml' })
    triggerDownload(blob, filename)
  } else {
    // For raster formats, render to canvas first
    try {
      const canvas = document.createElement('canvas')
-      await QRCode.toCanvas(canvas, text.value, {
+      canvas.width = size.value
-        errorCorrectionLevel: ecc.value,
+      canvas.height = size.value
-        margin: 1,
+      const ctx = canvas.getContext('2d')
        width: size.value
      })
-      const mime = `image/${format.value}`
+      const img = new Image()
      const svgSource = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent.value)}`
      img.onload = () => {
        if (format.value === 'jpeg' && isBgTransparent.value) {
          ctx.fillStyle = '#ffffff'
          ctx.fillRect(0, 0, size.value, size.value)
        } else if (format.value === 'jpeg' && bgType.value !== 'solid') {
          // Let the Canvas render the SVG's background gradient naturally instead of filling
          // Though drawing bounding rect white might still be needed behind transparent parts
          ctx.fillStyle = '#ffffff'
          ctx.fillRect(0, 0, size.value, size.value)
        }
        ctx.drawImage(img, 0, 0, size.value, size.value)
        const mime = format.value === 'jpeg' ? 'image/jpeg' : `image/${format.value}`
        canvas.toBlob((blob) => {
          if (blob) triggerDownload(blob, filename)
-      }, mime)
+        }, mime, 1.0)
      }
      img.onerror = (e) => {
        console.error('Failed to load SVG for conversion', e)
      }
      img.src = svgSource
    } catch (err) {
      console.error('Download failed', err)
    }
@@ -143,22 +304,88 @@ const triggerDownload = (blob, filename) => {
            <option value="H">High (30%)</option>
          </select>
        </div>
        <div class="control-group">
          <label>QR Style</label>
          <select v-model="fgType" class="select-input">
            <option value="solid">Solid Color</option>
            <option value="linear">Linear Gradient</option>
            <option value="radial">Radial Gradient</option>
          </select>
        </div>
        <div class="control-group">
          <label>QR Color(s)</label>
          <div class="color-picker-wrapper">
            <input type="color" v-model="fgColor1" class="color-input">
            <input type="color" v-model="fgColor2" v-if="fgType !== 'solid'" class="color-input">
          </div>
        </div>
        <div class="control-group">
          <label>Background Style</label>
          <select v-model="bgType" :disabled="isBgTransparent" class="select-input">
            <option value="solid">Solid Color</option>
            <option value="linear">Linear Gradient</option>
            <option value="radial">Radial Gradient</option>
          </select>
        </div>
        <div class="control-group">
          <label>Background Color(s)</label>
          <div class="color-picker-wrapper">
            <input type="color" v-model="bgColor1" :disabled="isBgTransparent" class="color-input">
            <input type="color" v-model="bgColor2" v-if="bgType !== 'solid'" :disabled="isBgTransparent" class="color-input">
            <label class="checkbox-label" style="margin-left: 0.5rem">
              <input type="checkbox" v-model="isBgTransparent"> Transparent
            </label>
          </div>
        </div>
      </div>
      <div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
        <div class="qr-container">
-          <div class="qr-frame" v-html="svgContent"></div>
+          <div
            class="qr-frame"
            :style="{
              background: isBgTransparent ? 'white' : bgType === 'solid' ? bgColor1 : (bgType === 'linear' ? `linear-gradient(to bottom right, ${bgColor1}, ${bgColor2})` : `radial-gradient(circle, ${bgColor1}, ${bgColor2})`),
              cursor: (fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? 'pointer' : 'default'
            }"
            @click="handleFrameClick"
            v-tooltip="(fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? (showHandles ? 'Hide edit handles' : 'Show edit handles') : ''"
          >
             <div class="svg-wrapper" ref="qrFrameRef">
                <div v-html="svgContent" class="svg-content-box"></div>
                <template v-if="showHandles">
                  <!-- Background Gradient Handles -->
                  <template v-if="!isBgTransparent && bgType !== 'solid'">
                    <div class="grad-handle bg-handle handle-1" :style="{ left: bgGradPos.x1 + '%', top: bgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'bg:1')" @touchstart.prevent="startDrag($event, 'bg:1')" @click.stop></div>
                    <div class="grad-handle bg-handle handle-2" :style="{ left: bgGradPos.x2 + '%', top: bgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'bg:2')" @touchstart.prevent="startDrag($event, 'bg:2')" @click.stop></div>
                    <svg class="grad-line-svg"><line :x1="bgLinePts.x1 + '%'" :y1="bgLinePts.y1 + '%'" :x2="bgLinePts.x2 + '%'" :y2="bgLinePts.y2 + '%'" class="bg-line" /></svg>
                  </template>
                  <!-- Foreground Gradient Handles -->
                  <template v-if="fgType !== 'solid'">
                    <div class="grad-handle fg-handle handle-1" :style="{ left: fgGradPos.x1 + '%', top: fgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'fg:1')" @touchstart.prevent="startDrag($event, 'fg:1')" @click.stop></div>
                    <div class="grad-handle fg-handle handle-2" :style="{ left: fgGradPos.x2 + '%', top: fgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'fg:2')" @touchstart.prevent="startDrag($event, 'fg:2')" @click.stop></div>
                    <svg class="grad-line-svg"><line :x1="fgLinePts.x1 + '%'" :y1="fgLinePts.y1 + '%'" :x2="fgLinePts.x2 + '%'" :y2="fgLinePts.y2 + '%'" class="fg-line" /></svg>
                  </template>
                </template>
             </div>
          </div>
        </div>
        <div class="download-settings">
          <div class="control-group">
            <label>Size (px)</label>
            <div class="number-control size-control">
-              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100" v-ripple>-100</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 100)" v-tooltip="'-100'" v-ripple>-100</button>
-              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10" v-ripple>-10</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 10)" v-tooltip="'-10'" v-ripple>-10</button>
              <input type="number" v-model.number="size" class="number-input" />
-              <button class="control-btn" @click="size += 10" title="+10" v-ripple>+10</button>
+              <button class="control-btn" @click="size += 10" v-tooltip="'+10'" v-ripple>+10</button>
-              <button class="control-btn" @click="size += 100" title="+100" v-ripple>+100</button>
+              <button class="control-btn" @click="size += 100" v-tooltip="'+100'" v-ripple>+100</button>
            </div>
          </div>
@@ -228,6 +455,42 @@ const triggerDownload = (blob, filename) => {
  color: var(--text-secondary);
 }
 .color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
 }
 .color-input {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--panel-bg);
 }
 .color-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
 }
 .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-secondary);
  user-select: none;
 }
 .checkbox-label input {
  cursor: pointer;
  width: 16px;
  height: 16px;
 }
 .preview-section {
  display: flex;
@@ -249,8 +512,11 @@ const triggerDownload = (blob, filename) => {
  width: 100%;
  min-height: 0;
  container-type: size;
  position: relative;
 }
 :root[data-theme="light"] .preview-section {
  background: rgba(255, 255, 255, 0.3);
 }
@@ -268,6 +534,57 @@ const triggerDownload = (blob, filename) => {
  overflow: hidden;
 }
 .svg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
 }
 .svg-content-box {
  width: 100%;
  height: 100%;
  display: block;
 }
 .svg-content-box :deep(svg) {
  width: 100%;
  height: 100%;
  display: block;
 }
 .grad-line-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
 }
 .grad-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: grab;
  z-index: 10;
  touch-action: none;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 4px 0px rgb(0, 0, 0);
 }
 .grad-handle:active {
  cursor: grabbing;
 }
 .fg-line, .bg-line {
  stroke: rgb(255, 255, 255);
  stroke-width: 1;
  filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
 }
 .download-settings {
  display: flex;
  gap: 1.5rem;
@@ -294,5 +611,23 @@ const triggerDownload = (blob, filename) => {
  min-width: 100px !important;
 }
@media (max-width: 600px) {
  .preview-section {
    padding: 1rem 0.5rem;
    gap: 1rem;
    border-radius: 8px;
  }
  .qr-container {
    width: 100%;
    aspect-ratio: 1;
    min-height: unset;
  }
  .qr-frame {
    padding: 0.5rem;
  }
 }
 </style>
--- a/src/components/tools/QrScanner.vue
+++ b/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 {
@@ -314,7 +322,7 @@ const isUrl = (string) => {
              v-if="hasMultipleCameras"
              class="switch-camera-btn"
              @click.stop="switchCamera"
-              title="Switch Camera"
+              v-tooltip="'Switch Camera'"
              v-ripple
            >
              <SwitchCamera size="24" />
@@ -325,13 +333,13 @@ const isUrl = (string) => {
            <div class="results-header">
              <h3>Scanned Codes ({{ scannedCodes.length }})</h3>
              <div v-if="scannedCodes.length > 0" class="header-actions">
-                <button class="icon-btn" @click="copyAll" title="Copy All" v-ripple>
+                <button class="icon-btn" @click="copyAll" v-tooltip="'Copy All'" v-ripple>
                  <Copy size="18" />
                </button>
-                <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
+                <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
                  <Download size="18" />
                </button>
-                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All" v-ripple>
+                <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear All'" v-ripple>
                  <Trash2 size="18" />
                </button>
              </div>
@@ -350,10 +358,13 @@ const isUrl = (string) => {
                  </div>
                </div>
                <div class="item-actions">
-                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" v-tooltip="'Copy'" v-ripple>
                    <Copy size="18" />
                  </button>
-                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
+                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" v-tooltip="'Generate QR Code'" v-ripple>
                    <QrCode size="18" />
                  </button>
                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" v-tooltip="'Remove'" v-ripple>
                    <Trash2 size="18" />
                  </button>
                </div>
@@ -481,9 +492,11 @@ const isUrl = (string) => {
 }
 .switch-camera-btn {
-  position: absolute;
+  position: absolute !important;
-  top: 1rem;
+  top: auto !important;
-  right: 1rem;
+  left: auto !important;
  bottom: 0.75rem !important;
  right: 0.75rem !important;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
      <div class="panel-header">
        <h2 class="tool-title">URL Cleaner</h2>
        <div class="header-actions">
-          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions" v-ripple>
+          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" v-tooltip="'Cleaning Exceptions'" v-ripple>
            <Settings size="20" />
          </button>
          <ExtensionStatus :isReady="isExtensionReady" />
@@ -137,7 +137,7 @@ onUnmounted(() => {
            :class="{ 'active': isWatchEnabled && isExtensionReady }"
            @click="toggleWatch"
            :disabled="!isExtensionReady"
-            :title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
+            v-tooltip="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
            v-ripple
          >
            <Power size="18" />
@@ -151,13 +151,13 @@ onUnmounted(() => {
        <div class="history-header">
          <h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
          <div class="history-actions">
-            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs" v-ripple>
+            <button class="icon-btn" @click="copyAllUrls" v-tooltip="'Copy all URLs'" v-ripple>
              <Copy size="18" />
            </button>
-            <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
+            <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
              <Download size="18" />
            </button>
-            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History" v-ripple>
+            <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear History'" v-ripple>
              <Trash2 size="18" />
            </button>
          </div>
@@ -176,13 +176,13 @@ onUnmounted(() => {
              </div>
            </div>
            <div class="item-actions">
-              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
+              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" v-tooltip="'Copy'" v-ripple>
-                <Copy size="18" />
+                <Copy size="16" />
              </button>
-              <a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
+              <a :href="item.cleaned" target="_blank" class="icon-btn" v-tooltip="'Open'" v-ripple>
-                <ExternalLink size="18" />
+                <ExternalLink size="16" />
              </a>
-              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove" v-ripple>
+              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" v-tooltip="'Remove'" v-ripple>
                <X size="18" />
              </button>
            </div>
--- a/src/components/tools/UrlCleanerExceptionsModal.vue
+++ b/src/components/tools/UrlCleanerExceptionsModal.vue
@@ -268,13 +268,13 @@ const resetToDefault = (ruleId) => {
            <div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
              <div class="rule-info">
-                <div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
+                <div class="rule-domain" @click="editRule(rule)" v-tooltip="'Click to edit'">{{ rule.domainPattern }}</div>
                <div class="rule-details">
                  <div class="params-list">
                    <template v-if="rule.keepAllParams">
                      <span class="detail-tag">
                        Keep all params
-                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
+                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" v-tooltip="'Disable keep all params'">
                          <X size="12" />
                        </button>
                      </span>
@@ -282,14 +282,14 @@ const resetToDefault = (ruleId) => {
                    <template v-else>
                      <span v-for="param in rule.keepParams" :key="param" class="detail-tag">
                        {{ param }}
-                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
+                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" v-tooltip="'Remove parameter'">
                          <X size="12" />
                        </button>
                      </span>
                    </template>
                    <span v-if="rule.keepHash" class="detail-tag hash-tag">
                      Keep #
-                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
+                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" v-tooltip="'Remove hash exception'">
                        <X size="12" />
                      </button>
                    </span>
@@ -302,7 +302,7 @@ const resetToDefault = (ruleId) => {
                <button
                  class="icon-btn"
                  @click="toggleRule(rule.id)"
-                  :title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                  v-tooltip="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
                  v-ripple
                >
                  <div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
@@ -312,12 +312,12 @@ const resetToDefault = (ruleId) => {
                  v-if="!rule.isDefault"
                  class="icon-btn delete-btn"
                  @click="removeRule(rule.id)"
-                  title="Remove rule"
+                  v-tooltip="'Remove rule'"
                  v-ripple
                >
                  <Trash2 size="18" />
                </button>
-                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule" v-ripple>
+                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" v-tooltip="'Restore default rule'" v-ripple>
                  <RotateCcw size="16" /> Default
                </button>
              </div>
--- a/src/components/tools/common/ExtensionStatus.vue
+++ b/src/components/tools/common/ExtensionStatus.vue
@@ -34,7 +34,7 @@ onUnmounted(() => {
 </script>
 <template>
-  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
+  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" v-tooltip="isReady ? 'Extension Connected' : 'Extension Not Connected'">
    <Plug v-if="isReady" size="18" />
    <Plus v-else size="18" />
  </div>
--- a/src/composables/useTooltip.js
+++ b/src/composables/useTooltip.js
@@ -0,0 +1,34 @@
 import { reactive } from 'vue'
 export const tooltipState = reactive({
  isVisible: false,
  text: '',
  targetRect: null
 })
 export function showTooltip(el, text) {
  if (!text) return;
  if (!el.hasAttribute('aria-label')) {
    el.setAttribute('aria-label', text);
  }
  const rect = el.getBoundingClientRect();
  tooltipState.targetRect = {
    top: rect.top,
    left: rect.left,
    width: rect.width,
    bottom: rect.bottom
  };
  tooltipState.text = text;
  tooltipState.isVisible = true;
 }
 // Hide tooltip on any scroll event to avoid floating detached tooltips
 if (typeof window !== 'undefined') {
  window.addEventListener('scroll', hideTooltip, { passive: true, capture: true })
 }
 export function hideTooltip() {
  tooltipState.isVisible = false;
 }
--- a/src/directives/tooltip.js
+++ b/src/directives/tooltip.js
@@ -0,0 +1,84 @@
 import { showTooltip, hideTooltip, tooltipState } from '../composables/useTooltip'
 export const tooltipDirective = {
  mounted(el, binding) {
    el._tooltipText = binding.value;
    let touchTimeout = null;
    let isTouch = false;
    el._handleMouseEnter = () => {
      if (!isTouch) showTooltip(el, el._tooltipText);
    };
    el._handleMouseLeave = () => {
      if (!isTouch) hideTooltip();
    };
    el._handleFocus = () => {
      if (!isTouch) showTooltip(el, el._tooltipText);
    };
    el._handleBlur = () => {
      if (!isTouch) hideTooltip();
    };
    el._handleTouchStart = () => {
      isTouch = true;
      if (touchTimeout) clearTimeout(touchTimeout);
      touchTimeout = setTimeout(() => {
        showTooltip(el, el._tooltipText);
      }, 400); // 400ms long press threshold
    };
    el._handleTouchEnd = () => {
      if (touchTimeout) clearTimeout(touchTimeout);
      hideTooltip();
      // Block ensuing simulated mouseenter events
      setTimeout(() => { isTouch = false; }, 500);
    };
    el._handleTouchCancel = () => {
      if (touchTimeout) clearTimeout(touchTimeout);
      hideTooltip();
      setTimeout(() => { isTouch = false; }, 500);
    };
    el._handleContextMenu = (e) => {
      // Prevent the OS context menu if we're showing a tooltip via long press
      if (isTouch && tooltipState.isVisible && tooltipState.text === el._tooltipText) {
        e.preventDefault();
      }
    };
    el.addEventListener('mouseenter', el._handleMouseEnter);
    el.addEventListener('mouseleave', el._handleMouseLeave);
    el.addEventListener('focus', el._handleFocus);
    el.addEventListener('blur', el._handleBlur);
    el.addEventListener('touchstart', el._handleTouchStart, { passive: true });
    el.addEventListener('touchend', el._handleTouchEnd);
    el.addEventListener('touchmove', el._handleTouchCancel, { passive: true });
    el.addEventListener('touchcancel', el._handleTouchCancel);
    el.addEventListener('contextmenu', el._handleContextMenu);
  },
  updated(el, binding) {
    el._tooltipText = binding.value;
    if (tooltipState.isVisible && tooltipState.text !== binding.value) {
      if (el.matches(':hover') || document.activeElement === el) {
        showTooltip(el, binding.value);
      }
    }
  },
  unmounted(el) {
    if (el._handleMouseEnter) {
      el.removeEventListener('mouseenter', el._handleMouseEnter);
      el.removeEventListener('mouseleave', el._handleMouseLeave);
      el.removeEventListener('focus', el._handleFocus);
      el.removeEventListener('blur', el._handleBlur);
      el.removeEventListener('touchstart', el._handleTouchStart);
      el.removeEventListener('touchend', el._handleTouchEnd);
      el.removeEventListener('touchmove', el._handleTouchCancel);
      el.removeEventListener('touchcancel', el._handleTouchCancel);
      el.removeEventListener('contextmenu', el._handleContextMenu);
    }
    hideTooltip();
  }
 };
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import './style.css'
 import App from './App.vue'
 import router from './router'
 import Ripple from './directives/ripple'
 import { tooltipDirective } from './directives/tooltip'
 import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
 // Configure BarcodeDetector polyfill to use local WASM file
@@ -28,5 +29,6 @@ try {
 const app = createApp(App)
 app.directive('ripple', Ripple)
 app.directive('tooltip', tooltipDirective)
 app.use(router)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,7 +34,7 @@ const routes = [
    component: QrScanner
  },
  {
-    path: '/qr-code',
+    path: '/qr-code/:payload?',
    name: 'QrCode',
    component: QrCode
  },
--- a/src/workers/qrcode.worker.js
+++ b/src/workers/qrcode.worker.js
@@ -1,7 +1,7 @@
 import QRCode from 'qrcode'
 self.onmessage = async (e) => {
-  const { id, text, ecc } = e.data
+  const { id, text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos } = e.data
  if (!text) {
    self.postMessage({ id, svgContent: '' })
@@ -9,12 +9,56 @@ self.onmessage = async (e) => {
  }
  try {
-    const svgContent = await QRCode.toString(text, {
+    let svgContent = await QRCode.toString(text, {
      type: 'svg',
      errorCorrectionLevel: ecc,
      margin: 1,
      color: {
        dark: fgType === 'solid' ? fgColor1 : '#000000',
        light: isBgTransparent ? '#00000000' : (bgType === 'solid' ? bgColor1 : '#00000000')
      }
    })
    let defsHtml = ''
    if (fgType !== 'solid') {
      const isLinear = fgType === 'linear'
      const pos = fgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
      const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
      defsHtml += isLinear
        ? `<linearGradient id="qr-fg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></linearGradient>`
        : `<radialGradient id="qr-fg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></radialGradient>`
    }
    if (!isBgTransparent && bgType !== 'solid') {
      const isLinear = bgType === 'linear'
      const pos = bgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
      const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
      defsHtml += isLinear
        ? `<linearGradient id="qr-bg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></linearGradient>`
        : `<radialGradient id="qr-bg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></radialGradient>`
    }
    if (defsHtml) {
      svgContent = svgContent.replace('shape-rendering="crispEdges">', `shape-rendering="crispEdges"><defs>${defsHtml}</defs>`)
    }
    if (fgType !== 'solid') {
      // qrcode outputs <path stroke="#000000"...> so it's safe to replace
      svgContent = svgContent.replace(/stroke="#000000"/g, 'stroke="url(#qr-fg-grad)"')
    }
    if (!isBgTransparent && bgType !== 'solid') {
      // Find viewBox to inject background rect
      const viewBoxMatch = svgContent.match(/viewBox="0 0 (\d+) (\d+)"/)
      if (viewBoxMatch) {
        const w = viewBoxMatch[1]
        const h = viewBoxMatch[2]
        // Inject a rect immediately inside the svg
        svgContent = svgContent.replace('</defs>', `</defs><rect width="${w}" height="${h}" fill="url(#qr-bg-grad)" />`)
      }
    }
    self.postMessage({ id, svgContent })
  } catch (err) {
    self.postMessage({ id, error: err.message })
Author	SHA1	Message	Date
Grzegorz Kucmierz	d395d8754a	0.6.24 All checks were successful Deploy to Production / deploy (push) Successful in 27s Details	2026-03-04 05:29:38 +00:00
Grzegorz Kucmierz	4c1815b3b3	chore: add open graph meta tags and preview image All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-04 05:28:31 +00:00
Grzegorz Kucmierz	d82f5ec7c5	0.6.23 All checks were successful Deploy to Production / deploy (push) Successful in 24s Details	2026-03-04 05:22:07 +00:00
Grzegorz Kucmierz	4711102407	feat(qr): improve mobile UX for scanner and generator	2026-03-04 05:21:53 +00:00
Grzegorz Kucmierz	a367d364df	0.6.22 All checks were successful Deploy to Production / deploy (push) Successful in 16s Details	2026-03-04 04:30:46 +00:00
Grzegorz Kucmierz	27fee3ac34	feat: replace native titles with global vue tooltips	2026-03-04 04:30:38 +00:00
Grzegorz Kucmierz	b5a79f8dbe	0.6.21 All checks were successful Deploy to Production / deploy (push) Successful in 16s Details	2026-03-04 04:11:37 +00:00
Grzegorz Kucmierz	b6eb33f205	feat(qr): refine gradient drag handles with visual offsets, magnetic snapping to corners, and floating icon toggle	2026-03-04 04:11:05 +00:00
Grzegorz Kucmierz	bec6a0ec8f	style(qr): synchronize gradient handle and line styles with CSS variables	2026-03-04 03:35:29 +00:00
Grzegorz Kucmierz	52024ad7c6	style(qr): make gradient edit handles and lines thin black with delicate white glow	2026-03-04 03:27:31 +00:00
Grzegorz Kucmierz	805b986a7b	style(qr): enhance editable gradient handles with a glow and add visibility toggle	2026-03-04 03:24:53 +00:00
Grzegorz Kucmierz	8fa0c9bd44	feat(qr): add draggable gradient handles for background and foreground styling	2026-03-04 03:22:56 +00:00
Grzegorz Kucmierz	9f9ea255a8	feat(qr): implement background style and gradient support for QR generation	2026-03-04 03:18:06 +00:00
Grzegorz Kucmierz	858e880c38	fix(qr): fix svg attribute malformation when injecting gradient defs	2026-03-04 03:15:19 +00:00
Grzegorz Kucmierz	f8953984ef	feat(qr): add background and foreground colors/gradient customization	2026-03-04 03:13:39 +00:00
Grzegorz Kucmierz	6be7abfe02	feat(qr): sync generator text to url path payload and add generator button to scanner list All checks were successful Deploy to Production / deploy (push) Successful in 24s Details	2026-03-04 03:07:17 +00:00