packages/frontend-embed/@types/global.d.ts

@@ -10,6 +10,9 @@ declare const _VERSION_: string;
 declare const _ENV_: string;
 declare const _DEV_: boolean;
 declare const _PERF_PREFIX_: string;
+declare const _DATA_TRANSFER_DRIVE_FILE_: string;
+declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;
 
 // for dev-mode
 declare const _LANGS_FULL_: string[][];

packages/frontend-embed/eslint.config.js

@@ -30,6 +30,9 @@ export default [
 				_VERSION_: false,
 				_ENV_: false,
 				_PERF_PREFIX_: false,
+				_DATA_TRANSFER_DRIVE_FILE_: false,
+				_DATA_TRANSFER_DRIVE_FOLDER_: false,
+				_DATA_TRANSFER_DECK_COLUMN_: false,
 			},
 			parser,
 			parserOptions: {

packages/frontend-shared/@types/global.d.ts

@@ -11,6 +11,9 @@ declare const _VERSION_: string;
 declare const _ENV_: string;
 declare const _DEV_: boolean;
 declare const _PERF_PREFIX_: string;
+declare const _DATA_TRANSFER_DRIVE_FILE_: string;
+declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;
 
 // for dev-mode
 declare const _LANGS_FULL_: string[][];

packages/frontend-shared/eslint.config.js

@@ -35,6 +35,9 @@ export default [
 				_VERSION_: false,
 				_ENV_: false,
 				_PERF_PREFIX_: false,
+				_DATA_TRANSFER_DRIVE_FILE_: false,
+				_DATA_TRANSFER_DRIVE_FOLDER_: false,
+				_DATA_TRANSFER_DECK_COLUMN_: false,
 			},
 			parser,
 			parserOptions: {

packages/frontend/@types/global.d.ts

@@ -10,6 +10,9 @@ declare const _VERSION_: string;
 declare const _ENV_: string;
 declare const _DEV_: boolean;
 declare const _PERF_PREFIX_: string;
+declare const _DATA_TRANSFER_DRIVE_FILE_: string;
+declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;
 
 // for dev-mode
 declare const _LANGS_FULL_: string[][];

packages/frontend/eslint.config.js

@@ -30,6 +30,9 @@ export default [
 				_VERSION_: false,
 				_ENV_: false,
 				_PERF_PREFIX_: false,
+				_DATA_TRANSFER_DRIVE_FILE_: false,
+				_DATA_TRANSFER_DRIVE_FOLDER_: false,
+				_DATA_TRANSFER_DECK_COLUMN_: false,
 			},
 			parser,
 			parserOptions: {

packages/frontend/src/components/MkDrive.file.vue

@@ -48,7 +48,6 @@ import { $i } from '@/i.js';
 import { getDriveFileMenu } from '@/utility/get-drive-file-menu.js';
 import { deviceKind } from '@/utility/device-kind.js';
 import { useRouter } from '@/router.js';
-import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
 
 const router = useRouter();
 
@@ -64,7 +63,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
-	(ev: 'dragstart', dragEvent: DragEvent): void;
+	(ev: 'dragstart'): void;
 	(ev: 'dragend'): void;
 }>();
 
@@ -91,11 +90,11 @@ function onContextmenu(ev: MouseEvent) {
 function onDragstart(ev: DragEvent) {
 	if (ev.dataTransfer) {
 		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILE, JSON.stringify(props.file));
+		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
 	}
 	isDragging.value = true;
 
-	emit('dragstart', ev);
+	emit('dragstart');
 }
 
 function onDragend() {

packages/frontend/src/components/MkDrive.folder.vue

@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.draghover]: draghover }]"
 	draggable="true"
 	:title="title"
+	@click="onClick"
 	@contextmenu.stop="onContextmenu"
 	@mouseover="onMouseover"
 	@mouseout="onMouseout"
@@ -42,8 +43,6 @@ import { i18n } from '@/i18n.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { prefer } from '@/preferences.js';
-import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
-import { globalEvents } from '@/events.js';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -57,7 +56,10 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
 	(ev: 'unchose', v: Misskey.entities.DriveFolder): void;
+	(ev: 'move', v: Misskey.entities.DriveFolder): void;
 	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
