fix, seperate

packages/client/src/pages/timeline.discover.vue

@@ -0,0 +1,61 @@
+<template>
+	<MkSpacer :content-max="800">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin);">
+			<option value="hot">{{ i18n.ts._timelines.hot }}</option>
+			<option v-if="isRecommendedTimelineAvailable" value="recommended">{{ i18n.ts._timelines.recommended }}</option>
+			<option v-if="isGlobalTimelineAvailable" value="global">{{ i18n.ts._timelines.global }}</option>
+		</MkTab>
+		<XNotes v-if="tab === 'hot'" :pagination="hotPagination"/>
+		<XTimeline
+			v-else-if="tab === 'recommended'"
+			ref="tl"
+			class="tl"
+			src="recommended"
+			:sound="true"
+		/>
+		<XTimeline
+			v-else-if="tab === 'global'"
+			ref="tl"
+			class="tl"
+			src="global"
+			:sound="true"
+		/>
+	</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import XNotes from '@/components/MkNotes.vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import MkTab from '@/components/MkTab.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { $i } from '@/account';
+
+const hotPagination = {
+	endpoint: 'notes/featured' as const,
+	limit: 20,
+	params: {
+		origin: 'combined',
+	}
+}
+
+const tab = $computed({
+	get: () => defaultStore.reactiveState.discoverTl.value.src,
+	set: (x) => saveSrc(x),
+});
+
+function saveSrc(
+	newSrc: 'hot' | 'recommended' | 'global',
+): void {
+	defaultStore.set('discoverTl', {
+		...defaultStore.state.discoverTl,
+		src: newSrc
+	})
+}
+
+const isRecommendedTimelineAvailable = !instance.disableRecommendedTimeline;
+const isGlobalTimelineAvailable =
+	!instance.disableGlobalTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+</script>

packages/client/src/pages/timeline.foryou.vue

@@ -0,0 +1,58 @@
+<template>
+	<MkSpacer :content-max="800">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin);">
+			<option v-if="isLocalTimelineAvailable" value="social">{{ i18n.ts._timelines.social }}</option>
+			<option value="home">{{ i18n.ts._timelines.home }}</option>
+			<option value="local" v-if="isLocalTimelineAvailable">{{ i18n.ts._timelines.local }}</option>
+		</MkTab>
+		<XTimeline
+			v-if="tab === 'social'"
+			ref="tl"
+			class="tl"
+			src="social"
+			:sound="true"
+		/>
+		<XTimeline
+			v-else-if="tab === 'home'"
+			ref="tl"
+			class="tl"
+			src="home"
+			:sound="true"
+		/>
+		<XTimeline
+			v-else-if="tab === 'local'"
+			ref="tl"
+			class="tl"
+			src="local"
+			:sound="true"
+		/>
+	</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+// import XNotes from '@/components/MkNotes.vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import MkTab from '@/components/MkTab.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { $i } from '@/account';
+
+const tab = $computed({
+	get: () => defaultStore.reactiveState.forYouTl.value.src,
+	set: (x) => saveSrc(x),
+});
+
+function saveSrc(
+	newSrc: 'home' | 'local' | 'social',
+): void {
+	defaultStore.set('forYouTl', {
+		...defaultStore.state.forYouTl,
+		src: newSrc
+	})
+}
+
+const isLocalTimelineAvailable =
+	!instance.disableLocalTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+</script>

packages/client/src/pages/timeline.vue

@@ -11,7 +11,7 @@
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
 			<XPostForm
-				v-if="$store.reactiveState.showFixedPostForm.value"
+				v-if="defaultStore.reactiveState.showFixedPostForm.value"
 				class="post-form _block"
 				fixed
 			/>
@@ -41,59 +41,10 @@
 					@slide-change="onSlideChange"
 					>
 					<swiper-slide>
-						<MkTab v-model="forYouTab" style="margin-bottom: var(--margin);">
+						<XForYou/>
-							<option v-if="isLocalTimelineAvailable">{{ i18n.ts._timelines.social }}</option>
-							<option>{{ i18n.ts._timelines.home }}</option>
-							<option v-if="isLocalTimelineAvailable">{{ i18n.ts._timelines.local }}</option>
-						</MkTab>
-						<XTimeline
-							v-if="forYouTab === 'social'"
-							ref="tl"
-							class="tl"
-							src="social"
-							:sound="true"
-							@queue="queueUpdated"
-						/>
-						<XTimeline
-							v-else-if="forYouTab === 'home'"
-							ref="tl"
-							class="tl"
-							src="home"
-							:sound="true"
-							@queue="queueUpdated"
-						/>
-						<XTimeline
-							v-else-if="forYouTab === 'local'"
-							ref="tl"
-							class="tl"
-							src="local"
-							:sound="true"
-							@queue="queueUpdated"
-						/>
 					</swiper-slide>
 					<swiper-slide>
