feat: more i18n and sort keys

.vscode/settings.json

@@ -9,11 +9,14 @@
   "editor.formatOnSave": false,
   "cSpell.words": [
     "masto",
-    "Nuxtodon"
+    "Nuxtodon",
+    "unmute"
   ],
   "i18n-ally.localesPaths": [
     "locales"
   ],
   "i18n-ally.keystyle": "nested",
-  "i18n-ally.sourceLanguage": "en-US"
+  "i18n-ally.sourceLanguage": "en-US",
+  "i18n-ally.preferredDelimiter": "_",
+  "i18n-ally.sortKeys": true
 }

components/account/AccountFollowButton.vue

@@ -30,17 +30,17 @@ async function toggleFollow() {
     <div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/75' : 'bg-orange/40'" :class="!relationship?.following ? relationship?.followedBy ? 'bg-orange/20' : 'bg-white/10' : relationship?.followedBy ? ' bg-orange/70' : 'bg-orange/50'">
       <template v-if="relationship?.following">
         <span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span>
-        <span hidden group-hover="inline">Unfollow</span>
+        <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
       </template>
       <template v-else-if="relationship?.requested">
-        <span>Requested</span>
+        <span>{{ $t('account.follow_requested') }}</span>
       </template>
       <template v-else-if="relationship?.followedBy">
-        <span group-hover="hidden">Follows you</span>
-        <span hidden group-hover="inline">Follow back</span>
+        <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
+        <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
       </template>
       <template v-else>
-        <span>Follow</span>
+        <span>{{ $t('account.follow') }}</span>
       </template>
     </div>
   </button>

components/account/AccountMoreButton.vue

@@ -45,31 +45,31 @@ const toggleBlockDomain = async () => {
     <template #popper>
       <NuxtLink :to="account.url" target="_blank">
         <CommonDropdownItem icon="i-ri:arrow-right-up-line">
-          Open in original site
+          {{ $t('menu.open_in_original_site') }}
         </CommonDropdownItem>
       </NuxtLink>
 
       <template v-if="currentUser">
         <template v-if="!isSelf">
           <CommonDropdownItem icon="i-ri:at-line" @click="mentionUser(account)">
-            Mention @{{ account.acct }}
+            {{ $t('menu.mention_account', [account.acct]) }}
           </CommonDropdownItem>
           <CommonDropdownItem icon="i-ri:message-3-line" @click="directMessageUser(account)">
-            Direct message @{{ account.acct }}
+            {{ $t('menu.direct_message_account', [account.acct]) }}
           </CommonDropdownItem>
 
           <CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="toggleMute">
-            Mute @{{ account.acct }}
+            {{ $t('menu.mute_account', [account.acct]) }}
           </CommonDropdownItem>
           <CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="toggleMute">
-            Unmute @{{ account.acct }}
+            {{ $t('menu.unmute_account', [account.acct]) }}
           </CommonDropdownItem>
 
           <CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="toggleBlockUser">
-            Block @{{ account.acct }}
+            {{ $t('menu.block_account', [account.acct]) }}
           </CommonDropdownItem>
           <CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="toggleBlockUser">
-            Unblock @{{ account.acct }}
+            {{ $t('menu.unblock_account', [account.acct]) }}
           </CommonDropdownItem>
 
           <template v-if="getServerName(account) !== currentServer">
@@ -78,10 +78,10 @@ const toggleBlockDomain = async () => {
               icon="i-ri:shut-down-line"
               @click="toggleBlockDomain"
             >
-              Block domain {{ getServerName(account) }}
+              {{ $t('menu.block_domain', [getServerName(account)]) }}
             </CommonDropdownItem>
             <CommonDropdownItem v-else icon="i-ri:restart-line" @click="toggleBlockDomain">
-              Unblock domain {{ getServerName(account) }}
+              {{ $t('menu.unblock_domain', [getServerName(account)]) }}
             </CommonDropdownItem>
           </template>
         </template>

components/account/AccountPostsFollowers.vue

@@ -10,21 +10,21 @@ defineProps<{
   <div flex gap-5>
     <NuxtLink :to="getAccountPath(account)" text-secondary exact-active-class="text-primary">
       <template #default="{ isExactActive }">
-        <i18n-t keypath="account.posts">
+        <i18n-t keypath="account.posts_count">
           <span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ formattedNumber(account.statusesCount) }}</span>
         </i18n-t>
       </template>
     </NuxtLink>
     <NuxtLink :to="`${getAccountPath(account)}/following`" text-secondary exact-active-class="text-primary">
       <template #default="{ isExactActive }">
-        <i18n-t keypath="account.following">
+        <i18n-t keypath="account.following_count">
           <span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followingCount) }}</span>
         </i18n-t>
       </template>
     </NuxtLink>
     <NuxtLink :to="`${getAccountPath(account)}/followers`" text-secondary exact-active-class="text-primary">
       <template #default="{ isExactActive }">
