From dff8a2a0ab87e5abd84fa8cb085884e3479de3d0 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Tue, 3 Mar 2026 11:19:57 +0000
Subject: [PATCH] refactor: extract logic from QrScanner and UrlCleaner to
 composables

---
 src/components/tools/QrScanner.vue  | 282 +++++-----------------------
 src/components/tools/UrlCleaner.vue | 129 ++-----------
 src/composables/useCamera.js        | 110 +++++++++++
 src/composables/useQrDetection.js   | 174 +++++++++++++++++
 src/composables/useUrlCleaner.js    | 115 ++++++++++++
 5 files changed, 453 insertions(+), 357 deletions(-)
 create mode 100644 src/composables/useCamera.js
 create mode 100644 src/composables/useQrDetection.js
 create mode 100644 src/composables/useUrlCleaner.js

diff --git a/src/components/tools/QrScanner.vue b/src/components/tools/QrScanner.vue
index 3024662..a699881 100644
--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -1,113 +1,41 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
-import { SwitchCamera, Trash2, Copy, Download, X, Maximize2, Minimize2 } from 'lucide-vue-next'
+import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
+import { useCamera } from '../../composables/useCamera'
+import { useQrDetection } from '../../composables/useQrDetection'
 
-const error = ref('')
-const facingMode = ref('environment')
 const scannedCodes = ref([])
-const hasMultipleCameras = ref(false)
 const isFullscreen = ref(false)
 const videoAspect = ref(1)
-const isMirrored = ref(false)
 const wrapperRef = ref(null)
 const bgCanvas = ref(null)
 let bgRafId = null
 
-// Native scanner state
 const videoRef = ref(null)
-let stream = null
-let scanRafId = null
-let barcodeDetector = null
-
 const overlayCanvas = ref(null)
 
-const paintDetections = (codes) => {
-  const canvas = overlayCanvas.value
-  const video = videoRef.value
+const {
+  stream,
+  facingMode,
+  hasMultipleCameras,
+  isMirrored,
+  error: cameraError,
+  checkCameras,
+  startCamera,
+  stopCamera,
+  switchCamera: baseSwitchCamera
+} = useCamera(videoRef)
 
-  if (!canvas || !video) return
+const {
+  error: detectionError,
+  isDetecting,
+  startDetection,
+  stopDetection
+} = useQrDetection(videoRef, overlayCanvas)
 
-  const ctx = canvas.getContext('2d')
-  const { width, height } = canvas.getBoundingClientRect()
-
-  // Update canvas size if needed (to match CSS size)
-  if (canvas.width !== width || canvas.height !== height) {
-    canvas.width = width
-    canvas.height = height
-  }
-
-  ctx.clearRect(0, 0, width, height)
-
-  if (!codes || codes.length === 0) return
-
-  const vw = video.videoWidth
-  const vh = video.videoHeight
-  if (!vw || !vh) return
-
-  // Calculate object-fit: cover scaling
-  const videoRatio = vw / vh
-  const canvasRatio = width / height
-
-  let drawWidth, drawHeight, startX, startY
-
-  if (canvasRatio > videoRatio) {
-    // Canvas is wider than video (video cropped top/bottom)
-    drawWidth = width
-    drawHeight = width / videoRatio
-    startX = 0
-    startY = (height - drawHeight) / 2
-  } else {
-    // Canvas is taller than video (video cropped left/right)
-    drawHeight = height
-    drawWidth = height * videoRatio
-    startY = 0
-    startX = (width - drawWidth) / 2
-  }
-
-  const scale = drawWidth / vw
-   // Canvas is mirrored via CSS if isMirrored is true, so no manual coordinate mirroring needed
-
-   // Styles
-   const styles = getComputedStyle(document.documentElement)
-   const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
-
-   ctx.lineWidth = 4
-   ctx.strokeStyle = accent
-   ctx.fillStyle = accent
-
-   codes.forEach(code => {
-     const points = code.cornerPoints
-     if (!points || points.length < 4) return
-
-     ctx.beginPath()
-
-     const transform = (p) => {
-       let x = p.x * scale + startX
-       let y = p.y * scale + startY
-       return { x, y }
-     }
-
-    const p0 = transform(points[0])
-    ctx.moveTo(p0.x, p0.y)
-
-    for (let i = 1; i < points.length; i++) {
-      const p = transform(points[i])
-      ctx.lineTo(p.x, p.y)
-    }
-
-    ctx.closePath()
-    ctx.stroke()
-
-    // Draw corners
-    points.forEach(p => {
-      const tp = transform(p)
-      ctx.beginPath()
-      ctx.arc(tp.x, tp.y, 4, 0, Math.PI * 2)
-      ctx.fill()
-    })
-  })
-}
+const error = computed(() => cameraError.value || detectionError.value)
 
