feat(i18n): add title texts (#201)

locales/en-US.json

@@ -10,6 +10,11 @@
     "bookmarks": "Bookmarks",
     "profile": "Profile"
   },
+  "timeline": "Timeline",
+  "title": {
+    "local-timeline": "@:nav_side.local @:timeline",
+    "federated-timeline": "@:nav_side.federated @:timeline"
+  },
   "account": {
     "posts": "{0} Posts",
     "following": "{0} Following",

locales/zh-CN.json

@@ -10,6 +10,11 @@
     "notifications": "通知",
     "profile": "个人资料"
   },
+  "timeline": "时间轴",
+  "title": {
+    "local-timeline": "@:nav_side.local@:timeline",
+    "federated-timeline": "@:nav_side.federated@:timeline"
+  },
   "account": {
     "followers": "被 {0} 人关注",
     "following": "正在关注 {0} 人",

pages/@[account]/index.vue

@@ -2,6 +2,8 @@
 const params = useRoute().params
 const accountName = $(computedEager(() => toShortHandle(params.account as string)))
 
+const { t } = useI18n()
+
 const { data: account, refresh } = $(await useAsyncData(() => fetchAccountByName(accountName).catch(() => null)))
 
 if (account) {
@@ -20,7 +22,7 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>{{ account ? getDisplayName(account) : 'Profile' }}</span>
+      <span text-lg font-bold>{{ account ? getDisplayName(account) : t('nav_side.profile') }}</span>
     </template>
 
     <template v-if="account">

pages/bookmarks.vue

@@ -5,15 +5,17 @@ definePageMeta({
 
 const paginator = useMasto().bookmarks.getIterator()
 
+const { t } = useI18n()
+
 useHead({
-  title: 'Bookmarks',
+  title: () => t('nav_side.bookmarks'),
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>Bookmarks</span>
+      <span text-lg font-bold>{{ t('nav_side.bookmarks') }}</span>
     </template>
 
     <slot>

pages/conversations.vue

@@ -5,15 +5,17 @@ definePageMeta({
 
 const paginator = useMasto().conversations.getIterator()
 
+const { t } = useI18n()
+
 useHead({
-  title: 'Conversations',
+  title: () => t('nav_side.conversations'),
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>Conversations</span>
+      <span text-lg font-bold>{{ t('nav_side.conversations') }}</span>
     </template>
 
     <slot>

pages/explore.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 const paginator = useMasto().trends.getStatuses()
 
+const { t } = useI18n()
+
 useHead({
-  title: 'Explore',
+  title: () => t('nav_side.explore'),
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:hashtag h-6 mr-1 /><span>Explore</span>
+      <div i-ri:hashtag h-6 mr-1 /><span>{{ t('nav_side.explore') }}</span>
     </template>
 
     <slot>

pages/notifications.vue

@@ -5,6 +5,8 @@ definePageMeta({
   middleware: 'auth',
 })
 
+const { t } = useI18n()
+
 const tabNames = ['All', 'Mentions'] as const
 const tab = $(useLocalStorage<typeof tabNames[number]>(STORAGE_KEY_NOTIFY_TAB, 'All'))
 
@@ -13,14 +15,14 @@ const paginator = $computed(() => {
 })
 
 useHead({
-  title: 'Notifications',
+  title: () => t('nav_side.notifications'),
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>Notifications</span>
+      <span text-lg font-bold>{{ t('nav_side.notifications') }}</span>
     </template>
 
     <template #header>

pages/public/index.vue

@@ -3,15 +3,17 @@ const paginator = useMasto().timelines.getPublicIterable()
 const stream = await useMasto().stream.streamPublicTimeline()
 onBeforeUnmount(() => stream.disconnect())
 
+const { t } = useI18n()
+
 useHead({
-  title: 'Federated',
+  title: () => t('nav_side.federated'),
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>Federated Timeline</span>
+      <span text-lg font-bold>{{ t('title.federated-timeline') }}</span>
     </template>
 
     <slot>

pages/public/local.vue

@@ -3,15 +3,17 @@ const paginator = useMasto().timelines.getPublicIterable({ local: true })
 const stream = await useMasto().stream.streamCommunityTimeline()
 onBeforeUnmount(() => stream.disconnect())
 
+const { t } = useI18n()
+
 useHead({
-  title: 'Local',
+  title: () => t('nav_side.local'),
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>Local timeline</span>
+      <span text-lg font-bold>{{ t('title.local-timeline') }}</span>
     </template>
 
     <slot>