-						<MkTab v-model="discoverTab" style="margin-bottom: var(--margin);">
+						<XDiscover/>
-							<option>{{ i18n.ts._timelines.hot }}</option>
-							<option v-if="isRecommendedTimelineAvailable">{{ i18n.ts._timelines.recommended }}</option>
-							<option v-if="isGlobalTimelineAvailable">{{ i18n.ts._timelines.global }}</option>
-						</MkTab>
-						<XNotes v-if="discoverTab === 'hot'" :pagination="hotPagination"/>
-						<XTimeline
-							v-else-if="discoverTab === 'recommended'"
-							ref="tl"
-							class="tl"
-							src="recommended"
-							:sound="true"
-							@queue="queueUpdated"
-						/>
-						<XTimeline
-							v-else-if="discoverTab === 'global'"
-							ref="tl"
-							class="tl"
-							src="global"
-							:sound="true"
-							@queue="queueUpdated"
-						/>
 					</swiper-slide>
 				</swiper>
 			</div>
@@ -103,20 +54,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref, onMounted } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import XTutorial from '@/components/MkTutorialDialog.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import MkTab from '@/components/MkTab.vue';
 import XPostForm from '@/components/MkPostForm.vue';
-import XNotes from '@/components/MkNotes.vue';
+import XForYou from './timeline.foryou.vue';
+import XDiscover from './timeline.discover.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import 'swiper/scss';
@@ -126,47 +74,7 @@ if (defaultStore.reactiveState.tutorial.value !== -1) {
 	os.popup(XTutorial, {}, {}, 'closed');
 }
 
-const isLocalTimelineAvailable =
+let timelines = ['forYou', 'discover'];
-	!instance.disableLocalTimeline ||
-	($i != null && ($i.isModerator || $i.isAdmin));
-const isRecommendedTimelineAvailable = !instance.disableRecommendedTimeline;
-const isGlobalTimelineAvailable =
-	!instance.disableGlobalTimeline ||
-	($i != null && ($i.isModerator || $i.isAdmin));
-const keymap = {
-	t: focus,
-};
-
-let timelines = ['forYou'];
-
-if (isRecommendedTimelineAvailable || isGlobalTimelineAvailable) {
-	timelines.push('explore');
-}
-
-let forYouTimelines = ['home'];
-let discoverTimelines = ['hot'];
-
-if (isLocalTimelineAvailable) {
-	forYouTimelines.push('local');
-	forYouTimelines.push('social');
-}
-if (isRecommendedTimelineAvailable) {
-	discoverTimelines.push('recommended');
-}
-if (isGlobalTimelineAvailable) {
-	discoverTimelines.push('global');
-}
-
-let tab = $ref(timelines[0]);
-watch($$(tab), () => (syncSlide(timelines.indexOf(tab))));
-
-const hotPagination = {
-	endpoint: 'notes/featured' as const,
-	limit: 20,
-	params: {
-		origin: 'combined',
-	}
-}
 
 const MOBILE_THRESHOLD = 500;
 
@@ -179,7 +87,6 @@ window.addEventListener('resize', () => {
 		(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
 });
 
-const tlComponent = $ref<InstanceType<typeof XTimeline>>();
 const rootEl = $ref<HTMLElement>();
 
 let queue = $ref(0);
@@ -190,22 +97,6 @@ const src = $computed({
 		syncSlide(timelines.indexOf(x));
 	},
 });
-const forYouTab = $computed({
-	get: () => defaultStore.reactiveState.forYouTl.value.src,
-	set: (x) => saveForYouSrc(x),
-});
-const discoverTab = $computed({
-	get: () => defaultStore.reactiveState.discoverTl.value.src,
-	set: (x) => saveDiscoverSrc(x),
-});
-
-watch($$(src), () => (queue = 0));
-watch($$(forYouTab), () => (queue = 0));
-watch($$(discoverTab), () => (queue = 0));
-
-function queueUpdated(q: number): void {
-	queue = q;
-}
 
 function top(): void {
 	scroll(rootEl!, { top: 0 });
@@ -253,14 +144,7 @@ function saveSrc(
 		src: newSrc,
 	});
 }
-function saveForYouSrc(
+
-	newSrc: 'home' | 'local' | 'social',
-): void {
-	defaultStore.set('forYouTl', {
-		...defaultStore.state.forYouTl,
-		src: newSrc
-	})
-}
 function saveDiscoverSrc(
 	newSrc: 'hot' | 'recommended' | 'global',
 ): void {
@@ -270,10 +154,6 @@ function saveDiscoverSrc(
 	})
 }
 
-function focus(): void {
-	tlComponent.focus();
-}
-
 const headerActions = $computed(() => [
 	{
 		icon: 'ph-list-bullets ph-bold ph-lg',