0.4.5

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.4.0",
+  "version": "0.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.4.0",
+      "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.0",
+  "version": "0.4.5",
   "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,8 +51,10 @@ const clearText = () => {
     <div class="tool-panel">
       <div class="tool-header">
         <h2 class="tool-title">Clipboard Sniffer</h2>
+        <div class="extension-indicator-wrapper">
           <ExtensionStatus :isReady="isExtensionReady" />
         </div>
+      </div>
 
       <div class="controls">
         <button
@@ -67,7 +69,7 @@ const clearText = () => {
         </button>
         <button
           v-else
-          class="btn-neon active"
+          class="btn-neon danger"
           @click="stopListening"
           v-ripple
         >
@@ -144,4 +146,12 @@ const clearText = () => {
   outline: none;
   border-color: var(--primary-accent);
 }
+
+.extension-indicator-wrapper {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+}
 </style>

src/components/tools/UrlCleaner.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { ref, watch, onUnmounted } from 'vue'
-import { Copy, Trash2, ExternalLink, Power, Zap, X } 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'
+import UrlCleanerExceptionsModal from './UrlCleanerExceptionsModal.vue'
 
 // Extension integration
 const { isExtensionReady, isListening, lastClipboardText, startListening, stopListening, writeClipboard } = useExtension()
@@ -13,6 +14,21 @@ const inputUrl = ref('')
 const cleanedHistory = useLocalStorage('url-cleaner-history', [])
 const isWatchEnabled = useLocalStorage('url-cleaner-watch-enabled', false)
 
+// Exceptions management
+const showExceptionsModal = ref(false)
+const defaultExceptions = [
+  { id: 'yt', domainPattern: '*.youtube.com', keepParams: ['v', 't'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true },
+  { id: 'yt-short', domainPattern: 'youtu.be', keepParams: ['t'], keepHash: false, keepAllParams: false, isEnabled: true, isDefault: true }
+]
+const exceptions = useLocalStorage('url-cleaner-exceptions', defaultExceptions)
+
+// Helper to match domain with glob pattern
+const matchDomain = (pattern, domain) => {
+  // Escape regex chars except *
+  const regexString = '^' + pattern.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*') + '$'
+  return new RegExp(regexString, 'i').test(domain)
+}
+
 // Watch for clipboard changes from extension
 watch(lastClipboardText, (newText) => {
   if (isWatchEnabled.value && newText) {
@@ -41,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 = ''
   }
 }
@@ -62,13 +113,41 @@ const processUrl = (text, autoClipboard = false) => {
 
     try {
       const urlObj = new URL(text)
-      // Remove query params and hash
+      const hostname = urlObj.hostname
+
+      // Check for exceptions
+      const matchedRule = exceptions.value.find(rule =>
+        rule.isEnabled && matchDomain(rule.domainPattern, hostname)
+      )
+
+      if (matchedRule) {
+        if (!matchedRule.keepAllParams) {
+          // Exception logic: keep specific params
+          const params = new URLSearchParams(urlObj.search)
+          const keys = Array.from(params.keys())
+
+          for (const key of keys) {
+            if (!matchedRule.keepParams.includes(key)) {
+              params.delete(key)
+            }
+          }
+
+          urlObj.search = params.toString()
+        }
+
+        if (!matchedRule.keepHash) {
+          urlObj.hash = ''
+        }
+      } else {
+        // Default behavior: remove all query params and hash
         if (urlObj.search || urlObj.hash) {
           urlObj.search = ''
           urlObj.hash = ''
+        }
+      }
+
       cleanedUrl = urlObj.toString()
       // Remove trailing slash if it wasn't there before? usually keep it standard
-      }
     } catch (e) {
       // Invalid URL format
       if (!autoClipboard) {
@@ -135,18 +214,23 @@ onUnmounted(() => {
     <div class="tool-panel">
       <div class="panel-header">
         <h2 class="tool-title">URL Cleaner</h2>
+        <div class="header-actions">
+          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions">
+            <Settings size="20" />
+          </button>
           <ExtensionStatus :isReady="isExtensionReady" />
         </div>
+      </div>
 
       <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>
@@ -170,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">
@@ -205,6 +297,14 @@ onUnmounted(() => {
       <div class="empty-state" v-else>
         <p>Paste a URL above or enable "Watch Clipboard" to automatically clean links.</p>
       </div>
+
+      <UrlCleanerExceptionsModal
+        :isOpen="showExceptionsModal"
+        :exceptions="exceptions"
+        :defaultRules="defaultExceptions"
+        @update:exceptions="exceptions = $event"
+        @close="showExceptionsModal = false"
+      />
     </div>
   </div>
 </template>
@@ -243,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;
@@ -258,6 +382,9 @@ onUnmounted(() => {
   font-size: 1rem;
   outline: none;
   transition: all 0.2s;
+  resize: vertical;
+  min-height: 46px;
+  font-family: inherit;
 }
 
 .url-input:focus {
@@ -323,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 {
@@ -422,4 +555,40 @@ onUnmounted(() => {
   text-align: center;
   padding: 2rem;
 }
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.settings-btn {
+  background: rgba(255, 255, 255, 0.1);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--text-secondary);
+  transition: all 0.3s ease;
+}
+
+.settings-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--primary-accent);
+}
+
+:global(:root[data-theme="light"]) .settings-btn {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+:global(:root[data-theme="light"]) .settings-btn:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>

src/components/tools/UrlCleanerExceptionsModal.vue

@@ -0,0 +1,566 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { X, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
+
+const props = defineProps({
+  isOpen: Boolean,
+  exceptions: Array,
+  defaultRules: Array
+})
+
+const emit = defineEmits(['close', 'update:exceptions'])
+
+const newRule = ref({
+  domainPattern: '',
+  keepParams: '',
+  keepHash: false,
+  keepAllParams: false
+})
+
+const localExceptions = computed({
+  get: () => props.exceptions,
+  set: (val) => emit('update:exceptions', val)
+})
+
+const addRule = () => {
+  if (!newRule.value.domainPattern) return
+
+  const params = newRule.value.keepParams
+    .split(',')
+    .map(p => p.trim())
+    .filter(p => p)
+
+  const existingRuleIndex = localExceptions.value.findIndex(
+    r => r.domainPattern === newRule.value.domainPattern
+  )
+
+  if (existingRuleIndex >= 0) {
+    // Merge with existing rule
+    const existingRule = localExceptions.value[existingRuleIndex]
+
+    // Merge params (unique)
+    const mergedParams = [...new Set([...existingRule.keepParams, ...params])]
+
+    // Merge keepHash
+    const mergedKeepHash = existingRule.keepHash || newRule.value.keepHash
+    const mergedKeepAllParams = !!existingRule.keepAllParams || !!newRule.value.keepAllParams
+
+    const updatedRule = {
+      ...existingRule,
+      keepParams: mergedParams,
+      keepHash: mergedKeepHash,
+      keepAllParams: mergedKeepAllParams,
+      isEnabled: true // Re-enable if disabled
+    }
+
+    const newExceptions = [...localExceptions.value]
+    newExceptions[existingRuleIndex] = updatedRule
+    localExceptions.value = newExceptions
+
+  } else {
+    // Create new rule
+    const rule = {
+      id: Date.now().toString(),
+      domainPattern: newRule.value.domainPattern,
+      keepParams: params,
+      keepHash: newRule.value.keepHash,
+      keepAllParams: newRule.value.keepAllParams,
+      isEnabled: true,
+      isDefault: false
+    }
+    localExceptions.value = [...localExceptions.value, rule]
+  }
+
+  // Reset form
+  newRule.value = {
+    domainPattern: '',
+    keepParams: '',
+    keepHash: false,
+    keepAllParams: false
+  }
+}
+
+const removeRule = (id) => {
+  localExceptions.value = localExceptions.value.filter(r => r.id !== id)
+}
+
+const toggleRule = (id) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === id) {
+      return { ...r, isEnabled: !r.isEnabled }
+    }
+    return r
+  })
+}
+
+const removeParam = (ruleId, param) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === ruleId) {
+      return {
+        ...r,
+        keepParams: r.keepParams.filter(p => p !== param)
+      }
+    }
+    return r
+  })
+}
+
+const toggleKeepHash = (ruleId) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === ruleId) {
+      return { ...r, keepHash: !r.keepHash }
+    }
+    return r
+  })
+}
+
+const toggleKeepAllParams = (ruleId) => {
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id === ruleId) {
+      return { ...r, keepAllParams: !r.keepAllParams }
+    }
+    return r
+  })
+}
+
+const resetToDefault = (ruleId) => {
+  const defaultRule = (props.defaultRules || []).find(r => r.id === ruleId)
+  if (!defaultRule) return
+
+  localExceptions.value = localExceptions.value.map(r => {
+    if (r.id !== ruleId) return r
+    return {
+      ...r,
+      domainPattern: defaultRule.domainPattern,
+      keepParams: Array.isArray(defaultRule.keepParams) ? [...defaultRule.keepParams] : [],
+      keepHash: !!defaultRule.keepHash,
+      keepAllParams: !!defaultRule.keepAllParams,
+      isEnabled: true,
+      isDefault: true
+    }
+  })
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
+      <div class="modal-content glass-panel">
+        <div class="modal-header">
+          <h3>URL Cleaning Exceptions</h3>
+          <button class="close-btn" @click="$emit('close')">
+            <X size="24" />
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <p class="description">
+            Define rules to keep specific parameters or anchors for certain domains.
+            Standard cleaning removes all parameters and anchors.
+          </p>
+
+          <div class="add-rule-form">
+            <h4>Add New Exception</h4>
+            <div class="form-row">
+              <input
+                v-model="newRule.domainPattern"
+                placeholder="Domain (e.g. *.youtube.com)"
+                class="input-field"
+                @keyup.enter="addRule"
+              >
+              <input
+                v-model="newRule.keepParams"
+                placeholder="Keep params (comma separated, e.g. v, id)"
+                class="input-field"
+                @keyup.enter="addRule"
+              >
+            </div>
+            <div class="form-row checkbox-row">
+              <div class="checkbox-group">
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="newRule.keepHash">
+                  Keep Anchor (#)
+                </label>
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="newRule.keepAllParams">
+                  Keep all params
+                </label>
+              </div>
+              <button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
+                <Plus size="16" /> Add Rule
+              </button>
+            </div>
+          </div>
+
+          <div class="rules-list">
+            <h4>Active Rules</h4>
+            <div v-if="localExceptions.length === 0" class="empty-rules">
+              No exceptions defined.
+            </div>
+
+            <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-details">
+                  <div class="params-list">
+                    <template v-if="rule.keepAllParams">
+                      <span class="detail-tag">
+                        Keep all params
+                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
+                          <X size="12" />
+                        </button>
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span v-for="param in rule.keepParams" :key="param" class="detail-tag">
+                        {{ param }}
+                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
+                          <X size="12" />
+                        </button>
+                      </span>
+                    </template>
+                    <span v-if="rule.keepHash" class="detail-tag hash-tag">
+                      Keep #
+                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
+                        <X size="12" />
+                      </button>
+                    </span>
+                    <span v-if="!rule.keepAllParams && rule.keepParams.length === 0 && !rule.keepHash" class="no-params">No params kept</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rule-actions">
+                <button
+                  class="icon-btn"
+                  @click="toggleRule(rule.id)"
+                  :title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                >
+                  <div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
+                </button>
+
+                <button
+                  v-if="!rule.isDefault"
+                  class="icon-btn delete-btn"
+                  @click="removeRule(rule.id)"
+                  title="Remove rule"
+                >
+                  <Trash2 size="18" />
+                </button>
+                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
+                  <RotateCcw size="16" /> Default
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+  padding: 1rem;
+}
+
+.modal-content {
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 0;
+  max-width: 800px;
+  width: 100%;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--glass-shadow);
+  color: var(--text-color);
+}
+
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media (max-width: 640px) {
+  .modal-header {
+    padding: 0.8rem 1.2rem;
+  }
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.4rem;
+  background: var(--title-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
+.close-btn:hover {
+  color: var(--text-color);
+}
+
+.modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+@media (max-width: 640px) {
+  .modal-body {
+    padding: 1rem 1.2rem;
+  }
+}
+
+.description {
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.add-rule-form {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+  border: 1px solid var(--glass-border);
+}
+
+.add-rule-form h4, .rules-list h4 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  color: var(--text-strong);
+}
+
+.form-row {
+  display: flex;
+  gap: 0.8rem;
+  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;
+  margin-bottom: 0;
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+}
+
+.input-field {
+  flex: 1;
+  padding: 0.6rem;
+  border-radius: 6px;
+  border: 1px solid var(--toggle-border);
+  background: var(--toggle-bg);
+  color: var(--text-color);
+  outline: none;
+}
+
+.input-field:focus {
+  border-color: var(--primary-accent);
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.btn-neon.small {
+  padding: 0.4rem 1rem;
+  font-size: 0.9rem;
+}
+
+.rules-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.rule-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.8rem;
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  transition: opacity 0.3s;
+}
+
+.rule-item.disabled {
+  opacity: 0.6;
+}
+
+.rule-info {
+  flex: 1;
+}
+
+.rule-domain {
+  font-weight: 600;
+  color: var(--primary-accent);
+  margin-bottom: 0.3rem;
+}
+
+.rule-details {
+  width: 100%;
+}
+
+.params-list {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.detail-tag {
+  font-size: 0.8rem;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.remove-param-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.remove-param-btn:hover {
+  color: #ef4444;
+}
+
+.no-params {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.rule-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.toggle-switch {
+  width: 36px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.3s;
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.toggle-switch.active {
+  background: #4ade80;
+}
+
+.toggle-switch.active::after {
+  transform: translateX(16px);
+}
+
+.default-reset {
+  white-space: nowrap;
+}
+
+.empty-rules {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 1rem;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+}
+
+.delete-btn:hover {
+  color: #ef4444;
+}
+
+:global(:root[data-theme="light"]) .delete-btn:hover {
+  color: #dc2626;
+}
+</style>

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>
@@ -55,10 +61,6 @@ const showModal = ref(false)
 
 <style scoped>
 .extension-status {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;

src/style.css

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