feat: collections v2 UI (IN-1193, IN-1194, IN-1195) (#2007)

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

Author: gaspergrom

frontend/app/components/modules/collection/components/details/badge-details.vue

@@ -3,52 +3,48 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <div class="flex items-center gap-2">
+  <div class="flex items-center justify-end">
     <template v-if="badges.length > 0">
       <lfx-popover
-        v-for="(count, tier) in badgeCountByTier"
+        v-for="({ tier, count }, index) in badgeCountByTier"
         :key="tier"
         placement="top"
         trigger-event="hover"
         :allow-pass-through="true"
+        class="relative"
+        :class="index > 0 ? '-ml-1' : ''"
+        :style="{ zIndex: badgeCountByTier.length - index }"
       >
-        <lfx-chip
-          :style="{ background: getBadgeColor(tier as BadgeTier) }"
-          class="flex items-center gap-1"
+        <div
+          class="w-6 h-[23px] flex items-center justify-center"
+          :style="{ clipPath: HEXAGON_CLIP_PATH, background: getBadgeColor(tier) }"
         >
-          <lfx-icon
-            name="hexagon"
-            :size="12"
-            class="text-white"
-          />
-          <span class="text-white text-xs font-semibold">
-            {{ count }}
-          </span>
-        </lfx-chip>
+          <span class="text-white text-xs font-semibold">{{ count }}</span>
+        </div>
         <template #content>
           <div class="bg-white border border-neutral-100 rounded-xl shadow-xl overflow-hidden p-3 w-100">
             <div class="flex flex-col">
               <div
-                v-for="(badge, index) in getBadgesByTier(tier as BadgeTier)"
-                :key="badge.config.leaderboardKey"
+                v-for="(tierBadge, tierBadgeIndex) in getBadgesByTier(tier)"
+                :key="tierBadge.config.leaderboardKey"
               >
                 <div class="flex gap-3 items-start py-2">
                   <!-- Badge Image -->
                   <div class="shrink-0 size-13">
                     <img
-                      :src="badge.config.badgeImages[badge.tier]"
-                      :alt="badge.config.title"
+                      :src="tierBadge.config.badgeImages[tierBadge.tier]"
+                      :alt="tierBadge.config.title"
                       class="size-13"
                     />
                   </div>
 
                   <!-- Content -->
                   <div class="flex-1 min-w-0 flex flex-col justify-center">
                     <p class="text-sm font-semibold text-neutral-900 truncate">
-                      {{ badge.config.title }}
+                      {{ tierBadge.config.title }}
                     </p>
                     <p class="text-xs leading-4 text-neutral-500">
-                      {{ getBadgeDescription(badge) }}
+                      {{ getBadgeDescription(tierBadge) }}
                     </p>
                   </div>
 
@@ -58,7 +54,7 @@ SPDX-License-Identifier: MIT
                       <nuxt-link
                         :to="{
                           name: LfxRoutes.LEADERBOARD,
-                          params: { key: badge.config.leaderboardKey },
+                          params: { key: tierBadge.config.leaderboardKey },
                         }"
                         @click.stop
                       >
@@ -74,15 +70,15 @@ SPDX-License-Identifier: MIT
                         icon="share-nodes"
                         type="transparent"
                         size="small"
-                        @click.stop="openShareModal(badge)"
+                        @click.stop="openShareModal(tierBadge)"
                       />
                     </lfx-tooltip>
                   </div>
                 </div>
 
                 <!-- Divider -->
                 <div
-                  v-if="index < getBadgesByTier(tier as BadgeTier).length - 1"
+                  v-if="tierBadgeIndex < getBadgesByTier(tier).length - 1"
                   class="border-t border-neutral-100"
                 />
               </div>
@@ -110,10 +106,8 @@ import badgeConfigs, {
   type ProjectBadge,
   tierConfigs,
 } from '~/components/modules/badges/config/badge.config';
-import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
 import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
-import LfxChip from '~/components/uikit/chip/chip.vue';
 import LfxPopover from '~/components/uikit/popover/popover.vue';
 import LfxBadgesShareModal from '~/components/modules/badges/components/share/badges-share-modal.vue';
 import { LfxRoutes } from '~/components/shared/types/routes';