+	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
+	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
 	(ev: 'dragstart'): void;
 	(ev: 'dragend'): void;
 }>();
@@ -76,6 +78,10 @@ function checkboxClicked() {
 	}
 }
 
+function onClick() {
+	emit('move', props.folder);
+}
+
 function onMouseover() {
 	hover.value = true;
 }
@@ -95,12 +101,10 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
+	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
-	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
-	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
 
-	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
+	if (isFile || isDriveFile || isDriveFolder) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -144,65 +148,48 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	{
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
+	if (driveFile != null && driveFile !== '') {
-		if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
-			const file = JSON.parse(driveFile);
+		emit('removeFile', file.id);
-			misskeyApi('drive/files/update', {
+		misskeyApi('drive/files/update', {
-				fileId: file.id,
+			fileId: file.id,
-				folderId: props.folder.id,
+			folderId: props.folder.id,
-			});
+		});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
-	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
-			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
-				folderId: props.folder.id,
-			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, props.folder);
-			});
-		}
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
-	{
+	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
+	if (driveFolder != null && driveFolder !== '') {
-		if (driveFolder != null && driveFolder !== '') {
+		const folder = JSON.parse(driveFolder);
-			const folder = JSON.parse(driveFolder);
 
-			// 移動先が自分自身ならreject
+		// 移動先が自分自身ならreject
-			if (folder.id === props.folder.id) return;
+		if (folder.id === props.folder.id) return;
 
-			misskeyApi('drive/folders/update', {
+		emit('removeFolder', folder.id);
-				folderId: folder.id,
+		misskeyApi('drive/folders/update', {
-				parentId: props.folder.id,
+			folderId: folder.id,
-			}).then(() => {
+			parentId: props.folder.id,
+		}).then(() => {
 			// noop
-			}).catch(err => {
+		}).catch(err => {
-				switch (err.code) {
+			switch (err.code) {
-					case 'RECURSIVE_NESTING':
+				case 'RECURSIVE_NESTING':
-						claimAchievement('driveFolderCircularReference');
+					claimAchievement('driveFolderCircularReference');
-						os.alert({
+					os.alert({
-							type: 'error',
+						type: 'error',
-							title: i18n.ts.unableToProcess,
+						title: i18n.ts.unableToProcess,
-							text: i18n.ts.circularReferenceFolder,
+						text: i18n.ts.circularReferenceFolder,
-						});
+					});
-						break;
+					break;
-					default:
+				default:
-						os.alert({
+					os.alert({
-							type: 'error',
+						type: 'error',
-							text: i18n.ts.somethingHappened,
+						text: i18n.ts.somethingHappened,
-						});
+					});
-				}
+			}
-			});
+		});
-		}
 	}
 	//#endregion
 }
@@ -211,7 +198,7 @@ function onDragstart(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FOLDER, JSON.stringify(props.folder));
+	ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
 	isDragging.value = true;
 
 	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
@@ -224,6 +211,10 @@ function onDragend() {
 	emit('dragend');
 }
 
+function go() {
+	emit('move', props.folder);
+}
+
 function rename() {
 	os.inputText({
 		title: i18n.ts.renameFolder,

packages/frontend/src/components/MkDrive.navFolder.vue

@@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div
 	:class="[$style.root, { [$style.draghover]: draghover }]"
+	@click="onClick"
 	@dragover.prevent.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
@@ -21,8 +22,6 @@ import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
-import { globalEvents } from '@/events.js';
 
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
@@ -30,11 +29,27 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
+	(ev: 'move', v?: Misskey.entities.DriveFolder): void;
 	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
+	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
+	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
 }>();
 
+const hover = ref(false);
 const draghover = ref(false);
 
+function onClick() {
+	emit('move', props.folder);
+}
+
+function onMouseover() {
+	hover.value = true;
+}
+
+function onMouseout() {
+	hover.value = false;
+}
+
 function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
@@ -44,12 +59,10 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
+	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
-	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
-	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
 
-	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
+	if (isFile || isDriveFile || isDriveFolder) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -95,45 +108,28 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	{
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
+	if (driveFile != null && driveFile !== '') {
-		if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
-			const file = JSON.parse(driveFile);
+		emit('removeFile', file.id);
-			misskeyApi('drive/files/update', {
+		misskeyApi('drive/files/update', {
-				fileId: file.id,
+			fileId: file.id,
-				folderId: props.folder ? props.folder.id : null,
+			folderId: props.folder ? props.folder.id : null,
-			});
+		});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
-	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
-			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
-				folderId: props.folder ? props.folder.id : null,
-			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, props.folder ?? null);
-			});
-		}
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
-	{
+	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
+	if (driveFolder != null && driveFolder !== '') {
-		if (driveFolder != null && driveFolder !== '') {
+		const folder = JSON.parse(driveFolder);
-			const folder = JSON.parse(driveFolder);
+		// 移動先が自分自身ならreject
-			// 移動先が自分自身ならreject
+		if (props.folder && folder.id === props.folder.id) return;
-			if (props.folder && folder.id === props.folder.id) return;
+		emit('removeFolder', folder.id);
-			misskeyApi('drive/folders/update', {
+		misskeyApi('drive/folders/update', {
-				folderId: folder.id,
+			folderId: folder.id,
-				parentId: props.folder ? props.folder.id : null,
+			parentId: props.folder ? props.folder.id : null,
-			});
+		});
-		}
 	}
 	//#endregion
 }

