feat: more to explore (#360)

pages/[[server]]/explore.vue

@@ -1,8 +1,33 @@
 <script setup lang="ts">
-const paginator = useMasto().trends.iterateStatuses()
+import { invoke } from '@vueuse/shared'
 
 const { t } = useI18n()
 
+const tabs = $computed(() => [
+  {
+    to: `/${currentServer.value}/explore`,
+    display: t('tab.posts'),
+  },
+  {
+    to: `/${currentServer.value}/explore/tags`,
+    display: t('tab.hashtags'),
+  },
+  {
+    to: `/${currentServer.value}/explore/links`,
+    display: t('tab.news'),
+  },
+  // This section can only be accessed after logging in
+  ...invoke(() => currentUser.value
+    ? [
+        {
+          to: `/${currentServer.value}/explore/users`,
+          display: t('tab.for_you'),
+        },
+      ]
+    : [],
+  ),
+] as const)
+
 useHeadFixed({
   title: () => t('nav_side.explore'),
 })
@@ -11,15 +36,15 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/explore" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop">
         <div i-ri:hashtag />
         <span>{{ t('nav_side.explore') }}</span>
-      </NuxtLink>
+      </span>
     </template>
 
-    <slot>
-      <!-- TODO: Tabs for trending statuses, tags, and links -->
-      <TimelinePaginator :paginator="paginator" context="public" />
-    </slot>
+    <template #header>
+      <CommonRouteTabs replace :options="tabs" />
+    </template>
+    <NuxtPage />
   </MainContent>
 </template>