feat: more to explore (#360)

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>