refactor: prefer VueUse, reuse formatBytes (#612)

Author: 9romise

app/components/CodeDirectoryListing.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import { getFileIcon } from '~/utils/file-icons'
+import { formatBytes } from '~/utils/formatters'
 
 const props = defineProps<{
   tree: PackageFileTree[]
@@ -35,13 +36,6 @@ const parentPath = computed(() => {
   if (parts.length <= 1) return ''
   return parts.slice(0, -1).join('/')
 })
-
-// Format file size
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
 </script>
 
 <template>

app/components/ColumnPicker.vue

@@ -16,33 +16,23 @@ const menuRef = useTemplateRef('menuRef')
 const menuId = useId()
 
 // Close on click outside (check both button and menu)
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as Node
-  const isOutsideButton = buttonRef.value && !buttonRef.value.contains(target)
-  const isOutsideMenu = !menuRef.value || !menuRef.value.contains(target)
-  if (isOutsideButton && isOutsideMenu) {
+onClickOutside(
+  menuRef,
+  () => {
     isOpen.value = false
-  }
-}
+  },
+  {
+    ignore: [buttonRef],
+  },
+)
 
 // Close on Escape key
-function handleKeydown(event: KeyboardEvent) {
+useEventListener('keydown', event => {
   if (event.key === 'Escape' && isOpen.value) {
     isOpen.value = false
     buttonRef.value?.focus()
   }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
 })
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
-
 // Columns that can be toggled (name is always visible)
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 

app/components/HeaderAccountMenu.client.vue

@@ -23,25 +23,16 @@ const hasBothConnections = computed(() => isNpmConnected.value && !!atprotoUser.
 /** Only show count of active (pending/approved/running) operations */
 const operationCount = computed(() => activeOperations.value.length)
 
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as HTMLElement
-  if (!target.closest('.account-menu')) {
-    isOpen.value = false
-  }
-}
+const accountMenuRef = useTemplateRef('accountMenuRef')
+
+onClickOutside(accountMenuRef, () => {
+  isOpen.value = false
+})
 
-function handleKeydown(event: KeyboardEvent) {
+useEventListener('keydown', event => {
   if (event.key === 'Escape' && isOpen.value) {
     isOpen.value = false
   }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
 })
 
 function openConnectorModal() {
@@ -56,7 +47,7 @@ function openAuthModal() {
 </script>
 
 <template>
-  <div class="account-menu relative" @keydown="handleKeydown">
+  <div ref="accountMenuRef" class="relative">
     <button
       type="button"
       class="relative flex items-center justify-end gap-2 px-2 py-1.5 min-w-24 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"

app/components/ScrollToTop.vue

@@ -9,9 +9,11 @@ const isActive = computed(() => !excludedRoutes.has(route.name as string))
 const isMounted = useMounted()
 const isVisible = shallowRef(false)
 const scrollThreshold = 300
-const supportsScrollStateQueries = useSupported(() => {
-  return isMounted.value && CSS.supports('container-type', 'scroll-state')
-})
+const { isSupported: supportsScrollStateQueries } = useCssSupports(
+  'container-type',
+  'scroll-state',
+  { ssrValue: false },
+)
 
 function onScroll() {
   if (!supportsScrollStateQueries.value) {

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

@@ -5,6 +5,7 @@ import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
+import { formatBytes } from '~/utils/formatters'
 
 definePageMeta({
   name: 'package',
@@ -243,12 +244,6 @@ function normalizeGitUrl(url: string): string {
     .replace(/^git@github\.com:/, 'https://github.com/')
 }
 
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
 function getDependencyCount(version: PackumentVersion | null): number {
   if (!version?.dependencies) return 0
   return Object.keys(version.dependencies).length

app/pages/code/[...path].vue

@@ -4,6 +4,7 @@ import type {
   PackageFileTreeResponse,
   PackageFileContentResponse,
 } from '#shared/types'
+import { formatBytes } from '~/utils/formatters'
 
 definePageMeta({
   name: 'code',
@@ -194,13 +195,6 @@ function packageRoute(ver?: string | null) {
   return { name: 'package' as const, params: { package: segments } }
 }
 
-// Format file size
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
 // Line number click handler - update URL hash without scrolling
 function handleLineClick(lineNum: number, event: MouseEvent) {
   let newHash: string

app/utils/formatters.ts

@@ -46,3 +46,10 @@ export function formatCompactNumber(
 
   return `${sign}${Math.round(abs)}`
 }
+
+// Format file size
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}

package.json

@@ -65,9 +65,9 @@
     "@vite-pwa/assets-generator": "1.0.2",
     "@vite-pwa/nuxt": "1.1.0",
     "@voidzero-dev/vite-plus-core": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
-    "@vueuse/core": "14.1.0",
-    "@vueuse/nuxt": "14.1.0",
-    "@vueuse/router": "^14.1.0",
+    "@vueuse/core": "14.2.0",
+    "@vueuse/nuxt": "14.2.0",
+    "@vueuse/router": "^14.2.0",
     "marked": "17.0.1",
     "module-replacements": "2.11.0",
     "nuxt": "4.3.0",