chore: replacing open modal calls with new functions

Author: nulfrost

app/components/ClaimPackageModal.vue

@@ -38,6 +38,13 @@ async function checkAvailability() {
   }
 }
 
+function openConnectorModal() {
+  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
+  if (connectorModal) {
+    connectorModal.showModal()
+  }
+}
+
 async function handleClaim() {
   if (!checkResult.value?.available || !isConnected.value) return
 
@@ -72,14 +79,14 @@ async function handleClaim() {
       if (completedOp.result?.requiresOtp) {
         // OTP is needed - open connector panel to handle it
         open.value = false
-        connectorModalOpen.value = true
+        openConnectorModal()
       } else {
         publishError.value = completedOp.result?.stderr || 'Failed to publish package'
       }
     } else {
       // Still pending/approved/running - open connector panel to show progress
       open.value = false
-      connectorModalOpen.value = true
+      openConnectorModal()
     }
   } catch (err) {
     publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_claim')
@@ -124,8 +131,6 @@ const previewPackageJson = computed(() => {
     ...(access && { publishConfig: { access } }),
   }
 })
-
-const connectorModalOpen = shallowRef(false)
 </script>
 
 <template>
@@ -351,7 +356,7 @@ const connectorModalOpen = shallowRef(false)
                   <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="connectorModalOpen = true"
+                    @click="openConnectorModal"
                   >
                     {{ $t('claim.modal.connect_button') }}
                   </button>
@@ -420,7 +425,4 @@ const connectorModalOpen = shallowRef(false)
       </div>
     </Transition>
   </Teleport>
-
-  <!-- Connector modal -->
-  <ConnectorModal v-model:open="connectorModalOpen" />
 </template>

app/components/MobileMenu.vue

@@ -4,21 +4,24 @@ const isOpen = defineModel<boolean>('open', { default: false })
 const { isConnected, npmUser, avatar: npmAvatar } = useConnector()
 const { user: atprotoUser } = useAtproto()
 
-const showConnectorModal = shallowRef(false)
-const showAuthModal = shallowRef(false)
-
 function closeMenu() {
   isOpen.value = false
 }
 
 function handleShowConnector() {
-  showConnectorModal.value = true
-  closeMenu()
+  const connectorModal = document.querySelector<HTMLDialogElement>('#connector-modal')
+  if (connectorModal) {
+    closeMenu()
+    connectorModal.showModal()
+  }
 }
 
 function handleShowAuth() {
-  showAuthModal.value = true
-  closeMenu()
+  const authModal = document.querySelector<HTMLDialogElement>('#auth-modal')
+  if (authModal) {
+    closeMenu()
+    authModal.showModal()
+  }
 }
 
 // Close menu on route change
@@ -270,9 +273,5 @@ watch(isOpen, open => (isLocked.value = open))
         </Transition>
       </div>
     </Transition>
-
-    <!-- Modals -->
-    <ConnectorModal v-model:open="showConnectorModal" />
-    <AuthModal v-model:open="showAuthModal" />
   </Teleport>
 </template>

app/components/Modal.client.vue

@@ -4,7 +4,7 @@ defineProps<{
 }>()
 
 function handleModalClose() {
-  const modal = document.querySelector<HTMLDialogElement>('#modal')
+  const modal = document.querySelector<HTMLDialogElement>('dialog[open]')
   if (modal) {
     modal.close()
   }

test/nuxt/components.spec.ts

@@ -74,7 +74,7 @@ import CodeViewer from '~/components/CodeViewer.vue'
 import CodeDirectoryListing from '~/components/CodeDirectoryListing.vue'
 import CodeFileTree from '~/components/CodeFileTree.vue'
 import UserCombobox from '~/components/UserCombobox.vue'
-import ConnectorModal from '~/components/ConnectorModal.vue'
+import ConnectorModal from '~/components/ConnectorModal.client.vue'
 import HeaderAccountMenuServer from '~/components/HeaderAccountMenu.server.vue'
 import HeaderAccountMenuClient from '~/components/HeaderAccountMenu.client.vue'
 import ClaimPackageModal from '~/components/ClaimPackageModal.vue'