refactor: simplify useLocalStorage (remove APP_PREFIX) and finalize QR Code tool

src/components/tools/QrCode.vue

@@ -3,11 +3,12 @@ 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 = ref('')
+const text = useLocalStorage('text', '', 'qr-code')
-const ecc = ref('M')
+const ecc = useLocalStorage('ecc', 'M', 'qr-code')
-const size = ref(300)
+const size = useLocalStorage('size', 300, 'qr-code')
-const format = ref('png')
+const format = useLocalStorage('format', 'png', 'qr-code')
 const svgContent = ref('')
 const previewRef = ref(null)
 
@@ -250,12 +251,12 @@ const triggerDownload = (blob, filename) => {
   padding: 1rem;
   overflow: hidden; /* Prevent overflow if QR is too big */
   min-height: 0;
+  container-type: size;
 }
 
 .qr-frame {
-  flex: 1;
+  width: calc(100cqmin - 4rem);
-  width: 100%;
+  height: calc(100cqmin - 4rem);
-  max-height: 100%;
   background: white;
   padding: 1rem;
   border-radius: 8px;
@@ -268,10 +269,8 @@ const triggerDownload = (blob, filename) => {
 
 .qr-frame :deep(svg) {
   display: block;
-  max-width: 100%;
+  width: 100%;
-  max-height: 100%;
+  height: 100%;
-  width: auto;
-  height: auto;
 }
 
 .actions {

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 })