0.6.2

refactor: centralize UI config and inject CSS variables dynamically
refactor: simplify useLocalStorage (remove APP_PREFIX) and finalize QR Code tool
2026-02-28 04:19:41 +00:00 · 2026-02-28 04:18:53 +00:00 · 2026-02-28 04:05:07 +00:00 · 2026-02-28 03:50:47 +00:00 · 2026-02-27 19:43:31 +00:00 · 2026-02-27 19:43:12 +00:00
18 changed files with 1651 additions and 55 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,17 @@
 {
  "name": "tools-app",
-  "version": "0.4.2",
+  "version": "0.6.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "tools-app",
-      "version": "0.4.2",
+      "version": "0.6.2",
      "dependencies": {
        "lucide-vue-next": "^0.575.0",
+        "qrcode": "^1.5.4",
        "vue": "^3.5.25",
+        "vue-qrcode-reader": "^5.7.3",
        "vue-router": "^5.0.3"
      },
      "devDependencies": {
@@ -2514,6 +2516,18 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.18.tgz",
+      "integrity": "sha512-vAvE8C9DGWR+tkb19xyjk1TSUlJ7RUzzp4a9Anu7mwBT+fpyePWK1UxmH14tMO5zHmrnrRIMg5NutnnDztLxgg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.41.5",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
+      "integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
+      "license": "MIT"
+    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2741,6 +2755,30 @@
        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
    "node_modules/array-buffer-byte-length": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -2907,6 +2945,16 @@
        "node": "18 || 20 || >=22"
      }
    },
+    "node_modules/barcode-detector": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.2.tgz",
+      "integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/dom-webcodecs": "^0.1.11",
+        "zxing-wasm": "1.1.3"
+      }
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -3033,6 +3081,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001774",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
@@ -3069,6 +3126,35 @@
        "url": "https://paulmillr.com/funding/"
      }
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
    "node_modules/commander": {
      "version": "2.20.3",
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -3231,6 +3317,15 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -3277,6 +3372,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3315,6 +3416,12 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
    "node_modules/entities": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -3625,6 +3732,19 @@
        "node": ">=10"
      }
    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.5",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -3750,6 +3870,15 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/get-intrinsic": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -4139,6 +4268,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-generator-function": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -4542,6 +4680,18 @@
        "url": "https://github.com/sponsors/antfu"
      }
    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/lodash": {
      "version": "4.17.23",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
@@ -4777,6 +4927,42 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/package-json-from-dist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -4784,6 +4970,15 @@
      "dev": true,
      "license": "BlueOak-1.0.0"
    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -4869,6 +5064,15 @@
        "pathe": "^2.0.3"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/possible-typed-array-names": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -4930,6 +5134,23 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/quansync": {
      "version": "0.2.11",
      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -5071,6 +5292,15 @@
        "regjsparser": "bin/parser"
      }
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -5081,6 +5311,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5235,6 +5471,12 @@
      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
      "license": "MIT"
    },
+    "node_modules/sdp": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
+      "integrity": "sha512-lwsAIzOPlH8/7IIjjz3K0zYBk7aBVVcvjMwt3M4fLxpjMYyy7i3I97SLHebgn4YBjirkzfp3RvRDWSKsh/+WFw==",
+      "license": "MIT"
+    },
    "node_modules/semver": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -5255,6 +5497,12 @@
        "randombytes": "^2.1.0"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -5501,6 +5749,20 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/string.prototype.matchall": {
      "version": "4.0.12",
      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
@@ -5603,6 +5865,18 @@
        "node": ">=4"
      }
    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-comments": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
@@ -6094,6 +6368,19 @@
        }
      }
    },
