From c99f4dc4ce757f34d15f4ce4e1748519e7b82453 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 28 Apr 2025 09:46:41 +0900
Subject: enhance(frontend): add drive tip

---
 packages/frontend/src/components/MkDrive.vue | 7 +++++++
 packages/frontend/src/components/MkInfo.vue  | 1 -
 packages/frontend/src/store.ts               | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'packages/frontend/src')

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 6270ac8314..a1f76ac563 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -45,6 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@contextmenu.stop="onContextmenu"
 	>
 		<div ref="contents">
+			<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
 			<div v-show="folders.length > 0" ref="foldersContainer" :class="$style.folders">
 				<XFolder
 					v-for="(f, i) in folders"
@@ -101,6 +102,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } 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';
@@ -113,6 +115,7 @@ import { uploadFile, uploads } from '@/utility/upload.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
 import { chooseFileFromPc } from '@/utility/select-file.js';
+import { store } from '@/store.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
@@ -709,6 +712,10 @@ function onContextmenu(ev: MouseEvent) {
 	os.contextMenu(getMenu(), ev);
 }
 
+function closeTip() {
+	store.set('readDriveTip', true);
+}
+
 onMounted(() => {
 	if (prefer.s.enableInfiniteScroll && loadMoreFiles.value) {
 		nextTick(() => {
diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue
index f114ec8a71..a59f6b8ccb 100644
--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@@ -39,7 +39,6 @@ function close() {
 	background: var(--MI_THEME-infoBg);
 	color: var(--MI_THEME-infoFg);
 	border-radius: var(--MI-radius);
-	white-space: pre-wrap;
 
 	&.warn {
 		background: var(--MI_THEME-infoWarnBg);
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 456006e7ff..5ff9c1c7fe 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -35,6 +35,10 @@ export const store = markRaw(new Pizzax('base', {
 		where: 'account',
 		default: false,
 	},
+	readDriveTip: {
+		where: 'account',
+		default: false,
+	},
 	memo: {
 		where: 'account',
 		default: null,
-- 
cgit v1.2.3-freya