packages/frontend/src/components/MkDrive.vue

@@ -11,8 +11,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<XNavFolder
 					:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
 					:parentFolder="folder"
-					@click="cd(null)"
+					@move="move"
 					@upload="upload"
+					@removeFile="removeFile"
+					@removeFolder="removeFolder"
 				/>
 				<template v-for="f in hierarchyFolders">
 					<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -20,8 +22,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:folder="f"
 						:parentFolder="folder"
 						:class="[$style.navPathItem]"
-						@click="cd(f)"
+						@move="move"
 						@upload="upload"
+						@removeFile="removeFile"
+						@removeFolder="removeFolder"
 					/>
 				</template>
 				<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -42,10 +46,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkButton>
 			</template>
 			<template v-else>
-				<MkButton v-if="!selectedFolders.some(f => f.id === folder!.id)" @click="selectedFolders.push(folder)">
+				<MkButton v-if="!selectedFolders.some(f => f.id === folder.id)" @click="selectedFolders.push(folder)">
 					<i class="ti ti-square"></i> {{ i18n.ts.selectThisFolder }}
 				</MkButton>
-				<MkButton v-else @click="selectedFolders = selectedFolders.filter(f => f.id !== folder!.id)">
+				<MkButton v-else @click="selectedFolders = selectedFolders.filter(f => f.id !== folder.id)">
 					<i class="ti ti-checkbox"></i> {{ i18n.ts.unselectThisFolder }}
 				</MkButton>
 			</template>
@@ -73,8 +77,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:isSelected="selectedFolders.some(x => x.id === f.id)"
 						@chosen="chooseFolder"
 						@unchose="unchoseFolder"
-						@click="cd(f)"
+						@move="move"
 						@upload="upload"
+						@removeFile="removeFile"
+						@removeFolder="removeFolder"
 						@dragstart="isDragSource = true"
 						@dragend="isDragSource = false"
 					/>
@@ -99,7 +105,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:selectMode="select === 'file' || isEditMode"
 							:isSelected="selectedFiles.some(x => x.id === file.id)"
 							@chosen="onChooseFile"
-							@dragstart="onFileDragstart(file, $event)"
+							@dragstart="isDragSource = true"
 							@dragend="isDragSource = false"
 						/>
 					</div>
@@ -146,7 +152,6 @@ import { store } from '@/store.js';
 import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
 import { usePagination } from '@/composables/use-pagination.js';
 import { globalEvents, useGlobalEvent } from '@/events.js';
