feat: new TL layout, hot TL

locales/en-US.yml

@@ -1461,6 +1461,9 @@ _timelines:
   recommended: "Recommended"
   social: "Social"
   global: "Global"
+  hot: "Hot"
+  forYou: "For You"
+  discover: "Discover"
 _pages:
   newPage: "Create a new Page"
   editPage: "Edit this Page"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.2.0-dev33",
+	"version": "13.2.0-dev34",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/pages/explore.vue

@@ -12,10 +12,10 @@
 				@slide-change="onSlideChange"
 				>
 				<swiper-slide>
-					<XFeatured/>
+					<XUsers/>
 				</swiper-slide>
 				<swiper-slide>
-					<XUsers/>
+					<XFeatured/>
 				</swiper-slide>
 			</swiper>
 		</MkSpacer>

packages/client/src/pages/timeline.vue

@@ -40,16 +40,32 @@
 					@swiper="setSwiperRef"
 					@slide-change="onSlideChange"
 					>
-					<swiper-slide
+					<swiper-slide>
-						v-for="index in timelines"
+						<MkTab v-model="forYouTab" style="margin-bottom: var(--margin);">
-						:key="index"
+							<option v-if="isLocalTimelineAvailable">{{ i18n.ts._timelines.social }}</option>
-						:virtual-index="index"
+							<option>{{ i18n.ts._timelines.home }}</option>
-					>
+							<option v-if="isLocalTimelineAvailable">{{ i18n.ts._timelines.local }}</option>
+						</MkTab>
 						<XTimeline
 							ref="tl"
-							:key="src"
 							class="tl"
-							:src="src"
+							:src="forYouSrc"
+							:sound="true"
+							@queue="queueUpdated"
+						/>
+					</swiper-slide>
+					<swiper-slide>
+						<MkTab v-model="discoverTab" style="margin-bottom: var(--margin);">
+							<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
+							ref="tl"
+							class="tl"
+							:src="discoverSrc"
 							:sound="true"
 							@queue="queueUpdated"
 						/>
@@ -67,6 +83,7 @@ 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 { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -79,6 +96,9 @@ import { deviceKind } from '@/scripts/device-kind';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 
+let forYouTab = $ref('home');
+let discoverTab = $ref('hot');
+
 if (defaultStore.reactiveState.tutorial.value !== -1) {
 	os.popup(XTutorial, {}, {}, 'closed');
 }
@@ -94,19 +114,32 @@ const keymap = {
 	t: focus,
 };
 
-let timelines = ['home'];
+let timelines = ['forYou']
+
+if (isRecommendedTimelineAvailable || isGlobalTimelineAvailable) {
+	timelines.push('explore');
+}
+
+let forYouTimelines = ['home'];
+let discoverTimelines = ['hot'];
 
 if (isLocalTimelineAvailable) {
-	timelines.push('local');
+	forYouTimelines.push('local');
+	forYouTimelines.push('social');
 }
 if (isRecommendedTimelineAvailable) {
-	timelines.push('recommended');
+	discoverTimelines.push('recommended');
-}
-if (isLocalTimelineAvailable) {
-	timelines.push('social');
 }
 if (isGlobalTimelineAvailable) {
-	timelines.push('global');
+	discoverTimelines.push('global');
+}
+
+const hotPagination = {
+	endpoint: 'notes/featured' as const,
+	limit: 20,
+	params: {
+		origin: 'combined',
+	}
 }
 
 const MOBILE_THRESHOLD = 500;
@@ -131,15 +164,25 @@ const src = $computed({
 		syncSlide(timelines.indexOf(x));
 	},
 });
+const forYouSrc = $computed({
+	get: () => defaultStore.reactiveState.forYouTl.value.src,
+	set: (x) => saveForYouSrc(x),
+});
+const discoverSrc = $computed({
+	get: () => defaultStore.reactiveState.discoverTl.value.src,
+	set: (x) => saveDiscoverSrc(x),
+});
 
 watch($$(src), () => (queue = 0));
