From d618297f7cfa625957c77aad35429707f2e861a8 Mon Sep 17 00:00:00 2001
From: Scott Wu <sw@scottwu.ca>
Date: Thu, 5 Feb 2026 11:45:03 +0800
Subject: [PATCH 1/2] .

---
 app/pages/package/[...package].vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 17ff3f466..343d8280a 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -605,8 +605,9 @@ onKeyStroke(
 
               <!-- Package likes -->
               <TooltipApp
+                v-if="likesData"
                 :text="
-                  likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+                  likesData.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                 "
                 position="bottom"
               >
@@ -614,25 +615,23 @@ onKeyStroke(
                   @click="likeAction"
                   type="button"
                   :title="
-                    likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+                    likesData.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
                   class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
                   :aria-label="
-                    likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+                    likesData.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
                 >
                   <span
                     :class="
-                      likesData?.userHasLiked
+                      likesData.userHasLiked
                         ? 'i-lucide-heart-minus text-red-500'
                         : 'i-lucide-heart-plus'
                     "
                     class="w-4 h-4"
                     aria-hidden="true"
                   />
-                  <span>{{
-                    formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 })
-                  }}</span>
+                  <span>{{ formatCompactNumber(likesData.totalLikes, { decimals: 1 }) }}</span>
                 </button>
               </TooltipApp>
               <template #fallback>

From d44bae642ba884e0e9e7dce476b12929abdca5c0 Mon Sep 17 00:00:00 2001
From: Scott Wu <sw@scottwu.ca>
Date: Thu, 5 Feb 2026 14:14:46 +0800
Subject: [PATCH 2/2] .

---
 app/pages/package/[...package].vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 343d8280a..687727c04 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -399,10 +399,13 @@ const { user } = useAtproto()
 
 const authModal = useModal('auth-modal')
 
-const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.value}`, {
-  default: () => ({ totalLikes: 0, userHasLiked: false }),
-  server: false,
-})
+const { data: likesData, status: likesStatus } = useFetch(
+  () => `/api/social/likes/${packageName.value}`,
+  {
+    default: () => ({ totalLikes: 0, userHasLiked: false }),
+    server: false,
+  },
+)
 
 const isLikeActionPending = ref(false)
 
@@ -414,12 +417,12 @@ const likeAction = async () => {
 
   if (isLikeActionPending.value) return
 
-  const currentlyLiked = likesData.value?.userHasLiked ?? false
-  const currentLikes = likesData.value?.totalLikes ?? 0
+  const currentlyLiked = likesData.value.userHasLiked
+  const currentLikes = likesData.value.totalLikes
 
   // Optimistic update
   likesData.value = {
-    totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
+    totalLikes: currentLikes + (currentlyLiked ? -1 : 1),
     userHasLiked: !currentlyLiked,
   }
 
@@ -605,7 +608,6 @@ onKeyStroke(
 
               <!-- Package likes -->
               <TooltipApp
-                v-if="likesData"
                 :text="
                   likesData.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                 "
@@ -631,7 +633,9 @@ onKeyStroke(
                     class="w-4 h-4"
                     aria-hidden="true"
                   />
-                  <span>{{ formatCompactNumber(likesData.totalLikes, { decimals: 1 }) }}</span>
+                  <span v-if="likesStatus !== 'pending'">{{
+                    formatCompactNumber(likesData.totalLikes, { decimals: 1 })
+                  }}</span>
                 </button>
               </TooltipApp>
               <template #fallback>