tools-app/src/components/tools/UrlCleaner.vue

<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { Copy, Trash2, ExternalLink, Power, Zap, X, Settings, Download } from 'lucide-vue-next'
import { useExtension } from '../../composables/useExtension'
import { useUrlCleaner } from '../../composables/useUrlCleaner'
import ExtensionStatus from './common/ExtensionStatus.vue'
import UrlCleanerExceptionsModal from './UrlCleanerExceptionsModal.vue'

// Extension integration
const { isExtensionReady, isListening, lastClipboardText, startListening, stopListening, writeClipboard } = useExtension()

const inputUrl = ref('')
const showExceptionsModal = ref(false)

const {
  cleanedHistory,
  isWatchEnabled,
  exceptions,
  defaultExceptions,
  processUrl: baseProcessUrl,
  removeEntry,
  clearHistory
} = useUrlCleaner()

// Watch for clipboard changes from extension
watch(lastClipboardText, (newText) => {
  if (isWatchEnabled.value && newText) {
    baseProcessUrl(newText, true, writeClipboard)
  }
})

// Sync watch state with extension listener
watch(isWatchEnabled, (enabled) => {
  if (enabled) {
    startListening()
  } else {
    stopListening()
  }
}, { immediate: true })

// Re-enable listening when extension becomes ready
watch(isExtensionReady, (ready) => {
  if (ready && isWatchEnabled.value) {
    startListening()
  }
})

// Toggle watch mode
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) {
    const urls = inputUrl.value.split(/\r?\n/).filter(line => line.trim().length > 0)
    urls.forEach(url => {
      baseProcessUrl(url.trim(), false, writeClipboard)
    })
    inputUrl.value = ''
  }
}

const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
}

onUnmounted(() => {
  if (isListening.value) {
    stopListening()
  }
})
</script>

<template>
  <div class="tool-container full-width">
    <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" v-ripple>
            <Settings size="20" />
          </button>
          <ExtensionStatus :isReady="isExtensionReady" />
        </div>
      </div>

      <div class="input-section">
        <div class="input-wrapper">
          <textarea
            v-model="inputUrl"
            placeholder="Paste URL(s) here to clean..."
            class="tool-textarea url-input"
            @keydown.enter.prevent="handleClean"
            rows="1"
          ></textarea>
        </div>

        <div class="watch-toggle">
          <button class="btn-neon" @click="handleClean" v-ripple>
            Clean
          </button>
          <button
            class="btn-neon toggle-btn"
            :class="{ 'active': isWatchEnabled && isExtensionReady }"
            @click="toggleWatch"
            :disabled="!isExtensionReady"
            :title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
            v-ripple
          >
            <Power size="18" />
            <span>Watch Clipboard</span>
            <span v-if="isWatchEnabled && isExtensionReady" class="status-dot"></span>
          </button>
        </div>
      </div>

      <div class="history-section" v-if="cleanedHistory.length > 0">
        <div class="history-header">
          <h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
          <div class="history-actions">
            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs" v-ripple>
              <Copy size="18" />
            </button>
            <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
              <Download size="18" />
            </button>
            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History" v-ripple>
              <Trash2 size="18" />
            </button>
          </div>
        </div>

        <div class="history-list">
          <div v-for="item in cleanedHistory" :key="item.id" class="history-item">
            <div class="item-info">
              <div class="cleaned-url">{{ item.cleaned }}</div>
              <div class="meta-info">
                <span class="timestamp">{{ item.timestamp }}</span>
                <span class="savings" v-if="item.savedPercent > 0">
                  <Zap size="12" /> -{{ item.savedPercent }}% junk removed
                </span>
                <span class="no-change" v-else>No junk found</span>
              </div>
            </div>
            <div class="item-actions">
              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
                <Copy size="18" />
              </button>
              <a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
                <ExternalLink size="18" />
              </a>
              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove" v-ripple>
                <X size="18" />
              </button>
            </div>
          </div>
        </div>
      </div>

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

<style scoped>
.input-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  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;
  min-height: 120px;
  font-family: inherit;
}

.watch-toggle {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.toggle-btn.active {
  background: rgba(var(--primary-accent-rgb), 0.2);
  border-color: var(--primary-accent);
  color: var(--primary-accent);
}

.cleaned-url {
  color: var(--primary-accent);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.4rem;
}

.meta-info {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.savings {
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.empty-state {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
  text-align: center;
  padding: 2rem;
}

.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);
}
</style>