feat: explore tabs pages title (#419)

pages/[[server]]/explore.vue

@@ -27,10 +27,6 @@ const tabs = $computed(() => [
     : [],
   ),
 ] as const)
-
-useHeadFixed({
-  title: () => t('nav_side.explore'),
-})
 </script>
 
 <template>

pages/[[server]]/explore/index.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
 import { STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS } from '~~/constants'
 
+const { t } = useI18n()
+
 const paginator = useMasto().trends.iterateStatuses()
 
 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false)
+
+useHeadFixed({
+  title: () => `${t('tab.posts')} | ${t('nav_side.explore')}`,
+})
 </script>
 
 <template>

pages/[[server]]/explore/links.vue

@@ -2,9 +2,16 @@
 // @ts-expect-error missing types
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
 import { STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS } from '~~/constants'
+
+const { t } = useI18n()
+
 const paginator = useMasto().trends.links
 
 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false)
+
+useHeadFixed({
+  title: () => `${t('tab.news')} | ${t('nav_side.explore')}`,
+})
 </script>
 
 <template>

pages/[[server]]/explore/tags.vue

@@ -2,6 +2,8 @@
 import type { Tag } from 'masto'
 import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
 
+const { t } = useI18n()
+
 const { data, pending, error } = useLazyAsyncData(
   () => useMasto().trends.fetchTags({ limit: 20 }),
   { immediate: true },
@@ -12,6 +14,10 @@ const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
 function getTagUrl(tag: Tag) {
   return new URL(tag.url).pathname
 }
+
+useHeadFixed({
+  title: () => `${t('tab.hashtags')} | ${t('nav_side.explore')}`,
+})
 </script>
 
 <template>

pages/[[server]]/explore/users.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
+const { t } = useI18n()
+
 // limit: 20 is the default configuration of the official client
 const { data, pending, error } = useLazyAsyncData(
   () => useMasto().suggestions.fetchAll({ limit: 20 }),
   { immediate: true },
 )
+
+useHeadFixed({
+  title: () => `${t('tab.for_you')} | ${t('nav_side.explore')}`,
+})
 </script>
 
 <template>