i18n: doing more

components/account/AccountMoreButton.vue

@@ -52,24 +52,24 @@ const toggleBlockDomain = async () => {
       <template v-if="currentUser">
         <template v-if="!isSelf">
           <CommonDropdownItem icon="i-ri:at-line" @click="mentionUser(account)">
-            {{ $t('menu.mention_account', [account.acct]) }}
+            {{ $t('menu.mention_account', [`@${account.acct}`]) }}
           </CommonDropdownItem>
           <CommonDropdownItem icon="i-ri:message-3-line" @click="directMessageUser(account)">
-            {{ $t('menu.direct_message_account', [account.acct]) }}
+            {{ $t('menu.direct_message_account', [`@${account.acct}`]) }}
           </CommonDropdownItem>
 
           <CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="toggleMute">
-            {{ $t('menu.mute_account', [account.acct]) }}
+            {{ $t('menu.mute_account', [`@${account.acct}`]) }}
           </CommonDropdownItem>
           <CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="toggleMute">
-            {{ $t('menu.unmute_account', [account.acct]) }}
+            {{ $t('menu.unmute_account', [`@${account.acct}`]) }}
           </CommonDropdownItem>
 
           <CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="toggleBlockUser">
-            {{ $t('menu.block_account', [account.acct]) }}
+            {{ $t('menu.block_account', [`@${account.acct}`]) }}
           </CommonDropdownItem>
           <CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="toggleBlockUser">
-            {{ $t('menu.unblock_account', [account.acct]) }}
+            {{ $t('menu.unblock_account', [`@${account.acct}`]) }}
           </CommonDropdownItem>
 
           <template v-if="getServerName(account) !== currentServer">

components/common/CommonTabs.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
-defineProps<{
+const { options } = defineProps<{
-  options: string[]
+  options: string[] | { name: string; display: string }[]
 }>()
 
 const { modelValue } = defineModel<{
   modelValue: string
 }>()
 
+const tabs = computed(() => {
+  return options.map((option) => {
+    if (typeof option === 'string')
+      return { name: option, display: option }
+    else
+      return option
+  })
+})
+
 function toValidName(otpion: string) {
   return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
 }
@@ -14,25 +23,25 @@ function toValidName(otpion: string) {
 
 <template>
   <div flex w-full items-center lg:text-lg>
-    <template v-for="option in options" :key="option">
+    <template v-for="option in tabs" :key="option">
       <input
-        :id="`tab-${toValidName(option)}`"
+        :id="`tab-${toValidName(option.name)}`"
-        :checked="modelValue === option"
+        :checked="modelValue === option.name"
         :value="option"
         type="radio"
         name="tabs"
         display="none"
-        @change="modelValue = option"
+        @change="modelValue = option.name"
       ><label
         flex flex-auto cursor-pointer px3 m1 rounded transition-all
-        :for="`tab-${toValidName(option)}`"
+        :for="`tab-${toValidName(option.name)}`"
         tabindex="1"
         hover:bg-active transition-100
-        @keypress.enter="modelValue = option"
+        @keypress.enter="modelValue = option.name"
       ><span
         mxa px4 py3 text-center
-        :class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
+        :class="modelValue === option.name ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
-      >{{ option }}</span>
+      >{{ option.display }}</span>
       </label>
     </template>
   </div>

components/help/HelpPreview.vue

@@ -71,7 +71,7 @@ const teams: Team[] = [
     </p>
 
     <button btn-solid mxa @click="emit('close')">
-      Enter App
+      {{ $t('action.enter_app') }}
     </button>
   </div>
 </template>

components/nav/NavUser.vue

@@ -14,6 +14,6 @@
     </template>
   </VDropdown>
   <button v-else btn-solid text-sm px-2 py-1 text-center @click="openSigninDialog()">
-    Sign in
+    {{ $t('action.sign_in') }}
   </button>
 </template>

components/timeline/TimelinePaginator.vue

@@ -15,7 +15,7 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
   <CommonPaginator v-bind="{ paginator, stream }" :virtual-scroller="virtualScroller">
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
-        Show {{ number }} new items
+        {{ $t('timeline.show_new_items', [number]) }}
       </button>
     </template>
     <template #default="{ item, active }">

locales/de-DE.json

@@ -24,9 +24,8 @@
     "notifications": "Mitteilungen",
     "profile": "Profil"
   },
-  "timeline": "Timeline",
   "title": {
-    "federated_timeline": "@:nav_side.federated @:timeline",
+    "federated_timeline": "@:nav_side.federated @:timeline.name",
-    "local_timeline": "@:nav_side.local @:timeline"
+    "local_timeline": "@:nav_side.local @:timeline.name"
   }
 }

locales/en-US.json

@@ -11,22 +11,24 @@
   },
   "action": {
     "compose": "Compose",
+    "enter_app": "Enter App",
     "publish": "Publish!",
-    "save_changes": "Save changes"
+    "save_changes": "Save changes",
+    "sign_in": "Sign in"
   },
   "feature_flag": {
     "virtual_scroll": "Virtual Scrolling"
   },
   "menu": {
-    "block_account": "Block @{0}",
+    "block_account": "Block {0}",
     "block_domain": "Block domain {0}",
-    "direct_message_account": "Direct message @{0}",
+    "direct_message_account": "Direct message {0}",
-    "mention_account": "Mention @{0}",
+    "mention_account": "Mention {0}",
-    "mute_account": "Mute @{0}",
+    "mute_account": "Mute {0}",
     "open_in_original_site": "Open in original site",
-    "unblock_account": "Unblock @{0}",
+    "unblock_account": "Unblock {0}",
     "unblock_domain": "Unblock domain {0}",
-    "unmute_account": "Unmute @{0}"
+    "unmute_account": "Unmute {0}"
   },
   "nav_footer": {
     "select_feature_flags": "Toggle Feature Flags",
@@ -49,10 +51,18 @@
     "editing": "Editing",
     "uploading": "Uploading..."
   },
-  "timeline": "Timeline",
+  "tab": {
+    "media": "Media",
+    "posts": "Posts",
+    "posts_with_replies": "Posts & Replies"
+  },
+  "timeline": {
+    "name": "Timeline",
+    "show_new_items": "Show {0} new items"
+  },
   "title": {
-    "federated_timeline": "@:nav_side.federated @:timeline",
+    "federated_timeline": "@:nav_side.federated @:timeline.name",
-    "local_timeline": "@:nav_side.local @:timeline"
+    "local_timeline": "@:nav_side.local @:timeline.name"
   },
   "tooltip": {
     "add_content_warning": "Add content warning",

locales/zh-CN.json

@@ -24,9 +24,16 @@
     "notifications": "通知",
     "profile": "个人资料"
   },
-  "timeline": "时间轴",
+  "tab": {
+    "media": "媒体",
+    "posts": "贴文",
+    "posts_with_replies": "帖文与留言"
+  },
+  "timeline": {
+    "name": "时间轴"
+  },
   "title": {
-    "federated_timeline": "@:nav_side.federated@:timeline",
+    "federated_timeline": "@:nav_side.federated@:timeline.name",
-    "local_timeline": "@:nav_side.local@:timeline"
+    "local_timeline": "@:nav_side.local@:timeline.name"
   }
 }

