0.4.5

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.4.3",
+      "version": "0.4.5",
       "dependencies": {
         "lucide-vue-next": "^0.575.0",
         "vue": "^3.5.25",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

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
         >

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,9 +254,17 @@ 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">
-            <Trash2 size="18" />
-          </button>
+          <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">
@@ -339,6 +382,9 @@ onUnmounted(() => {
   font-size: 1rem;
   outline: none;
   transition: all 0.2s;
+  resize: vertical;
+  min-height: 46px;
+  font-family: inherit;
 }
 
 .url-input:focus {
@@ -404,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 {

src/style.css

@@ -289,6 +289,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%;