fix: small fixes

Author: danielroe

app/app.vue

@@ -76,9 +76,9 @@ function handleGlobalKeyup() {
 // https://codepen.io/paramagicdev/pen/gbYompq
 // see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
 function handleModalLightDismiss(e: MouseEvent) {
-  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
-  if (modal && modal.open && !e.composedPath().includes(modal)) {
-    modal.close()
+  const target = e.target as HTMLElement
+  if (target.tagName === 'DIALOG' && target.hasAttribute('open')) {
+    ;(target as HTMLDialogElement).close()
   }
 }
 

app/components/ChartModal.vue

@@ -4,7 +4,7 @@
   <Modal
     :modalTitle="$t('package.downloads.modal_title')"
     id="chart-modal"
-    class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90-vh] sm:max-w-3xl"
+    class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
   >
     <div class="font-mono text-sm">
       <slot />

app/components/ClaimPackageModal.vue

@@ -6,23 +6,7 @@ const props = defineProps<{
   packageName: string
 }>()
 
-const open = defineModel<boolean>('open', { default: false })
-
-// This flow doesn't seem like it's finished yet, whenever you're ready to open this modal call this function
-function showClaimPackageModal() {
-  const claimPackageModal = document.querySelector<HTMLDialogElement>('#claim-package-modal')
-  if (claimPackageModal) {
-    claimPackageModal.showModal()
-  }
-}
-
-function closeClaimPackageModal() {
-  const claimPackageModal = document.querySelector<HTMLDialogElement>('#claim-package-modal')
-  if (claimPackageModal) {
-    claimPackageModal.close()
-  }
-}
-
+const claimPackageModal = useModal('claim-package-modal')
 const {
   isConnected,
   state,
@@ -53,12 +37,7 @@ async function checkAvailability() {
   }
 }
 
-function openConnectorModal() {
-  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
-  if (connectorModal) {
-    connectorModal.showModal()
-  }
-}
+const connectorModal = useModal('connector-modal')
 
 async function handleClaim() {
   if (!checkResult.value?.available || !isConnected.value) return
@@ -93,17 +72,15 @@ async function handleClaim() {
     } else if (completedOp?.status === 'failed') {
       if (completedOp.result?.requiresOtp) {
         // OTP is needed - open connector panel to handle it
-        open.value = false
-        closeClaimPackageModal()
-        openConnectorModal()
+        claimPackageModal.close()
+        connectorModal.open()
       } else {
         publishError.value = completedOp.result?.stderr || 'Failed to publish package'
       }
     } else {
       // Still pending/approved/running - open connector panel to show progress
-      open.value = false
-      closeClaimPackageModal()
-      openConnectorModal()
+      claimPackageModal.close()
+      connectorModal.open()
     }
   } catch (err) {
     publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_claim')
@@ -112,15 +89,13 @@ async function handleClaim() {
   }
 }
 
-// Check availability when modal opens
-watch(open, isOpen => {
-  if (isOpen) {
-    checkResult.value = null
-    publishError.value = null
-    publishSuccess.value = false
-    checkAvailability()
-  }
-})
+// Reset state when modal opens
+function handleModalOpen() {
+  checkResult.value = null
+  publishError.value = null
+  publishSuccess.value = false
+  checkAvailability()
+}
 
 // Computed for similar packages with warnings
 const hasDangerousSimilarPackages = computed(() => {
@@ -152,7 +127,7 @@ const previewPackageJson = computed(() => {
 
 <template>
   <!-- Modal -->
-  <Modal :modalTitle="$t('claim.modal.title')" id="claim-package-modal">
+  <Modal :modalTitle="$t('claim.modal.title')" id="claim-package-modal" @open="handleModalOpen">
     <!-- Loading state -->
     <div v-if="isChecking" class="py-8 text-center">
       <LoadingSpinner :text="$t('claim.modal.checking')" />
@@ -180,14 +155,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="closeClaimPackageModal"
+          @click="claimPackageModal.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="closeClaimPackageModal"
+          @click="claimPackageModal.close"
         >
           {{ $t('common.close') }}
         </button>
@@ -334,7 +309,7 @@ const previewPackageJson = computed(() => {
           <button
             type="button"
             class="w-full 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="openConnectorModal"
+            @click="connectorModal.open"
           >
             {{ $t('claim.modal.connect_button') }}
           </button>
@@ -374,7 +349,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="closeClaimPackageModal"
+        @click="claimPackageModal.close"
       >
         {{ $t('common.close') }}
       </button>

app/composables/useModal.ts

@@ -1,7 +1,8 @@
 export function useModal(modalId: string) {
-  const modal = document.querySelector<HTMLDialogElement>(`#${modalId}`)
+  const getModal = () => document.querySelector<HTMLDialogElement>(`#${modalId}`)
 
   function open() {
+    const modal = getModal()
     if (modal) {
       setTimeout(() => {
         modal.showModal()
@@ -10,6 +11,7 @@ export function useModal(modalId: string) {
   }
 
   function close() {
+    const modal = getModal()
     if (modal) {
       modal.close()
     }