refactor: prefer VueUse where possible (#267)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: 9romise

app/components/AppHeader.vue

@@ -94,7 +94,6 @@ onKeyStroke(',', e => {
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
                   class="w-full bg-bg-subtle border border-border rounded-md pl-7 pr-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                  autocomplete="off"
                   @input="handleSearchInput"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"

app/components/CodeMobileTreeDrawer.vue

@@ -18,19 +18,9 @@ watch(
   },
 )
 
+const isLocked = useScrollLock(document)
 // Prevent body scroll when drawer is open
-watch(isOpen, open => {
-  if (open) {
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.body.style.overflow = ''
-  }
-})
-
-// Cleanup on unmount
-onUnmounted(() => {
-  document.body.style.overflow = ''
-})
+watch(isOpen, open => (isLocked.value = open))
 </script>
 
 <template>

app/components/DependencyPathPopup.vue

@@ -4,8 +4,6 @@ defineProps<{
   path: readonly string[]
 }>()
 
-const { t } = useI18n()
-
 const isOpen = shallowRef(false)
 const popupEl = ref<HTMLElement | null>(null)
 const popupPosition = shallowRef<{ top: number; left: number } | null>(null)
@@ -29,15 +27,8 @@ function handleKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape') closePopup()
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-  window.addEventListener('scroll', closePopup, true)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-  window.removeEventListener('scroll', closePopup, true)
-})
+useEventListener(document, 'keydown', handleKeydown)
+useEventListener('scroll', closePopup, true)
 
 function togglePopup(event: MouseEvent) {
   if (isOpen.value) {
@@ -81,7 +72,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
       @click.stop="togglePopup"
     >
       <span class="i-carbon-tree-view w-3 h-3" aria-hidden="true" />
-      <span>{{ t('package.vulnerabilities.path') }}</span>
+      <span>{{ $t('package.vulnerabilities.path') }}</span>
     </button>
 
     <!-- Tree popup -->

app/components/OperationsQueue.vue

@@ -103,19 +103,14 @@ function getStatusIcon(status: string): string {
 }
 
 // Auto-refresh while executing
-let refreshInterval: ReturnType<typeof setInterval> | null = null
+const { pause: pauseRefresh, resume: resumeRefresh } = useIntervalFn(() => refreshState(), 1000, {
+  immediate: false,
+})
 watch(isExecuting, executing => {
   if (executing) {
-    refreshInterval = setInterval(() => refreshState(), 1000)
-  } else if (refreshInterval) {
-    clearInterval(refreshInterval)
-    refreshInterval = null
-  }
-})
-
-onUnmounted(() => {
-  if (refreshInterval) {
-    clearInterval(refreshInterval)
+    resumeRefresh()
+  } else {
+    pauseRefresh()
   }
 })
 </script>

app/components/PackageVulnerabilityTree.vue

@@ -7,8 +7,6 @@ const props = defineProps<{
   version: string
 }>()
 
-const { t } = useI18n()
-
 const {
   data: vulnTree,
   status,
@@ -34,7 +32,7 @@ const summaryText = computed(() => {
   if (!vulnTree.value) return ''
   const { totalCounts } = vulnTree.value
   return SEVERITY_LEVELS.filter(s => totalCounts[s] > 0)
-    .map(s => `${totalCounts[s]} ${t(`package.vulnerabilities.severity.${s}`)}`)
+    .map(s => `${totalCounts[s]} ${$t(`package.vulnerabilities.severity.${s}`)}`)
     .join(', ')
 })
 
@@ -83,7 +81,7 @@ function getDepthStyle(depth: string | undefined) {
           <span class="i-carbon-warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{
-              t(
+              $t(
                 'package.vulnerabilities.tree_found',
                 {
                   vulns: vulnTree!.totalCounts.total,
@@ -137,7 +135,7 @@ function getDepthStyle(depth: string | undefined) {
                   class="px-1.5 py-0.5 text-[10px] font-mono rounded border"
                   :class="SEVERITY_COLORS[s]"
                 >
-                  {{ pkg.counts[s] }} {{ t(`package.vulnerabilities.severity.${s}`) }}
+                  {{ pkg.counts[s] }} {{ $t(`package.vulnerabilities.severity.${s}`) }}
                 </span>
               </div>
             </div>
@@ -159,7 +157,7 @@ function getDepthStyle(depth: string | undefined) {
                 <span class="truncate">{{ vuln.summary }}</span>
               </li>
               <li v-if="pkg.vulnerabilities.length > 2" class="text-xs text-fg-subtle">
-                {{ t('package.vulnerabilities.more', { count: pkg.vulnerabilities.length - 2 }) }}
+                {{ $t('package.vulnerabilities.more', { count: pkg.vulnerabilities.length - 2 }) }}
               </li>
             </ul>
           </li>
@@ -172,7 +170,7 @@ function getDepthStyle(depth: string | undefined) {
           @click="showAllPackages = true"
         >
           {{
-            t('package.vulnerabilities.show_all_packages', {
+            $t('package.vulnerabilities.show_all_packages', {
               count: vulnTree!.vulnerablePackages.length,
             })
           }}
@@ -184,7 +182,7 @@ function getDepthStyle(depth: string | undefined) {
           class="px-4 py-2 text-xs text-fg-subtle border-t border-border flex items-center gap-2"
         >
           <span class="i-carbon-warning w-3 h-3" aria-hidden="true" />
-          <span>{{ t('package.vulnerabilities.packages_failed', vulnTree!.failedQueries) }}</span>
+          <span>{{ $t('package.vulnerabilities.packages_failed', vulnTree!.failedQueries) }}</span>
         </div>
       </div>
     </div>
@@ -201,7 +199,7 @@ function getDepthStyle(depth: string | undefined) {
           class="i-carbon-circle-dash w-4 h-4 animate-spin motion-reduce:animate-none text-fg-subtle"
           aria-hidden="true"
         />
-        <span class="text-sm text-fg-muted">{{ t('package.vulnerabilities.scanning_tree') }}</span>
+        <span class="text-sm text-fg-muted">{{ $t('package.vulnerabilities.scanning_tree') }}</span>
       </div>
     </div>
   </section>
@@ -215,7 +213,7 @@ function getDepthStyle(depth: string | undefined) {
       <div class="flex items-center gap-2">
         <span class="i-carbon-checkmark w-4 h-4 text-fg-subtle" aria-hidden="true" />
         <span class="text-sm text-fg-muted">
-          {{ t('package.vulnerabilities.no_known', { count: vulnTree?.totalPackages ?? 0 }) }}
+          {{ $t('package.vulnerabilities.no_known', { count: vulnTree?.totalPackages ?? 0 }) }}
         </span>
       </div>
       <!-- Warning if some queries failed -->
@@ -224,7 +222,7 @@ function getDepthStyle(depth: string | undefined) {
         class="flex items-center gap-2 mt-2 text-xs text-fg-subtle"
       >
         <span class="i-carbon-warning w-3 h-3" aria-hidden="true" />
-        <span>{{ t('package.vulnerabilities.packages_failed', vulnTree.failedQueries) }}</span>
+        <span>{{ $t('package.vulnerabilities.packages_failed', vulnTree.failedQueries) }}</span>
       </div>
     </div>
   </section>
@@ -235,7 +233,7 @@ function getDepthStyle(depth: string | undefined) {
       <div class="flex items-center gap-2">
         <span class="i-carbon-warning w-4 h-4 text-fg-subtle" aria-hidden="true" />
         <span class="text-sm text-fg-muted">
-          {{ t('package.vulnerabilities.scan_failed') }}
+          {{ $t('package.vulnerabilities.scan_failed') }}
         </span>
       </div>
     </div>

app/pages/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 const router = useRouter()
 const searchQuery = ref('')
-const isSearchFocused = ref(false)
+const searchInputRef = useTemplateRef('searchInputRef')
+const { focused: isSearchFocused } = useFocus(searchInputRef)
 
 function handleSearch() {
   router.push({
@@ -68,17 +69,15 @@ defineOgImageComponent('Default')
 
               <input
                 id="home-search"
+                ref="searchInputRef"
                 v-model="searchQuery"
                 type="search"
                 name="q"
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
                 autofocus
                 class="w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                autocomplete="off"
                 @input="handleSearch"
-                @focus="isSearchFocused = true"
-                @blur="isSearchFocused = false"
               />
 
               <button

app/pages/search.vue

@@ -44,8 +44,8 @@ watch(
 )
 
 // For glow effect
-const isSearchFocused = ref(false)
 const searchInputRef = useTemplateRef('searchInputRef')
+const { focused: isSearchFocused } = useFocus(searchInputRef)
 
 const selectedIndex = ref(0)
 const packageListRef = useTemplateRef('packageListRef')
@@ -78,8 +78,6 @@ onMounted(() => {
     // Load enough pages to show the initial page
     loadedPages.value = initialPage.value
   }
-  // Focus search input
-  searchInputRef.value?.focus()
 })
 
 // fetch all pages up to current
@@ -730,15 +728,14 @@ defineOgImageComponent('Default', {
                   name="q"
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
+                  autofocus
                   class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:border-accent focus-visible:outline-none appearance-none"
-                  @focus="isSearchFocused = true"
-                  @blur="isSearchFocused = false"
                   @keydown="handleResultsKeydown"
                 />
                 <button
                   v-show="inputValue"
                   type="button"
-                  class="absolute right-3 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  class="absolute right-3 p-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   :aria-label="$t('search.clear')"
                   @click="inputValue = ''"
                 >