-import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER } from '@/consts.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@@ -240,24 +245,7 @@ async function initialize() {
 }
 
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
-	if (file.folderId === (folder.value?.id ?? null)) {
+	addFile(file, true);
-		filesPaginator.prepend(file);
-	}
-}
-
-function onFileDragstart(file: Misskey.entities.DriveFile, ev: DragEvent) {
-	if (isEditMode.value) {
-		if (!selectedFiles.value.some(f => f.id === file.id)) {
-			selectedFiles.value.push(file);
-		}
-
-		if (ev.dataTransfer) {
-			ev.dataTransfer.effectAllowed = 'move';
-			ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify(selectedFiles.value));
-		}
-	}
-
-	isDragSource.value = true;
 }
 
 function onDragover(ev: DragEvent) {
@@ -271,8 +259,8 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
+	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 	if (isFile || isDriveFile || isDriveFolder) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
@@ -319,119 +307,102 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	{
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
+	if (driveFile != null && driveFile !== '') {
-		if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
-			const file = JSON.parse(driveFile);
+		if (filesPaginator.items.value.some(f => f.id === file.id)) return;
-			if (filesPaginator.items.value.some(f => f.id === file.id)) return;
+		removeFile(file.id);
-			misskeyApi('drive/files/update', {
+		misskeyApi('drive/files/update', {
-				fileId: file.id,
+			fileId: file.id,
-				folderId: folder.value ? folder.value.id : null,
+			folderId: folder.value ? folder.value.id : null,
-			});
+		});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
-	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
-			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
-				folderId: folder.value ? folder.value.id : null,
-			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, folder.value);
-			});
-		}
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
-	{
+	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
+	if (driveFolder != null && driveFolder !== '') {
-		if (driveFolder != null && driveFolder !== '') {
+		const droppedFolder = JSON.parse(driveFolder);
-			const droppedFolder = JSON.parse(driveFolder);
 
-			// 移動先が自分自身ならreject
+		// 移動先が自分自身ならreject
-			if (folder.value && droppedFolder.id === folder.value.id) return false;
+		if (folder.value && droppedFolder.id === folder.value.id) return false;
-			if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
+		if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
-			misskeyApi('drive/folders/update', {
+		removeFolder(droppedFolder.id);
-				folderId: droppedFolder.id,
+		misskeyApi('drive/folders/update', {
-				parentId: folder.value ? folder.value.id : null,
+			folderId: droppedFolder.id,
-			}).then(() => {
+			parentId: folder.value ? folder.value.id : null,
+		}).then(() => {
 			// noop
-			}).catch(err => {
+		}).catch(err => {
-				switch (err.code) {
+			switch (err.code) {
-					case 'RECURSIVE_NESTING':
+				case 'RECURSIVE_NESTING':
-						claimAchievement('driveFolderCircularReference');
+					claimAchievement('driveFolderCircularReference');
-						os.alert({
+					os.alert({
-							type: 'error',
+						type: 'error',
-							title: i18n.ts.unableToProcess,
+						title: i18n.ts.unableToProcess,
-							text: i18n.ts.circularReferenceFolder,
+						text: i18n.ts.circularReferenceFolder,
-						});
+					});
-						break;
+					break;
-					default:
+				default:
-						os.alert({
+					os.alert({
-							type: 'error',
+						type: 'error',
-							text: i18n.ts.somethingHappened,
+						text: i18n.ts.somethingHappened,
-						});
+					});
-				}
+			}
-			});
+		});
-		}
 	}
 	//#endregion
 }
 
