From b8c7ed8157ab235a87f62e16f234de0ac109819b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 1 Jan 2023 22:45:46 +0100
Subject: [PATCH] feat(i18n): use compact number format on actions (#683)

---
 components/status/StatusActionButton.vue | 14 +++++++--
 components/status/StatusActions.vue      | 38 ++++++++++++++++++++++--
 locales/en-US.json                       |  3 ++
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/components/status/StatusActionButton.vue b/components/status/StatusActionButton.vue
index b6ebb3e1..22e95289 100644
--- a/components/status/StatusActionButton.vue
+++ b/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>
-      <span text-secondary-light>{{ text }}</span>
+    <CommonAnimateNumber v-if="text !== undefined || $slots.text" :increased="active" text-sm>
+      <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>
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 1a8ac3dd..9eec646f 100644
--- a/components/status/StatusActions.vue
+++ b/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>
diff --git a/locales/en-US.json b/locales/en-US.json
index a5113666..06a2e47d 100644
--- a/locales/en-US.json
+++ b/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",