feat(i18n): add i18n to `PublishWidgetFull` (#872)

CONTRIBUTING.md

@@ -141,6 +141,7 @@ This is the full list of entries that will be available for number formatting in
 - `account.followers_count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be use**
 - `account.following_count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be use**
 - `account.posts_count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be use**
+- `compose.drafts`: `{v}` for formatted number and `{n}` for raw number - **{v} should be use**
 - `notification.followed_you_count`: `{followers}` for formatted number and `{n}` for raw number - **{followers} should be use**
 - `status.poll.count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be use**
 - `time_ago_options.*`: `{0}` for formatted number and `{n}` for raw number - **{0} should be use**: since numbers will be always small, we can also use `{n}`

components/publish/PublishWidgetFull.client.vue

@@ -2,6 +2,8 @@
 import { formatTimeAgo } from '@vueuse/core'
 
 const route = useRoute()
+const { formatNumber } = useHumanReadableNumber()
+const timeAgoOptions = useTimeAgoOptions()
 
 let draftKey = $ref('home')
 
@@ -25,7 +27,7 @@ onMounted(() => {
     <div text-right h-8>
       <VDropdown v-if="nonEmptyDrafts.length" placement="bottom-end">
         <button btn-text flex="inline center">
-          Drafts ({{ nonEmptyDrafts.length }}) <div i-ri:arrow-down-s-line />
+          {{ $t('compose.drafts', nonEmptyDrafts.length, { named: { v: formatNumber(nonEmptyDrafts.length) } }) }}&#160;<div aria-hidden="true" i-ri:arrow-down-s-line />
         </button>
         <template #popper="{ hide }">
           <div flex="~ col">
@@ -38,9 +40,11 @@ onMounted(() => {
             >
               <div>
                 <div flex="~ gap-1" items-center>
-                  Draft <code>{{ key }}</code>
+                  <i18n-t keypath="compose.draft_title">
+                    <code>{{ key }}</code>
+                  </i18n-t>
                   <span v-if="draft.lastUpdated" text-secondary text-sm>
-                    &middot; {{ formatTimeAgo(new Date(draft.lastUpdated)) }}
+                    &middot; {{ formatTimeAgo(new Date(draft.lastUpdated), timeAgoOptions) }}
                   </span>
                 </div>
                 <div text-secondary>

locales/en-GB.json

@@ -88,6 +88,10 @@
     "not_found": "404 Not Found",
     "offline_desc": "Seems like you are offline. Please check your network connection."
   },
+  "compose": {
+    "draft_title": "Draft {0}",
+    "drafts": "Drafts ({v})"
+  },
   "conversation": {
     "with": "with"
   },

locales/en-US.json

@@ -97,6 +97,10 @@
     "not_found": "404 Not Found",
     "offline_desc": "Seems like you are offline. Please check your network connection."
   },
+  "compose": {
+    "draft_title": "Draft {0}",
+    "drafts": "Drafts ({v})"
+  },
   "conversation": {
     "with": "with"
   },

locales/es-ES.json

@@ -88,6 +88,10 @@
     "not_found": "404 No Encontrado",
     "offline_desc": "Al parecer estás fuera de línea. Por favor, comprueba tu conexión a la red."
   },
+  "compose": {
+    "draft_title": "Borrador {0}",
+    "drafts": "Borradores ({v})"
+  },
   "conversation": {
     "with": "con"
   },