-async function urlUpload() {
+function urlUpload() {
-	const { canceled, result: url } = await os.inputText({
+	os.inputText({
 		title: i18n.ts.uploadFromUrl,
 		type: 'url',
 		placeholder: i18n.ts.uploadFromUrlDescription,
-	});
+	}).then(({ canceled, result: url }) => {
-	if (canceled || !url) return;
+		if (canceled || !url) return;
+		misskeyApi('drive/files/upload-from-url', {
+			url: url,
+			folderId: folder.value ? folder.value.id : undefined,
+		});
 
-	await os.apiWithDialog('drive/files/upload-from-url', {
+		os.alert({
-		url: url,
+			title: i18n.ts.uploadFromUrlRequested,
-		folderId: folder.value ? folder.value.id : undefined,
+			text: i18n.ts.uploadFromUrlMayTakeTime,
-	});
+		});
-
-	os.alert({
-		title: i18n.ts.uploadFromUrlRequested,
-		text: i18n.ts.uploadFromUrlMayTakeTime,
 	});
 }
 
-async function createFolder() {
+function createFolder() {
-	const { canceled, result: name } = await os.inputText({
+	os.inputText({
 		title: i18n.ts.createFolder,
 		placeholder: i18n.ts.folderName,
+	}).then(({ canceled, result: name }) => {
+		if (canceled || name == null) return;
+		misskeyApi('drive/folders/create', {
+			name: name,
+			parentId: folder.value ? folder.value.id : undefined,
+		}).then(createdFolder => {
+			addFolder(createdFolder, true);
+		});
 	});
-	if (canceled || name == null) return;
-
-	const createdFolder = await os.apiWithDialog('drive/folders/create', {
-		name: name,
-		parentId: folder.value ? folder.value.id : undefined,
-	});
-
-	foldersPaginator.prepend(createdFolder);
 }
 
-async function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
+function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
-	const { canceled, result: name } = await os.inputText({
+	os.inputText({
 		title: i18n.ts.renameFolder,
 		placeholder: i18n.ts.inputNewFolderName,
 		default: folderToRename.name,
+	}).then(({ canceled, result: name }) => {
+		if (canceled) return;
+		misskeyApi('drive/folders/update', {
+			folderId: folderToRename.id,
+			name: name,
+		}).then(updatedFolder => {
+			// FIXME: 画面を更新するために自分自身に移動
+			move(updatedFolder);
+		});
 	});
-	if (canceled) return;
-
-	const updatedFolder = await os.apiWithDialog('drive/folders/update', {
-		folderId: folderToRename.id,
-		name: name,
-	});
-
-	// FIXME: 画面を更新するために自分自身に移動
-	cd(updatedFolder);
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
@@ -439,7 +410,7 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
 		folderId: folderToDelete.id,
 	}).then(() => {
 		// 削除時に親フォルダに移動
-		cd(folderToDelete.parentId);
+		move(folderToDelete.parentId);
 	}).catch(err => {
 		switch (err.id) {
 			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
@@ -460,9 +431,7 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
 
 function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null, keepOriginal?: boolean) {
 	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal).then(res => {
-		if (res.folderId === (folder.value?.id ?? null)) {
+		addFile(res, true);
-			filesPaginator.prepend(res);
-		}
 	});
 }
 
@@ -514,7 +483,7 @@ function unchoseFolder(folderToUnchose: Misskey.entities.DriveFolder) {
 	selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToUnchose.id);
 }
 
-function cd(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder['id' | 'parentId']) {
+function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder['id' | 'parentId']) {
 	if (!target) {
 		goRoot();
 		return;
@@ -555,6 +524,67 @@ async function moveFilesBulk() {
 	globalEvents.emit('driveFilesMoved', selectedFiles.value, toFolder[0]);
 }
 
+function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
+	const current = folder.value ? folder.value.id : null;
+	if (current !== folderToAdd.parentId) return;
+
+	if (foldersPaginator.items.value.some(f => f.id === folderToAdd.id)) {
+		const exist = foldersPaginator.items.value.map(f => f.id).indexOf(folderToAdd.id);
+		foldersPaginator.items.value[exist] = folderToAdd;
+		return;
+	}
+
+	if (unshift) {
+		foldersPaginator.items.value.unshift(folderToAdd);
+	} else {
+		foldersPaginator.items.value.push(folderToAdd);
+	}
+}
+
+function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
+	const current = folder.value ? folder.value.id : null;
+	if (current !== fileToAdd.folderId) return;
+
+	if (filesPaginator.items.value.some(f => f.id === fileToAdd.id)) {
+		const exist = filesPaginator.items.value.map(f => f.id).indexOf(fileToAdd.id);
+		filesPaginator.items.value[exist] = fileToAdd;
+		return;
+	}
+
+	if (unshift) {
+		filesPaginator.items.value.unshift(fileToAdd);
+	} else {
+		filesPaginator.items.value.push(fileToAdd);
+	}
+}
+
+function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
+	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
+	foldersPaginator.items.value = foldersPaginator.items.value.filter(f => f.id !== folderIdToRemove);
+}
+
+function removeFile(file: Misskey.entities.DriveFile | string) {
+	const fileId = typeof file === 'object' ? file.id : file;
+	filesPaginator.items.value = filesPaginator.items.value.filter(f => f.id !== fileId);
+}
+
+function appendFile(file: Misskey.entities.DriveFile) {
+	addFile(file);
+}
+
+function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
+	addFolder(folderToAppend);
+}
+
+/*
+function prependFile(file: Misskey.entities.DriveFile) {
+	addFile(file, true);
+}
+
+function prependFolder(folderToPrepend: Misskey.entities.DriveFolder) {
+	addFolder(folderToPrepend, true);
+}
+*/
 function goRoot() {
 	// 既にrootにいるなら何もしない
 	if (folder.value == null) return;
@@ -668,12 +698,7 @@ function closeTip() {
 }
 
 useGlobalEvent('driveFilesMoved', (files, to) => {
-	for (const f of files) {
+	// TODO
-		filesPaginator.removeItem(f.id);
-	}
-	if ((to?.id ?? null) === (folder.value?.id ?? null)) {
-		filesPaginator.unshiftItems(files);
-	}
 });
 
 let connection: Misskey.ChannelConnection<Misskey.Channels['drive']> | null = null;
@@ -685,7 +710,7 @@ onMounted(() => {
 	}
 
 	if (props.initialFolder) {
-		cd(props.initialFolder);
+		move(props.initialFolder);
 	} else {
 		initialize();
 	}

packages/frontend/src/components/MkPostForm.vue

@@ -138,7 +138,6 @@ import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import { globalEvents } from '@/events.js';
-import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
 
 const $i = ensureSignin();
 
@@ -702,7 +701,7 @@ async function onPaste(ev: ClipboardEvent) {
 function onDragover(ev) {
 	if (!ev.dataTransfer.items[0]) return;
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
 		draghover.value = true;
@@ -744,7 +743,7 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILE);
+	const driveFile = ev.dataTransfer?.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		files.value.push(file);

packages/frontend/src/consts.ts

@@ -1,10 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-export const DATA_TRANSFER_DRIVE_FILE = 'misskey-drive-file';
-export const DATA_TRANSFER_DRIVE_FILES = 'misskey-drive-files';
-export const DATA_TRANSFER_DRIVE_FOLDER = 'misskey-drive-folder';
-export const DATA_TRANSFER_DRIVE_FOLDERS = 'misskey-drive-folders';
-export const DATA_TRANSFER_DECK_COLUMN = 'misskey-deck-column';

packages/frontend/src/pages/chat/room.form.vue

@@ -47,7 +47,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { prefer } from '@/preferences.js';
 import { Autocomplete } from '@/utility/autocomplete.js';
 import { emojiPicker } from '@/utility/emoji-picker.js';
-import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -102,7 +101,7 @@ function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
 		switch (ev.dataTransfer.effectAllowed) {
@@ -142,7 +141,7 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== '') {
 		file.value = JSON.parse(driveFile);
 		ev.preventDefault();

packages/frontend/src/ui/deck/column.vue

@@ -51,7 +51,6 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
-import { DATA_TRANSFER_DECK_COLUMN } from '@/consts.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
@@ -263,7 +262,7 @@ function goTop() {
 
 function onDragstart(ev) {
 	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(DATA_TRANSFER_DECK_COLUMN, props.column.id);
+	ev.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id);
 
 	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
 	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
@@ -282,7 +281,7 @@ function onDragover(ev) {
 		// 自分自身にはドロップさせない
 		ev.dataTransfer.dropEffect = 'none';
 	} else {
-		const isDeckColumn = ev.dataTransfer.types[0] === DATA_TRANSFER_DECK_COLUMN;
+		const isDeckColumn = ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_;
 
 		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
 
@@ -298,7 +297,7 @@ function onDrop(ev) {
 	draghover.value = false;
 	os.deckGlobalEvents.emit('column.dragEnd');
 
-	const id = ev.dataTransfer.getData(DATA_TRANSFER_DECK_COLUMN);
+	const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
 	if (id != null && id !== '') {
 		swapColumn(props.column.id, id);
 	}

packages/frontend/vite.config.ts

@@ -148,6 +148,9 @@ export function getConfig(): UserConfig {
 			_ENV_: JSON.stringify(process.env.NODE_ENV),
 			_DEV_: process.env.NODE_ENV !== 'production',
 			_PERF_PREFIX_: JSON.stringify('Misskey:'),
+			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
+			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
+			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
 			__VUE_OPTIONS_API__: true,
 			__VUE_PROD_DEVTOOLS__: false,
 		},