+    "node_modules/vue-qrcode-reader": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-5.7.3.tgz",
+      "integrity": "sha512-iSGko42FsEvdHyizBMBs/X+HMO9Z5ONDxjW+mQdoraOR5emRNedmjC5SEJdYzGz8ZP5ME3lwB4iHy3S7MOt5Qw==",
+      "license": "MIT",
+      "dependencies": {
+        "barcode-detector": "2.2.2",
+        "webrtc-adapter": "8.2.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
    "node_modules/vue-router": {
      "version": "5.0.3",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz",
@@ -6152,6 +6439,19 @@
      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
      "license": "MIT"
    },
+    "node_modules/webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
    "node_modules/whatwg-url": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -6247,6 +6547,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
    "node_modules/which-typed-array": {
      "version": "1.1.20",
      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
@@ -6598,6 +6904,26 @@
        "workbox-core": "7.4.0"
      }
    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -6619,6 +6945,50 @@
      "funding": {
        "url": "https://github.com/sponsors/eemeli"
      }
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
+      "integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/emscripten": "^1.39.10"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tools-app",
  "private": true,
-  "version": "0.4.2",
+  "version": "0.6.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -10,7 +10,9 @@
  },
  "dependencies": {
    "lucide-vue-next": "^0.575.0",
+    "qrcode": "^1.5.4",
    "vue": "^3.5.25",
+    "vue-qrcode-reader": "^5.7.3",
    "vue-router": "^5.0.3"
  },
  "devDependencies": {
--- 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 { UI_CONFIG } from './config/ui'

 const isSidebarOpen = ref(window.innerWidth >= 768)
 const router = useRouter()
@@ -31,6 +32,11 @@ const handleResize = () => {
 }

 onMounted(() => {
+  // Set global CSS variables from config
+  document.documentElement.style.setProperty('--header-height', `${UI_CONFIG.headerHeight}px`)
+  document.documentElement.style.setProperty('--footer-height', `${UI_CONFIG.footerHeight}px`)
+  document.documentElement.style.setProperty('--page-padding', `${UI_CONFIG.pagePadding}px`)
+
  window.addEventListener('resize', handleResize)
 })

@@ -67,22 +73,29 @@ onUnmounted(() => {

 .main-content {
  flex: 1;
-  padding: 2rem;
+  padding: 1rem;
  width: 100%;
  max-width: 100%;
-  /* Space for fixed footer on mobile + extra margin (match top padding 2rem + footer height ~40px) */
-  padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
+  /* Space for fixed footer on mobile + extra margin */
+  padding-bottom: calc(1rem + var(--footer-height) + env(safe-area-inset-bottom));
+}
+
+@media (max-width: 640px) {
+  .main-content {
+    padding: 0.5rem;
+    padding-bottom: calc(0.5rem + var(--footer-height) + env(safe-area-inset-bottom));
+  }
 }

@media (min-width: 768px) {
  .app-body {
-    overflow: hidden;
+    overflow: visible;
  }

  .main-content {
-    overflow-y: auto;
-    height: 100%;
-    padding-bottom: 2rem;
+    overflow: visible;
+    height: auto;
+    padding-bottom: 1rem;
  }
 }

--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -14,7 +14,8 @@ const version = __APP_VERSION__;
 <style scoped>
 .app-footer {
  width: 100%;
-  padding: 0.5rem;
+  height: var(--footer-height);
+  padding: 0 0.5rem;
  /* Background handled by glass-panel */
  border-left: none;
  border-right: none;
@@ -24,12 +25,9 @@ const version = __APP_VERSION__;
  align-items: center;
  justify-content: center;
  z-index: 10;
-  /* Remove fixed height to allow content to dictate size */
-  /* height: 30px; */
  position: fixed;
  bottom: 0;
  left: 0;
-  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }

@media (min-width: 768px) {
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -63,9 +63,12 @@ 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;
+  height: var(--header-height);
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
  /* box-shadow handled by glass-panel class */
  position: sticky;
  top: 0;
@@ -77,7 +80,7 @@ onMounted(() => {
 }

 .header-content {
-  max-width: 100%;
+  width: 100%;
  padding: 0;
  margin: 0 auto;
  display: flex;
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -13,6 +13,8 @@ defineProps({
      <router-link to="/passwords" class="nav-item" v-ripple>Passwords</router-link>
      <router-link to="/clipboard-sniffer" class="nav-item" v-ripple>Clipboard Sniffer</router-link>
      <router-link to="/url-cleaner" class="nav-item" v-ripple>URL Cleaner</router-link>
+      <router-link to="/qr-scanner" class="nav-item" v-ripple>QR Scanner</router-link>
+      <router-link to="/qr-code" class="nav-item" v-ripple>QR Code</router-link>
    </nav>
  </aside>
 </template>
--- a/src/components/tools/ClipboardSniffer.vue
+++ b/src/components/tools/ClipboardSniffer.vue
@@ -69,7 +69,7 @@ const clearText = () => {
        </button>
        <button
          v-else
-          class="btn-neon active"
+          class="btn-neon danger"
          @click="stopListening"
          v-ripple
        >
@@ -112,6 +112,7 @@ const clearText = () => {
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
+  flex-shrink: 0;
 }

 .tool-container.full-width {
@@ -126,6 +127,9 @@ const clearText = () => {
  flex-direction: column;
  height: 100%;
  gap: 1.5rem;
+  /* Override shared tool-panel scroll for this tool */
+  max-height: none;
+  overflow: hidden;
 }

 .tool-textarea {
@@ -154,4 +158,9 @@ const clearText = () => {
  transform: translateY(-50%);
  display: flex;
 }
+
+.result-area {
+  flex: 1;
+  display: flex;
+}
 </style>
--- a/src/components/tools/Passwords.vue
+++ b/src/components/tools/Passwords.vue
@@ -142,7 +142,6 @@ const generatePasswords = () => {
          class="tool-textarea"
          v-model="result"
          placeholder="Generated passwords will appear here..."
-          readonly
        ></textarea>
      </div>
    </div>
--- a/src/components/tools/QrCode.vue
+++ b/src/components/tools/QrCode.vue
@@ -0,0 +1,299 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { Download } from 'lucide-vue-next'
+import QRCode from 'qrcode'
+import { useFillHeight } from '../../composables/useFillHeight'
+import { useLocalStorage } from '../../composables/useLocalStorage'
+
+const text = useLocalStorage('text', '', 'qr-code')
+const ecc = useLocalStorage('ecc', 'M', 'qr-code')
+const size = useLocalStorage('size', 300, 'qr-code')
+const format = useLocalStorage('format', 'png', 'qr-code')
+const svgContent = ref('')
+const previewRef = ref(null)
+
+const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
+
+const generateQR = async () => {
+  if (!text.value) {
+    svgContent.value = ''
+    return
+  }
+  try {
+    // Generate SVG for preview (always sharp)
+    svgContent.value = await QRCode.toString(text.value, {
+      type: 'svg',
+      errorCorrectionLevel: ecc.value,
+      margin: 1,
+      // No fixed width, allow scaling via CSS
+    })
+  } catch (err) {
+    console.error('QR Generation failed', err)
+    svgContent.value = ''
+  }
+}
+
+// Debounce generation slightly to avoid lag on typing
+let timeout
+watch([text, ecc], () => { // size is not relevant for preview
+  clearTimeout(timeout)
+  timeout = setTimeout(generateQR, 300)
+})
+
+onMounted(() => {
+  if (text.value) generateQR()
+})
+
+const downloadFile = async () => {
+  if (!text.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,
+    // but usually raw SVG is better.
+    // If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
+    const svgWithSize = await QRCode.toString(text.value, {
+      type: 'svg',
+      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, {
+        errorCorrectionLevel: ecc.value,
+        margin: 1,
+        width: size.value
+      })
+
+      const mime = `image/${format.value}`
+      canvas.toBlob((blob) => {
+        if (blob) triggerDownload(blob, filename)
+      }, mime)
+    } catch (err) {
+      console.error('Download failed', err)
+    }
+  }
+}
+
+const triggerDownload = (blob, filename) => {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header">
+        <h2 class="tool-title">QR Generator</h2>
+      </div>
+
+      <div class="input-section">
+        <textarea
+          v-model="text"
+          class="tool-textarea"
+          placeholder="Enter text to generate QR code..."
+          rows="3"
+        ></textarea>
+      </div>
+
+      <div class="controls-section">
+        <div class="control-group">
+          <label>Error Correction</label>
+          <select v-model="ecc" class="select-input">
+            <option value="L">Low (7%)</option>
+            <option value="M">Medium (15%)</option>
+            <option value="Q">Quartile (25%)</option>
+            <option value="H">High (30%)</option>
+          </select>
+        </div>
+
+        <div class="control-group">
+          <label>Size (px)</label>
+          <select v-model="size" class="select-input">
+            <option :value="150">150x150</option>
+            <option :value="300">300x300</option>
+            <option :value="500">500x500</option>
+            <option :value="1000">1000x1000</option>
+          </select>
+        </div>
+
+        <div class="control-group">
+          <label>Format</label>
+          <select v-model="format" class="select-input">
+            <option value="png">PNG</option>
+            <option value="jpeg">JPG</option>
+            <option value="webp">WebP</option>
+            <option value="svg">SVG</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
+        <div class="qr-frame" v-html="svgContent"></div>
+
+        <div class="actions">
+          <button class="action-btn" @click="downloadFile">
+            <Download size="18" />
+            Download {{ format.toUpperCase() }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-container.full-width {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tool-panel {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: 100%;
+  overflow: hidden; /* Prevent scrolling, force fit */
+}
+
+.panel-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  flex-shrink: 0;
+}
+
+.tool-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--primary-accent);
+}
+
+.input-section {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.tool-textarea {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--glass-border);
+  color: var(--text-color);
+  font-size: 1rem;
+  resize: vertical;
+  min-height: 80px;
+}
+
+.tool-textarea:focus {
+  outline: none;
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.1);
+}
+
+.controls-section {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.control-group label {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.select-input {
+  padding: 0.5rem;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--glass-border);
+  color: var(--text-color);
+  min-width: 120px;
+}
+
+.preview-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  padding: 1rem;
+  overflow: hidden; /* Prevent overflow if QR is too big */
+  min-height: 0;
+  container-type: size;
+}
+
+.qr-frame {
+  width: calc(100cqmin - 4rem);
+  height: calc(100cqmin - 4rem);
+  background: white;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.qr-frame :deep(svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  border-radius: 6px;
+  background: var(--primary-accent);
+  color: #000;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+</style>
--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -0,0 +1,736 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import { QrcodeStream } from 'vue-qrcode-reader'
+import { SwitchCamera, Trash2, Copy, Download, X } from 'lucide-vue-next'
+
+const error = ref('')
+const facingMode = ref('environment')
+const scannedCodes = ref([])
+const hasMultipleCameras = ref(false)
+const isFullscreen = ref(false)
+const videoAspect = ref(1)
+const isFront = computed(() => facingMode.value === 'user')
+const wrapperRef = ref(null)
+let frontMirrorObserver = null
+const bgCanvas = ref(null)
+let bgRafId = null
+const updateVideoAspect = () => {
+  const videoEl = document.querySelector('.camera-wrapper video')
+  if (videoEl && videoEl.videoWidth && videoEl.videoHeight) {
+    videoAspect.value = videoEl.videoWidth / videoEl.videoHeight
+  }
+}
+const startBackgroundLoop = () => {
+  const draw = () => {
+    const videoEl = document.querySelector('.camera-wrapper video')
+    const canvas = bgCanvas.value
+    if (!videoEl || !canvas) {
+      bgRafId = requestAnimationFrame(draw)
+      return
+    }
+    const vw = videoEl.videoWidth || 0
+    const vh = videoEl.videoHeight || 0
+    if (!vw || !vh) {
+      bgRafId = requestAnimationFrame(draw)
+      return
+    }
+    const cw = Math.floor(window.innerWidth)
+    const ch = Math.floor(window.innerHeight * 0.5)
+    if (canvas.width !== cw || canvas.height !== ch) {
+      canvas.width = cw
+      canvas.height = ch
+    }
+    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
+      const sy = Math.max(0, (vh - srcH) / 2)
+      ctx.clearRect(0, 0, cw, ch)
+      ctx.drawImage(videoEl, sx, sy, vw, srcH, 0, 0, cw, ch)
+    }
+    bgRafId = requestAnimationFrame(draw)
+  }
+  if (bgRafId) cancelAnimationFrame(bgRafId)
+  bgRafId = requestAnimationFrame(draw)
+}
+
+// front mirror canvas removed to restore stable behavior
+const stopBackgroundLoop = () => {
+  if (bgRafId) {
+    cancelAnimationFrame(bgRafId)
+    bgRafId = null
+  }
+}
+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 => {
+    const value = code.rawValue
+    if (value && !scannedCodes.value.some(c => c.value === value)) {
+      scannedCodes.value.unshift({
+        id: Date.now() + Math.random(),
+        value,
+        format: code.format,
+        timestamp: new Date().toLocaleTimeString()
+      })
+    }
+  })
+}
+
+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
+    visibleX = (videoWidth - videoHeight) / 2
+    visibleY = 0
+  } else {
+    // Portrait: top/bottom are cropped, width is fully visible
+    visibleW = videoWidth
+    visibleH = videoWidth // Square
+    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 &&
+      centerY >= visibleY &&
+      centerY <= visibleY + visibleH
+    )
+  })
+
+  processCodes(validCodes)
+}
+
+const onCameraOn = async (capabilities) => {
+  // Camera is ready
+  setTimeout(updateVideoAspect, 100)
+  setTimeout(startBackgroundLoop, 150)
+  // Flip is handled via global CSS; no JS flips needed
+}
+
+const ensureFrontMirror = () => {
+  // No-op: mirror is applied via CSS selectors
+}
+
+const startFrontMirrorObserver = () => {
+  // No-op: mirror is applied via CSS selectors
+}
+
+const stopFrontMirrorObserver = () => {
+  // No-op
+}
+
+watch(isFront, () => {
+  // CSS-based; nothing to do
+})
+
+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'
+  } 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')
+    if (saved) {
+      scannedCodes.value = JSON.parse(saved)
+    }
+  } catch (e) {
+    console.error('Failed to load QR history', e)
+  }
+}
+
+watch(scannedCodes, (newVal) => {
+  localStorage.setItem('qr-history', JSON.stringify(newVal))
+}, { deep: true })
+
+onMounted(() => {
+  checkCameras()
+  loadHistory()
+  window.addEventListener('resize', updateVideoAspect)
+  window.addEventListener('resize', startBackgroundLoop)
+  watch(isFullscreen, (fs) => {
+    if (fs) {
+      startBackgroundLoop()
+    } else {
+      stopBackgroundLoop()
+    }
+  }, { immediate: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateVideoAspect)
+  window.removeEventListener('resize', startBackgroundLoop)
+  stopBackgroundLoop()
+})
+
+const switchCamera = (event) => {
+  event.stopPropagation()
+  facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
+}
+
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+}
+
+const clearHistory = () => {
+  scannedCodes.value = []
+}
+
+const removeCode = (id) => {
+  scannedCodes.value = scannedCodes.value.filter(c => c.id !== id)
+}
+
+const copyAll = async () => {
+  if (scannedCodes.value.length === 0) return
+  const text = scannedCodes.value.map(c => c.value).join('\n')
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy', err)
+  }
+}
+
+const downloadJson = () => {
+  if (scannedCodes.value.length === 0) return
+  const data = JSON.stringify(scannedCodes.value, null, 2)
+  const blob = new Blob([data], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `qr-scan-history-${new Date().toISOString().slice(0, 10)}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+const copyToClipboard = async (text) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy', err)
+  }
+}
+
+const isUrl = (string) => {
+  try {
+    return Boolean(new URL(string))
+  } catch (_) {
+    return false
+  }
+}
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header" v-if="!isFullscreen">
+        <h2 class="tool-title">QR Scanner</h2>
+      </div>
+
+      <Teleport to="body" :disabled="!isFullscreen">
+        <div class="scanner-content" :class="{ 'is-fullscreen': isFullscreen }">
+          <canvas
+            v-if="isFullscreen"
+            ref="bgCanvas"
+            class="camera-bg"
+          ></canvas>
+          <button v-if="isFullscreen" class="close-fullscreen-btn" @click="toggleFullscreen">
+            <X size="24" />
+          </button>
+
+          <div
+            class="camera-wrapper"
+            :class="{ 'clickable': !isFullscreen, 'is-front': isFront }"
+            :style="desktopFullscreenStyle"
+            ref="wrapperRef"
+            @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>
+              </div>
+
+              <button
+                v-if="hasMultipleCameras"
+                class="switch-camera-btn"
+                @click.stop="switchCamera"
+                title="Switch Camera"
+              >
+                <SwitchCamera size="24" />
+              </button>
+            </QrcodeStream>
+          </div>
+
+          <div class="results-section">
+            <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">
+                  <Copy size="18" />
+                </button>
+                <button class="icon-btn" @click="downloadJson" title="Download JSON">
+                  <Download size="18" />
+                </button>
+                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
+                  <Trash2 size="18" />
+                </button>
+              </div>
+            </div>
+
+            <div v-if="scannedCodes.length > 0" class="codes-list">
+              <div v-for="code in scannedCodes" :key="code.id" class="code-item">
+                <div class="code-content">
+                  <div class="code-value">
+                    <a v-if="isUrl(code.value)" :href="code.value" target="_blank" rel="noopener noreferrer">{{ code.value }}</a>
+                    <span v-else>{{ code.value }}</span>
+                  </div>
+                  <div class="code-meta">
+                    <span class="timestamp">{{ code.timestamp }}</span>
+                    <span class="format-badge">{{ code.format }}</span>
+                  </div>
+                </div>
+                <div class="item-actions">
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
+                    <Copy size="18" />
+                  </button>
+                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
+                    <Trash2 size="18" />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div v-else class="empty-state">
+              Point camera at a QR code to scan
+            </div>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-container.full-width {
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tool-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0;
+  position: relative;
+  width: 100%;
+}
+
+.scanner-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 1.5rem;
+}
+
+.scanner-content.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #000;
+  gap: 0;
+}
+
+.camera-wrapper {
+  width: 100%;
+  max-width: 500px;
+  aspect-ratio: 1;
+  margin: 0 auto;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  transition: all 0.3s ease;
+}
+
+.camera-wrapper.clickable {
+  cursor: pointer;
+}
+
+.scanner-content.is-fullscreen .camera-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  max-width: none;
+  height: auto;
+  border-radius: 0;
+  border: none;
+  margin: 0;
+  z-index: 1;
+}
+
+.camera-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 50vh;
+  filter: blur(16px) saturate(110%);
+  opacity: 0.9;
+  z-index: 0;
+}
+
+/* front mirror canvas removed */
+
+.error-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.8);
+  color: #ff4444;
+  padding: 1rem;
+  text-align: center;
+  z-index: 10;
+}
+
+.switch-camera-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 20;
+  backdrop-filter: blur(4px);
+  transition: all 0.2s;
+}
+
+.switch-camera-btn:hover {
+  background: rgba(0, 0, 0, 0.6);
+  transform: scale(1.05);
+}
+
+.close-fullscreen-btn {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+}
+
+/* Removed legacy scan frame overlay - using shape detection rendering via track instead */
+
+.results-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+.scanner-content.is-fullscreen .results-section {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: auto;
+  z-index: 2;
+  border-radius: 0;
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.results-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.results-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--text-strong);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.codes-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.code-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  transition: background 0.2s;
+}
+
+.code-item:last-child {
+  border-bottom: none;
+}
+
+.code-item:hover {
+  background: var(--list-hover-bg);
+}
+
+.code-content {
+  flex: 1;
+  overflow: hidden;
+  padding-right: 1rem;
+}
+
+.code-value {
+  color: var(--primary-accent);
+  font-family: monospace;
+  word-break: break-all;
+  margin-bottom: 0.4rem;
+}
+
+.code-value a {
+  color: var(--primary-accent);
+  text-decoration: underline;
+}
+
+.code-value a:hover {
+  opacity: 0.8;
+}
+
+.code-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.item-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.format-badge {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0 0.4rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+:global(:root[data-theme="light"]) .format-badge {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.4rem;
+  border-radius: 4px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-btn:hover {
+  color: var(--text-color);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+:global(:root[data-theme="light"]) .icon-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.delete-btn:hover {
+  color: #ef4444;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-secondary);
+  padding: 2rem;
+  text-align: center;
+}
+
+:deep(video) {
+  object-fit: cover !important;
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+}
+
+:deep(.qrcode-stream-wrapper),
+:deep(.qrcode-stream-overlay) {
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  inset: 0 !important;
+}
+
+/* Front camera mirror (CSS-only) */
+.camera-wrapper.is-front :deep(video) {
+  transform: scaleX(-1);
+  transform-origin: center;
+}
+.camera-wrapper.is-front :deep(#qrcode-stream-pause-frame),
+.camera-wrapper.is-front :deep(#qrcode-stream-overlay) {
+  transform: scaleX(-1);
+  transform-origin: center;
+}
+
+@media (min-width: 768px) {
+  :deep(.scanner-content.is-fullscreen .camera-wrapper video) {
+    object-fit: contain !important;
+  }
+}
+</style>
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, onUnmounted } from 'vue'
-import { Copy, Trash2, ExternalLink, Power, Zap, X, Settings } from 'lucide-vue-next'
+import { Copy, Trash2, ExternalLink, Power, Zap, X, Settings, Download } from 'lucide-vue-next'
 import { useExtension } from '../../composables/useExtension'
 import { useLocalStorage } from '../../composables/useLocalStorage'
 import ExtensionStatus from './common/ExtensionStatus.vue'
@@ -57,10 +57,45 @@ const toggleWatch = () => {
  isWatchEnabled.value = !isWatchEnabled.value
 }

+const copyAllUrls = async () => {
+  if (cleanedHistory.value.length === 0) return
+  const text = cleanedHistory.value.map(item => item.cleaned).join('\n')
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy URLs', err)
+  }
+}
+
+const downloadJson = () => {
+  if (cleanedHistory.value.length === 0) return
+
+  const exportData = cleanedHistory.value.map(item => ({
+    url: item.cleaned,
+    original: item.original,
+    timestamp: item.timestamp
+  }))
+
+  const data = JSON.stringify(exportData, null, 2)
+  const blob = new Blob([data], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `cleaned-urls-${new Date().toISOString().slice(0, 10)}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
 // Manual clean
 const handleClean = () => {
  if (inputUrl.value) {
-    processUrl(inputUrl.value, false)
+    const urls = inputUrl.value.split(/\r?\n/).filter(line => line.trim().length > 0)
+    urls.forEach(url => {
+      processUrl(url.trim(), false)
+    })
    inputUrl.value = ''
  }
 }
@@ -189,13 +224,13 @@ onUnmounted(() => {

      <div class="input-section">
        <div class="input-wrapper">
-          <input
+          <textarea
            v-model="inputUrl"
-            type="text"
-            placeholder="Paste URL here to clean..."
+            placeholder="Paste URL(s) here to clean..."
            class="url-input"
-            @keyup.enter="handleClean"
-          >
+            @keydown.enter.prevent="handleClean"
+            rows="1"
+          ></textarea>
          <button class="btn-neon" @click="handleClean">
            Clean
          </button>
@@ -219,10 +254,18 @@ onUnmounted(() => {
      <div class="history-section" v-if="cleanedHistory.length > 0">
        <div class="history-header">
          <h3>Cleaned URLs</h3>
-          <button class="icon-btn" @click="clearHistory" title="Clear History">
+          <div class="history-actions">
+            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs">
+              <Copy size="18" />
+            </button>
+            <button class="icon-btn" @click="downloadJson" title="Download JSON">
+              <Download size="18" />
+            </button>
+            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History">
              <Trash2 size="18" />
            </button>
          </div>
+        </div>

        <div class="history-list">
          <div v-for="item in cleanedHistory" :key="item.id" class="history-item">
@@ -300,6 +343,15 @@ onUnmounted(() => {
  border-radius: 12px;
 }

+@media (max-width: 640px) {
+  .input-section {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
 .input-wrapper {
  display: flex;
  gap: 1rem;
@@ -330,6 +382,9 @@ onUnmounted(() => {
  font-size: 1rem;
  outline: none;
  transition: all 0.2s;
+  resize: vertical;
+  min-height: 46px;
+  font-family: inherit;
 }

 .url-input:focus {
@@ -395,10 +450,16 @@ onUnmounted(() => {
  color: var(--text-strong);
 }

+.history-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .history-list {
  flex: 1;
  overflow-y: auto;
-  padding: 0.5rem;
+  padding: 0;
 }

 .history-item {
@@ -415,7 +476,7 @@ onUnmounted(() => {
 }

 .history-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--list-hover-bg);
 }

 .item-info {
--- a/src/components/tools/UrlCleanerExceptionsModal.vue
+++ b/src/components/tools/UrlCleanerExceptionsModal.vue
@@ -80,6 +80,15 @@ const addRule = () => {
  }
 }

+const editRule = (rule) => {
+  newRule.value = {
+    domainPattern: rule.domainPattern,
+    keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
+    keepHash: !!rule.keepHash,
+    keepAllParams: !!rule.keepAllParams
+  }
+}
+
 const removeRule = (id) => {
  localExceptions.value = localExceptions.value.filter(r => r.id !== id)
 }
@@ -145,7 +154,7 @@ const resetToDefault = (ruleId) => {
 <template>
  <Teleport to="body">
    <div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
-      <div class="modal-content glass-panel">
+      <div class="modal-content">
        <div class="modal-header">
          <h3>URL Cleaning Exceptions</h3>
          <button class="close-btn" @click="$emit('close')">
@@ -200,7 +209,7 @@ 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">{{ rule.domainPattern }}</div>
+                <div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
                <div class="rule-details">
                  <div class="params-list">
                    <template v-if="rule.keepAllParams">
@@ -275,6 +284,10 @@ const resetToDefault = (ruleId) => {
  padding: 1rem;
 }

+:global(:root[data-theme="light"]) .modal-overlay {
+  background: rgba(0, 0, 0, 0.15);
+}
+
 .modal-content {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
@@ -291,6 +304,11 @@ const resetToDefault = (ruleId) => {
  color: var(--text-color);
 }

+:global(:root[data-theme="light"]) .modal-content {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+}
+
 .modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--glass-border);
@@ -352,6 +370,11 @@ const resetToDefault = (ruleId) => {
  border: 1px solid var(--glass-border);
 }

+:global(:root[data-theme="light"]) .add-rule-form {
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
 .add-rule-form h4, .rules-list h4 {
  margin-top: 0;
  margin-bottom: 1rem;
@@ -445,6 +468,11 @@ const resetToDefault = (ruleId) => {
  transition: opacity 0.3s;
 }

+:global(:root[data-theme="light"]) .rule-item {
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
 .rule-item.disabled {
  opacity: 0.6;
 }
@@ -457,6 +485,13 @@ const resetToDefault = (ruleId) => {
  font-weight: 600;
  color: var(--primary-accent);
  margin-bottom: 0.3rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.rule-domain:hover {
+  opacity: 0.8;
+  text-decoration: underline;
 }

 .rule-details {
--- a/src/composables/useFillHeight.js
+++ b/src/composables/useFillHeight.js
@@ -1,6 +1,7 @@
 import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+import { UI_CONFIG } from '../config/ui'

-export function useFillHeight(elementRef, marginBottom = 20) {
+export function useFillHeight(elementRef, extraMargin = 0) {
  const height = ref('auto')

  const updateHeight = () => {
@@ -8,16 +9,10 @@ export function useFillHeight(elementRef, marginBottom = 20) {

    const rect = elementRef.value.getBoundingClientRect()
    const windowHeight = window.innerHeight
-    // Calculate available space: window height - element top position - margin bottom
-    // We also need to account for the footer height if it's fixed or layout related
-    // The user mentioned "margin bottom from footer".
-    // If footer is in the flow, we might just want to fill the parent container?
-    // But user asked for JS resizing.
    
-    // Let's assume we want to fill down to (windowHeight - marginBottom).
-    // This assumes the element should stretch to the bottom of the viewport.
-    
-    const availableHeight = windowHeight - rect.top - marginBottom
+    // Calculate available space: window height - element top position - footer height - padding - extra margin
+    const bottomOffset = UI_CONFIG.footerHeight + UI_CONFIG.pagePadding + extraMargin
+    const availableHeight = windowHeight - rect.top - bottomOffset
    
    // Ensure minimum height
    if (availableHeight > 100) {
--- a/src/composables/useLocalStorage.js
+++ b/src/composables/useLocalStorage.js
@@ -1,16 +1,20 @@
 import { ref, watch } from 'vue'

-export function useLocalStorage(key, defaultValue) {
+export function useLocalStorage(key, defaultValue, toolPrefix = '') {
+  // Construct prefixed key: [toolPrefix-]key
+  const prefixPart = toolPrefix ? `${toolPrefix}-` : ''
+  const prefixedKey = `${prefixPart}${key}`
+
  // Initialize state from local storage or default value
-  const storedValue = localStorage.getItem(key)
+  const storedValue = localStorage.getItem(prefixedKey)
  const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue)

  // Watch for changes and update local storage
  watch(data, (newValue) => {
    if (newValue === null || newValue === undefined) {
-      localStorage.removeItem(key)
+      localStorage.removeItem(prefixedKey)
    } else {
-      localStorage.setItem(key, JSON.stringify(newValue))
+      localStorage.setItem(prefixedKey, JSON.stringify(newValue))
    }
  }, { deep: true })

--- a/src/config/ui.js
+++ b/src/config/ui.js
@@ -0,0 +1,6 @@
+
+export const UI_CONFIG = {
+  headerHeight: 64,
+  footerHeight: 50,
+  pagePadding: 16 // Single side padding (1rem)
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,8 @@ import Main from '../components/Main.vue'
 import Passwords from '../components/tools/Passwords.vue'
 import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
 import UrlCleaner from '../components/tools/UrlCleaner.vue'
+import QrScanner from '../components/tools/QrScanner.vue'
+import QrCode from '../components/tools/QrCode.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'

 const routes = [
@@ -26,6 +28,16 @@ const routes = [
    name: 'UrlCleaner',
    component: UrlCleaner
  },
+  {
+    path: '/qr-scanner',
+    name: 'QrScanner',
+    component: QrScanner
+  },
+  {
+    path: '/qr-code',
+    name: 'QrCode',
+    component: QrCode
+  },
  {
    path: '/extension-privacy-policy',
    name: 'PrivacyPolicy',
--- a/src/style.css
+++ b/src/style.css
@@ -2,8 +2,6 @@
 *, *::before, *::after {
  box-sizing: border-box;
 }
-
-@import 'tailwindcss';
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
@@ -42,6 +40,8 @@
  --title-gradient: linear-gradient(45deg, #00f2fe, #4facfe);
  --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 */
@@ -84,6 +84,8 @@
  --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
  --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 {
@@ -111,16 +113,18 @@ body {

@media (min-width: 768px) {
  body {
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100vh;
+    overflow: auto;
  }

  #app {
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100vh;
+    overflow: auto;
  }
 }

+/* Removed global front camera mirror to restore stability */
+
 /* --- Shared styles for all tools (moved from tools.css) --- */

 .tool-container {
@@ -130,12 +134,12 @@ body {
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 }

 .tool-panel {
  width: 100%;
-  padding: 2rem;
+  padding: 1rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
@@ -239,6 +243,16 @@ body {
  box-shadow: var(--glass-shadow);
 }

+@media (max-width: 640px) {
+  .glass-panel:not(.modal-content) {
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: none;
+    box-shadow: none;
+  }
+}
+
 .btn-neon {
  background: var(--button-bg);
  border: 1px solid var(--button-border);
@@ -279,6 +293,22 @@ button:focus {
  box-shadow: var(--button-active-shadow);
 }

+.btn-neon.danger {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.6);
+  color: #fee2e2;
+}
+
+.btn-neon.danger:hover {
+  background: rgba(239, 68, 68, 0.3);
+  border-color: rgba(239, 68, 68, 0.85);
+  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2);
+}
+
+:root[data-theme="light"] .btn-neon.danger {
+  color: #7f1d1d;
+}
+
 .icon-only {
  padding: 8px;
  border-radius: 50%;
@@ -307,3 +337,19 @@ span.ripple {
    opacity: 0;
  }
 }
+
+/* --- Global Input/Select Focus Styles --- */
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+/* Custom focus ring for all form elements */
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 0 1px var(--primary-accent);
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -43,5 +43,11 @@ export default defineConfig({
  ],
  define: {
    '__APP_VERSION__': JSON.stringify(packageJson.version)
+  },
+  server: {
+    host: true,
+    allowedHosts: [
+      '.trycloudflare.com'
+    ]
  }
 })
Author	SHA1	Message	Date
Grzegorz Kucmierz	c8f9dfb37e	0.6.2 All checks were successful Deploy to Production / deploy (push) Successful in 15s Details	2026-02-28 04:19:41 +00:00
Grzegorz Kucmierz	70d7c8873e	refactor: centralize UI config and inject CSS variables dynamically	2026-02-28 04:18:53 +00:00
Grzegorz Kucmierz	d5d3d37804	refactor: simplify useLocalStorage (remove APP_PREFIX) and finalize QR Code tool	2026-02-28 04:05:07 +00:00
Grzegorz Kucmierz	2a1897f68d	feat: enhance QR generator with responsive layout, custom focus styles, and download options	2026-02-28 03:50:47 +00:00
Grzegorz Kucmierz	b2e8f23d60	0.6.1 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 19:43:31 +00:00
Grzegorz Kucmierz	d2ea9e3fc7	chore: UI spacing tweaks, desktop scrolling fix, QR title alignment	2026-02-27 19:43:12 +00:00
Grzegorz Kucmierz	1765742574	0.6.0 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 19:03:09 +00:00
Grzegorz Kucmierz	5b1a50f148	chore: prepare release; reintroduce front camera CSS mirror, stabilize QR Scanner	2026-02-27 19:02:49 +00:00
Grzegorz Kucmierz	613604f3c4	feat(qr-scanner): remove frame, add shape detection overlay, improve fullscreen desktop layout	2026-02-27 17:52:36 +00:00
Grzegorz Kucmierz	a699b432d7	0.5.0 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 17:00:41 +00:00
Grzegorz Kucmierz	839a98a658	feat: add QR Scanner tool with history, export, persistence and fullscreen support	2026-02-27 17:00:11 +00:00
Grzegorz Kucmierz	fd23860bcf	0.4.6 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 09:16:51 +00:00
Grzegorz Kucmierz	74c0251535	feat: improve url cleaner modal ui (light mode) and enable rule editing	2026-02-27 09:16:37 +00:00
Grzegorz Kucmierz	06b2815dd9	0.4.5 All checks were successful Deploy to Production / deploy (push) Successful in 13s Details	2026-02-27 08:51:31 +00:00
Grzegorz Kucmierz	1346de684c	feat: url cleaner multiline support and ui tweaks	2026-02-27 08:51:05 +00:00
Grzegorz Kucmierz	cfc9ac73b2	0.4.4 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 07:43:26 +00:00
Grzegorz Kucmierz	e095c0190b	style: restore danger styling for stop sniffing button	2026-02-27 07:43:12 +00:00
Grzegorz Kucmierz	45342d456a	0.4.3 All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-27 07:09:38 +00:00
Grzegorz Kucmierz	3ea7f63b83	style: remove panel borders and backgrounds on mobile for cleaner look	2026-02-27 07:09:27 +00:00