summaryrefslogtreecommitdiff
path: root/packages/client/src/pages/explore.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/pages/explore.vue')
-rw-r--r--packages/client/src/pages/explore.vue219
1 files changed, 32 insertions, 187 deletions
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 26e201cd99..279960d139 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -1,91 +1,39 @@
<template>
<MkStickyContainer>
- <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
- <MkSpacer :content-max="1200">
- <div class="lznhrdub">
- <div v-if="tab === 'local'">
- <div v-if="instance && stats && tag == null" class="localfedi7 _block _isolated" :style="{ backgroundImage: instance.bannerUrl ? `url(${instance.bannerUrl})` : null }">
- <header><span>{{ $t('explore', { host: instance.name || 'Misskey' }) }}</span></header>
- <div><span>{{ $t('exploreUsersCount', { count: number(stats.originalUsersCount) }) }}</span></div>
- </div>
-
- <template v-if="tag == null">
- <MkFolder class="_gap" persist-key="explore-pinned-users">
- <template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
- <XUserList :pagination="pinnedUsers"/>
- </MkFolder>
- <MkFolder class="_gap" persist-key="explore-popular-users">
- <template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
- <XUserList :pagination="popularUsers"/>
- </MkFolder>
- <MkFolder class="_gap" persist-key="explore-recently-updated-users">
- <template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
- <XUserList :pagination="recentlyUpdatedUsers"/>
- </MkFolder>
- <MkFolder class="_gap" persist-key="explore-recently-registered-users">
- <template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
- <XUserList :pagination="recentlyRegisteredUsers"/>
- </MkFolder>
- </template>
- </div>
- <div v-else-if="tab === 'remote'">
- <div v-if="tag == null" class="localfedi7 _block _isolated" :style="{ backgroundImage: `url(/client-assets/fedi.jpg)` }">
- <header><span>{{ $ts.exploreFediverse }}</span></header>
- </div>
-
- <MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
- <template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
-
- <div class="vxjfqztj">
- <MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
- <MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
- </div>
- </MkFolder>
-
- <MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
- <template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
- <XUserList :pagination="tagUsers"/>
- </MkFolder>
-
- <template v-if="tag == null">
- <MkFolder class="_gap">
- <template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
- <XUserList :pagination="popularUsersF"/>
- </MkFolder>
- <MkFolder class="_gap">
- <template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
- <XUserList :pagination="recentlyUpdatedUsersF"/>
- </MkFolder>
- <MkFolder class="_gap">
- <template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
- <XUserList :pagination="recentlyRegisteredUsersF"/>
- </MkFolder>
- </template>
- </div>
- <div v-else-if="tab === 'search'">
- <div class="_isolated">
- <MkInput v-model="searchQuery" :debounce="true" type="search">
+ <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+ <div class="lznhrdub">
+ <div v-if="tab === 'featured'">
+ <XFeatured/>
+ </div>
+ <div v-else-if="tab === 'users'">
+ <XUsers/>
+ </div>
+ <div v-else-if="tab === 'search'">
+ <MkSpacer :content-max="1200">
+ <div>
+ <MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
<template #prefix><i class="fas fa-search"></i></template>
- <template #label>{{ $ts.searchUser }}</template>
+ <template #label>{{ i18n.ts.searchUser }}</template>
</MkInput>
- <MkRadios v-model="searchOrigin">
- <option value="combined">{{ $ts.all }}</option>
- <option value="local">{{ $ts.local }}</option>
- <option value="remote">{{ $ts.remote }}</option>
+ <MkRadios v-model="searchOrigin" class="_formBlock">
+ <option value="combined">{{ i18n.ts.all }}</option>
+ <option value="local">{{ i18n.ts.local }}</option>
+ <option value="remote">{{ i18n.ts.remote }}</option>
</MkRadios>
</div>
<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
- </div>
+ </MkSpacer>
</div>
- </MkSpacer>
+ </div>
</MkStickyContainer>
</template>
<script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue';
-import XUserList from '@/components/user-list.vue';
-import MkFolder from '@/components/ui/folder.vue';
+import { computed, watch } from 'vue';
+import XFeatured from './explore.featured.vue';
+import XUsers from './explore.users.vue';
+import MkFolder from '@/components/MkFolder.vue';
import MkInput from '@/components/form/input.vue';
import MkRadios from '@/components/form/radios.vue';
import number from '@/filters/number';
@@ -93,16 +41,14 @@ import * as os from '@/os';
import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n';
import { instance } from '@/instance';
+import XUserList from '@/components/MkUserList.vue';
const props = defineProps<{
tag?: string;
}>();
-let tab = $ref('local');
+let tab = $ref('featured');
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
-let tagsLocal = $ref([]);
-let tagsRemote = $ref([]);
-let stats = $ref(null);
let searchQuery = $ref(null);
let searchOrigin = $ref('combined');
@@ -110,44 +56,6 @@ watch(() => props.tag, () => {
if (tagsEl) tagsEl.toggleContent(props.tag == null);
});
-const tagUsers = $computed(() => ({
- endpoint: 'hashtags/users' as const,
- limit: 30,
- params: {
- tag: props.tag,
- origin: 'combined',
- sort: '+follower',
- },
-}));
-
-const pinnedUsers = { endpoint: 'pinned-users' };
-const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
- state: 'alive',
- origin: 'local',
- sort: '+follower',
-} };
-const recentlyUpdatedUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
- origin: 'local',
- sort: '+updatedAt',
-} };
-const recentlyRegisteredUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
- origin: 'local',
- state: 'alive',
- sort: '+createdAt',
-} };
-const popularUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
- state: 'alive',
- origin: 'remote',
- sort: '+follower',
-} };
-const recentlyUpdatedUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
- origin: 'combined',
- sort: '+updatedAt',
-} };
-const recentlyRegisteredUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
- origin: 'combined',
- sort: '+createdAt',
-} };
const searchPagination = {
endpoint: 'users/search' as const,
limit: 10,
@@ -157,86 +65,23 @@ const searchPagination = {
} : null),
};
-os.api('hashtags/list', {
- sort: '+attachedLocalUsers',
- attachedToLocalUserOnly: true,
- limit: 30,
-}).then(tags => {
- tagsLocal = tags;
-});
-os.api('hashtags/list', {
- sort: '+attachedRemoteUsers',
- attachedToRemoteUserOnly: true,
- limit: 30,
-}).then(tags => {
- tagsRemote = tags;
-});
-os.api('stats').then(_stats => {
- stats = _stats;
-});
-
const headerActions = $computed(() => []);
const headerTabs = $computed(() => [{
- active: tab === 'local',
- title: i18n.ts.local,
- onClick: () => { tab = 'local'; },
+ key: 'featured',
+ icon: 'fas fa-bolt',
+ title: i18n.ts.featured,
}, {
- active: tab === 'remote',
- title: i18n.ts.remote,
- onClick: () => { tab = 'remote'; },
+ key: 'users',
+ icon: 'fas fa-users',
+ title: i18n.ts.users,
}, {
- active: tab === 'search',
+ key: 'search',
title: i18n.ts.search,
- onClick: () => { tab = 'search'; },
}]);
definePageMetadata(computed(() => ({
title: i18n.ts.explore,
icon: 'fas fa-hashtag',
- bg: 'var(--bg)',
})));
</script>
-
-<style lang="scss" scoped>
-.localfedi7 {
- color: #fff;
- padding: 16px;
- height: 80px;
- background-position: 50%;
- background-size: cover;
- margin-bottom: var(--margin);
-
- > * {
- &:not(:last-child) {
- margin-bottom: 8px;
- }
-
- > span {
- display: inline-block;
- padding: 6px 8px;
- background: rgba(0, 0, 0, 0.7);
- }
- }
-
- > header {
- font-size: 20px;
- font-weight: bold;
- }
-
- > div {
- font-size: 14px;
- opacity: 0.8;
- }
-}
-
-.vxjfqztj {
- > * {
- margin-right: 16px;
-
- &.local {
- font-weight: bold;
- }
- }
-}
-</style>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-27 01:00:14 +0000