hippofish/packages/client/src/pages/explore.users.vue

4.8 KiB
<template>
	<MkSpacer :content-max="1200">
		<MkTab v-model="origin" style="margin-bottom: var(--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">
				<MkFolder class="_gap" persist-key="explore-pinned-users">
					<template #header
						><i
							class="ph-bookmark ph-bold ph-lg ph-fw"
							style="margin-right: 0.5em"
						></i
						>{{ i18n.ts.pinnedUsers }}</template
					>
					<XUserList :pagination="pinnedUsers" />
				</MkFolder>
				<MkFolder
					v-if="$i != null"
					class="_gap"
					persist-key="explore-popular-users"
				>
					<template #header
						><i
							class="ph-chart-line-up ph-bold ph-lg ph-fw"
							style="margin-right: 0.5em"
						></i
						>{{ i18n.ts.popularUsers }}</template
					>
					<XUserList :pagination="popularUsers" />
				</MkFolder>
				<MkFolder
					v-if="$i != null"
					class="_gap"
					persist-key="explore-recently-updated-users"
				>
					<template #header
						><i
							class="ph-activity ph-bold ph-lg ph-fw"
							style="margin-right: 0.5em"
						></i
						>{{ i18n.ts.recentlyUpdatedUsers }}</template
					>
					<XUserList :pagination="recentlyUpdatedUsers" />
				</MkFolder>
				<MkFolder
					v-if="$i != null"
					class="_gap"
					persist-key="explore-recently-registered-users"
				>
					<template #header
						><i
							class="ph-butterfly ph-bold ph-lg ph-fw"
							style="margin-right: 0.5em"
						></i
						>{{ i18n.ts.recentlyRegisteredUsers }}</template
					>
					<XUserList :pagination="recentlyRegisteredUsers" />
				</MkFolder>
			</template>
		</div>
		<div v-else>
			<MkFolder
				ref="tagsEl"
				:foldable="true"
				:expanded="false"
				class="_gap"
			>
				<template #header
					><i
						class="ph-compass ph-bold ph-lg ph-fw"
						style="margin-right: 0.5em"
					></i
					>{{ i18n.ts.popularTags }}</template
				>

				<div class="vxjfqztj">
					<MkA
						v-for="tag in tagsLocal"
						:key="'local:' + tag.tag"
						:to="`/tags/${tag.tag}`"
						class="local"
						>{{ tag.tag }}</MkA
					>
					<MkA
						v-for="tag in tagsRemote"
						:key="'remote:' + tag.tag"
						:to="`/tags/${tag.tag}`"
						>{{ tag.tag }}</MkA
					>
				</div>
			</MkFolder>

			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
				<template #header
					><i
						class="ph-hash ph-bold ph-lg ph-fw"
						style="margin-right: 0.5em"
					></i
					>{{ tag }}</template
				>
				<XUserList :pagination="tagUsers" />
			</MkFolder>

			<template v-if="tag == null && $i != null">
				<MkFolder class="_gap">
					<template #header
						><i
							class="ph-chart-line-up ph-bold ph-lg ph-fw"
							style="margin-right: 0.5em"
						></i
						>{{ i18n.ts.popularUsers }}</template
					>
					<XUserList :pagination="popularUsersF" />
				</MkFolder>
				<MkFolder class="_gap">
					<template #header
						><i
							class="ph-activity ph-bold ph-lg ph-fw"
							style="margin-right: 0.5em"
						></i
						>{{ i18n.ts.recentlyUpdatedUsers }}</template
					>
					<XUserList :pagination="recentlyUpdatedUsersF" />
				</MkFolder>
				<MkFolder class="_gap">
					<template #header
						><i
							class="ph-rocke-launch ph-bold ph-lg ph-fw"
							style="margin-right: 0.5em"
						></i
						>{{ i18n.ts.recentlyDiscoveredUsers }}</template
					>
					<XUserList :pagination="recentlyRegisteredUsersF" />
				</MkFolder>
			</template>
		</div>
	</MkSpacer>
</template>

<script lang="ts" setup>
import { computed, watch } from "vue";
import XUserList from "@/components/MkUserList.vue";
import MkFolder from "@/components/MkFolder.vue";
import MkTab from "@/components/MkTab.vue";
import number from "@/filters/number";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { $i } from "@/account";
import { instance } from "@/instance";

const props = defineProps<{
	tag?: string;
}>();

let origin = $ref("local");
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
let tagsLocal = $ref([]);
let tagsRemote = $ref([]);

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",
	},
};

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;
});
</script>

<style lang="scss" scoped>
.vxjfqztj {
	> * {
		margin-right: 16px;

		&.local {
			font-weight: bold;
		}
	}
}
</style>