From cafc995dde916f4049a2fa3b28cf4f7943cc1ab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 13 Jan 2023 01:58:05 +0800
Subject: [PATCH] feat: display i18n text on SSR

---
 components/nav/NavSideItem.vue     | 2 +-
 components/search/SearchWidget.vue | 7 +++----
 pages/[[server]]/explore.vue       | 8 ++++----
 pages/notifications.vue            | 4 ++--
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 81833884..aa9c9243 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -66,7 +66,7 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
           <div :class="icon" text-xl />
         </slot>
         <slot>
-          <span block sm:hidden xl:block>{{ isHydrated ? text : '&nbsp;' }}</span>
+          <span block sm:hidden xl:block>{{ text }}</span>
         </slot>
       </div>
     </CommonTooltip>
diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
index 12d27f19..ec4ad5c4 100644
--- a/components/search/SearchWidget.vue
+++ b/components/search/SearchWidget.vue
@@ -3,7 +3,6 @@ const query = ref('')
 const { accounts, hashtags, loading, statuses } = useSearch(query)
 const index = ref(0)
 
-const { t } = useI18n()
 const el = ref<HTMLElement>()
 const router = useRouter()
 const { focused } = useFocusWithin(el)
@@ -66,7 +65,7 @@ const activate = () => {
         bg-transparent
         outline="focus:none"
         pe-4
-        :placeholder="isHydrated ? t('nav.search') : ''"
+        :placeholder="$t('nav.search')"
         pb="1px"
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"
@@ -78,7 +77,7 @@ const activate = () => {
     <div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
       <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
         <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
-          {{ t('search.search_desc') }}
+          {{ $t('search.search_desc') }}
         </span>
         <template v-else-if="!loading">
           <template v-if="results.length > 0">
@@ -90,7 +89,7 @@ const activate = () => {
             />
           </template>
           <span v-else block text-center text-sm text-secondary>
-            {{ t('search.search_empty') }}
+            {{ $t('search.search_empty') }}
           </span>
         </template>
         <div v-else>
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index 7495022b..44e346b1 100644
--- a/pages/[[server]]/explore.vue
+++ b/pages/[[server]]/explore.vue
@@ -4,20 +4,20 @@ const { t } = useI18n()
 const tabs = $computed(() => [
   {
     to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
-    display: isHydrated.value ? t('tab.posts') : '',
+    display: t('tab.posts'),
   },
   {
     to: isHydrated.value ? `/${currentServer.value}/explore/tags` : '/explore/tags',
-    display: isHydrated.value ? t('tab.hashtags') : '',
+    display: t('tab.hashtags'),
   },
   {
     to: isHydrated.value ? `/${currentServer.value}/explore/links` : '/explore/links',
-    display: isHydrated.value ? t('tab.news') : '',
+    display: t('tab.news'),
   },
   // This section can only be accessed after logging in
   {
     to: isHydrated.value ? `/${currentServer.value}/explore/users` : '/explore/users',
-    display: isHydrated.value ? t('tab.for_you') : '',
+    display: t('tab.for_you'),
     disabled: !isMastoInitialised.value || !currentUser.value,
   },
 ] as const)
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 96983161..4f581165 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -10,12 +10,12 @@ const tabs = $computed(() => [
   {
     name: 'all',
     to: '/notifications',
-    display: isHydrated.value ? t('tab.notifications_all') : '',
+    display: t('tab.notifications_all'),
   },
   {
     name: 'mention',
     to: '/notifications/mention',
-    display: isHydrated.value ? t('tab.notifications_mention') : '',
+    display: t('tab.notifications_mention'),
   },
 ] as const)
 </script>