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>

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

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS } from '~~/constants'
+
+const paginator = useMasto().trends.iterateStatuses()
+
+const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false)
+</script>
+
+<template>
+  <CommonAlert v-if="!hideNewsTips" @close="hideNewsTips = true">
+    <p>{{ $t('tooltip.explore_posts_intro') }}</p>
+  </CommonAlert>
+  <!-- TODO: Tabs for trending statuses, tags, and links -->
+  <TimelinePaginator :paginator="paginator" context="public" />
+</template>

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

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+// @ts-expect-error missing types
+import { DynamicScrollerItem } from 'vue-virtual-scroller'
+import { STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS } from '~~/constants'
+const paginator = useMasto().trends.links
+
+const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false)
+</script>
+
+<template>
+  <CommonAlert v-if="!hideNewsTips" @close="hideNewsTips = true">
+    <p>{{ $t('tooltip.explore_links_intro') }}</p>
+  </CommonAlert>
+
+  <CommonPaginator v-bind="{ paginator }">
+    <template #default="{ item }">
+      <StatusPreviewCard :card="item" border="!b base" rounded="!none" p="!4" small-picture-only root />
+    </template>
+    <template #loading>
+      <StatusPreviewCardSkeleton square root border="b base" />
+      <StatusPreviewCardSkeleton square root border="b base" op50 />
+      <StatusPreviewCardSkeleton square root border="b base" op25 />
+    </template>
+  </CommonPaginator>
+</template>

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { Tag } from 'masto'
+import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
+
+const { data, pending, error } = useLazyAsyncData(
+  () => useMasto().trends.fetchTags({ limit: 20 }),
+  { immediate: true },
+)
+
+const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
+
+function getTagUrl(tag: Tag) {
+  return new URL(tag.url).pathname
+}
+</script>
+
+<template>
+  <CommonAlert v-if="!hideTagsTips && data && data.length" @close="hideTagsTips = true">
+    <p>{{ $t('tooltip.explore_tags_intro') }}</p>
+  </CommonAlert>
+
+  <div v-if="data && data.length">
+    <TagCard v-for="item of data" :key="item.name" :tag="item" border="b base" />
+
+    <div p5 text-center text-secondary-light italic>
+      {{ $t('common.end_of_list') }}
+    </div>
+  </div>
+  <div v-else-if="pending">
+    <TagCardSkeleton border="b base" />
+    <TagCardSkeleton border="b base" />
+    <TagCardSkeleton border="b base" op50 />
+    <TagCardSkeleton border="b base" op50 />
+    <TagCardSkeleton border="b base" op25 />
+  </div>
+  <div v-else-if="error" p5 text-center text-red italic>
+    {{ $t('common.error') }}: {{ error }}
+  </div>
+  <div v-else p5 text-center text-secondary italic>
+    {{ $t('error.explore-list-empty') }}
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+// limit: 20 is the default configuration of the official client
+const { data, pending, error } = useLazyAsyncData(
+  () => useMasto().suggestions.fetchAll({ limit: 20 }),
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div v-if="data && data.length">
+    <AccountBigCard
+      v-for="suggestion of data"
+      :key="suggestion.account.id"
+      :account="suggestion.account"
+      as="router-link"
+      :to="getAccountRoute(suggestion.account)"
+      border="b base"
+    />
+
+    <div p5 text-center text-secondary-light italic>
+      {{ $t('common.end_of_list') }}
+    </div>
+  </div>
+  <div v-else-if="pending">
+    <AccountBigCardSkeleton border="b base" />
+    <AccountBigCardSkeleton border="b base" op50 />
+    <AccountBigCardSkeleton border="b base" op25 />
+  </div>
+  <div v-else-if="error" p5 text-center text-red italic>
+    {{ $t('common.error') }}: {{ error }}
+  </div>
+  <div v-else p5 text-center text-secondary italic>
+    {{ $t('common.not_found') }}
+  </div>
+</template>