Merge remote-tracking branch 'origin/main' into refactor/modal-a11y

Author: danielroe

.oxfmtrc.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "$schema": "https://unpkg.com/oxfmt/configuration_schema.json",
   "semi": false,
   "singleQuote": true,
   "arrowParens": "avoid",

.oxlintrc.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "$schema": "https://unpkg.com/oxlint/configuration_schema.json",
   "plugins": ["unicorn", "typescript", "oxc", "vue", "vitest"],
   "categories": {
     "correctness": "error",

app/components/ClaimPackageModal.vue

@@ -59,7 +59,7 @@ async function handleClaim() {
 
     // Auto-approve and execute
     await approveOperation(operation.id)
-    const result = await executeOperations()
+    await executeOperations()
 
     // Refresh state and check if operation completed successfully
     await refreshState()

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/ConnectorModal.vue

@@ -25,22 +25,22 @@ function handleDisconnect() {
   disconnect()
 }
 
-function copyCommand() {
-  let command = executeNpmxConnectorCommand.value
-  if (portInput.value !== '31415') {
-    command += ` --port ${portInput.value}`
-  }
-  copy(command)
-}
-
-const selectedPM = useSelectedPackageManager()
-
-const executeNpmxConnectorCommand = computed(() => {
-  return getExecuteCommand({
-    packageName: 'npmx-connector',
-    packageManager: selectedPM.value,
-  })
-})
+// function copyCommand() {
+//   let command = executeNpmxConnectorCommand.value
+//   if (portInput.value !== '31415') {
+//     command += ` --port ${portInput.value}`
+//   }
+//   copy(command)
+// }
+
+// const selectedPM = useSelectedPackageManager()
+
+// const executeNpmxConnectorCommand = computed(() => {
+//   return getExecuteCommand({
+//     packageName: 'npmx-connector',
+//     packageManager: selectedPM.value,
+//   })
+// })
 </script>
 
 <template>

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)
 })
 
 const connectorModal = useModal('connector-modal')
@@ -64,7 +55,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/OrgMembersPanel.vue

@@ -433,7 +433,7 @@ watch(lastExecutionTime, () => {
               :to="{ name: '~username', params: { username: member.name } }"
               class="font-mono text-sm text-fg hover:text-fg transition-colors duration-200"
             >
-              @{{ member.name }}
+              ~{{ member.name }}
             </NuxtLink>
             <span
               class="px-1.5 py-0.5 font-mono text-xs border rounded"

app/components/OrgTeamsPanel.vue

@@ -423,7 +423,7 @@ watch(lastExecutionTime, () => {
                 :to="{ name: '~username', params: { username: user } }"
                 class="font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200"
               >
-                @{{ user }}
+                ~{{ user }}
               </NuxtLink>
               <span class="font-mono text-sm text-fg">{{ teamName }}</span>
               <button

app/components/PackageCard.vue

@@ -87,7 +87,7 @@ const isExactMatch = computed(() => {
               class="flex items-center gap-1.5"
             >
               <dt class="sr-only">{{ $t('package.card.publisher') }}</dt>
-              <dd class="font-mono">@{{ result.package.publisher.username }}</dd>
+              <dd class="font-mono">{{ result.package.publisher.username }}</dd>
             </div>
             <div v-if="result.package.date" class="flex items-center gap-1.5">
               <dt class="sr-only">{{ $t('package.card.updated') }}</dt>