From a1dd18e0c49d253791077891cd58320bb526f0c9 Mon Sep 17 00:00:00 2001
From: Leafus <leafus@pawkey.dev>
Date: Sun, 12 Oct 2025 14:11:14 +0200
Subject: [PATCH] feat: add back explore lol

---
 .../frontend/src/pages/explore.featured.vue   |  88 ++++++++++
 packages/frontend/src/pages/explore.roles.vue |  26 +++
 packages/frontend/src/pages/explore.users.vue | 151 ++++++++++++++++++
 packages/frontend/src/pages/explore.vue       |  62 +++++++
 packages/frontend/src/router.definition.ts    |   6 +-
 5 files changed, 332 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/pages/explore.featured.vue
 create mode 100644 packages/frontend/src/pages/explore.roles.vue
 create mode 100644 packages/frontend/src/pages/explore.users.vue
 create mode 100644 packages/frontend/src/pages/explore.vue

diff --git a/packages/frontend/src/pages/explore.featured.vue b/packages/frontend/src/pages/explore.featured.vue
new file mode 100644
index 0000000000..82badd40b3
--- /dev/null
+++ b/packages/frontend/src/pages/explore.featured.vue
@@ -0,0 +1,88 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_spacer" style="--MI_SPACER-w: 800px;">
+	<MkTab v-model="tab" style="margin-bottom: var(--MI-margin);">
+		<option value="notes">{{ i18n.ts.notes }}</option>
+		<option value="polls">{{ i18n.ts.poll }}</option>
+	</MkTab>
+	<MkNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/>
+	<div v-else-if="tab === 'polls'">
+		<template v-if="ltlAvailable || gtlAvailable">
+			<MkFoldableSection v-if="ltlAvailable" class="_margin">
+				<template #header><i class="ph-house ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.tsx.pollsOnLocal({ name: instance.name ?? host }) }}</template>
+				<MkNotes :pagination="paginationForPollsLocal" :disableAutoLoad="true"/>
+			</MkFoldableSection>
+
+			<MkFoldableSection v-if="gtlAvailable" class="_margin">
+				<template #header><i class="ph-globe ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pollsOnRemote }}</template>
+				<MkNotes :pagination="paginationForPollsRemote" :disableAutoLoad="true"/>
+			</MkFoldableSection>
+
+			<MkFoldableSection v-if="gtlAvailable" class="_margin">
+				<template #header><i class="ph-timer ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pollsExpired }}</template>
+				<MkNotes :pagination="paginationForPollsExpired" :disableAutoLoad="true"/>
+			</MkFoldableSection>
+		</template>
+		<template v-else>
+			<div v-if="$i"><i class="ti ti-alert-triangle"></i>{{ i18n.ts.trendingPollsDisabled }}</div>
+			<div v-else><i class="ti ti-alert-triangle"></i>{{ i18n.ts.trendingPollsDisabledLogIn }}</div>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { host } from '@@/js/config.js';
+import MkNotes from '@/components/MkNotes.vue';
+import MkTab from '@/components/MkTab.vue';
+import { i18n } from '@/i18n.js';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import { instance } from '@/instance.js';
+import { $i } from '@/i';
+
+const ltlAvailable = computed(() => $i?.policies.ltlAvailable ?? instance.policies.ltlAvailable);
+const gtlAvailable = computed(() => $i?.policies.gtlAvailable ?? instance.policies.gtlAvailable);
+
+const paginationForNotes = {
+	endpoint: 'notes/featured' as const,
+	limit: 10,
+};
+
+const paginationForPollsLocal = {
+	endpoint: 'notes/polls/recommendation' as const,
+	limit: 10,
+	offsetMode: true,
+	params: {
+		excludeChannels: true,
+		local: true,
+	},
+};
+
+const paginationForPollsRemote = {
+	endpoint: 'notes/polls/recommendation' as const,
+	limit: 10,
+	offsetMode: true,
+	params: {
+		excludeChannels: true,
+		local: false,
+	},
+};
+
+const paginationForPollsExpired = {
+	endpoint: 'notes/polls/recommendation' as const,
+	limit: 10,
+	offsetMode: true,
+	params: {
+		excludeChannels: true,
+		local: null,
+		expired: true,
+	},
+};
+
+const tab = ref('notes');
+</script>
diff --git a/packages/frontend/src/pages/explore.roles.vue b/packages/frontend/src/pages/explore.roles.vue
new file mode 100644
index 0000000000..7ee01610a7
--- /dev/null
+++ b/packages/frontend/src/pages/explore.roles.vue
@@ -0,0 +1,26 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_spacer" style="--MI_SPACER-w: 700px;">
+	<div class="_gaps_s">
+		<MkRolePreview v-for="role in roles" :key="role.id" :role="role" :forModeration="false"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkRolePreview from '@/components/MkRolePreview.vue';
+import { misskeyApi } from '@/utility/misskey-api.js';
+
+const roles = ref<Misskey.entities.Role[] | null>(null);
+
+misskeyApi('roles/list').then(res => {
+	roles.value = res.filter(x => x.target === 'manual').sort((a, b) => b.displayOrder - a.displayOrder);
+});
+</script>
+
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
new file mode 100644
index 0000000000..77fe21c33f
--- /dev/null
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -0,0 +1,151 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_spacer" style="--MI_SPACER-w: 1200px;">
+	<MkTab v-if="instance.federation !== 'none'" v-model="origin" style="margin-bottom: var(--MI-margin);">
+		<option value="local">{{ i18n.ts.local }}</option>
+		<option value="remote">{{ i18n.ts.remote }}</option>
+	</MkTab>
+	<div v-if="origin === 'local'">
+		<template v-if="tag == null">
+			<MkFoldableSection class="_margin" persistKey="explore-pinned-users">
+				<template #header><i class="ti ti-bookmark ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
+				<MkUserList :pagination="pinnedUsers"/>
+			</MkFoldableSection>
+			<MkFoldableSection class="_margin" persistKey="explore-popular-users">
+				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
+				<MkUserList :pagination="popularUsers"/>
+			</MkFoldableSection>
+			<MkFoldableSection class="_margin" persistKey="explore-recently-updated-users">
+				<template #header><i class="ph-chat-text ph-bold ph-lg ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+				<MkUserList :pagination="recentlyUpdatedUsers"/>
+			</MkFoldableSection>
+			<MkFoldableSection class="_margin" persistKey="explore-recently-registered-users">
+				<template #header><i class="ti ti-plus ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
+				<MkUserList :pagination="recentlyRegisteredUsers"/>
+			</MkFoldableSection>
+		</template>
+	</div>
+	<div v-else>
+		<MkFoldableSection ref="tagsEl" :foldable="true" :expanded="false" class="_margin">
+			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
+
+			<div>
+				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/user-tags/${tag.tag}`" style="margin-right: 16px; font-weight: bold;">{{ tag.tag }}</MkA>
+				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/user-tags/${tag.tag}`" style="margin-right: 16px;">{{ tag.tag }}</MkA>
+			</div>
+		</MkFoldableSection>
+
+		<MkFoldableSection v-if="tag != null" :key="`${tag}`" class="_margin">
+			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<MkUserList :pagination="tagUsers"/>
+		</MkFoldableSection>
+
+		<template v-if="tag == null">
+			<MkFoldableSection class="_margin">
+				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.tsx.popularUsersLocal({ name: instance.name ?? host }) }}</template>
+				<MkUserList :pagination="popularUsersLocalF"/>
+			</MkFoldableSection>
+			<MkFoldableSection class="_margin">
+				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsersGlobal }}</template>
+				<MkUserList :pagination="popularUsersF"/>
+			</MkFoldableSection>
+			<MkFoldableSection class="_margin">
+				<template #header><i class="ph-chat-text ph-bold ph-lg ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+				<MkUserList :pagination="recentlyUpdatedUsersF"/>
+			</MkFoldableSection>
+			<MkFoldableSection class="_margin">
+				<template #header><i class="ti ti-rocket ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
+				<MkUserList :pagination="recentlyRegisteredUsersF"/>
+			</MkFoldableSection>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref, useTemplateRef, computed } from 'vue';
+import * as Misskey from 'misskey-js';
+import { host } from '@@/js/config';
+import MkUserList from '@/components/MkUserList.vue';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkTab from '@/components/MkTab.vue';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+
+const props = defineProps<{
+	tag?: string | undefined;
+}>();
+
+const origin = ref('local');
+const tagsEl = useTemplateRef('tagsEl');
+const tagsLocal = ref<Misskey.entities.Hashtag[]>([]);
+const tagsRemote = ref<Misskey.entities.Hashtag[]>([]);
+
+watch(() => props.tag, () => {
+	if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
+});
+
+const tagUsers = computed(() => ({
+	endpoint: 'hashtags/users',
+	limit: 30,
+	params: {
+		tag: props.tag,
+		origin: 'combined',
+		sort: '+follower',
+	},
+} as const));
+
+const pinnedUsers = { endpoint: 'pinned-users', limit: 10, noPaging: true } as const;
+const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	state: 'alive',
+	origin: 'local',
+	sort: '+follower',
+} } as const;
+const recentlyUpdatedUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	origin: 'local',
+	sort: '+updatedAt',
+} } as const;
+const recentlyRegisteredUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	origin: 'local',
+	state: 'alive',
+	sort: '+createdAt',
+} } as const;
+const popularUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	state: 'alive',
+	origin: 'remote',
+	sort: '+follower',
+} } as const;
+const popularUsersLocalF = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	state: 'alive',
+	origin: 'remote',
+	sort: '+localFollower',
+} } as const;
+const recentlyUpdatedUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	origin: 'combined',
+	sort: '+updatedAt',
+} } as const;
+const recentlyRegisteredUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	origin: 'combined',
+	sort: '+createdAt',
+} } as const;
+
+misskeyApi('hashtags/list', {
+	sort: '+attachedLocalUsers',
+	attachedToLocalUserOnly: true,
+	limit: 30,
+}).then(tags => {
+	tagsLocal.value = tags;
+});
+misskeyApi('hashtags/list', {
+	sort: '+attachedRemoteUsers',
+	attachedToRemoteUserOnly: true,
+	limit: 30,
+}).then(tags => {
+	tagsRemote.value = tags;
+});
+</script>
diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue
new file mode 100644
index 0000000000..c4f6ddc33e
--- /dev/null
+++ b/packages/frontend/src/pages/explore.vue
@@ -0,0 +1,62 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
+	<div v-if="tab === 'featured'">
+		<XFeatured/>
+	</div>
+	<div v-else-if="tab === 'users'">
+		<XUsers/>
+	</div>
+	<div v-else-if="tab === 'roles'">
+		<XRoles/>
+	</div>
+</PageWithHeader>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref, useTemplateRef } from 'vue';
+import XFeatured from './explore.featured.vue';
+import XUsers from './explore.users.vue';
+import XRoles from './explore.roles.vue';
+import { definePage } from '@/page.js';
+import { i18n } from '@/i18n.js';
+
+const props = withDefaults(defineProps<{
+	tag?: string;
+	initialTab?: string;
+}>(), {
+	initialTab: 'featured',
+});
+
+const tab = ref(props.initialTab);
+const tagsEl = useTemplateRef('tagsEl');
+
+watch(() => props.tag, () => {
+	if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
+});
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => [{
+	key: 'featured',
+	icon: 'ti ti-bolt',
+	title: i18n.ts.featured,
+}, {
+	key: 'users',
+	icon: 'ti ti-users',
+	title: i18n.ts.users,
+}, {
+	key: 'roles',
+	icon: 'ti ti-badges',
+	title: i18n.ts.roles,
+}]);
+
+definePage(() => ({
+	title: i18n.ts.explore,
+	icon: 'ti ti-hash',
+}));
+</script>
diff --git a/packages/frontend/src/router.definition.ts b/packages/frontend/src/router.definition.ts
index a30635d0e7..8a95ec9e23 100644
--- a/packages/frontend/src/router.definition.ts
+++ b/packages/frontend/src/router.definition.ts
@@ -223,7 +223,11 @@ export const ROUTE_DEF = [{
 }, {
 	path: '/user-tags/:tag',
 	component: page(() => import('@/pages/user-tag.vue')),
-},{
+}, {
+	path: '/explore',
+	component: page(() => import('@/pages/explore.vue')),
+	hash: 'initialTab',
+}, {
 	path: '/following-feed',
 	component: page(() => import('@/pages/following-feed.vue')),
 	loginRequired: true,