feat: use tooltip over disabled input

Author: MatteoGabriele

app/components/Package/Card.vue

@@ -65,25 +65,12 @@ const numberFormatter = useNumberFormatter()
         >
       </component>
 
-      <div class="relative z-1">
-        <label>
-          <span class="sr-only"> {{ $t('package.card.select') }}: {{ result.package.name }} </span>
-
-          <input
-            data-package-card-checkbox
-            class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-            type="checkbox"
-            :checked="isSelected"
-            :disabled="isMaxSelected && !isSelected"
-            :title="
-              isMaxSelected && !isSelected
-                ? $t('package.card.select_maximum', MAX_PACKAGE_SELECTION)
-                : undefined
-            "
-            @change="togglePackageSelection(result.package.name)"
-          />
-        </label>
-      </div>
+      <PackageSelectionCheckbox
+        :package-name="result.package.name"
+        :disabled="isMaxSelected && !isSelected"
+        :checked="isSelected"
+        @change="togglePackageSelection"
+      />
     </header>
 
     <div class="flex flex-col sm:flex-row sm:justify-start sm:items-start gap-6 sm:gap-8">

app/components/Package/SelectionCheckbox.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const props = defineProps<{
+  packageName: string
+  checked: boolean
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'change', packageName: string): void
+}>()
+
+const { t } = useI18n()
+const disabledText = t('package.card.select_maximum', MAX_PACKAGE_SELECTION)
+</script>
+
+<template>
+  <div class="relative z-1">
+    <label>
+      <span class="sr-only" v-if="disabled">{{ disabledText }}</span>
+      <span class="sr-only" v-else> {{ $t('package.card.select') }}: {{ packageName }} </span>
+
+      <TooltipApp v-if="disabled" :text="disabledText" position="top">
+        <input
+          class="opacity-0 group-hover:opacity-100 size-4 accent-accent border border-fg-muted/30 hover:cursor-not-allowed"
+          :class="{ 'opacity-100! disabled:opacity-30!': isTouchDevice() }"
+          type="checkbox"
+          :disabled
+        />
+      </TooltipApp>
+
+      <input
+        v-else
+        data-package-card-checkbox
+        class="opacity-0 group-focus-within:opacity-100 checked:opacity-100 group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors disabled:group-hover:opacity-30 disabled:hover:cursor-not-allowed"
+        :class="{ 'opacity-100! disabled:opacity-30!': isTouchDevice() }"
+        type="checkbox"
+        :checked
+        :disabled
+        @change="emit('change', packageName)"
+      />
+    </label>
+  </div>
+</template>

app/components/Package/SelectionView.vue

@@ -11,13 +11,8 @@ const { data, pending } = useAsyncData(
     const results = await Promise.all(
       selectedPackages.value.map(name =>
         $fetch(`/api/registry/package-meta/${encodeURIComponent(name)}`)
-          .then(response => {
-            return { package: response }
-          })
-          .catch(err => {
-            console.error(`Failed to fetch package ${name}:`, err)
-            return null
-          }),
+          .then(response => ({ package: response }))
+          .catch(() => []),
       ),
     )
     return results as NpmSearchResult[]

app/components/Package/TableRow.vue

@@ -201,27 +201,13 @@ const allMaintainersText = computed(() => {
       <span v-else class="text-fg-subtle"> - </span>
     </td>
 
-    <td class="pe-2 relative z-1">
-      <div class="flex items-center justify-center h-full">
-        <label>
-          <span class="sr-only">
-            {{ $t('package.card.select') }}
-          </span>
-          <input
-            data-package-card-checkbox
-            class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-            type="checkbox"
-            :checked="isSelected"
-            :disabled="isMaxSelected && !isSelected"
-            :title="
-              isMaxSelected && !isSelected
-                ? $t('package.card.select_maximum', MAX_PACKAGE_SELECTION)
-                : undefined
-            "
-            @change="togglePackageSelection(result.package.name)"
-          />
-        </label>
-      </div>
+    <td class="pe-2">
+      <PackageSelectionCheckbox
+        :package-name="result.package.name"
+        :disabled="isMaxSelected && !isSelected"
+        :checked="isSelected"
+        @change="togglePackageSelection"
+      />
     </td>
   </tr>
 </template>