From f584c460e3e6e65cc1b126a1e2bb807e5c9b4427 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 19 Apr 2023 21:00:01 -0700
Subject: [PATCH] fix tag on explore

---
 packages/client/src/components/mfm.ts       |  6 +-
 packages/client/src/pages/explore.users.vue |  4 +-
 packages/client/src/pages/explore.vue       | 14 ----
 packages/client/src/pages/tag.vue           | 75 +++++++++++++++++++--
 4 files changed, 74 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 6f1b4256dd..3ded57e1a8 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -367,11 +367,7 @@ export default defineComponent({
 									MkA,
 									{
 										key: Math.random(),
-										to: this.isNote
-											? `/tags/${encodeURIComponent(token.props.hashtag)}`
-											: `/explore/tags/${encodeURIComponent(
-													token.props.hashtag,
-											  )}`,
+										to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
 										style: "color:var(--hashtag);",
 									},
 									`#${token.props.hashtag}`,
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 378801532c..73caf4b98c 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -80,14 +80,14 @@
 					<MkA
 						v-for="tag in tagsLocal"
 						:key="'local:' + tag.tag"
-						:to="`/explore/tags/${tag.tag}`"
+						:to="`/tags/${tag.tag}`"
 						class="local"
 						>{{ tag.tag }}</MkA
 					>
 					<MkA
 						v-for="tag in tagsRemote"
 						:key="'remote:' + tag.tag"
-						:to="`/explore/tags/${tag.tag}`"
+						:to="`/tags/${tag.tag}`"
 						>{{ tag.tag }}</MkA
 					>
 				</div>
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 0915d6ac85..e3c6774acf 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -39,7 +39,6 @@ import { Virtual } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import XFeatured from "./explore.featured.vue";
 import XUsers from "./explore.users.vue";
-import type MkFolder from "@/components/MkFolder.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
@@ -47,23 +46,10 @@ import { defaultStore } from "@/store";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
-const props = defineProps<{
-	tag?: string;
-}>();
-
 const tabs = ["featured", "users"];
 let tab = $ref(tabs[0]);
 watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
-let tagsEl = $ref<InstanceType<typeof MkFolder>>();
-
-watch(
-	() => props.tag,
-	() => {
-		if (tagsEl) tagsEl.toggleContent(props.tag == null);
-	}
-);
-
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 390b6a0baa..38ba1e106d 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -1,24 +1,58 @@
 <template>
 	<MkStickyContainer>
 		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
 		/></template>
 		<MkSpacer :content-max="800">
-			<XNotes class="_content" :pagination="pagination" />
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<XNotes ref="notes" :pagination="notesPagination" />
+				</swiper-slide>
+				<swiper-slide>
+					<XUserList
+						ref="users"
+						class="_gap"
+						:pagination="usersPagination"
+					/>
+				</swiper-slide>
+			</swiper>
 		</MkSpacer>
 	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
 import XNotes from "@/components/MkNotes.vue";
+import XUserList from "@/components/MkUserList.vue";
+import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const props = defineProps<{
 	tag: string;
 }>();
 
-const pagination = {
+const notesPagination = {
 	endpoint: "notes/search-by-tag" as const,
 	limit: 10,
 	params: computed(() => ({
@@ -26,10 +60,43 @@ const pagination = {
 	})),
 };
 
+const usersPagination = {
+	endpoint: "users/search" as const,
+	limit: 10,
+	params: computed(() => ({
+		query: `#${props.tag}`,
+		origin: "combined",
+	})),
+};
+
+const tabs = ["notes", "users"];
+let tab = $ref(tabs[0]);
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
+
+onMounted(() => {
+	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+});
+
+
 definePageMetadata(
 	computed(() => ({
 		title: props.tag,