enhance(frontend): improve tips

4 files changed, 56 insertions, 8 deletions

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 5604f0226f..7e955f1529 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -60,9 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@drop.prevent.stop="onDrop"
 			@contextmenu.stop="onContextmenu"
 		>
-			<div v-if="!store.r.readDriveTip.value" style="padding: 8px;">
-				<MkInfo closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
-			</div>
+			<MkTip k="drive"><div v-html="i18n.ts.driveAboutTip"></div></MkTip>
 
 			<div :class="$style.folders">
 				<XFolder
@@ -135,7 +133,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed, TransitionGroup } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
-import MkInfo from './MkInfo.vue';
 import type { MenuItem } from '@/types/menu.js';
 import XNavFolder from '@/components/MkDrive.navFolder.vue';
 import XFolder from '@/components/MkDrive.folder.vue';
@@ -661,10 +658,6 @@ function onContextmenu(ev: MouseEvent) {
 	os.contextMenu(getMenu(), ev);
 }
 
-function closeTip() {
-	store.set('readDriveTip', true);
-}
-
 useGlobalEvent('driveFileCreated', (file) => {
 	if (file.folderId === (folder.value?.id ?? null)) {
 		filesPaginator.prepend(file);
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index fb27dcbf58..eb8026a480 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -19,6 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="[$style.overallProgress, canRetry ? $style.overallProgressError : null]" :style="{ '--op': `${overallProgress}%` }"></div>
 
 		<div class="_gaps_s _spacer">
+			<MkTip k="uploader">
+				{{ i18n.ts._uploader.tip }}
+			</MkTip>
+
 			<div class="_gaps_s">
 				<div
 					v-for="ctx in items"
diff --git a/packages/frontend/src/components/global/MkTip.vue b/packages/frontend/src/components/global/MkTip.vue
new file mode 100644
index 0000000000..384511a0ed
--- /dev/null
+++ b/packages/frontend/src/components/global/MkTip.vue
@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="!store.r.tips.value[props.k]" :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _gaps_s">
+	<div style="font-weight: bold;"><i class="ti ti-bulb"></i> {{ i18n.ts.tip }}:</div>
+	<div><slot></slot></div>
+	<MkButton primary rounded small @click="closeTip()"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { store } from '@/store.js';
+import MkButton from '@/components/MkButton.vue';
+
+const props = withDefaults(defineProps<{
+	k: keyof (typeof store['s']['tips']);
+	warn?: boolean;
+}>(), {
+	warn: false,
+});
+
+function closeTip() {
+	store.set('tips', {
+		...store.r.tips.value,
+		[props.k]: true,
+	});
+}
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 12px 14px;
+	font-size: 90%;
+	background: var(--MI_THEME-infoBg);
+	color: var(--MI_THEME-infoFg);
+	border-radius: var(--MI-radius);
+
+	&.warn {
+		background: var(--MI_THEME-infoWarnBg);
+		color: var(--MI_THEME-infoWarnFg);
+	}
+}
+
+</style>
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 9981772ae8..19766e8575 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -26,6 +26,7 @@ import MkStickyContainer from './global/MkStickyContainer.vue';
 import MkLazy from './global/MkLazy.vue';
 import MkResult from './global/MkResult.vue';
 import MkSystemIcon from './global/MkSystemIcon.vue';
+import MkTip from './global/MkTip.vue';
 import PageWithHeader from './global/PageWithHeader.vue';
 import PageWithAnimBg from './global/PageWithAnimBg.vue';
 import SearchMarker from './global/SearchMarker.vue';
@@ -65,6 +66,7 @@ export const components = {
 	MkLazy: MkLazy,
 	MkResult: MkResult,
 	MkSystemIcon: MkSystemIcon,
+	MkTip: MkTip,
 	PageWithHeader: PageWithHeader,
 	PageWithAnimBg: PageWithAnimBg,
 	SearchMarker: SearchMarker,
@@ -98,6 +100,7 @@ declare module '@vue/runtime-core' {
 		MkLazy: typeof MkLazy;
 		MkResult: typeof MkResult;
 		MkSystemIcon: typeof MkSystemIcon;
+		MkTip: typeof MkTip;
 		PageWithHeader: typeof PageWithHeader;
 		PageWithAnimBg: typeof PageWithAnimBg;
 		SearchMarker: typeof SearchMarker;