feat(i18n): update plurals support (#433)

components/account/AccountPostsFollowers.vue

@@ -6,7 +6,8 @@ const props = defineProps<{
 }>()
 const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
 
-const statusesCount = $computed(() => formatNumber(props.account.statusesCount))
+const statusesCount = $computed(() => formatHumanReadableNumber(props.account.statusesCount))
+const statusesCountSR = $computed(() => forSR(props.account.statusesCount))
 const followingCount = $computed(() => formatHumanReadableNumber(props.account.followingCount))
 const followingCountSR = $computed(() => forSR(props.account.followingCount))
 const followersCount = $computed(() => formatHumanReadableNumber(props.account.followersCount))
@@ -15,31 +16,48 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
 
 <template>
   <div flex gap-5>
-    <NuxtLink :to="getAccountRoute(account)" text-secondary exact-active-class="text-primary">
+    <NuxtLink
+      :to="getAccountRoute(account)"
+      text-secondary
+      exact-active-class="text-primary"
+      :class="statusesCountSR ? 'flex gap-x-1' : null"
+    >
       <template #default="{ isExactActive }">
         <i18n-t keypath="account.posts_count" :plural="account.statusesCount">
-          <span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
+          <CommonTooltip v-if="statusesCountSR" :content="formatNumber(account.statusesCount)" placement="bottom">
+            <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
+            <span sr-only font-bold>{{ account.statusesCount }}</span>
+          </CommonTooltip>
+          <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
         </i18n-t>
       </template>
     </NuxtLink>
-    <NuxtLink :to="getAccountFollowingRoute(account)" text-secondary exact-active-class="text-primary">
+    <NuxtLink
+      :to="getAccountFollowingRoute(account)"
+      text-secondary exact-active-class="text-primary"
+      :class="followingCountSR ? 'flex gap-x-1' : null"
+    >
       <template #default="{ isExactActive }">
-        <i18n-t keypath="account.following_count">
+        <i18n-t keypath="account.following_count" :plural="account.followingCount">
-          <span v-if="followingCountSR">
+          <CommonTooltip v-if="followingCountSR" :content="formatNumber(account.followingCount)" placement="bottom">
             <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
             <span sr-only font-bold>{{ account.followingCount }}</span>
-          </span>
+          </CommonTooltip>
           <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
         </i18n-t>
       </template>
     </NuxtLink>
-    <NuxtLink :to="getAccountFollowersRoute(account)" text-secondary exact-active-class="text-primary">
+    <NuxtLink
+      :to="getAccountFollowersRoute(account)"
+      text-secondary exact-active-class="text-primary"
+      :class="followersCountSR ? 'flex gap-x-1' : null"
+    >
       <template #default="{ isExactActive }">
         <i18n-t keypath="account.followers_count" :plural="account.followersCount">
-          <span v-if="followersCountSR">
+          <CommonTooltip v-if="followersCountSR" :content="formatNumber(account.followersCount)" placement="bottom">
             <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
             <span sr-only font-bold>{{ account.followersCount }}</span>
-          </span>
+          </CommonTooltip>
           <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
         </i18n-t>
       </template>

composables/i18n.ts

@@ -11,10 +11,12 @@ const humanReadableNumber = (
   if (num < 10000)
     return useFormatter.format(num)
 
+  // show 1 decimal: we cannot use toFixed(1), it is a string
   if (num < 1000000)
-    return `${Math.floor(num / 1000)}${k}`
+    return `${useFormatter.format(Math.floor(num / 100) / 10)}${k}`
 
-  return `${Math.floor(num / 1000000)}${m}`
+  // show 2 decimals: we cannot use toFixed(2), it is a string
+  return `${useFormatter.format(Math.floor(num / 10000) / 100)}${m}`
 }
 
 export const formattedNumber = (num: number, useFormatter: Intl.NumberFormat = formatter) => {

locales/en-US.json

@@ -10,7 +10,7 @@
     "follow_back": "Follow back",
     "follow_requested": "Requested",
     "followers": "Followers",
-    "followers_count": "{0} Followers",
+    "followers_count": "{0} Followers|{0} Follower|{0} Followers",
     "following": "Following",
     "following_count": "{0} Following",
     "follows_you": "Follows you",
@@ -21,7 +21,7 @@
     "mutuals": "Mutuals",
     "pinned": "Pinned",
     "posts": "Posts",
-    "posts_count": "{0} Posts",
+    "posts_count": "{0} posts|{0} post|{0} posts",
     "profile_description": "{0}'s profile header",
     "profile_unavailable": "Profile unavailable",
     "unfollow": "Unfollow"
@@ -138,7 +138,7 @@
   "notification": {
     "favourited_post": "favourited your post",
     "followed_you": "followed you",
-    "followed_you_count": "{n} person followed you|{n} people followed you",
+    "followed_you_count": "{followers} people followed you|{followers} person followed you|{followers} people followed you",
     "missing_type": "MISSING notification.type:",
     "reblogged_post": "reblogged your post",
     "request_to_follow": "requested to follow you",