Should be proper read of likes on ui

Author: fatfingers23

app/pages/package/[...package].vue

@@ -334,6 +334,27 @@ const canonicalUrl = computed(() => {
   return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
 })
 
+//atproto
+const { user } = useAtproto()
+const showAuthModal = ref(false)
+
+const { data: likesData } = useFetch(() => `/api/likes/${packageName.value}`, {
+  default: () => ({ totalPackageLikes: 0, userHasLiked: false }),
+})
+
+// const { mutate: likePackage } = useLikePackage(subjectRef)
+
+const likeAction = async () => {
+  if (user.value?.handle == null) {
+    showAuthModal.value = true
+  } else {
+    // const result = await likePackage()
+    // if (result?.likes) {
+    //   likesData.value = result.likes
+    // }
+  }
+}
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -483,6 +504,26 @@ defineOgImageComponent('Package', {
             </template>
           </ClientOnly>
 
+          <button
+            @click="likeAction"
+            type="button"
+            class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
+            :title="$t('package.links.like')"
+          >
+            <span
+              :class="
+                likesData?.userHasLiked
+                  ? 'i-lucide-heart-minus text-red-500'
+                  : 'i-lucide-heart-plus'
+              "
+              class="w-4 h-4"
+              aria-hidden="true"
+            />
+            <span>{{
+              formatCompactNumber(likesData?.totalPackageLikes ?? 0, { decimals: 1 })
+            }}</span>
+          </button>
+
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
           <nav
             v-if="resolvedVersion"

server/utils/atproto/utils/likes.ts

@@ -1,6 +1,5 @@
 import { getCacheAdatper } from '../../cache'
 import { $nsid as likeNsid } from '#shared/types/lexicons/dev/npmx/feed/like.defs'
-import { SUBJECT_REF_PREFIX } from '~~/shared/utils/constants'
 
 /**
  * Likes for a npm package on npmx
@@ -41,8 +40,6 @@ export class PackageLikesUtils {
       '.subjectRef',
       //Limit doesn't matter here since we are just counting the total likes
       1,
-      undefined,
-      CACHE_MAX_AGE_ONE_MINUTE * 10,
     )
     return totalLinks.total
   }
@@ -77,7 +74,7 @@ export class PackageLikesUtils {
   async getLikes(packageName: string, usersDid?: string | undefined) {
     //TODO: May need to do some clean up on the package name, and maybe even hash it? some of the charcteres may be a bit odd as keys
     const totalLikesKey = CACHE_PACKAGE_TOTAL_KEY(packageName)
-    const subjectRef = `${SUBJECT_REF_PREFIX}/${packageName}`
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
 
     const cachedLikes = await this.cache.get<number>(totalLikesKey)
     let totalLikes = 0
@@ -120,10 +117,9 @@ export class PackageLikesUtils {
     if (cached !== undefined) {
       return cached
     }
-    const userHasLiked = await this.constellationUserHasLiked(
-      `${SUBJECT_REF_PREFIX}/${packageName}`,
-      usersDid,
-    )
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+
+    const userHasLiked = await this.constellationUserHasLiked(subjectRef, usersDid)
     await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), userHasLiked, CACHE_MAX_AGE)
     return userHasLiked
   }
@@ -141,7 +137,7 @@ export class PackageLikesUtils {
     if (totalLikes !== undefined) {
       await this.cache.set(totalLikesKey, totalLikes + 1, CACHE_MAX_AGE)
     } else {
-      const subjectRef = `${SUBJECT_REF_PREFIX}/${packageName}`
+      const subjectRef = PACKAGE_SUBJECT_REF(packageName)
       totalLikes = await this.constellationLikes(subjectRef)
     }
     // We already know the user has not liked the package so set in the cache

shared/utils/constants.ts

@@ -31,8 +31,9 @@ export const CONSTELLATION_HOST = 'constellation.microcosm.blue'
 export const SLINGSHOT_HOST = 'slingshot.microcosm.blue'
 
 // ATProtocol
-// Refrence prefix used to link packages to things that are not inherently atproto
-export const SUBJECT_REF_PREFIX = 'https://npmx.dev'
+// Refrences used to link packages to things that are not inherently atproto
+export const PACKAGE_SUBJECT_REF = (packageName: string) =>
+  `https://npmx.dev/package/${packageName}`
 
 // Theming
 export const ACCENT_COLORS = {