refactor: use useClipboard from vueuse

Author: danielroe

app/components/ConnectorModal.vue

@@ -6,7 +6,7 @@ const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disco
 
 const tokenInput = shallowRef('')
 const portInput = shallowRef('31415')
-const copied = shallowRef(false)
+const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
 async function handleConnect() {
   const port = Number.parseInt(portInput.value, 10) || 31415
@@ -26,11 +26,7 @@ function copyCommand() {
   if (portInput.value !== '31415') {
     command += ` --port ${portInput.value}`
   }
-  navigator.clipboard.writeText(command)
-  copied.value = true
-  setTimeout(() => {
-    copied.value = false
-  }, 2000)
+  copy(command)
 }
 
 const selectedPM = useSelectedPackageManager()

app/composables/useCopyToClipboard.ts

@@ -76,13 +76,11 @@ export function useInstallCommand(
   })
 
   // Copy state
-  const copied = ref(false)
+  const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
   async function copyInstallCommand() {
     if (!fullInstallCommand.value) return
-    await navigator.clipboard.writeText(fullInstallCommand.value)
-    copied.value = true
-    setTimeout(() => (copied.value = false), 2000)
+    await copy(fullInstallCommand.value)
   }
 
   return {

app/composables/useInstallCommand.ts

@@ -293,7 +293,7 @@ const executeCommand = computed(() => {
 })
 
 // Copy execute command (for binary-only packages)
-const { copied: executeCopied, copy: copyExecute } = useCopyToClipboard()
+const { copied: executeCopied, copy: copyExecute } = useClipboard({ copiedDuring: 2000 })
 const copyExecuteCommand = () => copyExecute(executeCommand.value)
 
 // Get associated create-* package info (e.g., vite -> create-vite)
@@ -334,7 +334,7 @@ const createCommand = computed(() => {
 })
 
 // Copy create command
-const { copied: createCopied, copy: copyCreate } = useCopyToClipboard()
+const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
 const copyCreateCommand = () => copyCreate(createCommand.value)
 
 // Primary run command parts
@@ -355,7 +355,7 @@ function getFullRunCommand(command?: string) {
 }
 
 // Copy run command
-const { copied: runCopied, copy: copyRun } = useCopyToClipboard()
+const { copied: runCopied, copy: copyRun } = useClipboard({ copiedDuring: 2000 })
 const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
 
 // Expandable description

app/pages/[...package].vue

@@ -228,9 +228,10 @@ function handleLineClick(lineNum: number, event: MouseEvent) {
 }
 
 // Copy link to current line(s)
-async function copyPermalink() {
+const { copied: permalinkCopied, copy: copyPermalink } = useClipboard({ copiedDuring: 2000 })
+function copyPermalinkUrl() {
   const url = new URL(window.location.href)
-  await navigator.clipboard.writeText(url.toString())
+  copyPermalink(url.toString())
 }
 
 // Canonical URL for this code page
@@ -373,9 +374,9 @@ useSeoMeta({
                 v-if="selectedLines"
                 type="button"
                 class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors"
-                @click="copyPermalink"
+                @click="copyPermalinkUrl"
               >
-                {{ $t('code.copy_link') }}
+                {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}
               </button>
               <a
                 :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"