feat(i18n): use compact number format on actions (#683)

components/status/StatusActionButton.vue

@@ -17,6 +17,10 @@ defineOptions({
   inheritAttrs: false,
 })
 
+defineSlots<{
+  text: {}
+}>()
+
 const el = ref<HTMLDivElement>()
 
 useCommand({
@@ -58,10 +62,14 @@ useCommand({
       </div>
     </CommonTooltip>
 
-    <CommonAnimateNumber v-if="text !== undefined" :increased="active" text-sm>
+    <CommonAnimateNumber v-if="text !== undefined || $slots.text" :increased="active" text-sm>
-      <span text-secondary-light>{{ text }}</span>
+      <span text-secondary-light>
+        <slot name="text">{{ text }}</slot>
+      </span>
       <template #next>
-        <span :class="[color]">{{ text }}</span>
+        <span :class="[color]">
+          <slot name="text">{{ text }}</slot>
+        </span>
       </template>
     </CommonAnimateNumber>
   </component>

components/status/StatusActions.vue

@@ -19,6 +19,8 @@ const {
   toggleReblog,
 } = $(useStatusActions(props))
 
+const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
+
 const reply = () => {
   if (!checkLogin())
     return
@@ -42,7 +44,17 @@ const reply = () => {
         icon="i-ri:chat-3-line"
         :command="command"
         @click="reply"
-      />
+      >
+        <template v-if="status.repliesCount" #text>
+          <i18n-t keypath="action.reply_count" :plural="status.repliesCount">
+            <CommonTooltip v-if="forSR(status.repliesCount)" :content="formatNumber(status.repliesCount)" placement="bottom">
+              <span aria-hidden="true">{{ formatHumanReadableNumber(status.repliesCount) }}</span>
+              <span sr-only>{{ formatNumber(status.repliesCount) }}</span>
+            </CommonTooltip>
+            <span v-else>{{ formatHumanReadableNumber(status.repliesCount) }}</span>
+          </i18n-t>
+        </template>
+      </StatusActionButton>
     </div>
 
     <div flex-1>
@@ -56,7 +68,17 @@ const reply = () => {
         :disabled="isLoading.reblogged"
         :command="command"
         @click="toggleReblog()"
-      />
+      >
+        <template v-if="status.reblogsCount" #text>
+          <i18n-t keypath="action.boost_count" :plural="status.reblogsCount">
+            <CommonTooltip v-if="forSR(status.repliesCount)" :content="formatNumber(status.repliesCount)" placement="bottom">
+              <span aria-hidden="true">{{ formatHumanReadableNumber(status.repliesCount) }}</span>
+              <span sr-only>{{ formatNumber(status.repliesCount) }}</span>
+            </CommonTooltip>
+            <span v-else>{{ formatHumanReadableNumber(status.repliesCount) }}</span>
+          </i18n-t>
+        </template>
+      </StatusActionButton>
     </div>
 
     <div flex-1>
@@ -70,7 +92,17 @@ const reply = () => {
         :disabled="isLoading.favourited"
         :command="command"
         @click="toggleFavourite()"
-      />
+      >
+        <template v-if="status.favouritesCount" #text>
+          <i18n-t keypath="action.favourite_count" :plural="status.favouritesCount">
+            <CommonTooltip v-if="forSR(status.favouritesCount)" :content="formatNumber(status.favouritesCount)" placement="bottom">
+              <span aria-hidden="true">{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
+              <span sr-only>{{ formatNumber(status.favouritesCount) }}</span>
+            </CommonTooltip>
+            <span v-else>{{ formatHumanReadableNumber(status.favouritesCount) }}</span>
+          </i18n-t>
+        </template>
+      </StatusActionButton>
     </div>
 
     <div flex-none>

locales/en-US.json

@@ -42,6 +42,7 @@
     "bookmark": "Bookmark",
     "bookmarked": "Bookmarked",
     "boost": "Boost",
+    "boost_count": "{0}",
     "boosted": "Boosted",
     "clear_upload_failed": "Clear file upload errors",
     "close": "Close",
@@ -50,12 +51,14 @@
     "edit": "Edit",
     "enter_app": "Enter App",
     "favourite": "Favorite",
+    "favourite_count": "{0}",
     "favourited": "Favorited",
     "more": "More",
     "next": "Next",
     "prev": "Prev",
     "publish": "Publish!",
     "reply": "Reply",
+    "reply_count": "{0}",
     "save": "Save",
     "save_changes": "Save changes",
     "sign_in": "Sign in",