+watch($$(forYouSrc), () => (queue = 0));
+watch($$(discoverSrc), () => (queue = 0));
 
 function queueUpdated(q: number): void {
 	queue = q;
 }
 
 function top(): void {
-	scroll(rootEl, { top: 0 });
+	scroll(rootEl!, { top: 0 });
 }
 
 async function chooseList(ev: MouseEvent): Promise<void> {
@@ -177,21 +220,28 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
 }
 
 function saveSrc(
-	newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global',
+	newSrc: 'forYou' | 'discover',
 ): void {
 	defaultStore.set('tl', {
 		...defaultStore.state.tl,
 		src: newSrc,
 	});
 }
-
+function saveForYouSrc(
-async function timetravel(): Promise<void> {
+	newSrc: 'home' | 'local' | 'social',
-	const { canceled, result: date } = await os.inputDate({
+): void {
-		title: i18n.ts.date,
+	defaultStore.set('forYouTl', {
-	});
+		...defaultStore.state.forYouTl,
-	if (canceled) return;
+		src: newSrc
-
+	})
-	tlComponent.timetravel(date);
+}
+function saveDiscoverSrc(
+	newSrc: 'hot' | 'recommended' | 'global',
+): void {
+	defaultStore.set('discoverTl', {
+		...defaultStore.state.discoverTl,
+		src: newSrc
+	})
 }
 
 function focus(): void {
@@ -222,64 +272,22 @@ const headerActions = $computed(() => [
 
 const headerTabs = $computed(() => [
 	{
-		key: 'home',
+		key: 'forYou',
-		title: i18n.ts._timelines.home,
+		title: i18n.ts._timelines.forYou,
 		icon: 'ph-house ph-bold ph-lg',
-		iconOnly: true,
 	},
-	...(isLocalTimelineAvailable
-		? [
 	{
-				key: 'local',
+		key: 'discover',
-				title: i18n.ts._timelines.local,
+		title: i18n.ts._timelines.discover,
-				icon: 'ph-users ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
-		: []),
-	...(isRecommendedTimelineAvailable
-		? [
-			{
-				key: 'recommended',
-				title: i18n.ts._timelines.recommended,
-				icon: 'ph-thumbs-up ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
-		: []),
-	...(isLocalTimelineAvailable
-		? [
-			{
-				key: 'social',
-				title: i18n.ts._timelines.social,
-				icon: 'ph-handshake ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
-		: []),
-	...(isGlobalTimelineAvailable
-		? [
-			{
-				key: 'global',
-				title: i18n.ts._timelines.global,
 		icon: 'ph-planet ph-bold ph-lg',
-				iconOnly: true,
+	}
-			},
-		]
-		: []),
 ]);
 
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.timeline,
 		icon:
-			src === 'local'
+			src === 'discover'
-				? 'ph-users ph-bold ph-lg'
-				: src === 'social'
-					? 'ph-handshake ph-bold ph-lg'
-					: src === 'recommended'
-						? 'ph-thumbs-up ph-bold ph-lg'
-						: src === 'global'
 				? 'ph-planet ph-bold ph-lg'
 				: 'ph-house ph-bold ph-lg',
 	})),

packages/client/src/store.ts

@@ -125,11 +125,24 @@ export const defaultStore = markRaw(
 		tl: {
 			where: "deviceAccount",
 			default: {
-				src: "home" as "home" | "local" | "social" | "global",
+				src: "forYou" as "forYou" | "discover",
+				arg: null,
+			},
+		},
+		forYouTl: {
+			where: "deviceAccount",
+			default: {
+				src: "social" as "home" | "local" | "social",
+				arg: null,
+			},
+		},
+		discoverTl: {
+			where: "deviceAccount",
+			default: {
+				src: "hot" as "hot" | "recommended" | "global",
 				arg: null,
 			},
 		},
-
 		overridedDeviceKind: {
 			where: "device",
 			default: null as null | "smartphone" | "tablet" | "desktop",