Add timeline hints

packages/client/src/components/MkInfo.vue

@@ -1,19 +1,34 @@
 <template>
-	<div class="info" :class="{ warn, card }">
+	<div v-if="visible" class="info" :class="{ warn, card }">
 		<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
 		<i v-else class="ph-bold ph-lg" :class="icon ? `ph-${icon}` : 'ph-info'"></i>
 		<slot></slot>
+		<button class="_button close" @click.stop="close">
+			<i class="ph-x ph-bold ph-lg"></i>
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
+import { ref } from "vue";
+
+const visible = ref(true);
 
 defineProps<{
 	icon?: string;
 	warn?: boolean;
 	card?: boolean;
 }>();
+
+const emit = defineEmits<{
+	(ev: "close"): void;
+}>();
+
+function close() {
+	visible.value = false;
+	emit("close");
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -54,5 +69,9 @@ defineProps<{
 	> i {
 		margin-right: 4px;
 	}
+	> .close {
+		margin-left: auto;
+		float: right;
+	}
 }
 </style>

packages/client/src/components/MkTimeline.vue

@@ -1,4 +1,11 @@
 <template>
+	<MkInfo v-if="tlHint && !tlHintClosed" class="_gap" @close="closeHint"> 
+		<I18n
+			:src="tlHint"
+		>
+			<template #icon></template>
+		</I18n>
+	</MkInfo>
 	<XNotes
 		ref="tlComponent"
 		:no-gap="!$store.state.showGapBetweenNotesInTimeline"
@@ -10,10 +17,13 @@
 <script lang="ts" setup>
 import { ref, computed, provide, onUnmounted } from "vue";
 import XNotes from "@/components/MkNotes.vue";
+import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import * as sound from "@/scripts/sound";
 import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	src: string;
@@ -64,6 +74,9 @@ let query;
 let connection;
 let connection2;
 
+let tlHint;
+let tlHintClosed;
+
 if (props.src === "antenna") {
 	endpoint = "antennas/notes";
 	query = {
@@ -81,22 +94,37 @@ if (props.src === "antenna") {
 	connection2 = stream.useChannel("main");
 	connection2.on("follow", onChangeFollowing);
 	connection2.on("unfollow", onChangeFollowing);
+
+	tlHint = i18n.ts._tutorial.step5_3;
+	tlHintClosed = defaultStore.state.tlHomeHintClosed;
 } else if (props.src === "local") {
 	endpoint = "notes/local-timeline";
 	connection = stream.useChannel("localTimeline");
 	connection.on("note", prepend);
+
+	tlHint = i18n.ts._tutorial.step5_4;
+	tlHintClosed = defaultStore.state.tlLocalHintClosed;
 } else if (props.src === "recommended") {
 	endpoint = "notes/recommended-timeline";
 	connection = stream.useChannel("recommendedTimeline");
 	connection.on("note", prepend);
+
+	tlHint = i18n.ts._tutorial.step5_6;
+	tlHintClosed = defaultStore.state.tlRecommendedHintClosed;
 } else if (props.src === "social") {
 	endpoint = "notes/hybrid-timeline";
 	connection = stream.useChannel("hybridTimeline");
 	connection.on("note", prepend);
+
+	tlHint = i18n.ts._tutorial.step5_5;
+	tlHintClosed = defaultStore.state.tlSocialHintClosed;
 } else if (props.src === "global") {
 	endpoint = "notes/global-timeline";
 	connection = stream.useChannel("globalTimeline");
 	connection.on("note", prepend);
+
+	tlHint = i18n.ts._tutorial.step5_7;
+	tlHintClosed = defaultStore.state.tlGlobalHintClosed;
 } else if (props.src === "mentions") {
 	endpoint = "notes/mentions";
 	connection = stream.useChannel("main");
@@ -135,6 +163,26 @@ if (props.src === "antenna") {
 	connection.on("note", prepend);
 }
 
+function closeHint() {
+	switch (props.src) {
+		case 'home':
+			defaultStore.set("tlHomeHintClosed", true);
+			break;
+		case 'local':
+			defaultStore.set("tlLocalHintClosed", true);
+			break;
+		case 'recommended':
+			defaultStore.set("tlRecommendedHintClosed", true);
+			break;
+		case 'social':
+			defaultStore.set("tlSocialHintClosed", true);
+			break;
+		case 'global':
+			defaultStore.set("tlGlobalHintClosed", true);
+			break;
+	}
+}
+
 const pagination = {
 	endpoint: endpoint,
 	limit: 10,

packages/client/src/store.ts

@@ -26,6 +26,26 @@ export const defaultStore = markRaw(
 			where: "account",
 			default: 0,
 		},
+		tlHomeHintClosed: {
+			where: "device",
+			default: false,
+		},
+		tlLocalHintClosed: {
+			where: "device",
+			default: false,
+		},
+		tlRecommendedHintClosed: {
+			where: "device",
+			default: false,
+		},
+		tlSocialHintClosed: {
+			where: "device",
+			default: false,
+		},
+		tlGlobalHintClosed: {
+			where: "device",
+			default: false,
+		},
 		keepCw: {
 			where: "account",
 			default: true,