enhance(frontend): add drive tip

5 files changed, 19 insertions, 1 deletions

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 97505a1605..1ee01d52f4 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5402,6 +5402,13 @@ export interface Locale extends ILocale {
      * 連合ジョブ
      */
     "federationJobs": string;
+    /**
+     * ドライブでは、過去にアップロードしたファイルの一覧が表示されます。<br>
+     * ノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。<br>
+     * <b>ファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。</b><br>
+     * フォルダを作って整理することもできます。
+     */
+    "driveAboutTip": string;
     "_chat": {
         /**
          * まだメッセージはありません
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 737e69a376..edb7914110 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1346,6 +1346,7 @@ settingsMigrating: "設定を移行しています。しばらくお待ちくだ
 readonly: "読み取り専用"
 goToDeck: "デッキへ戻る"
 federationJobs: "連合ジョブ"
+driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。<br>\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。<br>\n<b>ファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。</b><br>\nフォルダを作って整理することもできます。"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"
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,