feat: show badge on top liked packages, link to leaderboard

app/components/Package/Likes.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { PackageLikes } from '#shared/types/social'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
@@ -37,16 +38,23 @@ const { user } = useAtproto()
 const authModal = useModal('auth-modal')
 const compactNumberFormatter = useCompactNumberFormatter()
 
-const { data: likesData, status: likeStatus } = useFetch(
-  () => `/api/social/likes/${props.packageName}`,
-  {
-    default: () => ({ totalLikes: 0, userHasLiked: false }),
-    server: false,
-  },
+const { data: likesData } = useFetch<PackageLikes>(() => `/api/social/likes/${props.packageName}`, {
+  default: () => ({
+    totalLikes: 0,
+    userHasLiked: false,
+    topLikedRank: null,
+  }),
+  server: false,
+})
+const isPackageLiked = computed(() => likesData.value?.userHasLiked ?? false)
+const topLikedRank = computed(() => likesData.value?.topLikedRank ?? null)
+const likeButtonLabel = computed(() =>
+  isPackageLiked.value ? $t('package.likes.unlike') : $t('package.likes.like'),
 )
-
-const isLoadingLikeData = computed(
-  () => likeStatus.value === 'pending' || likeStatus.value === 'idle',
+const topLikedBadgeLabel = computed(() =>
+  topLikedRank.value == null
+    ? ''
+    : $t('package.likes.top_rank_link_label', { rank: topLikedRank.value }),
 )
 
 const isLikeActionPending = shallowRef(false)
@@ -61,6 +69,11 @@ const likeAction = async () => {
 
   const currentlyLiked = likesData.value?.userHasLiked ?? false
   const currentLikes = likesData.value?.totalLikes ?? 0
+  const previousLikesState: PackageLikes = {
+    totalLikes: currentLikes,
+    userHasLiked: currentlyLiked,
+    topLikedRank: topLikedRank.value,
+  }
 
   likeAnimKey.value++
 
@@ -79,6 +92,7 @@ const likeAction = async () => {
 
   // Optimistic update
   likesData.value = {
+    ...previousLikesState,
     totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
     userHasLiked: !currentlyLiked,
   }
@@ -87,86 +101,71 @@ const likeAction = async () => {
 
   try {
     const result = await togglePackageLike(props.packageName, currentlyLiked, user.value?.handle)
-
-    isLikeActionPending.value = false
-
-    if (result.success) {
-      // Update with server response
-      likesData.value = result.data
-    } else {
-      // Revert on error
-      likesData.value = {
-        totalLikes: currentLikes,
-        userHasLiked: currentlyLiked,
-      }
-    }
+    likesData.value = result.success
+      ? {
+          ...previousLikesState,
+          ...result.data,
+        }
+      : previousLikesState
   } catch {
-    // Revert on error
-    likesData.value = {
-      totalLikes: currentLikes,
-      userHasLiked: currentlyLiked,
-    }
+    likesData.value = previousLikesState
+  } finally {
     isLikeActionPending.value = false
   }
 }
 </script>
 
 <template>
-  <TooltipApp
-    :text="
-      isLoadingLikeData
-        ? $t('common.loading')
-        : likesData?.userHasLiked
-          ? $t('package.likes.unlike')
-          : $t('package.likes.like')
-    "
-    position="bottom"
-    class="items-center"
-    strategy="fixed"
-  >
-    <div :class="$style.likeWrapper">
-      <span v-if="showLikeFloat" :key="likeFloatKey" aria-hidden="true" :class="$style.likeFloat"
-        >+1</span
-      >
-      <ButtonBase
-        @click="likeAction"
-        size="md"
-        :aria-label="
-          likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
-        "
-        :aria-pressed="likesData?.userHasLiked"
+  <div class="relative inline-flex items-center">
+    <TooltipApp :text="likeButtonLabel" position="bottom" class="items-center" strategy="fixed">
+      <div class="relative inline-flex">
+        <span v-if="showLikeFloat" :key="likeFloatKey" aria-hidden="true" class="like-float"
+          >+1</span
+        >
+        <ButtonBase
+          @click="likeAction"
+          size="md"
+          :aria-label="likeButtonLabel"
+          :aria-pressed="isPackageLiked"
+        >
+          <span
+            :key="likeAnimKey"
+            :class="
+              isPackageLiked
+                ? 'i-lucide:heart-minus fill-red-500 text-red-500'
+                : 'i-lucide:heart-plus'
+            "
+            :style="heartAnimStyle"
+            aria-hidden="true"
+            class="inline-block w-4 h-4"
+          />
+          <span>{{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}</span>
+        </ButtonBase>
+      </div>
+    </TooltipApp>
+
+    <TooltipApp
+      v-if="topLikedRank != null"
+      :text="$t('package.likes.top_rank_tooltip', { rank: topLikedRank })"
+      position="left"
+      :offset="8"
+      strategy="fixed"
+      class="absolute [inset-inline-end:-0.5rem] top-[-0.4rem] z-1"
+    >
+      <NuxtLink
+        :to="{ name: 'leaderboard-likes' }"
+        :aria-label="topLikedBadgeLabel"
+        data-testid="top-liked-badge"
+        class="inline-flex items-center justify-center min-w-5 rounded-full px-1.5 py-0.5 text-2xs font-bold leading-none no-underline text-[var(--bg)] border border-[var(--bg)] bg-[radial-gradient(circle_at_28%_25%,rgb(255_255_255_/_0.34),transparent_38%),linear-gradient(135deg,color-mix(in_oklab,white_10%,var(--accent))_0%,var(--accent)_100%)] shadow-[0_1px_0_rgb(255_255_255_/_0.32)_inset,0_2px_6px_color-mix(in_oklab,var(--accent)_14%,transparent)] transition-shadow duration-[160ms] hover:shadow-[0_1px_0_rgb(255_255_255_/_0.38)_inset,0_4px_10px_color-mix(in_oklab,var(--accent)_18%,transparent)] focus-visible:outline-2 focus-visible:outline-fg focus-visible:outline-offset-2"
       >
-        <span
-          :key="likeAnimKey"
-          :class="
-            likesData?.userHasLiked
-              ? 'i-lucide:heart-minus fill-red-500 text-red-500'
-              : 'i-lucide:heart-plus'
-          "
-          :style="heartAnimStyle"
-          aria-hidden="true"
-          class="inline-block w-4 h-4"
-        />
-        <span
-          v-if="isLoadingLikeData"
-          class="i-svg-spinners:ring-resize w-3 h-3 my-0.5"
-          aria-hidden="true"
-        />
-        <span v-else>
-          {{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}
-        </span>
-      </ButtonBase>
-    </div>
-  </TooltipApp>
+        <span>{{ $t('package.likes.top_rank_label', { rank: topLikedRank }) }}</span>
+      </NuxtLink>
+    </TooltipApp>
+  </div>
 </template>
 
-<style module>
-.likeWrapper {
-  position: relative;
-  display: inline-flex;
-}
-
-.likeFloat {
+<style scoped>
+.like-float {
   position: absolute;
   top: 0;
   left: 50%;
@@ -179,7 +178,7 @@ const likeAction = async () => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .likeFloat {
+  .like-float {
     display: none;
   }
 }