+// Background Loop
 const updateVideoAspect = () => {
   if (videoRef.value && videoRef.value.videoWidth && videoRef.value.videoHeight) {
     videoAspect.value = videoRef.value.videoWidth / videoRef.value.videoHeight
@@ -136,7 +64,6 @@ const startBackgroundLoop = () => {
     }
     const ctx = canvas.getContext('2d')
     if (ctx) {
-      // cover horizontally: scale by width, crop top/bottom
       const scale = cw / vw
       const srcH = ch / scale
       const sx = 0
@@ -157,107 +84,7 @@ const stopBackgroundLoop = () => {
   }
 }
 
-const initDetector = async () => {
-  if (!barcodeDetector) {
-    if ('BarcodeDetector' in window) {
-      try {
-        // Formats are optional, but specifying qr_code might be faster
-        const formats = await window.BarcodeDetector.getSupportedFormats()
-        if (formats.includes('qr_code')) {
-          barcodeDetector = new window.BarcodeDetector({ formats: ['qr_code'] })
-        } else {
-          barcodeDetector = new window.BarcodeDetector()
-        }
-      } catch (e) {
-        // Fallback
-        barcodeDetector = new window.BarcodeDetector()
-      }
-    } else {
-      error.value = 'Barcode Detection API not supported'
-    }
-  }
-}
-
-const startScan = async () => {
-  stopScan()
-  error.value = ''
-
-  try {
-    await initDetector()
-    if (!barcodeDetector) {
-      error.value = 'Barcode Detector failed to initialize'
-      return
-    }
-
-    const constraints = {
-      video: {
-        facingMode: facingMode.value,
-        width: { ideal: 1280 },
-        height: { ideal: 720 }
-      }
-    }
-
-    stream = await navigator.mediaDevices.getUserMedia(constraints)
-
-    // Detect actual facing mode to mirror front camera correctly
-    const videoTrack = stream.getVideoTracks()[0]
-    if (videoTrack) {
-      const settings = videoTrack.getSettings()
-      if (settings.facingMode) {
-        isMirrored.value = settings.facingMode === 'user'
-      } else {
-        // Fallback: check label for desktop cameras or assume requested mode
-        const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
-        if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
-          isMirrored.value = true
-        } else {
-          isMirrored.value = facingMode.value === 'user'
-        }
-      }
-    }
-
-    if (videoRef.value) {
-      videoRef.value.srcObject = stream
-      // Wait for metadata to play
-      videoRef.value.onloadedmetadata = () => {
-        videoRef.value.play().catch(e => console.error('Play error', e))
-        updateVideoAspect()
-        detectLoop()
-        startBackgroundLoop()
-      }
-    }
-  } catch (err) {
-    onError(err)
-  }
-}
-
-const stopScan = () => {
-  if (scanRafId) cancelAnimationFrame(scanRafId)
-  if (stream) {
-    stream.getTracks().forEach(t => t.stop())
-    stream = null
-  }
-  stopBackgroundLoop()
-}
-
-const detectLoop = async () => {
-  if (!videoRef.value || videoRef.value.paused || videoRef.value.ended) {
-    scanRafId = requestAnimationFrame(detectLoop)
-    return
-  }
-
-  try {
-    const codes = await barcodeDetector.detect(videoRef.value)
-    paintDetections(codes)
-    if (codes.length > 0) {
-      onDetect(codes)
-    }
-  } catch (e) {
-    // console.error('Detection error', e)
-  }
-  scanRafId = requestAnimationFrame(detectLoop)
-}
-
+// Full screen styles
 const desktopFullscreenStyle = computed(() => {
   if (!isFullscreen.value) return {}
   const isDesktop = window.innerWidth >= 768
@@ -282,48 +109,37 @@ const processCodes = (codes) => {
 }
 
 const onDetect = (detectedCodes) => {
-  // If fullscreen, accept all detected codes (as the user sees the full camera view mostly)
   if (isFullscreen.value) {
     processCodes(detectedCodes)
     return
   }
-
-  // Try to find video element to calculate visible area
   const videoEl = document.querySelector('.camera-wrapper video')
-
   if (!videoEl || !videoEl.videoWidth || !videoEl.videoHeight) {
     processCodes(detectedCodes)
     return
   }
 
   const { videoWidth, videoHeight } = videoEl
-
-  // Calculate visible square area (assuming object-fit: cover and 1:1 container)
   const isLandscape = videoWidth > videoHeight
   let visibleX, visibleY, visibleW, visibleH
 
   if (isLandscape) {
-    // Landscape: sides are cropped, height is fully visible
     visibleH = videoHeight
-    visibleW = videoHeight // Square
+    visibleW = videoHeight
     visibleX = (videoWidth - videoHeight) / 2
     visibleY = 0
   } else {
-    // Portrait: top/bottom are cropped, width is fully visible
     visibleW = videoWidth
-    visibleH = videoWidth // Square
+    visibleH = videoWidth
     visibleX = 0
     visibleY = (videoHeight - videoWidth) / 2
   }
 
-  // Add margin to be safe (code center must be within visible area)
-  // We allow codes slightly outside if their center is inside
   const validCodes = detectedCodes.filter(code => {
     if (!code.boundingBox) return true
     const { x, y, width, height } = code.boundingBox
     const centerX = x + width / 2
     const centerY = y + height / 2
-
     return (
       centerX >= visibleX &&
       centerX <= visibleX + visibleW &&
@@ -335,33 +151,6 @@ const onDetect = (detectedCodes) => {
   processCodes(validCodes)
 }
 
-watch(facingMode, () => {
-  startScan()
-})
-
-const onError = (err) => {
-  if (err.name === 'NotAllowedError') {
-    error.value = 'Camera permission denied'
-  } else if (err.name === 'NotFoundError') {
-    error.value = 'No camera found'
-  } else {
-    error.value = `Camera error: ${err.name}`
-  }
-}
-
-const checkCameras = async () => {
-  try {
-    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
-      return
-    }
-    const devices = await navigator.mediaDevices.enumerateDevices()
-    const cameras = devices.filter(d => d.kind === 'videoinput')
-    hasMultipleCameras.value = cameras.length > 1
-  } catch (e) {
-    console.error('Error checking cameras:', e)
-  }
-}
-
 const loadHistory = () => {
   try {
     const saved = localStorage.getItem('qr-history')
@@ -383,12 +172,24 @@ const handleKeydown = (e) => {
   }
 }
 
+const startScan = async () => {
+  try {
+    await startCamera()
+    updateVideoAspect()
+    startBackgroundLoop()
+    startDetection(onDetect)
+  } catch (err) {
+    // Error is handled by error computed property
+  }
+}
+
 onMounted(() => {
   checkCameras()
   loadHistory()
   window.addEventListener('resize', updateVideoAspect)
   window.addEventListener('resize', startBackgroundLoop)
   window.addEventListener('keydown', handleKeydown)
+
   watch(isFullscreen, (fs) => {
     if (fs) {
       startBackgroundLoop()
@@ -396,7 +197,7 @@ onMounted(() => {
       stopBackgroundLoop()
     }
   }, { immediate: true })
-  
+
   startScan()
 })
 
@@ -404,12 +205,13 @@ onUnmounted(() => {
   window.removeEventListener('resize', updateVideoAspect)
   window.removeEventListener('resize', startBackgroundLoop)
   window.removeEventListener('keydown', handleKeydown)
-  stopScan()
+  stopDetection()
+  stopCamera()
 })
 
 const switchCamera = (event) => {
-  event.stopPropagation()
-  facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
+  if (event) event.stopPropagation()
+  baseSwitchCamera()
 }
 
 const toggleFullscreen = () => {
diff --git a/src/components/tools/UrlCleaner.vue b/src/components/tools/UrlCleaner.vue
index 7a420a4..0f03c2e 100644
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -2,7 +2,7 @@
 import { ref, watch, onUnmounted } from 'vue'
 import { Copy, Trash2, ExternalLink, Power, Zap, X, Settings, Download } from 'lucide-vue-next'
 import { useExtension } from '../../composables/useExtension'
-import { useLocalStorage } from '../../composables/useLocalStorage'
+import { useUrlCleaner } from '../../composables/useUrlCleaner'
 import ExtensionStatus from './common/ExtensionStatus.vue'
 import UrlCleanerExceptionsModal from './UrlCleanerExceptionsModal.vue'
 
@@ -10,29 +10,22 @@ import UrlCleanerExceptionsModal from './UrlCleanerExceptionsModal.vue'
 const { isExtensionReady, isListening, lastClipboardText, startListening, stopListening, writeClipboard } = useExtension()
 
 const inputUrl = ref('')
-// Use local storage for history persistence
-const cleanedHistory = useLocalStorage('url-cleaner-history', [])
-const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
-
-// Exceptions management
 const showExceptionsModal = ref(false)
-const defaultExceptions = [
-  { id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
-  { id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
-]
-const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
 
-// Helper to match domain with glob pattern
-const matchDomain = (pattern, domain) => {
-  // Escape regex chars except *
-  const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
-  return new RegExp(regexString, 'i').test(domain)
-}
+const {
+  cleanedHistory,
+  isWatchEnabled,
+  exceptions,
+  defaultExceptions,
+  processUrl: baseProcessUrl,
+  removeEntry,
+  clearHistory
+} = useUrlCleaner()
 
 // Watch for clipboard changes from extension
 watch(lastClipboardText, (newText) => {
   if (isWatchEnabled.value && newText) {
-    processUrl(newText, true)
+    baseProcessUrl(newText, true, writeClipboard)
   }
 })
 
@@ -94,114 +87,16 @@ const handleClean = () => {
   if (inputUrl.value) {
     const urls = inputUrl.value.split(/\r?\n/).filter(line => line.trim().length > 0)
     urls.forEach(url => {
-      processUrl(url.trim(), false)
+      baseProcessUrl(url.trim(), false, writeClipboard)
     })
     inputUrl.value = ''
   }
 }
 
-const processUrl = (text, autoClipboard = false) => {
-  try {
-    // Basic URL validation
-    if (!text.match(/^https?:\/\//i)) {
-      // Not a URL, ignore in watch mode
-      if (autoClipboard) return
-    }
-
-    const originalLength = text.length
-    let cleanedUrl = text
-
-    try {
-      const urlObj = new URL(text)
-      const hostname = urlObj.hostname
-
-      // Check for exceptions
-      const matchedRule = exceptions.value.find(rule =>
-        rule.isEnabled && matchDomain(rule.domainPattern, hostname)
-      )
-
-      if (matchedRule) {
-        if (!matchedRule.keepAllParams) {
-          // Exception logic: keep specific params
-          const params = new URLSearchParams(urlObj.search)
-          const keys = Array.from(params.keys())
-
-          for (const key of keys) {
-            if (!matchedRule.keepParams.includes(key)) {
-              params.delete(key)
-            }
-          }
-
-          urlObj.search = params.toString()
-        }
-
-        if (!matchedRule.keepHash) {
-          urlObj.hash = ''
-        }
-      } else {
-        // Default behavior: remove all query params and hash
-        if (urlObj.search || urlObj.hash) {
-          urlObj.search = ''
-          urlObj.hash = ''
-        }
-      }
-
-      cleanedUrl = urlObj.toString()
-      // Remove trailing slash if it wasn't there before? usually keep it standard
-    } catch (e) {
-      // Invalid URL format
-      if (!autoClipboard) {
-        // Show error or just return original
-      }
-      return
-    }
-
-    // If no change, ignore in watch mode to avoid loops
-    if (cleanedUrl === text && autoClipboard) {
-      return
-    }
-
-    const newLength = cleanedUrl.length
-    const savedChars = originalLength - newLength
-    const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
-
-    // Add to history
-    const entry = {
-      id: Date.now(),
-      original: text,
-      cleaned: cleanedUrl,
-      savedPercent,
-      timestamp: new Date().toLocaleTimeString()
-    }
-
-    cleanedHistory.value.unshift(entry)
-
-    // Limit history
-    if (cleanedHistory.value.length > 50) {
-      cleanedHistory.value.pop()
-    }
-
-    // Auto-copy back to clipboard if in watch mode
-    if (autoClipboard && savedChars > 0) {
-      writeClipboard(cleanedUrl)
-    }
-  } catch (e) {
-    console.error('Error processing URL:', e)
-  }
-}
-
 const copyToClipboard = (text) => {
   navigator.clipboard.writeText(text)
 }
 
-const removeEntry = (id) => {
-  cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
-}
-
-const clearHistory = () => {
-  cleanedHistory.value = []
-}
-
 onUnmounted(() => {
   if (isListening.value) {
     stopListening()
diff --git a/src/composables/useCamera.js b/src/composables/useCamera.js
new file mode 100644
index 0000000..de5ebec
--- /dev/null
+++ b/src/composables/useCamera.js
@@ -0,0 +1,110 @@
+import { ref, watch, onUnmounted } from 'vue'
+
+export function useCamera(videoRef) {
+    const stream = ref(null)
+    const facingMode = ref('environment')
+    const hasMultipleCameras = ref(false)
+    const isMirrored = ref(false)
+    const error = ref('')
+
+    const checkCameras = async () => {
+        try {
+            if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+                return
+            }
+            const devices = await navigator.mediaDevices.enumerateDevices()
+            const cameras = devices.filter(d => d.kind === 'videoinput')
+            hasMultipleCameras.value = cameras.length > 1
+        } catch (e) {
+            console.error('Error checking cameras:', e)
+        }
+    }
+
+    const stopCamera = () => {
+        if (stream.value) {
+            stream.value.getTracks().forEach(t => t.stop())
+            stream.value = null
+        }
+    }
+
+    const startCamera = async () => {
+        stopCamera()
+        error.value = ''
+
+        try {
+            const constraints = {
+                video: {
+                    facingMode: facingMode.value,
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 }
+                }
+            }
+
+            const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
+            stream.value = mediaStream
+
+            // Detect actual facing mode to mirror front camera correctly
+            const videoTrack = mediaStream.getVideoTracks()[0]
+            if (videoTrack) {
+                const settings = videoTrack.getSettings()
+                if (settings.facingMode) {
+                    isMirrored.value = settings.facingMode === 'user'
+                } else {
+                    // Fallback: check label for desktop cameras or assume requested mode
+                    const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
+                    if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
+                        isMirrored.value = true
+                    } else {
+                        isMirrored.value = facingMode.value === 'user'
+                    }
+                }
+            }
+
+            if (videoRef.value) {
+                videoRef.value.srcObject = mediaStream
+                return new Promise((resolve) => {
+                    videoRef.value.onloadedmetadata = () => {
+                        videoRef.value.play().catch(e => console.error('Play error', e))
+                        resolve()
+                    }
+                })
+            }
+        } catch (err) {
+            if (err.name === 'NotAllowedError') {
+                error.value = 'Camera permission denied'
+            } else if (err.name === 'NotFoundError') {
+                error.value = 'No camera found'
+            } else {
+                error.value = `Camera error: ${err.name}`
+            }
+            throw err // Let caller know it failed
+        }
+    }
+
+    const switchCamera = () => {
+        facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
+    }
+
+    watch(facingMode, () => {
+        if (stream.value) {
+            // Re-start if already running
+            startCamera().catch(() => { })
+        }
+    })
+
+    onUnmounted(() => {
+        stopCamera()
+    })
+
+    return {
+        stream,
+        facingMode,
+        hasMultipleCameras,
+        isMirrored,
+        error,
+        checkCameras,
+        startCamera,
+        stopCamera,
+        switchCamera
+    }
+}
diff --git a/src/composables/useQrDetection.js b/src/composables/useQrDetection.js
new file mode 100644
index 0000000..55a6963
--- /dev/null
+++ b/src/composables/useQrDetection.js
@@ -0,0 +1,174 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useQrDetection(videoRef, overlayCanvasRef) {
+    const barcodeDetector = ref(null)
+    const isDetecting = ref(false)
+    const error = ref('')
+    let scanRafId = null
+
+    // Function to initialize detector
+    const initDetector = async () => {
+        if (!barcodeDetector.value) {
+            if ('BarcodeDetector' in window) {
+                try {
+                    // Formats are optional, but specifying qr_code might be faster
+                    const formats = await window.BarcodeDetector.getSupportedFormats()
+                    if (formats.includes('qr_code')) {
+                        barcodeDetector.value = new window.BarcodeDetector({ formats: ['qr_code'] })
+                    } else {
+                        barcodeDetector.value = new window.BarcodeDetector()
+                    }
+                } catch (e) {
+                    // Fallback
+                    barcodeDetector.value = new window.BarcodeDetector()
+                }
+            } else {
+                error.value = 'Barcode Detection API not supported on this device/browser.'
+            }
+        }
+    }
+
+    const paintDetections = (codes) => {
+        const canvas = overlayCanvasRef.value
+        const video = videoRef.value
+
+        if (!canvas || !video) return
+
+        const ctx = canvas.getContext('2d')
+        const { width, height } = canvas.getBoundingClientRect()
+
+        // Update canvas size if needed (to match CSS size)
+        if (canvas.width !== width || canvas.height !== height) {
+            canvas.width = width
+            canvas.height = height
+        }
+
+        ctx.clearRect(0, 0, width, height)
+
+        if (!codes || codes.length === 0) return
+
+        const vw = video.videoWidth
+        const vh = video.videoHeight
+        if (!vw || !vh) return
+
+        // Calculate object-fit: cover scaling
+        const videoRatio = vw / vh
+        const canvasRatio = width / height
+
+        let drawWidth, drawHeight, startX, startY
+
+        if (canvasRatio > videoRatio) {
+            // Canvas is wider than video (video cropped top/bottom)
+            drawWidth = width
+            drawHeight = width / videoRatio
+            startX = 0
+            startY = (height - drawHeight) / 2
+        } else {
+            // Canvas is taller than video (video cropped left/right)
+            drawHeight = height
+            drawWidth = height * videoRatio
+            startY = 0
+            startX = (width - drawWidth) / 2
+        }
+
+        const scale = drawWidth / vw
+        // Styles
+        const styles = getComputedStyle(document.documentElement)
+        const accent = styles.getPropertyValue('--primary-accent').trim() || '#00f2fe'
+
+        ctx.lineWidth = 4
+        ctx.strokeStyle = accent
+        ctx.fillStyle = accent
+
+        codes.forEach(code => {
+            const points = code.cornerPoints
+            if (!points || points.length < 4) return
+
+            ctx.beginPath()
+
+            const transform = (p) => {
+                let x = p.x * scale + startX
+                let y = p.y * scale + startY
+                return { x, y }
+            }
+
+            const p0 = transform(points[0])
+            ctx.moveTo(p0.x, p0.y)
+
+            for (let i = 1; i < points.length; i++) {
+                const p = transform(points[i])
+                ctx.lineTo(p.x, p.y)
+            }
+
+            ctx.closePath()
+            ctx.stroke()
+
+            // Draw corners
+            points.forEach(p => {
+                const tp = transform(p)
+                ctx.beginPath()
+                ctx.arc(tp.x, tp.y, 4, 0, Math.PI * 2)
+                ctx.fill()
+            })
+        })
+    }
+
+    const startDetection = async (onDetectCallback) => {
+        error.value = ''
+        try {
+            await initDetector()
+            if (!barcodeDetector.value) {
+                if (!error.value) error.value = 'Barcode Detector failed to initialize'
+                return
+            }
+
+            isDetecting.value = true
+
+            const detectLoop = async () => {
+                if (!isDetecting.value || !videoRef.value || videoRef.value.paused || videoRef.value.ended) {
+                    scanRafId = requestAnimationFrame(detectLoop)
+                    return
+                }
+
+                try {
+                    const codes = await barcodeDetector.value.detect(videoRef.value)
+                    paintDetections(codes)
+                    if (codes.length > 0 && onDetectCallback) {
+                        onDetectCallback(codes)
+                    }
+                } catch (e) {
+                    // Silent catch for intermittent detection frames failing
+                }
+                if (isDetecting.value) {
+                    scanRafId = requestAnimationFrame(detectLoop)
+                }
+            }
+
+            detectLoop() // start loop
+
+        } catch (e) {
+            error.value = `Detection error: ${e.message}`
+        }
+    }
+
+    const stopDetection = () => {
+        isDetecting.value = false
+        if (scanRafId) cancelAnimationFrame(scanRafId)
+        // Clear canvas
+        if (overlayCanvasRef.value) {
+            const ctx = overlayCanvasRef.value.getContext('2d')
+            ctx.clearRect(0, 0, overlayCanvasRef.value.width, overlayCanvasRef.value.height)
+        }
+    }
+
+    onUnmounted(() => {
+        stopDetection()
+    })
+
+    return {
+        error,
+        isDetecting,
+        startDetection,
+        stopDetection
+    }
+}
diff --git a/src/composables/useUrlCleaner.js b/src/composables/useUrlCleaner.js
new file mode 100644
index 0000000..fa9acde
--- /dev/null
+++ b/src/composables/useUrlCleaner.js
@@ -0,0 +1,115 @@
+import { useLocalStorage } from './useLocalStorage'
+
+export function useUrlCleaner() {
+    const cleanedHistory = useLocalStorage('url-cleaner-history', [])
+    const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
+
+    const defaultExceptions = [
+        { id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
+        { id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
+    ]
+    const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
+
+    const matchDomain = (pattern, domain) => {
+        // Escape regex chars except *
+        const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
+        return new RegExp(regexString, 'i').test(domain)
+    }
+
+    const processUrl = (text, autoClipboard = false, writeClipboardFn = null) => {
+        try {
+            // Basic URL validation
+            if (!text.match(/^https?:\/\//i)) {
+                if (autoClipboard) return text
+            }
+
+            const originalLength = text.length
+            let cleanedUrl = text
+
+            try {
+                const urlObj = new URL(text)
+                const hostname = urlObj.hostname
+
+                const matchedRule = exceptions.value.find(rule =>
+                    rule.isEnabled && matchDomain(rule.domainPattern, hostname)
+                )
+
+                if (matchedRule) {
+                    if (!matchedRule.keepAllParams) {
+                        const params = new URLSearchParams(urlObj.search)
+                        const keys = Array.from(params.keys())
+
+                        for (const key of keys) {
+                            if (!matchedRule.keepParams.includes(key)) {
+                                params.delete(key)
+                            }
+                        }
+                        urlObj.search = params.toString()
+                    }
+
+                    if (!matchedRule.keepHash) {
+                        urlObj.hash = ''
+                    }
+                } else {
+                    if (urlObj.search || urlObj.hash) {
+                        urlObj.search = ''
+                        urlObj.hash = ''
+                    }
+                }
+
+                cleanedUrl = urlObj.toString()
+            } catch (e) {
+                return text
+            }
+
+            if (cleanedUrl === text && autoClipboard) {
+                return text
+            }
+
+            const newLength = cleanedUrl.length
+            const savedChars = originalLength - newLength
+            const savedPercent = originalLength > 0 ? Math.round((savedChars / originalLength) * 100) : 0
+
+            const entry = {
+                id: Date.now(),
+                original: text,
+                cleaned: cleanedUrl,
+                savedPercent,
+                timestamp: new Date().toLocaleTimeString()
+            }
+
+            cleanedHistory.value.unshift(entry)
+
+            if (cleanedHistory.value.length > 50) {
+                cleanedHistory.value.pop()
+            }
+
+            if (autoClipboard && savedChars > 0 && writeClipboardFn) {
+                writeClipboardFn(cleanedUrl)
+            }
+
+            return cleanedUrl
+        } catch (e) {
+            console.error('Error processing URL:', e)
+            return text
+        }
+    }
+
+    const removeEntry = (id) => {
+        cleanedHistory.value = cleanedHistory.value.filter(item => item.id !== id)
+    }
+
+    const clearHistory = () => {
+        cleanedHistory.value = []
+    }
+
+    return {
+        cleanedHistory,
+        isWatchEnabled,
+        exceptions,
+        defaultExceptions,
+        processUrl,
+        removeEntry,
+        clearHistory
+    }
+}