feat: Add copy buttons to URL Encoder and enhance Base64 tool

pages/utils/base64.vue

@@ -3,12 +3,19 @@
     <div class="max-w-2xl mx-auto">
       <h2 class="text-2xl font-bold mb-6">Base64 Encoder/Decoder</h2>
       <div class="space-y-4">
-        <textarea
-          v-model="input"
-          class="w-full p-2 border rounded"
-          rows="4"
-          placeholder="Enter text to encode/decode"
-        ></textarea>
+        <div class="relative">
+          <button @click="copyInput"
+            class="absolute top-2 right-2 z-10 p-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 hover:text-gray-800 transition-colors"
+            :title="copyInputSuccess ? 'Copied!' : 'Copy input to clipboard'">
+            <Icon :name="copyInputSuccess ? 'mdi:check' : 'mdi:content-copy'" class="w-5 h-5" />
+          </button>
+          <textarea
+            v-model="input"
+            class="w-full p-2 border rounded"
+            rows="4"
+            placeholder="Enter text to encode/decode"
+          ></textarea>
+        </div>
         <div class="flex space-x-4">
           <button
             @click="encode"
@@ -47,6 +54,7 @@
   const input = ref('')
   const output = ref('')
   const copySuccess = ref(false)
+  const copyInputSuccess = ref(false)
 
   const encode = () => {
     try {
@@ -76,4 +84,16 @@
       console.error('Failed to copy text:', e)
     }
   }
+
+  const copyInput = async () => {
+    try {
+      await navigator.clipboard.writeText(input.value)
+      copyInputSuccess.value = true
+      setTimeout(() => {
+        copyInputSuccess.value = false
+      }, 2000)
+    } catch (e) {
+      console.error('Failed to copy text:', e)
+    }
+  }
   </script>

pages/utils/urlencode.vue

@@ -5,14 +5,21 @@
     <div class="space-y-4">
       <div>
         <label for="plainText" class="block text-sm font-medium mb-2">Plain Text</label>
-        <textarea
-          id="plainText"
-          v-model="plainText"
-          @input="handlePlainTextInput"
-          rows="4"
-          class="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
-          placeholder="Enter text to encode..."
-        ></textarea>
+        <div class="relative">
+          <button @click="copyPlainText"
+            class="absolute top-2 right-2 z-10 p-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 hover:text-gray-800 transition-colors"
+            :title="copyPlainSuccess ? 'Copied!' : 'Copy to clipboard'">
+            <Icon :name="copyPlainSuccess ? 'mdi:check' : 'mdi:content-copy'" class="w-5 h-5" />
+          </button>
+          <textarea
+            id="plainText"
+            v-model="plainText"
+            @input="handlePlainTextInput"
+            rows="4"
+            class="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
+            placeholder="Enter text to encode..."
+          ></textarea>
+        </div>
       </div>
 
       <div class="flex justify-center space-x-4">
@@ -32,14 +39,21 @@
 
       <div>
         <label for="encodedText" class="block text-sm font-medium mb-2">Encoded Text</label>
-        <textarea
-          id="encodedText"
-          v-model="encodedText"
-          @input="handleEncodedTextInput"
-          rows="4"
-          class="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
-          placeholder="Enter text to decode..."
-        ></textarea>
+        <div class="relative">
+          <button @click="copyEncodedText"
+            class="absolute top-2 right-2 z-10 p-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 hover:text-gray-800 transition-colors"
+            :title="copyEncodedSuccess ? 'Copied!' : 'Copy to clipboard'">
+            <Icon :name="copyEncodedSuccess ? 'mdi:check' : 'mdi:content-copy'" class="w-5 h-5" />
+          </button>
+          <textarea
+            id="encodedText"
+            v-model="encodedText"
+            @input="handleEncodedTextInput"
+            rows="4"
+            class="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
+            placeholder="Enter text to decode..."
+          ></textarea>
+        </div>
       </div>
     </div>
 
@@ -66,6 +80,8 @@ import { ref, watch } from 'vue'
 const plainText = ref('')
 const encodedText = ref('')
 const encodeSpaceAsPlus = ref(false)
+const copyPlainSuccess = ref(false)
+const copyEncodedSuccess = ref(false)
 let isUpdating = false
 
 const encode = (text: string = plainText.value) => {
@@ -108,6 +124,30 @@ const handleOptionsChange = () => {
   handlePlainTextInput()
 }
 
+const copyPlainText = async () => {
+  try {
+    await navigator.clipboard.writeText(plainText.value)
+    copyPlainSuccess.value = true
+    setTimeout(() => {
+      copyPlainSuccess.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy text:', err)
+  }
+}
+
+const copyEncodedText = async () => {
+  try {
+    await navigator.clipboard.writeText(encodedText.value)
+    copyEncodedSuccess.value = true
+    setTimeout(() => {
+      copyEncodedSuccess.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy text:', err)
+  }
+}
+
 // Watch for changes in both text fields
 watch(plainText, handlePlainTextInput)
 watch(encodedText, handleEncodedTextInput)