feat: add title for disabled input

Author: MatteoGabriele

app/components/Package/Card.vue

@@ -68,13 +68,18 @@ const numberFormatter = useNumberFormatter()
       <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 ? 'Maximum 4 packages can be selected' : undefined"
+            :title="
+              isMaxSelected && !isSelected
+                ? $t('package.card.select_maximum', MAX_PACKAGE_SELECTION)
+                : undefined
+            "
             @change="togglePackageSelection(result.package.name)"
           />
         </label>

app/components/Package/SelectionView.vue

@@ -56,7 +56,6 @@ const { data, pending } = useAsyncData(
 
     <p class="text-fg-muted text-sm font-mono">
       {{ $t('action_bar.selection', selectedPackages.length) }}
-      <span class="text-accent">— Compare up to 4 packages</span>
     </p>
 
     <div class="mt-6">

app/components/Package/TableRow.vue

@@ -213,7 +213,11 @@ const allMaintainersText = computed(() => {
             type="checkbox"
             :checked="isSelected"
             :disabled="isMaxSelected && !isSelected"
-            :title="isMaxSelected && !isSelected ? 'Maximum 4 packages can be selected' : undefined"
+            :title="
+              isMaxSelected && !isSelected
+                ? $t('package.card.select_maximum', MAX_PACKAGE_SELECTION)
+                : undefined
+            "
             @change="togglePackageSelection(result.package.name)"
           />
         </label>

i18n/locales/en.json

@@ -310,7 +310,8 @@
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
       "license": "License",
-      "select": "Select package"
+      "select": "Select package",
+      "select_maximum": "Maximum {count} packages can be selected"
     },
     "versions": {
       "title": "Versions",

i18n/schema.json

@@ -936,6 +936,9 @@
             },
             "select": {
               "type": "string"
+            },
+            "select_maximum": {
+              "type": "string"
             }
           },
           "additionalProperties": false

lunaria/files/en-GB.json

@@ -309,7 +309,8 @@
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
       "license": "License",
-      "select": "Select package"
+      "select": "Select package",
+      "select_maximum": "Maximum {count} packages can be selected"
     },
     "versions": {
       "title": "Versions",

lunaria/files/en-US.json

@@ -309,7 +309,8 @@
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
       "license": "License",
-      "select": "Select package"
+      "select": "Select package",
+      "select_maximum": "Maximum {count} packages can be selected"
     },
     "versions": {
       "title": "Versions",