fix: small fixes

Author: danielroe

app/components/ClaimPackageModal.vue

@@ -6,7 +6,6 @@ const props = defineProps<{
   packageName: string
 }>()
 
-const claimPackageModal = useModal('claim-package-modal')
 const {
   isConnected,
   state,
@@ -72,14 +71,14 @@ async function handleClaim() {
     } else if (completedOp?.status === 'failed') {
       if (completedOp.result?.requiresOtp) {
         // OTP is needed - open connector panel to handle it
-        claimPackageModal.close()
+        close()
         connectorModal.open()
       } else {
         publishError.value = completedOp.result?.stderr || 'Failed to publish package'
       }
     } else {
       // Still pending/approved/running - open connector panel to show progress
-      claimPackageModal.close()
+      close()
       connectorModal.open()
     }
   } catch (err) {
@@ -89,14 +88,23 @@ async function handleClaim() {
   }
 }
 
-// Reset state when modal opens
-function handleModalOpen() {
+const dialogRef = ref<HTMLDialogElement>()
+
+function open() {
+  // Reset state and check availability each time modal is opened
   checkResult.value = null
   publishError.value = null
   publishSuccess.value = false
   checkAvailability()
+  dialogRef.value?.showModal()
+}
+
+function close() {
+  dialogRef.value?.close()
 }
 
+defineExpose({ open, close })
+
 // Computed for similar packages with warnings
 const hasDangerousSimilarPackages = computed(() => {
   if (!checkResult.value?.similarPackages) return false
@@ -127,7 +135,12 @@ const previewPackageJson = computed(() => {
 
 <template>
   <!-- Modal -->
-  <Modal :modalTitle="$t('claim.modal.title')" id="claim-package-modal" @open="handleModalOpen">
+  <Modal
+    ref="dialogRef"
+    :modalTitle="$t('claim.modal.title')"
+    id="claim-package-modal"
+    class="max-w-md"
+  >
     <!-- Loading state -->
     <div v-if="isChecking" class="py-8 text-center">
       <LoadingSpinner :text="$t('claim.modal.checking')" />
@@ -155,14 +168,14 @@ const previewPackageJson = computed(() => {
         <NuxtLink
           :to="`/package/${packageName}`"
           class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          @click="claimPackageModal.close"
+          @click="close"
         >
           {{ $t('claim.modal.view_package') }}
         </NuxtLink>
         <button
           type="button"
           class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          @click="claimPackageModal.close"
+          @click="close"
         >
           {{ $t('common.close') }}
         </button>
@@ -349,7 +362,7 @@ const previewPackageJson = computed(() => {
         v-if="!checkResult.available || !checkResult.valid"
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        @click="claimPackageModal.close"
+        @click="close"
       >
         {{ $t('common.close') }}
       </button>

app/components/ConnectorModal.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const open = defineModel<boolean>('open', { default: false })
-
 const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
   useConnector()
 
@@ -10,14 +8,17 @@ const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
 const hasAttemptedConnect = shallowRef(false)
 
+watch(isConnected, connected => {
+  if (!connected) {
+    tokenInput.value = ''
+    hasAttemptedConnect.value = false
+  }
+})
+
 async function handleConnect() {
   hasAttemptedConnect.value = true
   const port = Number.parseInt(portInput.value, 10) || 31415
-  const success = await connect(tokenInput.value.trim(), port)
-  if (success) {
-    tokenInput.value = ''
-    open.value = false
-  }
+  await connect(tokenInput.value.trim(), port)
 }
 
 function handleDisconnect() {
@@ -40,13 +41,6 @@ const executeNpmxConnectorCommand = computed(() => {
     packageManager: selectedPM.value,
   })
 })
-
-watch(open, isOpen => {
-  if (isOpen) {
-    tokenInput.value = ''
-    hasAttemptedConnect.value = false
-  }
-})
 </script>
 
 <template>

app/components/Modal.client.vue

@@ -1,26 +1,37 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   modalTitle: string
 }>()
 
+const dialogRef = ref<HTMLDialogElement>()
+
+const modalTitleId = computed(() => {
+  const id = getCurrentInstance()?.attrs.id
+  return id ? `${id}-title` : undefined
+})
+
 function handleModalClose() {
-  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
-  if (modal) {
-    modal.close()
-  }
+  dialogRef.value?.close()
 }
+
+defineExpose({
+  showModal: () => dialogRef.value?.showModal(),
+  close: () => dialogRef.value?.close(),
+})
 </script>
 
 <template>
   <Teleport to="body">
     <dialog
+      ref="dialogRef"
       closedby="any"
       class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
+      :aria-labelledby="modalTitleId"
       v-bind="$attrs"
     >
       <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">
-        <h2 class="font-mono text-lg font-medium">
+        <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
           {{ modalTitle }}
         </h2>
         <button

app/pages/search.vue

@@ -323,8 +323,7 @@ const showClaimPrompt = computed(() => {
   )
 })
 
-// Modal state for claiming a package
-const claimModalOpen = shallowRef(false)
+const claimPackageModalRef = useTemplateRef('claimPackageModalRef')
 
 /**
  * Check if a string is a valid npm username/org name
@@ -742,7 +741,7 @@ defineOgImageComponent('Default', {
             <button
               type="button"
               class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-              @click="claimModalOpen = true"
+              @click="claimPackageModalRef?.open()"
             >
               {{ $t('search.claim_button', { name: query }) }}
             </button>
@@ -835,7 +834,7 @@ defineOgImageComponent('Default', {
                 <button
                   type="button"
                   class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                  @click="claimModalOpen = true"
+                  @click="claimPackageModalRef?.open()"
                 >
                   {{ $t('search.claim_button', { name: query }) }}
                 </button>
@@ -884,6 +883,6 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Claim package modal -->
-    <ClaimPackageModal v-model:open="claimModalOpen" :package-name="query" />
+    <ClaimPackageModal ref="claimPackageModalRef" :package-name="query" />
   </main>
 </template>