From 777b1065a92044723d3324e5676c79e7cc886bfd Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sun, 3 May 2026 18:57:00 -0400
Subject: [PATCH 01/12] fix: make the medal badges circles

---
 app/pages/leaderboard/likes.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index 63208cfbce..ce16813173 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -119,7 +119,7 @@ function formatCompactStat(value: number | null): string | null {
           <li v-for="rank in [1, 2, 3]" :key="rank" class="space-y-4">
             <div class="flex justify-center">
               <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
+                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
                 :class="getMedalBadgeClass(rank)"
               >
                 <span>#{{ rank }}</span>
@@ -170,7 +170,7 @@ function formatCompactStat(value: number | null): string | null {
           >
             <div class="flex justify-center">
               <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
+                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
                 :class="getMedalBadgeClass(rank)"
               >
                 <span>#{{ rank }}</span>
@@ -282,7 +282,7 @@ function formatCompactStat(value: number | null): string | null {
           <li v-for="entry in highlightedEntries" :key="entry.subjectRef" class="space-y-4">
             <div class="flex justify-center">
               <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
+                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
                 :class="getMedalBadgeClass(entry.rank)"
               >
                 <span>#{{ entry.rank }}</span>
@@ -377,7 +377,7 @@ function formatCompactStat(value: number | null): string | null {
           >
             <div class="flex justify-center">
               <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
+                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
                 :class="getMedalBadgeClass(entry.rank)"
               >
                 <span>#{{ entry.rank }}</span>

From 07af261eed3b8ddf39d2b1c7b683a08924b356a9 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sun, 3 May 2026 18:58:01 -0400
Subject: [PATCH 02/12] fix: mute the likes count

---
 app/pages/leaderboard/likes.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index ce16813173..bbbd28a5de 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -255,7 +255,7 @@ function formatCompactStat(value: number | null): string | null {
               </div>
 
               <div class="shrink-0 text-end">
-                <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg">
+                <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg-muted">
                   {{ $t('leaderboard.likes.likes') }}
                 </p>
                 <SkeletonBlock class="ms-auto mt-2 h-8 w-12" />
@@ -551,7 +551,7 @@ function formatCompactStat(value: number | null): string | null {
 
                 <div class="shrink-0 text-end">
                   <div>
-                    <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg">
+                    <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg-muted">
                       {{ $t('leaderboard.likes.likes') }}
                     </p>
                     <p class="font-mono text-2xl leading-none">

From d3212f3a4ed3f0c9c40d3392e9138b0cb0f143c0 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sun, 3 May 2026 18:58:27 -0400
Subject: [PATCH 03/12] fix: fix style issues when no image is available

---
 app/pages/leaderboard/likes.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index bbbd28a5de..17806c31cb 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -479,11 +479,11 @@ function formatCompactStat(value: number | null): string | null {
                     #{{ entry.rank }}
                   </div>
                   <div
-                    v-if="entry.homepageLogoUrl"
                     aria-hidden="true"
                     class="hidden h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-bg-subtle/70 p-2 sm:flex"
                   >
                     <img
+                      v-if="entry.homepageLogoUrl"
                       :src="entry.homepageLogoUrl"
                       alt=""
                       loading="lazy"
@@ -491,15 +491,16 @@ function formatCompactStat(value: number | null): string | null {
                       :height="entry.homepageLogoHeight ?? undefined"
                       class="max-h-full max-w-full object-contain"
                     />
+                    <span v-else class="i-lucide:package h-6 w-6 text-fg-muted" />
                   </div>
                   <div class="min-w-0">
                     <div class="flex items-center gap-2 min-w-0">
                       <div
-                        v-if="entry.homepageLogoUrl"
                         aria-hidden="true"
                         class="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-bg-subtle/70 p-1 sm:hidden"
                       >
                         <img
+                          v-if="entry.homepageLogoUrl"
                           :src="entry.homepageLogoUrl"
                           alt=""
                           loading="lazy"
@@ -507,6 +508,7 @@ function formatCompactStat(value: number | null): string | null {
                           :height="entry.homepageLogoHeight ?? undefined"
                           class="max-h-full max-w-full object-contain"
                         />
+                        <span v-else class="i-lucide:package h-3.5 w-3.5 text-fg-muted" />
                       </div>
                       <p class="min-w-0 font-mono text-lg truncate" :title="entry.packageName">
                         <span class="sr-only"

From 5b5e4c9ca5e7eced9f1ed71a4c5712954499acb0 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sun, 3 May 2026 19:01:24 -0400
Subject: [PATCH 04/12] fix: add rounded corners to 4-10 package logos

---
 app/pages/leaderboard/likes.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index 17806c31cb..e280f361af 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -489,7 +489,7 @@ function formatCompactStat(value: number | null): string | null {
                       loading="lazy"
                       :width="entry.homepageLogoWidth ?? undefined"
                       :height="entry.homepageLogoHeight ?? undefined"
-                      class="max-h-full max-w-full object-contain"
+                      class="max-h-full max-w-full rounded-sm object-contain"
                     />
                     <span v-else class="i-lucide:package h-6 w-6 text-fg-muted" />
                   </div>
@@ -506,7 +506,7 @@ function formatCompactStat(value: number | null): string | null {
                           loading="lazy"
                           :width="entry.homepageLogoWidth ?? undefined"
                           :height="entry.homepageLogoHeight ?? undefined"
-                          class="max-h-full max-w-full object-contain"
+                          class="max-h-full max-w-full rounded-sm object-contain"
                         />
                         <span v-else class="i-lucide:package h-3.5 w-3.5 text-fg-muted" />
                       </div>

From a70f897e168dd2d39f181f974e61fac92a5d058b Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Wed, 6 May 2026 21:09:46 -0400
Subject: [PATCH 05/12] fix: improve mobile likes podium layout

---
 app/pages/leaderboard/likes.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index e280f361af..f900d42aaa 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -79,6 +79,15 @@ function getPodiumItemClass(rank: number): string {
   }
 }
 
+function getResponsivePodiumItemClass(rank: number): string {
+  switch (rank) {
+    case 1:
+      return 'md:col-span-2'
+    default:
+      return 'md:max-w-none'
+  }
+}
+
 function getPodiumCardClass(rank: number): string {
   switch (rank) {
     case 1:
@@ -163,10 +172,10 @@ function formatCompactStat(value: number | null): string | null {
           class="hidden list-none m-0 gap-4 p-0 pb-4 lg:grid lg:grid-cols-[minmax(0,0.96fr)_minmax(0,1.08fr)_minmax(0,0.96fr)] lg:items-end lg:gap-6 lg:pb-16"
         >
           <li
-            v-for="rank in [1, 2, 3]"
-            :key="rank"
-            class="space-y-4"
-            :class="getPodiumItemClass(rank)"
+            v-for="(entry, index) in highlightedEntries"
+            :key="entry.subjectRef"
+            class="mx-auto w-full max-w-xl"
+            :class="getResponsivePodiumItemClass(entry.rank)"
           >
             <div class="flex justify-center">
               <div

From 5ccc6b5d1a42f067e1b6dd67f90da02adfee509c Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Wed, 6 May 2026 21:12:32 -0400
Subject: [PATCH 06/12] fix: cache likes leaderboard API with ISR

---
 nuxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 13b4bbeb4a..17ac34033f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -141,10 +141,10 @@ export default defineNuxtConfig({
     '/oauth-client-metadata.json': { prerender: true },
     '/.well-known/jwks.json': { prerender: true },
     '/.well-known/site.standard.publication': { prerender: true },
+    '/api/leaderboard/likes': { isr: 900 },
     // never cache
     '/api/auth/**': { isr: false, cache: false },
     '/api/social/**': { isr: false, cache: false },
-    '/api/leaderboard/likes': { isr: false, cache: false },
     '/api/atproto/bluesky-comments': {
       isr: {
         expiration: 60 * 60 /* one hour */,

From 1ca54b1ac62833c02d7c90de570d4f122c8ce9d1 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Wed, 6 May 2026 21:16:38 -0400
Subject: [PATCH 07/12] fix: polish likes leaderboard loading and card layout

- Move leaderboard fetch to SSR data
- Add staggered entry animation
- Fill the 1-3 card banners
- Tighten the podium card body layout and likes count alignment
---
 app/pages/leaderboard/likes.vue | 472 +++++++++++---------------------
 1 file changed, 160 insertions(+), 312 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index f900d42aaa..a70839ae93 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -12,31 +12,10 @@ useSeoMeta({
 
 const compactNumberFormatter = useCompactNumberFormatter()
 
-const { data: leaderboardEntries, status: leaderboardStatus } = useFetch<LikesLeaderboardEntry[]>(
-  '/api/leaderboard/likes',
-  {
-    default: () => [],
-    server: false,
-  },
-)
-
-const hasResolvedLeaderboardRequest = shallowRef(false)
-
-// Only show the skeleton for the first unresolved request. If this fetch runs
-// again after content is already on screen, keep the current UI to avoid
-// collapsing back to placeholders and causing layout shift.
-watchEffect(() => {
-  if (leaderboardStatus.value === 'success' || leaderboardStatus.value === 'error') {
-    hasResolvedLeaderboardRequest.value = true
-  }
+const { data: leaderboardEntries } = useFetch<LikesLeaderboardEntry[]>('/api/leaderboard/likes', {
+  default: () => [],
 })
 
-const isLoadingLeaderboard = computed(
-  () =>
-    !hasResolvedLeaderboardRequest.value &&
-    (leaderboardStatus.value === 'pending' || leaderboardStatus.value === 'idle'),
-)
-
 const highlightedEntries = computed(() => leaderboardEntries.value.slice(0, 3))
 const remainingEntries = computed(() => leaderboardEntries.value.slice(3))
 
@@ -101,6 +80,12 @@ function formatCompactStat(value: number | null): string | null {
   if (value == null) return null
   return compactNumberFormatter.value.format(value)
 }
+
+function getEntryAnimationStyle(index: number): Record<string, string> {
+  return {
+    animationDelay: `${Math.min(index * 60, 420)}ms`,
+  }
+}
 </script>
 
 <template>
@@ -118,58 +103,21 @@ function formatCompactStat(value: number | null): string | null {
         </p>
       </header>
 
-      <section
-        v-if="isLoadingLeaderboard"
-        aria-busy="true"
-        :aria-label="$t('common.loading')"
-        class="space-y-12"
+      <BaseCard
+        v-if="leaderboardEntries.length === 0"
+        class="cursor-default hover:(border-border bg-bg-subtle)"
       >
-        <ol class="list-none m-0 space-y-4 p-0 pb-4 lg:hidden">
-          <li v-for="rank in [1, 2, 3]" :key="rank" class="space-y-4">
-            <div class="flex justify-center">
-              <div
-                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(rank)"
-              >
-                <span>#{{ rank }}</span>
-              </div>
-            </div>
-            <BaseCard
-              class="h-full w-full overflow-hidden p-0 cursor-default hover:(border-border bg-bg-subtle)"
-              :class="getPodiumCardClass(rank)"
-            >
-              <div class="border-b border-border">
-                <SkeletonBlock class="aspect-[1.91/1] w-full" />
-              </div>
-              <div class="space-y-4 px-4 pt-4 pb-1">
-                <div class="flex items-end justify-between gap-4">
-                  <div class="min-w-0">
-                    <SkeletonBlock class="h-7 w-28" />
-                  </div>
-                  <div class="shrink-0 text-end">
-                    <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
-                      {{ $t('leaderboard.likes.likes') }}
-                    </p>
-                    <SkeletonBlock class="ms-auto h-7 w-12" />
-                  </div>
-                </div>
-                <dl class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted">
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-12" />
-                  </div>
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-16" />
-                  </div>
-                </dl>
-              </div>
-            </BaseCard>
-          </li>
-        </ol>
+        <h2 class="font-mono text-lg mb-2">
+          {{ $t('leaderboard.likes.unavailable_title') }}
+        </h2>
+        <p class="text-fg-muted">
+          {{ $t('leaderboard.likes.unavailable_description') }}
+        </p>
+      </BaseCard>
 
+      <section v-else class="space-y-12">
         <ol
-          class="hidden list-none m-0 gap-4 p-0 pb-4 lg:grid lg:grid-cols-[minmax(0,0.96fr)_minmax(0,1.08fr)_minmax(0,0.96fr)] lg:items-end lg:gap-6 lg:pb-16"
+          class="grid list-none m-0 grid-cols-1 gap-8 p-0 pb-4 md:grid-cols-2 md:items-start lg:hidden"
         >
           <li
             v-for="(entry, index) in highlightedEntries"
@@ -177,200 +125,93 @@ function formatCompactStat(value: number | null): string | null {
             class="mx-auto w-full max-w-xl"
             :class="getResponsivePodiumItemClass(entry.rank)"
           >
-            <div class="flex justify-center">
-              <div
-                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(rank)"
-              >
-                <span>#{{ rank }}</span>
-              </div>
-            </div>
-            <BaseCard
-              class="h-full w-full overflow-hidden p-0 cursor-default hover:(border-border bg-bg-subtle)"
-              :class="getPodiumCardClass(rank)"
-            >
-              <div class="border-b border-border">
-                <SkeletonBlock class="aspect-[1.91/1] w-full" />
-              </div>
-              <div class="space-y-4 px-4 pt-4 pb-1">
-                <div class="flex items-end justify-between gap-4">
-                  <div class="min-w-0">
-                    <SkeletonBlock class="h-7 w-28" />
-                  </div>
-                  <div class="shrink-0 text-end">
-                    <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
-                      {{ $t('leaderboard.likes.likes') }}
-                    </p>
-                    <SkeletonBlock class="ms-auto h-7 w-12" />
-                  </div>
-                </div>
-                <dl class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted">
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-12" />
-                  </div>
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-16" />
-                  </div>
-                </dl>
-              </div>
-            </BaseCard>
-          </li>
-        </ol>
-
-        <ol class="list-none m-0 space-y-4 p-0 pt-2">
-          <li v-for="rank in [4, 5, 6, 7, 8, 9, 10]" :key="rank">
-            <BaseCard
-              class="flex w-full items-center justify-between gap-4 min-w-0 cursor-default hover:(border-border bg-bg-subtle)"
+            <div
+              class="space-y-4 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+              :style="getEntryAnimationStyle(index)"
             >
-              <div class="flex items-center gap-4 min-w-0">
+              <div class="flex justify-center">
                 <div
-                  aria-hidden="true"
-                  class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-accent/20 bg-accent/10 text-accent font-mono text-sm"
+                  class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
+                  :class="getMedalBadgeClass(entry.rank)"
                 >
-                  #{{ rank }}
+                  <span>#{{ entry.rank }}</span>
                 </div>
-                <div
-                  aria-hidden="true"
-                  class="hidden h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-bg-subtle/70 p-2 sm:flex"
+              </div>
+
+              <NuxtLink
+                :to="packageRoute(entry.packageName)"
+                class="block w-full no-underline text-inherit hover:no-underline"
+              >
+                <BaseCard
+                  class="w-full overflow-hidden p-0! transition-transform"
+                  :class="getPodiumCardClass(entry.rank)"
                 >
-                  <SkeletonBlock class="h-8 w-8 rounded-lg" />
-                </div>
-                <div class="min-w-0">
-                  <div class="flex items-center gap-2 min-w-0">
+                  <div class="-mx-px -mt-px overflow-hidden rounded-t-lg border-b border-border">
+                    <img
+                      v-if="entry.homepagePreviewUrl"
+                      :src="entry.homepagePreviewUrl"
+                      alt=""
+                      loading="lazy"
+                      :width="entry.homepagePreviewWidth ?? undefined"
+                      :height="entry.homepagePreviewHeight ?? undefined"
+                      class="block aspect-[1.91/1] h-auto w-full object-cover"
+                    />
                     <div
-                      aria-hidden="true"
-                      class="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-bg-subtle/70 p-1 sm:hidden"
+                      v-else
+                      class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
+                      :class="getPreviewFallbackClass(entry.rank)"
                     >
-                      <SkeletonBlock class="h-4 w-4 rounded-sm" />
-                    </div>
-                    <SkeletonBlock class="h-7 w-28" />
-                  </div>
-                  <SkeletonBlock class="mt-1 h-6 w-48" />
-                  <div
-                    class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
-                  >
-                    <div class="flex items-center gap-1.5">
-                      <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5 opacity-0" />
-                      <SkeletonBlock class="h-5 w-12" />
-                    </div>
-                    <div class="flex items-center gap-1.5">
-                      <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5 opacity-0" />
-                      <SkeletonBlock class="h-5 w-16" />
+                      <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
+                        {{ entry.packageName }}
+                      </p>
                     </div>
                   </div>
-                </div>
-              </div>
 
-              <div class="shrink-0 text-end">
-                <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg-muted">
-                  {{ $t('leaderboard.likes.likes') }}
-                </p>
-                <SkeletonBlock class="ms-auto mt-2 h-8 w-12" />
-              </div>
-            </BaseCard>
-          </li>
-        </ol>
-      </section>
-
-      <BaseCard
-        v-else-if="leaderboardEntries.length === 0"
-        class="cursor-default hover:(border-border bg-bg-subtle)"
-      >
-        <h2 class="font-mono text-lg mb-2">
-          {{ $t('leaderboard.likes.unavailable_title') }}
-        </h2>
-        <p class="text-fg-muted">
-          {{ $t('leaderboard.likes.unavailable_description') }}
-        </p>
-      </BaseCard>
-
-      <section v-else class="space-y-12">
-        <ol class="list-none m-0 space-y-4 p-0 pb-4 lg:hidden">
-          <li v-for="entry in highlightedEntries" :key="entry.subjectRef" class="space-y-4">
-            <div class="flex justify-center">
-              <div
-                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(entry.rank)"
-              >
-                <span>#{{ entry.rank }}</span>
-              </div>
-            </div>
-
-            <NuxtLink
-              :to="packageRoute(entry.packageName)"
-              class="block h-full w-full no-underline text-inherit hover:no-underline"
-            >
-              <BaseCard
-                class="h-full w-full overflow-hidden p-0 transition-transform"
-                :class="getPodiumCardClass(entry.rank)"
-              >
-                <div class="border-b border-border">
-                  <img
-                    v-if="entry.homepagePreviewUrl"
-                    :src="entry.homepagePreviewUrl"
-                    alt=""
-                    loading="lazy"
-                    :width="entry.homepagePreviewWidth ?? undefined"
-                    :height="entry.homepagePreviewHeight ?? undefined"
-                    class="block aspect-[1.91/1] h-auto w-full object-cover"
-                  />
                   <div
-                    v-else
-                    class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
-                    :class="getPreviewFallbackClass(entry.rank)"
+                    class="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4 px-5 py-5 sm:px-6"
                   >
-                    <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
-                      {{ entry.packageName }}
-                    </p>
-                  </div>
-                </div>
-
-                <div class="space-y-4 px-4 pt-4 pb-1">
-                  <div class="flex items-end justify-between gap-4">
-                    <div class="min-w-0">
-                      <p class="truncate font-mono text-lg" :title="entry.packageName">
+                    <div class="min-w-0 space-y-3">
+                      <p class="truncate font-mono text-xl" :title="entry.packageName">
                         {{ entry.packageName }}
                       </p>
+                      <dl
+                        v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
+                        class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
+                      >
+                        <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
+                            <span class="font-mono">{{
+                              formatCompactStat(entry.repositoryStars)
+                            }}</span>
+                          </dd>
+                        </div>
+                        <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
+                            <span class="font-mono">
+                              {{ formatCompactStat(entry.weeklyDownloads)
+                              }}{{ $t('common.per_week_short') }}
+                            </span>
+                          </dd>
+                        </div>
+                      </dl>
                     </div>
 
                     <div class="shrink-0 text-end">
-                      <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
+                      <p class="mb-2 text-xs uppercase tracking-wider text-fg-muted">
                         {{ $t('leaderboard.likes.likes') }}
                       </p>
-                      <p class="font-mono text-lg">
+                      <p class="font-mono text-2xl leading-none">
                         {{ compactNumberFormatter.format(entry.totalLikes) }}
                       </p>
                     </div>
                   </div>
-                  <dl
-                    v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
-                    class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
-                  >
-                    <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
-                        <span class="font-mono">{{
-                          formatCompactStat(entry.repositoryStars)
-                        }}</span>
-                      </dd>
-                    </div>
-                    <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
-                        <span class="font-mono">
-                          {{ formatCompactStat(entry.weeklyDownloads)
-                          }}{{ $t('common.per_week_short') }}
-                        </span>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </BaseCard>
-            </NuxtLink>
+                </BaseCard>
+              </NuxtLink>
+            </div>
           </li>
         </ol>
 
@@ -379,93 +220,95 @@ function formatCompactStat(value: number | null): string | null {
           class="hidden list-none m-0 gap-4 p-0 pb-4 lg:grid lg:grid-cols-[minmax(0,0.96fr)_minmax(0,1.08fr)_minmax(0,0.96fr)] lg:items-end lg:gap-6 lg:pb-16"
         >
           <li
-            v-for="entry in highlightedEntries"
+            v-for="(entry, index) in highlightedEntries"
             :key="entry.subjectRef"
-            class="space-y-4"
             :class="getPodiumItemClass(entry.rank)"
           >
-            <div class="flex justify-center">
-              <div
-                class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(entry.rank)"
-              >
-                <span>#{{ entry.rank }}</span>
+            <div
+              class="space-y-4 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+              :style="getEntryAnimationStyle(index)"
+            >
+              <div class="flex justify-center">
+                <div
+                  class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
+                  :class="getMedalBadgeClass(entry.rank)"
+                >
+                  <span>#{{ entry.rank }}</span>
+                </div>
               </div>
-            </div>
 
-            <NuxtLink
-              :to="packageRoute(entry.packageName)"
-              class="block h-full w-full no-underline text-inherit hover:no-underline"
-            >
-              <BaseCard
-                class="h-full w-full overflow-hidden p-0 transition-transform"
-                :class="getPodiumCardClass(entry.rank)"
+              <NuxtLink
+                :to="packageRoute(entry.packageName)"
+                class="block h-full w-full no-underline text-inherit hover:no-underline"
               >
-                <div class="border-b border-border">
-                  <img
-                    v-if="entry.homepagePreviewUrl"
-                    :src="entry.homepagePreviewUrl"
-                    alt=""
-                    loading="lazy"
-                    :width="entry.homepagePreviewWidth ?? undefined"
-                    :height="entry.homepagePreviewHeight ?? undefined"
-                    class="block aspect-[1.91/1] h-auto w-full object-cover"
-                  />
-                  <div
-                    v-else
-                    class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
-                    :class="getPreviewFallbackClass(entry.rank)"
-                  >
-                    <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
-                      {{ entry.packageName }}
-                    </p>
+                <BaseCard
+                  class="h-full w-full overflow-hidden p-0! transition-transform"
+                  :class="getPodiumCardClass(entry.rank)"
+                >
+                  <div class="-mx-px -mt-px overflow-hidden rounded-t-lg border-b border-border">
+                    <img
+                      v-if="entry.homepagePreviewUrl"
+                      :src="entry.homepagePreviewUrl"
+                      alt=""
+                      loading="lazy"
+                      :width="entry.homepagePreviewWidth ?? undefined"
+                      :height="entry.homepagePreviewHeight ?? undefined"
+                      class="block aspect-[1.91/1] h-auto w-full object-cover"
+                    />
+                    <div
+                      v-else
+                      class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
+                      :class="getPreviewFallbackClass(entry.rank)"
+                    >
+                      <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
+                        {{ entry.packageName }}
+                      </p>
+                    </div>
                   </div>
-                </div>
 
-                <div class="space-y-4 px-4 pt-4 pb-1">
-                  <div class="flex items-end justify-between gap-4">
-                    <div class="min-w-0">
-                      <p class="truncate font-mono text-lg" :title="entry.packageName">
+                  <div class="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4 px-5 py-5">
+                    <div class="min-w-0 space-y-3">
+                      <p class="truncate font-mono text-xl" :title="entry.packageName">
                         {{ entry.packageName }}
                       </p>
+                      <dl
+                        v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
+                        class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
+                      >
+                        <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
+                            <span class="font-mono">{{
+                              formatCompactStat(entry.repositoryStars)
+                            }}</span>
+                          </dd>
+                        </div>
+                        <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
+                            <span class="font-mono">
+                              {{ formatCompactStat(entry.weeklyDownloads)
+                              }}{{ $t('common.per_week_short') }}
+                            </span>
+                          </dd>
+                        </div>
+                      </dl>
                     </div>
 
                     <div class="shrink-0 text-end">
-                      <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
+                      <p class="mb-2 text-xs uppercase tracking-wider text-fg-muted">
                         {{ $t('leaderboard.likes.likes') }}
                       </p>
-                      <p class="font-mono text-lg">
+                      <p class="font-mono text-2xl leading-none">
                         {{ compactNumberFormatter.format(entry.totalLikes) }}
                       </p>
                     </div>
                   </div>
-                  <dl
-                    v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
-                    class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
-                  >
-                    <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
-                        <span class="font-mono">{{
-                          formatCompactStat(entry.repositoryStars)
-                        }}</span>
-                      </dd>
-                    </div>
-                    <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
-                        <span class="font-mono">
-                          {{ formatCompactStat(entry.weeklyDownloads)
-                          }}{{ $t('common.per_week_short') }}
-                        </span>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </BaseCard>
-            </NuxtLink>
+                </BaseCard>
+              </NuxtLink>
+            </div>
           </li>
         </ol>
 
@@ -474,7 +317,12 @@ function formatCompactStat(value: number | null): string | null {
           :start="highlightedEntries.length + 1"
           class="list-none m-0 space-y-4 p-0 pt-2"
         >
-          <li v-for="entry in remainingEntries" :key="entry.subjectRef">
+          <li
+            v-for="(entry, index) in remainingEntries"
+            :key="entry.subjectRef"
+            class="motion-safe:animate-slide-up motion-safe:animate-fill-both"
+            :style="getEntryAnimationStyle(index + highlightedEntries.length)"
+          >
             <NuxtLink
               :to="packageRoute(entry.packageName)"
               class="block w-full no-underline hover:no-underline"

From 68df1f8d347518c9f0c8abaa957538dc3ca4d2b3 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Wed, 6 May 2026 21:53:16 -0400
Subject: [PATCH 08/12] fix: remove load=lazy from leaderboard images

---
 app/pages/leaderboard/likes.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index a70839ae93..89d83bcf9e 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -151,7 +151,8 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
                       v-if="entry.homepagePreviewUrl"
                       :src="entry.homepagePreviewUrl"
                       alt=""
-                      loading="lazy"
+                      loading="eager"
+                      :fetchpriority="entry.rank === 1 ? 'high' : 'auto'"
                       :width="entry.homepagePreviewWidth ?? undefined"
                       :height="entry.homepagePreviewHeight ?? undefined"
                       class="block aspect-[1.91/1] h-auto w-full object-cover"
@@ -250,7 +251,8 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
                       v-if="entry.homepagePreviewUrl"
                       :src="entry.homepagePreviewUrl"
                       alt=""
-                      loading="lazy"
+                      loading="eager"
+                      :fetchpriority="entry.rank === 1 ? 'high' : 'auto'"
                       :width="entry.homepagePreviewWidth ?? undefined"
                       :height="entry.homepagePreviewHeight ?? undefined"
                       class="block aspect-[1.91/1] h-auto w-full object-cover"

From 8aaa984fd7f1eecbfab744306e1c4574814d53af Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Wed, 6 May 2026 21:54:28 -0400
Subject: [PATCH 09/12] fix: try a different entry animation

---
 app/pages/leaderboard/likes.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index 89d83bcf9e..9ebb641754 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -126,7 +126,7 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
             :class="getResponsivePodiumItemClass(entry.rank)"
           >
             <div
-              class="space-y-4 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+              class="space-y-4 likes-leaderboard-entry-motion"
               :style="getEntryAnimationStyle(index)"
             >
               <div class="flex justify-center">
@@ -226,7 +226,7 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
             :class="getPodiumItemClass(entry.rank)"
           >
             <div
-              class="space-y-4 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+              class="space-y-4 likes-leaderboard-entry-motion"
               :style="getEntryAnimationStyle(index)"
             >
               <div class="flex justify-center">
@@ -322,7 +322,7 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
           <li
             v-for="(entry, index) in remainingEntries"
             :key="entry.subjectRef"
-            class="motion-safe:animate-slide-up motion-safe:animate-fill-both"
+            class="likes-leaderboard-entry-motion"
             :style="getEntryAnimationStyle(index + highlightedEntries.length)"
           >
             <NuxtLink
@@ -428,3 +428,25 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
     </article>
   </main>
 </template>
+
+<style scoped>
+.likes-leaderboard-entry-motion {
+  animation: likes-leaderboard-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .likes-leaderboard-entry-motion {
+    animation: none;
+  }
+}
+
+@keyframes likes-leaderboard-slide-up {
+  from {
+    transform: translateY(8px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+</style>

From ef94bb1736804fed28fe113089814526ff192bc1 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Thu, 7 May 2026 07:06:42 -0400
Subject: [PATCH 10/12] fix: try a less subtle entry animation

---
 app/pages/leaderboard/likes.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index 9ebb641754..41a1aee0c6 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -83,7 +83,7 @@ function formatCompactStat(value: number | null): string | null {
 
 function getEntryAnimationStyle(index: number): Record<string, string> {
   return {
-    animationDelay: `${Math.min(index * 60, 420)}ms`,
+    animationDelay: `${Math.min(index * 100, 600)}ms`,
   }
 }
 </script>
@@ -431,22 +431,33 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
 
 <style scoped>
 .likes-leaderboard-entry-motion {
-  animation: likes-leaderboard-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation: likes-leaderboard-pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+  transform-origin: center top;
+  will-change: transform;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .likes-leaderboard-entry-motion {
     animation: none;
+    will-change: auto;
   }
 }
 
-@keyframes likes-leaderboard-slide-up {
+@keyframes likes-leaderboard-pop-in {
   from {
-    transform: translateY(8px);
+    transform: translate3d(0, 20px, 0) scale(0.96);
+  }
+
+  50% {
+    transform: translate3d(0, -6px, 0) scale(1.02);
+  }
+
+  70% {
+    transform: translate3d(0, 2px, 0) scale(0.998);
   }
 
   to {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 }
 </style>

From b216bbb5bff5768d1f3adadd280b399f1fc3fe3a Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Thu, 7 May 2026 21:47:04 -0400
Subject: [PATCH 11/12] fix: defer entry animations until initial render

---
 app/pages/leaderboard/likes.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index 41a1aee0c6..d62b1b98d7 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -16,9 +16,14 @@ const { data: leaderboardEntries } = useFetch<LikesLeaderboardEntry[]>('/api/lea
   default: () => [],
 })
 
+const shouldAnimateEntries = ref(false)
 const highlightedEntries = computed(() => leaderboardEntries.value.slice(0, 3))
 const remainingEntries = computed(() => leaderboardEntries.value.slice(3))
 
+onMounted(() => {
+  shouldAnimateEntries.value = true
+})
+
 function getPreviewFallbackClass(rank: number): string {
   switch (rank) {
     case 1:
@@ -126,7 +131,8 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
             :class="getResponsivePodiumItemClass(entry.rank)"
           >
             <div
-              class="space-y-4 likes-leaderboard-entry-motion"
+              class="space-y-4"
+              :class="{ 'likes-leaderboard-entry-motion': shouldAnimateEntries }"
               :style="getEntryAnimationStyle(index)"
             >
               <div class="flex justify-center">
@@ -226,7 +232,8 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
             :class="getPodiumItemClass(entry.rank)"
           >
             <div
-              class="space-y-4 likes-leaderboard-entry-motion"
+              class="space-y-4"
+              :class="{ 'likes-leaderboard-entry-motion': shouldAnimateEntries }"
               :style="getEntryAnimationStyle(index)"
             >
               <div class="flex justify-center">
@@ -322,7 +329,7 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
           <li
             v-for="(entry, index) in remainingEntries"
             :key="entry.subjectRef"
-            class="likes-leaderboard-entry-motion"
+            :class="{ 'likes-leaderboard-entry-motion': shouldAnimateEntries }"
             :style="getEntryAnimationStyle(index + highlightedEntries.length)"
           >
             <NuxtLink

From 632c29cf4917e601b212c235d3718b464f6b88f4 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Thu, 7 May 2026 21:57:18 -0400
Subject: [PATCH 12/12] fix: improve keyboard focus styles for podium cards

---
 app/pages/leaderboard/likes.vue | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index d62b1b98d7..60e309c294 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -146,10 +146,10 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
 
               <NuxtLink
                 :to="packageRoute(entry.packageName)"
-                class="block w-full no-underline text-inherit hover:no-underline"
+                class="leaderboard-package-link block w-full rounded-lg no-underline text-inherit hover:no-underline focus-visible:outline-none"
               >
                 <BaseCard
-                  class="w-full overflow-hidden p-0! transition-transform"
+                  class="leaderboard-package-card w-full overflow-hidden p-0! transition-[border-color,background-color,outline-color,transform]"
                   :class="getPodiumCardClass(entry.rank)"
                 >
                   <div class="-mx-px -mt-px overflow-hidden rounded-t-lg border-b border-border">
@@ -247,10 +247,10 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
 
               <NuxtLink
                 :to="packageRoute(entry.packageName)"
-                class="block h-full w-full no-underline text-inherit hover:no-underline"
+                class="leaderboard-package-link block h-full w-full rounded-lg no-underline text-inherit hover:no-underline focus-visible:outline-none"
               >
                 <BaseCard
-                  class="h-full w-full overflow-hidden p-0! transition-transform"
+                  class="leaderboard-package-card h-full w-full overflow-hidden p-0! transition-[border-color,background-color,outline-color,transform]"
                   :class="getPodiumCardClass(entry.rank)"
                 >
                   <div class="-mx-px -mt-px overflow-hidden rounded-t-lg border-b border-border">
@@ -334,9 +334,11 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
           >
             <NuxtLink
               :to="packageRoute(entry.packageName)"
-              class="block w-full no-underline hover:no-underline"
+              class="leaderboard-package-link block w-full rounded-lg no-underline hover:no-underline focus-visible:outline-none"
             >
-              <BaseCard class="flex w-full items-center justify-between gap-4 min-w-0">
+              <BaseCard
+                class="leaderboard-package-card flex w-full items-center justify-between gap-4 min-w-0"
+              >
                 <div class="flex items-center gap-4 min-w-0">
                   <div
                     aria-hidden="true"
@@ -437,6 +439,17 @@ function getEntryAnimationStyle(index: number): Record<string, string> {
 </template>
 
 <style scoped>
+.leaderboard-package-card {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.leaderboard-package-link:focus-visible .leaderboard-package-card {
+  background: var(--bg-muted);
+  border-color: var(--border-hover);
+  outline-color: color-mix(in oklab, var(--fg) 60%, transparent);
+}
+
 .likes-leaderboard-entry-motion {
   animation: likes-leaderboard-pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
   transform-origin: center top;