From 1346de684ce3987ef9cb4a12dc74909e45b047e9 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Fri, 27 Feb 2026 08:51:05 +0000
Subject: [PATCH] feat: url cleaner multiline support and ui tweaks

---
 src/components/tools/UrlCleaner.vue | 74 ++++++++++++++++++++++++-----
 1 file changed, 63 insertions(+), 11 deletions(-)

diff --git a/src/components/tools/UrlCleaner.vue b/src/components/tools/UrlCleaner.vue
index c3cabda..c499df5 100644
--- 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,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 {