feat: human readable numbers for counts

components/account/AccountHeader.vue

@@ -95,13 +95,13 @@ function previewAvatar() {
       </div>
       <div flex gap-5>
         <NuxtLink :to="`/${getFullHandle(account)}/`" exact-active-class="text-primary">
-          <span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
+          <span font-bold>{{ formattedNumber(account.statusesCount) }}</span> <span op50>Posts</span>
         </NuxtLink>
         <NuxtLink :to="`/${getFullHandle(account)}/following`" exact-active-class="text-primary">
-          <span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
+          <span font-bold>{{ humanReadableNumber(account.followingCount) }}</span> <span op50>Following</span>
         </NuxtLink>
         <NuxtLink :to="`/${getFullHandle(account)}/followers`" exact-active-class="text-primary">
-          <span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
+          <span font-bold>{{ humanReadableNumber(account.followersCount) }}</span> <span op50>Followers</span>
         </NuxtLink>
       </div>
     </div>

components/account/AccountHoverCard.vue

@@ -11,15 +11,15 @@ defineProps<{
     <AccountInfo :account="account" />
     <div text-sm flex flex-row text-gray mt-4>
       <NuxtLink :to="`/${getShortHandle(account)}/`">
-        {{ account.statusesCount }} Posts
+        {{ formattedNumber(account.statusesCount) }} Posts
       </NuxtLink>
       <span flex-1 text-center> • </span>
       <NuxtLink :to="`/${getShortHandle(account)}/following`">
-        {{ account.followingCount }} Following
+        {{ humanReadableNumber(account.followingCount) }} Following
       </NuxtLink>
       <span flex-1 text-center> • </span>
       <NuxtLink :to="`/${getShortHandle(account)}/followers`">
-        {{ account.followersCount }} Followers
+        {{ humanReadableNumber(account.followersCount) }} Followers
       </NuxtLink>
     </div>
     <ContentRich text-4 text-gray :content="account.note" :emojis="account.emojis" />

composables/numbers.ts

@@ -0,0 +1,15 @@
+const formatter = Intl.NumberFormat()
+
+export const humanReadableNumber = (num: number) => {
+  if (num < 10000)
+    return formatter.format(num)
+
+  if (num < 1000000)
+    return `${Math.floor(num / 1000)}K`
+
+  return `${Math.floor(num / 1000000)}M`
+}
+
+export const formattedNumber = (num: number) => {
+  return formatter.format(num)
+}