pages/@[account]/index/index.vue

@@ -3,32 +3,38 @@ const params = useRoute().params
 const accountName = $(computedEager(() => params.account as string))
 
 const account = await fetchAccountByName(accountName)
-const tabNames = ['Posts', 'Posts & replies', 'Media'] as const
+const { t } = useI18n()
-
-// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
-const tab = $ref('Posts')
 
 const paginatorPosts = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: true })
 const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: false })
 const paginatorMedia = useMasto().accounts.getStatusesIterable(account.id, { onlyMedia: true, excludeReplies: false })
 
-const paginator = $computed(() => {
+const tabs = $computed(() => [
-  switch (tab) {
+  {
-    case 'Posts & replies':
+    name: 'posts',
-      return paginatorPostsWithReply
+    display: t('tab.posts'),
+    paginator: paginatorPosts,
+  },
+  {
+    name: 'relies',
+    display: t('tab.posts_with_replies'),
+    paginator: paginatorPostsWithReply,
+  },
+  {
+    name: 'media',
+    display: t('tab.media'),
+    paginator: paginatorMedia,
+  },
+] as const)
 
-    case 'Media':
+// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
-      return paginatorMedia
+const tab = $ref(tabs[0].name)
-
+const paginator = $computed(() => tabs.find(t => t.name === tab)!.paginator)
-    default:
-      return paginatorPosts
-  }
-})
 </script>
 
 <template>
   <div>
-    <CommonTabs v-model="tab" :options="tabNames" />
+    <CommonTabs v-model="tab" :options="tabs" />
     <KeepAlive>
       <TimelinePaginator :key="tab" :paginator="paginator" />
     </KeepAlive>