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<{
-  options: string[]
+const { options } = defineProps<{
+  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)}`"
-        :checked="modelValue === option"
+        :id="`tab-${toValidName(option.name)}`"
+        :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'"
-      >{{ option }}</span>
+        :class="modelValue === option.name ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
+      >{{ 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 }">