0.4.6

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.4.1",
+  "version": "0.4.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.4.1",
+      "version": "0.4.6",
       "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.1",
+  "version": "0.4.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -74,6 +74,13 @@ onUnmounted(() => {
   padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
 }
 
+@media (max-width: 640px) {
+  .main-content {
+    padding: 1rem;
+    padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
+  }
+}
+
 @media (min-width: 768px) {
   .app-body {
     overflow: hidden;

src/components/tools/ClipboardSniffer.vue

@@ -51,7 +51,9 @@ const clearText = () => {
     <div class="tool-panel">
       <div class="tool-header">
         <h2 class="tool-title">Clipboard Sniffer</h2>
-        <ExtensionStatus :isReady="isExtensionReady" class="extension-indicator" />
+        <div class="extension-indicator-wrapper">
+          <ExtensionStatus :isReady="isExtensionReady" />
+        </div>
       </div>
 
       <div class="controls">
@@ -67,7 +69,7 @@ const clearText = () => {
         </button>
         <button
           v-else
-          class="btn-neon active"
+          class="btn-neon danger"
           @click="stopListening"
           v-ripple
         >
@@ -145,10 +147,11 @@ const clearText = () => {
   border-color: var(--primary-accent);
 }
 
-.extension-indicator {
+.extension-indicator-wrapper {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
+  display: flex;
 }
 </style>

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">
@@ -300,11 +343,35 @@ 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;
 }
 
+@media (max-width: 640px) {
+  .input-wrapper {
+    flex-direction: column;
+  }
+
+  .watch-toggle {
+    justify-content: center;
+  }
+
+  .toggle-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .url-input {
   flex: 1;
   padding: 0.8rem 1rem;
@@ -315,6 +382,9 @@ onUnmounted(() => {
   font-size: 1rem;
   outline: none;
   transition: all 0.2s;
+  resize: vertical;
+  min-height: 46px;
+  font-family: inherit;
 }
 
 .url-input:focus {
@@ -380,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 {
@@ -400,7 +476,7 @@ onUnmounted(() => {
 }
 
 .history-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--list-hover-bg);
 }
 
 .item-info {

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);
@@ -299,6 +317,12 @@ const resetToDefault = (ruleId) => {
   align-items: center;
 }
 
+@media (max-width: 640px) {
+  .modal-header {
+    padding: 0.8rem 1.2rem;
+  }
+}
+
 .modal-header h3 {
   margin: 0;
   font-size: 1.4rem;
@@ -325,6 +349,12 @@ const resetToDefault = (ruleId) => {
   overflow-y: auto;
 }
 
+@media (max-width: 640px) {
+  .modal-body {
+    padding: 1rem 1.2rem;
+  }
+}
+
 .description {
   color: var(--text-secondary);
   margin-bottom: 1.5rem;
@@ -340,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;
@@ -353,6 +388,29 @@ const resetToDefault = (ruleId) => {
   margin-bottom: 0.8rem;
 }
 
+@media (max-width: 640px) {
+  .form-row {
+    flex-direction: column;
+  }
+
+  .checkbox-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .checkbox-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.8rem;
+  }
+
+  .btn-neon {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .checkbox-row {
   align-items: center;
   justify-content: space-between;
@@ -410,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;
 }
@@ -422,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 {

src/components/tools/common/ExtensionStatus.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <script setup>
 import { ref } from 'vue'
 import { Plug, Plus, X } from 'lucide-vue-next'
@@ -10,7 +16,7 @@ const showModal = ref(false)
 </script>
 
 <template>
-  <div class="extension-status" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
+  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
     <Plug v-if="isReady" size="18" />
     <Plus v-else size="18" />
   </div>

src/style.css

@@ -42,6 +42,7 @@
   --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);
 
   color: var(--text-color);
   background-color: #242424; /* Fallback */
@@ -84,6 +85,7 @@
   --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);
 }
 
 body {
@@ -239,6 +241,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 +291,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%;