fix(ui): address review feedback on health score widget

- Wrap component in CollapsibleSection for proper sidebar alignment
- Fix footer link to point to npm Pulse homepage (not raw JSON API)
- Add algorithm subtitle showing weights inline for transparency
- Add a11y test for PackageHealthScore
- Fix formatting to pass vp fmt check
- Remove BOM from locale files to fix i18n validator

Author: hamdibenjarrar

app/components/Package/HealthScore.vue

@@ -40,12 +40,18 @@ const isError = computed(() => status.value === 'error')
 
 function gradeColor(grade: string | undefined): string {
   switch (grade) {
-    case 'A': return 'text-emerald-500'
-    case 'B': return 'text-lime-500'
-    case 'C': return 'text-amber-500'
-    case 'D': return 'text-orange-500'
-    case 'F': return 'text-red-500'
-    default: return 'text-fg-subtle'
+    case 'A':
+      return 'text-emerald-500'
+    case 'B':
+      return 'text-lime-500'
+    case 'C':
+      return 'text-amber-500'
+    case 'D':
+      return 'text-orange-500'
+    case 'F':
+      return 'text-red-500'
+    default:
+      return 'text-fg-subtle'
   }
 }
 
@@ -61,39 +67,51 @@ const dimensions = computed(() => {
   if (!data.value?.dimensions) return []
   const d = data.value.dimensions
   return [
-    { key: 'maintenance', label: $t('package.health_score.dimension_maintenance'), score: d.maintenance?.score ?? 0, weight: d.maintenance?.weight ?? 0 },
-    { key: 'quality', label: $t('package.health_score.dimension_quality'), score: d.quality?.score ?? 0, weight: d.quality?.weight ?? 0 },
-    { key: 'security', label: $t('package.health_score.dimension_security'), score: d.security?.score ?? 0, weight: d.security?.weight ?? 0 },
-    { key: 'popularity', label: $t('package.health_score.dimension_popularity'), score: d.popularity?.score ?? 0, weight: d.popularity?.weight ?? 0 },
+    {
+      key: 'maintenance',
+      label: $t('package.health_score.dimension_maintenance'),
+      score: d.maintenance?.score ?? 0,
+      weight: d.maintenance?.weight ?? 0,
+    },
+    {
+      key: 'quality',
+      label: $t('package.health_score.dimension_quality'),
+      score: d.quality?.score ?? 0,
+      weight: d.quality?.weight ?? 0,
+    },
+    {
+      key: 'security',
+      label: $t('package.health_score.dimension_security'),
+      score: d.security?.score ?? 0,
+      weight: d.security?.weight ?? 0,
+    },
+    {
+      key: 'popularity',
+      label: $t('package.health_score.dimension_popularity'),
+      score: d.popularity?.score ?? 0,
+      weight: d.popularity?.weight ?? 0,
+    },
   ]
 })
 </script>
 
 <template>
-  <section aria-labelledby="health-score-heading">
-    <h2
-      id="health-score-heading"
-      class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-1.5"
-    >
-      <span class="i-lucide:activity w-3.5 h-3.5" aria-hidden="true" />
-      {{ $t('package.health_score.title') }}
-    </h2>
-
-    <!-- Loading state -->
-    <div v-if="isLoading" class="flex items-center gap-2 text-fg-subtle text-sm">
-      <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
-      <span>{{ $t('package.health_score.loading') }}</span>
-    </div>
-
+  <CollapsibleSection
+    :title="$t('package.health_score.title')"
+    :subtitle="$t('package.health_score.algorithm_subtitle')"
+    :is-loading="isLoading"
+    icon="i-lucide:activity"
+    id="health-score"
+  >
     <!-- Error state -->
-    <div v-else-if="isError" class="flex items-center gap-2 text-fg-subtle text-sm">
+    <div v-if="isError" class="flex items-center gap-2 text-fg-subtle text-sm">
       <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
       <span>{{ $t('package.health_score.error') }}</span>
     </div>
 
     <!-- Score display -->
     <div v-else-if="data" class="space-y-3">
-      <!-- Score header: large score + grade badge -->
+      <!-- Score + grade -->
       <div class="flex items-center gap-3">
         <TooltipApp :text="$t('package.health_score.score_tooltip')" strategy="fixed">
           <div class="flex items-baseline gap-1 cursor-default" tabindex="0">
@@ -102,10 +120,7 @@ const dimensions = computed(() => {
           </div>
         </TooltipApp>
 
-        <TooltipApp
-          :text="$t('package.health_score.grade_tooltip', { grade: data.grade })"
-          strategy="fixed"
-        >
+        <TooltipApp :text="$t('package.health_score.grade_tooltip', { grade: data.grade })" strategy="fixed">
           <TagStatic
             tabindex="0"
             :class="gradeColor(data.grade)"
@@ -118,13 +133,13 @@ const dimensions = computed(() => {
       </div>
 
       <!-- Dimension bars -->
-      <ul
-        class="space-y-2 list-none m-0 p-0"
-        :aria-label="$t('package.health_score.dimensions_label')"
-      >
+      <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.health_score.dimensions_label')">
         <li v-for="dim in dimensions" :key="dim.key">
           <div class="flex items-center justify-between mb-0.5">
-            <span class="text-xs text-fg-subtle">{{ dim.label }}</span>
+            <span class="text-xs text-fg-subtle">
+              {{ dim.label }}
+              <span class="text-fg-muted">({{ dim.weight }}%)</span>
+            </span>
             <span class="font-mono text-xs text-fg-muted">{{ dim.score }}</span>
           </div>
           <div
@@ -145,9 +160,9 @@ const dimensions = computed(() => {
         </li>
       </ul>
 
-      <!-- Footer link -->
+      <!-- Footer: link to npm Pulse (homepage, not raw JSON) -->
       <a
-        :href="`https://npm-pulse.vercel.app/api/v1/score/${props.packageName}`"
+        href="https://npm-pulse.vercel.app"
         target="_blank"
         rel="noopener noreferrer"
         class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors duration-150 underline underline-offset-2 decoration-fg-subtle/40"
@@ -156,5 +171,5 @@ const dimensions = computed(() => {
         <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
       </a>
     </div>
-  </section>
-</template>
+  </CollapsibleSection>
+</template>