@@ -151,15 +145,18 @@ const badges = computed<ProjectBadge[]>(() => {
     .filter((badge): badge is ProjectBadge => badge !== null);
 });
 
-const badgeCountByTier = computed(() => {
-  return badges.value.reduce(
-    (acc, badge) => {
-      acc[badge.tier] = (acc[badge.tier] || 0) + 1;
-      return acc;
-    },
-    {} as Record<BadgeTier, number>,
-  );
-});
+// Flat-top hexagon with rounded corners, matching the Collections v2 Achievements design (Figma node 3265-25479).
+const HEXAGON_CLIP_PATH =
+  "path('M5.02 2.61Q6.5 0 9.5 0L14.5 0Q17.5 0 18.98 2.61L22.52 8.89Q24 11.5 22.52 14.11L18.98 20.39Q17.5 23 14.5 23L9.5 23Q6.5 23 5.02 20.39L1.48 14.11Q0 11.5 1.48 8.89Z')";
+
+const tierOrder: BadgeTier[] = [BadgeTier.BLACK, BadgeTier.GOLD, BadgeTier.SILVER, BadgeTier.BRONZE];
+
+// One hexagon per tier the project has badges in, showing the count of achievements in that tier.
+const badgeCountByTier = computed(() =>
+  tierOrder
+    .map((tier) => ({ tier, count: badges.value.filter((badge) => badge.tier === tier).length }))
+    .filter(({ count }) => count > 0),
+);
 
 const getBadgeColor = (tier: BadgeTier) => {
   const radialGradient = `radial-gradient(107.08% 85.59% at 86.3% 87.5%, #0000003B 0%, #00000000 86.18%), 

frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue

@@ -0,0 +1,63 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-chip
+    v-if="props.unavailable"
+    type="bordered"
+    size="small"
+  >
+    <span class="text-xs font-medium text-neutral-500">Unavailable</span>
+  </lfx-chip>
+  <lfx-chip
+    v-else
+    type="bordered"
+    size="small"
+    class="flex items-center gap-1"
+  >
+    <span
+      class="size-1.5 rounded-full shrink-0"
+      :class="healthScoreDotClass"
+    />
+    <span class="text-xs font-medium text-neutral-900">{{ healthScoreLabel }}</span>
+    <span class="text-xs font-medium text-neutral-500">({{ props.score }})</span>
+  </lfx-chip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxChip from '~/components/uikit/chip/chip.vue';
+
+const props = defineProps<{
+  score: number;
+  unavailable?: boolean;
+}>();
+
+// Mirrors the dot+label+score thresholds/colors in collection-metrics-row.vue, scoped to the
+// collection project table's Health Score column (a bordered table-cell pill instead of a
+// labeled metrics chip). Duplicated rather than shared: only two call sites (row/card) and the
+// logic is ~10 lines, so a composable would be more ceremony than the duplication it avoids.
+// health-score.vue itself is intentionally left untouched (used elsewhere in the app).
+const healthScoreLabel = computed(() => {
+  const score = props.score;
+  if (score >= 80) return 'Excellent';
+  if (score >= 60) return 'Healthy';
+  if (score >= 40) return 'Fair';
+  if (score >= 20) return 'Concerning';
+  return 'Critical';
+});
+
+const healthScoreDotClass = computed(() => {
+  const score = props.score;
+  if (score >= 60) return 'bg-health-healthy';
+  if (score >= 20) return 'bg-health-concerning';
+  return 'bg-health-critical';
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxCollectionHealthScorePill',
+};
+</script>

frontend/app/components/modules/collection/components/details/collection-menu.vue

@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="bg-white">
+    <div class="container">
+      <div class="flex items-center gap-3 overflow-x-auto py-5">
+        <lfx-menu-button
+          v-for="link of lfCollectionAggregateLinks"
+          :key="link.key"
+          :to="{ name: link.routeName, params: { slug: props.slug } }"
+          :exact="true"
+        >
+          <template #default="{ isActive }">
+            <lfx-icon
+              :name="link.icon"
+              :type="isActive ? 'solid' : 'light'"
+            />
+            {{ link.label }}
+          </template>
+        </lfx-menu-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxMenuButton from '~/components/uikit/menu-button/menu-button.vue';
+import { lfCollectionAggregateLinks } from '~/components/modules/collection/config/collection-links';
+
+const props = defineProps<{
+  slug: string;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxCollectionMenu',
+};
+</script>

frontend/app/components/modules/collection/components/details/collection-metrics-row.vue

@@ -0,0 +1,122 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-card class="!p-0 !border-none !shadow-none !bg-transparent">
+    <div class="flex items-center gap-3 flex-wrap">
+      <template v-if="loading">
+        <lfx-skeleton
+          v-for="i in 3"
+          :key="i"
+          height="2rem"
+          width="9rem"
+          class="rounded-full"
+        />
+      </template>
+      <template v-else>
+        <lfx-chip
+          type="bordered"
+          size="small"
+          class="flex items-center gap-1"
+        >
+          <lfx-icon
+            name="layer-group"
+            :size="14"
+            class="text-neutral-600"
+          />
+          <span class="text-xs text-neutral-500">Projects / Repositories:</span>
+          <span class="text-xs font-medium text-neutral-900">
+            {{ projectAndRepositoryCount !== undefined ? formatNumber(projectAndRepositoryCount) : '—' }}
+          </span>
+        </lfx-chip>
+
+        <lfx-chip
+          type="bordered"
+          size="small"
+          class="flex items-center gap-1"
+        >
+          <lfx-icon
+            name="people-group"
+            :size="14"
+            class="text-neutral-600"
+          />
+          <span class="text-xs text-neutral-500">Contributors:</span>
+          <span class="text-xs font-medium text-neutral-900">
+            {{ contributorCount !== undefined ? formatNumberShort(contributorCount) : '—' }}
+          </span>
+        </lfx-chip>
+
+        <lfx-chip
+          type="bordered"
+          size="small"
+          class="flex items-center gap-1"
+        >
+          <lfx-icon
+            name="heart"
+            :size="14"
+            class="text-neutral-600"
+          />
+          <span class="text-xs text-neutral-500">Avg. Health:</span>
+          <template v-if="avgHealthScore !== undefined && avgHealthScore !== null">
+            <span
+              class="size-1.5 rounded-full shrink-0"
+              :class="healthScoreDotClass"
+            />
+            <span class="text-xs font-medium text-neutral-900"> {{ healthScoreLabel }} ({{ avgHealthScore }}) </span>
+          </template>
+          <span
+            v-else
+            class="text-xs font-medium text-neutral-900"
+          >
+            —
+          </span>
+        </lfx-chip>
+      </template>
+    </div>
+  </lfx-card>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CollectionMetrics } from '~~/types/collection';
+import LfxCard from '~/components/uikit/card/card.vue';
+import LfxChip from '~/components/uikit/chip/chip.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxSkeleton from '~/components/uikit/skeleton/skeleton.vue';
+import { formatNumber, formatNumberShort } from '~/components/shared/utils/formatter';
+
+const props = defineProps<{
+  metrics?: CollectionMetrics;
+  loading?: boolean;
+}>();
+
+const projectAndRepositoryCount = computed(() => props.metrics?.projectAndRepositoryCount);
+const contributorCount = computed(() => props.metrics?.uniqueContributorCount);
+const avgHealthScore = computed(() => props.metrics?.avgHealthScore);
+
+// Labels are a deliberate, scoped divergence from health-score.vue's tiers for the Collections v2
+// metrics-row dot only (see IN-1191 design fidelity report). health-score.vue itself is
+// intentionally left untouched. Colors use the shared health-* tokens from colors.ts.
+const healthScoreLabel = computed(() => {
+  const score = avgHealthScore.value ?? 0;
+  if (score >= 80) return 'Excellent';
+  if (score >= 60) return 'Healthy';
+  if (score >= 40) return 'Fair';
+  if (score >= 20) return 'Concerning';
+  return 'Critical';
+});
+
+const healthScoreDotClass = computed(() => {
+  const score = avgHealthScore.value ?? 0;
+  if (score >= 60) return 'bg-health-healthy';
+  if (score >= 20) return 'bg-health-concerning';
+  return 'bg-health-critical';
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxCollectionMetricsRow',
+};
+</script>