-        <i18n-t keypath="account.followers">
+        <i18n-t keypath="account.following_count">
           <span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followersCount) }}</span>
         </i18n-t>
       </template>

components/publish/PublishButton.vue

@@ -7,6 +7,6 @@ function openDialog() {
 <template>
   <button btn-outline rounded-full font-bold py4 flex="~ gap2 center" @click="openDialog">
     <div i-ri:quill-pen-line />
-    Compose
+    {{ $t('action.compose') }}
   </button>
 </template>

components/publish/PublishWidget.vue

@@ -146,7 +146,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
     <template v-if="draft.editingStatus">
       <div flex="~ col gap-1">
         <div text-secondary self-center>
-          Editing
+          {{ $t('state.editing') }}
         </div>
         <StatusCard :status="draft.editingStatus" :actions="false" :hover="false" />
       </div>
@@ -186,7 +186,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
         <div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
           <div i-ri:loader-2-fill animate-spin />
-          Uploading...
+          {{ $t('state.uploading') }}
         </div>
 
         <div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
@@ -201,14 +201,14 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
           v-if="isExpanded" flex="~ gap-2" m="l--1" pt-2
           border="t base"
         >
-          <CommonTooltip placement="bottom" content="Add images, a video or an audio file">
+          <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
             <button btn-action-icon @click="pickAttachments">
               <div i-ri:image-add-line />
             </button>
           </CommonTooltip>
 
           <template v-if="editor">
-            <CommonTooltip placement="bottom" content="Toggle code block">
+            <CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')">
               <button
                 btn-action-icon
                 :class="editor.isActive('codeBlock') ? 'op100' : 'op50'"
@@ -221,14 +221,14 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
           <div flex-auto />
 
-          <CommonTooltip placement="bottom" content="Add content warning">
+          <CommonTooltip placement="bottom" :content="$t('tooltip.add_content_warning')">
             <button btn-action-icon @click="toggleSensitive">
               <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
               <div v-else i-ri:alarm-warning-line />
             </button>
           </CommonTooltip>
 
-          <CommonTooltip placement="bottom" content="Change content visibility">
+          <CommonTooltip placement="bottom" :content="$t('tooltip.change_content_visibility')">
             <CommonDropdown>
               <button btn-action-icon w-12>
                 <div :class="currentVisibility.icon" />
@@ -257,7 +257,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
             :disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
             @click="publish"
           >
-            {{ !draft.editingStatus ? 'Publish!' : 'Save changes' }}
+            {{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
           </button>
         </div>
       </div>

locales/de-DE.json

@@ -1,32 +1,32 @@
 {
-  "nav_side": {
-    "home": "Startseite",
-    "notifications": "Mitteilungen",
-    "explore": "Entdecken",
-    "local": "Lokale Timeline",
-    "federated": "Förderierte Timeline",
-    "conversations": "Direktnachrichten",
-    "favourites": "Favoriten",
-    "bookmarks": "Lesezeichen",
-    "profile": "Profil"
-  },
-  "nav_footer": {
-    "select_language": "Sprache auswählen",
-    "select_feature_flags": "Feature-Flags umschalten",
-    "toggle_theme": "Thema umschalten",
-    "zen_mode": "Zen mode"
-  },
-  "timeline": "Timeline",
-  "title": {
-    "local_timeline": "@:nav_side.local @:timeline",
-    "federated_timeline": "@:nav_side.federated @:timeline"
-  },
   "account": {
-    "posts": "{0} Beiträge",
-    "following": "{0} Folge ich",
-    "followers": "{0} Follower"
+    "followers_count": "{0} Follower",
+    "following_count": "{0} Folge ich",
+    "posts_count": "{0} Beiträge"
   },
   "feature_flag": {
     "virtual_scroll": "Virtuelles Scrollen"
+  },
+  "nav_footer": {
+    "select_feature_flags": "Feature-Flags umschalten",
+    "select_language": "Sprache auswählen",
+    "toggle_theme": "Thema umschalten",
+    "zen_mode": "Zen mode"
+  },
+  "nav_side": {
+    "bookmarks": "Lesezeichen",
+    "conversations": "Direktnachrichten",
+    "explore": "Entdecken",
+    "favourites": "Favoriten",
+    "federated": "Förderierte Timeline",
+    "home": "Startseite",
+    "local": "Lokale Timeline",
+    "notifications": "Mitteilungen",
+    "profile": "Profil"
+  },
+  "timeline": "Timeline",
+  "title": {
+    "federated_timeline": "@:nav_side.federated @:timeline",
+    "local_timeline": "@:nav_side.local @:timeline"
   }
 }

locales/en-US.json

@@ -1,32 +1,63 @@
 {
-  "nav_side": {
-    "home": "Home",
-    "notifications": "Notifications",
-    "explore": "Explore",
-    "local": "Local",
-    "federated": "Federated",
-    "conversations": "Conversations",
-    "favourites": "Favourites",
-    "bookmarks": "Bookmarks",
-    "profile": "Profile"
-  },
-  "nav_footer": {
-    "select_language": "Select Language",
-    "select_feature_flags": "Toggle Feature Flags",
-    "toggle_theme": "Toggle Theme",
-    "zen_mode": "Zen Mode"
-  },
-  "timeline": "Timeline",
-  "title": {
-    "local_timeline": "@:nav_side.local @:timeline",
-    "federated_timeline": "@:nav_side.federated @:timeline"
-  },
   "account": {
-    "posts": "{0} Posts",
-    "following": "{0} Following",
-    "followers": "{0} Followers"
+    "follow": "Follow",
+    "follow_back": "Follow back",
+    "follow_requested": "Requested",
+    "followers_count": "{0} Followers",
+    "following_count": "{0} Following",
+    "follows_you": "Follows you",
+    "posts_count": "{0} Posts",
+    "unfollow": "Unfollow"
+  },
+  "action": {
+    "compose": "Compose",
+    "publish": "Publish!",
+    "save_changes": "Save changes"
   },
   "feature_flag": {
     "virtual_scroll": "Virtual Scrolling"
+  },
+  "menu": {
+    "block_account": "Block @{0}",
+    "block_domain": "Block domain {0}",
+    "direct_message_account": "Direct message @{0}",
+    "mention_account": "Mention @{0}",
+    "mute_account": "Mute @{0}",
+    "open_in_original_site": "Open in original site",
+    "unblock_account": "Unblock @{0}",
+    "unblock_domain": "Unblock domain {0}",
+    "unmute_account": "Unmute @{0}"
+  },
+  "nav_footer": {
+    "select_feature_flags": "Toggle Feature Flags",
+    "select_language": "Select Language",
+    "toggle_theme": "Toggle Theme",
+    "zen_mode": "Zen Mode"
+  },
+  "nav_side": {
+    "bookmarks": "Bookmarks",
+    "conversations": "Conversations",
+    "explore": "Explore",
+    "favourites": "Favourites",
+    "federated": "Federated",
+    "home": "Home",
+    "local": "Local",
+    "notifications": "Notifications",
+    "profile": "Profile"
+  },
+  "state": {
+    "editing": "Editing",
+    "uploading": "Uploading..."
+  },
+  "timeline": "Timeline",
+  "title": {
+    "federated_timeline": "@:nav_side.federated @:timeline",
+    "local_timeline": "@:nav_side.local @:timeline"
+  },
+  "tooltip": {
+    "add_content_warning": "Add content warning",
+    "add_media": "Add images, a video or an audio file",
+    "change_content_visibility": "Change content visibility",
+    "toggle_code_block": "Toggle code block"
   }
 }

locales/zh-CN.json

@@ -1,4 +1,18 @@
 {
+  "account": {
+    "followers_count": "被 {0} 人关注",
+    "following_count": "正在关注 {0} 人",
+    "posts_count": "{0} 条帖文"
+  },
+  "feature_flag": {
+    "virtual_scroll": "虚拟滚动"
+  },
+  "nav_footer": {
+    "select_feature_flags": "功能开关",
+    "select_language": "选择语言",
+    "toggle_theme": "切换主题",
+    "zen_mode": "禅模式"
+  },
   "nav_side": {
     "bookmarks": "书签",
     "conversations": "私信",
@@ -10,23 +24,9 @@
     "notifications": "通知",
     "profile": "个人资料"
   },
-  "nav_footer": {
-    "select_language": "选择语言",
-    "select_feature_flags": "功能开关",
-    "toggle_theme": "切换主题",
-    "zen_mode": "禅模式"
-  },
   "timeline": "时间轴",
   "title": {
-    "local_timeline": "@:nav_side.local@:timeline",
-    "federated_timeline": "@:nav_side.federated@:timeline"
-  },
-  "account": {
-    "followers": "被 {0} 人关注",
-    "following": "正在关注 {0} 人",
-    "posts": "{0} 条帖文"
-  },
-  "feature_flag": {
-    "virtual_scroll": "虚拟滚动"
+    "federated_timeline": "@:nav_side.federated@:timeline",
+    "local_timeline": "@:nav_side.local@:timeline"
   }
 }