From a7339c7b7b1b4ac299addac7f590dd12f0c4a670 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 28 Mar 2025 10:12:18 +0900
Subject: [PATCH 01/62] wip

---
 packages/backend/src/core/DriveService.ts     | 17 +++++++-
 .../backend/src/server/api/endpoint-list.ts   |  1 +
 .../api/endpoints/drive/files/move-bulk.ts    | 43 +++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts

diff --git a/packages/backend/src/core/DriveService.ts b/packages/backend/src/core/DriveService.ts
index 1550fe3d3c..097dfaea87 100644
--- a/packages/backend/src/core/DriveService.ts
+++ b/packages/backend/src/core/DriveService.ts
@@ -8,7 +8,7 @@ import * as fs from 'node:fs';
 import { Inject, Injectable } from '@nestjs/common';
 import sharp from 'sharp';
 import { sharpBmp } from '@misskey-dev/sharp-read-bmp';
-import { IsNull } from 'typeorm';
+import { In, IsNull } from 'typeorm';
 import { DeleteObjectCommandInput, PutObjectCommandInput, NoSuchKey } from '@aws-sdk/client-s3';
 import { DI } from '@/di-symbols.js';
 import type { DriveFilesRepository, UsersRepository, DriveFoldersRepository, UserProfilesRepository, MiMeta } from '@/models/_.js';
@@ -713,6 +713,21 @@ export class DriveService {
 		return fileObj;
 	}
 
+	@bindThis
+	public async moveFiles(fileIds: MiDriveFile['id'][], folderId: MiDriveFolder['id'] | null, userId: MiUser['id']) {
+		const folder = folderId ? await this.driveFoldersRepository.findOneByOrFail({
+			id: folderId,
+			userId: userId,
+		}) : null;
+
+		await this.driveFilesRepository.update({
+			id: In(fileIds),
+			userId: userId,
+		}, {
+			folderId: folder ? folder.id : null,
+		});
+	}
+
 	@bindThis
 	public async deleteFile(file: MiDriveFile, isExpired = false, deleter?: MiUser) {
 		if (file.storedInternal) {
diff --git a/packages/backend/src/server/api/endpoint-list.ts b/packages/backend/src/server/api/endpoint-list.ts
index 34aaef3cc7..eda7a4446d 100644
--- a/packages/backend/src/server/api/endpoint-list.ts
+++ b/packages/backend/src/server/api/endpoint-list.ts
@@ -169,6 +169,7 @@ export * as 'drive/files/find' from './endpoints/drive/files/find.js';
 export * as 'drive/files/find-by-hash' from './endpoints/drive/files/find-by-hash.js';
 export * as 'drive/files/show' from './endpoints/drive/files/show.js';
 export * as 'drive/files/update' from './endpoints/drive/files/update.js';
+export * as 'drive/files/move-bulk' from './endpoints/drive/files/move-bulk.js';
 export * as 'drive/files/upload-from-url' from './endpoints/drive/files/upload-from-url.js';
 export * as 'drive/folders' from './endpoints/drive/folders.js';
 export * as 'drive/folders/create' from './endpoints/drive/folders/create.js';
diff --git a/packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts b/packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts
new file mode 100644
index 0000000000..79e505575b
--- /dev/null
+++ b/packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts
@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
+import { DriveService } from '@/core/DriveService.js';
+import { ApiError } from '../../../error.js';
+
+export const meta = {
+	tags: ['drive'],
+
+	requireCredential: true,
+
+	kind: 'write:drive',
+
+	errors: {
+	},
+
+	res: {},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		fileIds: { type: 'array', uniqueItems: true, minItems: 1, maxItems: 100, items: { type: 'string', format: 'misskey:id' } },
+		folderId: { type: 'string', format: 'misskey:id', nullable: true },
+	},
+	required: ['fileIds'],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		private driveService: DriveService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.driveService.moveFiles(ps.fileIds, ps.folderId ?? null, me.id);
+		});
+	}
+}

From 8ce2f43722f05eba925f391117fc334fcae62dd6 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 12:56:19 +0900
Subject: [PATCH 02/62] wip

---
 packages/frontend/src/components/MkDrive.vue | 168 ++++++-------------
 1 file changed, 53 insertions(+), 115 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index a1f76ac563..d7430439f8 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -68,23 +68,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
 				<MkButton v-if="moreFolders" ref="moreFolders" @click="fetchMoreFolders">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
-			<div v-show="files.length > 0" ref="filesContainer" :class="$style.files">
-				<XFile
-					v-for="(file, i) in files"
-					:key="file.id"
-					v-anim="i"
-					:class="$style.file"
-					:file="file"
-					:folder="folder"
-					:selectMode="select === 'file'"
-					:isSelected="selectedFiles.some(x => x.id === file.id)"
-					@chosen="chooseFile"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
-				<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
+
+			<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer" :class="$style.files">
+				<div v-for="(file, i) in filesPaginator.items.value" :key="file.id">
+					<div v-if="i > 0 && isSeparatorNeeded(filesPaginator.items.value[i -1].createdAt, file.createdAt)" :class="$style.date">
+						<span><i class="ti ti-chevron-up"></i> {{ getSeparatorInfo(filesPaginator.items.value[i -1].createdAt, file.createdAt).prevText }}</span>
+						<span style="height: 1em; width: 1px; background: var(--MI_THEME-divider);"></span>
+						<span>{{ getSeparatorInfo(filesPaginator.items.value[i -1].createdAt, file.createdAt).nextText }} <i class="ti ti-chevron-down"></i></span>
+					</div>
+					<XFile
+						v-else
+						:class="$style.file"
+						:file="file"
+						:folder="folder"
+						:selectMode="select === 'file'"
+						:isSelected="selectedFiles.some(x => x.id === file.id)"
+						@chosen="chooseFile"
+						@dragstart="isDragSource = true"
+						@dragend="isDragSource = false"
+					/>
+				</div>
+				<MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 			<div v-if="files.length == 0 && folders.length == 0 && !fetching" :class="$style.empty">
 				<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>
@@ -99,7 +103,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
@@ -116,6 +120,8 @@ import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
 import { chooseFileFromPc } from '@/utility/select-file.js';
 import { store } from '@/store.js';
+import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js';
+import { usePagination } from '@/composables/use-pagination.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
@@ -137,16 +143,33 @@ const emit = defineEmits<{
 
 const loadMoreFiles = useTemplateRef('loadMoreFiles');
 
+const filesPaginator = usePagination({
+	ctx: {
+		endpoint: 'drive/files' as const,
+		limit: 30,
+		params: computed(() => ({
+			folderId: folder.value ? folder.value.id : null,
+			type: props.type,
+			sort: sortModeSelect.value,
+		})),
+	},
+});
+
+const foldersPaginator = usePagination({
+	ctx: {
+		endpoint: 'drive/folders' as const,
+		limit: 30,
+		params: computed(() => ({
+			folderId: folder.value ? folder.value.id : null,
+		})),
+	},
+});
+
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
-const files = ref<Misskey.entities.DriveFile[]>([]);
-const folders = ref<Misskey.entities.DriveFolder[]>([]);
-const moreFiles = ref(false);
-const moreFolders = ref(false);
 const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
-const connection = useStream().useChannel('drive');
 
 // ドロップされようとしているか
 const draghover = ref(false);
@@ -165,9 +188,12 @@ const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort'
 
 watch(folder, () => emit('cd', folder.value));
 watch(sortModeSelect, () => {
-	fetch();
+	initialize();
 });
 
+function initialize() {
+}
+
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
 }
@@ -456,7 +482,7 @@ function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFold
 		if (folderToMove.parent) dive(folderToMove.parent);
 
 		emit('open-folder', folderToMove);
-		fetch();
+		initialize();
 	});
 }
 
@@ -528,95 +554,7 @@ function goRoot() {
 	folder.value = null;
 	hierarchyFolders.value = [];
 	emit('move-root');
-	fetch();
-}
-
-async function fetch() {
-	folders.value = [];
-	files.value = [];
-	moreFolders.value = false;
-	moreFiles.value = false;
-	fetching.value = true;
-
-	const foldersMax = 30;
-	const filesMax = 30;
-
-	const foldersPromise = misskeyApi('drive/folders', {
-		folderId: folder.value ? folder.value.id : null,
-		limit: foldersMax + 1,
-	}).then(fetchedFolders => {
-		if (fetchedFolders.length === foldersMax + 1) {
-			moreFolders.value = true;
-			fetchedFolders.pop();
-		}
-		return fetchedFolders;
-	});
-
-	const filesPromise = misskeyApi('drive/files', {
-		folderId: folder.value ? folder.value.id : null,
-		type: props.type,
-		limit: filesMax + 1,
-		sort: sortModeSelect.value,
-	}).then(fetchedFiles => {
-		if (fetchedFiles.length === filesMax + 1) {
-			moreFiles.value = true;
-			fetchedFiles.pop();
-		}
-		return fetchedFiles;
-	});
-
-	const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
-
-	for (const x of fetchedFolders) appendFolder(x);
-	for (const x of fetchedFiles) appendFile(x);
-
-	fetching.value = false;
-}
-
-function fetchMoreFolders() {
-	fetching.value = true;
-
-	const max = 30;
-
-	misskeyApi('drive/folders', {
-		folderId: folder.value ? folder.value.id : null,
-		type: props.type,
-		untilId: folders.value.at(-1)?.id,
-		limit: max + 1,
-	}).then(folders => {
-		if (folders.length === max + 1) {
-			moreFolders.value = true;
-			folders.pop();
-		} else {
-			moreFolders.value = false;
-		}
-		for (const x of folders) appendFolder(x);
-		fetching.value = false;
-	});
-}
-
-function fetchMoreFiles() {
-	fetching.value = true;
-
-	const max = 30;
-
-	// ファイル一覧取得
-	misskeyApi('drive/files', {
-		folderId: folder.value ? folder.value.id : null,
-		type: props.type,
-		untilId: files.value.at(-1)?.id,
-		limit: max + 1,
-		sort: sortModeSelect.value,
-	}).then(files => {
-		if (files.length === max + 1) {
-			moreFiles.value = true;
-			files.pop();
-		} else {
-			moreFiles.value = false;
-		}
-		for (const x of files) appendFile(x);
-		fetching.value = false;
-	});
+	initialize();
 }
 
 function getMenu() {
@@ -733,7 +671,7 @@ onMounted(() => {
 	if (props.initialFolder) {
 		move(props.initialFolder);
 	} else {
-		fetch();
+		initialize();
 	}
 });
 

From eccd27d74acfd11d1064fb96ea24f2d90b084bee Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 14:41:56 +0900
Subject: [PATCH 03/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index d7430439f8..c5c6718236 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -46,9 +46,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	>
 		<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">
+			<div v-show="foldersPaginator.items.value.length > 0" ref="foldersContainer" :class="$style.folders">
 				<XFolder
-					v-for="(f, i) in folders"
+					v-for="(f, i) in foldersPaginator.items.value"
 					:key="f.id"
 					v-anim="i"
 					:class="$style.folder"
@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
-				<MkButton v-if="moreFolders" ref="moreFolders" @click="fetchMoreFolders">{{ i18n.ts.loadMore }}</MkButton>
+				<MkButton v-if="foldersPaginator.canFetchOlder" ref="moreFolders" @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 
 			<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer" :class="$style.files">
@@ -90,7 +90,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
-			<div v-if="files.length == 0 && folders.length == 0 && !fetching" :class="$style.empty">
+
+			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
 				<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>
 				<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div>
 				<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
@@ -145,7 +146,7 @@ const loadMoreFiles = useTemplateRef('loadMoreFiles');
 
 const filesPaginator = usePagination({
 	ctx: {
-		endpoint: 'drive/files' as const,
+		endpoint: 'drive/files',
 		limit: 30,
 		params: computed(() => ({
 			folderId: folder.value ? folder.value.id : null,
@@ -157,7 +158,7 @@ const filesPaginator = usePagination({
 
 const foldersPaginator = usePagination({
 	ctx: {
-		endpoint: 'drive/folders' as const,
+		endpoint: 'drive/folders',
 		limit: 30,
 		params: computed(() => ({
 			folderId: folder.value ? folder.value.id : null,

From b21b287bc5abd10c95da848f8b4d2b78b648e915 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 14:56:27 +0900
Subject: [PATCH 04/62] wip

---
 packages/frontend/src/components/MkDrive.vue  | 63 +++----------------
 .../src/composables/use-pagination.ts         |  9 ++-
 2 files changed, 15 insertions(+), 57 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index c5c6718236..d861f40f42 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -142,8 +142,6 @@ const emit = defineEmits<{
 	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
 }>();
 
-const loadMoreFiles = useTemplateRef('loadMoreFiles');
-
 const filesPaginator = usePagination({
 	ctx: {
 		endpoint: 'drive/files',
@@ -154,6 +152,7 @@ const filesPaginator = usePagination({
 			sort: sortModeSelect.value,
 		})),
 	},
+	autoInit: false,
 });
 
 const foldersPaginator = usePagination({
@@ -164,6 +163,7 @@ const foldersPaginator = usePagination({
 			folderId: folder.value ? folder.value.id : null,
 		})),
 	},
+	autoInit: false,
 });
 
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
@@ -181,10 +181,6 @@ const isDragSource = ref(false);
 
 const fetching = ref(true);
 
-const ilFilesObserver = new IntersectionObserver(
-	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
-);
-
 const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt');
 
 watch(folder, () => emit('cd', folder.value));
@@ -192,43 +188,19 @@ watch(sortModeSelect, () => {
 	initialize();
 });
 
-function initialize() {
+async function initialize() {
+	fetching.value = true;
+	await Promise.all([
+		foldersPaginator.init(),
+		filesPaginator.init(),
+	]);
+	fetching.value = false;
 }
 
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
 }
 
-function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
-	const current = folder.value ? folder.value.id : null;
-	if (current !== file.folderId) {
-		removeFile(file);
-	} else {
-		addFile(file, true);
-	}
-}
-
-function onStreamDriveFileDeleted(fileId: string) {
-	removeFile(fileId);
-}
-
-function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
-	addFolder(createdFolder, true);
-}
-
-function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
-	const current = folder.value ? folder.value.id : null;
-	if (current !== updatedFolder.parentId) {
-		removeFolder(updatedFolder);
-	} else {
-		addFolder(updatedFolder, true);
-	}
-}
-
-function onStreamDriveFolderDeleted(folderId: string) {
-	removeFolder(folderId);
-}
-
 function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
@@ -656,18 +628,7 @@ function closeTip() {
 }
 
 onMounted(() => {
-	if (prefer.s.enableInfiniteScroll && loadMoreFiles.value) {
-		nextTick(() => {
-			ilFilesObserver.observe(loadMoreFiles.value?.$el);
-		});
-	}
-
 	connection.on('fileCreated', onStreamDriveFileCreated);
-	connection.on('fileUpdated', onStreamDriveFileUpdated);
-	connection.on('fileDeleted', onStreamDriveFileDeleted);
-	connection.on('folderCreated', onStreamDriveFolderCreated);
-	connection.on('folderUpdated', onStreamDriveFolderUpdated);
-	connection.on('folderDeleted', onStreamDriveFolderDeleted);
 
 	if (props.initialFolder) {
 		move(props.initialFolder);
@@ -677,16 +638,10 @@ onMounted(() => {
 });
 
 onActivated(() => {
-	if (prefer.s.enableInfiniteScroll) {
-		nextTick(() => {
-			ilFilesObserver.observe(loadMoreFiles.value?.$el);
-		});
-	}
 });
 
 onBeforeUnmount(() => {
 	connection.dispose();
-	ilFilesObserver.disconnect();
 });
 </script>
 
diff --git a/packages/frontend/src/composables/use-pagination.ts b/packages/frontend/src/composables/use-pagination.ts
index 8dd3b888db..9325caeadc 100644
--- a/packages/frontend/src/composables/use-pagination.ts
+++ b/packages/frontend/src/composables/use-pagination.ts
@@ -39,6 +39,7 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
 
 export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
 	ctx: PagingCtx<Endpoint>;
+	autoInit?: boolean;
 	useShallowRef?: boolean;
 }) {
 	const items = props.useShallowRef ? shallowRef<T[]>([]) : ref<T[]>([]);
@@ -232,9 +233,11 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
 		}
 	}
 
-	onMounted(() => {
-		init();
-	});
+	if (props.autoInit !== false) {
+		onMounted(() => {
+			init();
+		});
+	}
 
 	return {
 		items: items as DeepReadonly<ShallowRef<T[]>>,

From 293aa9512cc5bd13fc2e3d4e28f97ba27088b50e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 14:59:50 +0900
Subject: [PATCH 05/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 45 +++++++++++---------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index d861f40f42..23a90eab52 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -142,6 +142,23 @@ const emit = defineEmits<{
 	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
 }>();
 
+const folder = ref<Misskey.entities.DriveFolder | null>(null);
+const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
+const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
+const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
+const uploadings = uploads;
+
+// ドロップされようとしているか
+const draghover = ref(false);
+
+// 自身の所有するアイテムがドラッグをスタートさせたか
+// (自分自身の階層にドロップできないようにするためのフラグ)
+const isDragSource = ref(false);
+
+const fetching = ref(true);
+
+const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt');
+
 const filesPaginator = usePagination({
 	ctx: {
 		endpoint: 'drive/files',
@@ -166,23 +183,6 @@ const foldersPaginator = usePagination({
 	autoInit: false,
 });
 
-const folder = ref<Misskey.entities.DriveFolder | null>(null);
-const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
-const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const uploadings = uploads;
-
-// ドロップされようとしているか
-const draghover = ref(false);
-
-// 自身の所有するアイテムがドラッグをスタートさせたか
-// (自分自身の階層にドロップできないようにするためのフラグ)
-const isDragSource = ref(false);
-
-const fetching = ref(true);
-
-const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt');
-
 watch(folder, () => emit('cd', folder.value));
 watch(sortModeSelect, () => {
 	initialize();
@@ -627,8 +627,13 @@ function closeTip() {
 	store.set('readDriveTip', true);
 }
 
+let connection: Misskey.ChannelConnection<Misskey.Channels['drive']> | null = null;
+
 onMounted(() => {
-	connection.on('fileCreated', onStreamDriveFileCreated);
+	if (store.s.realtimeMode) {
+		connection = useStream().useChannel('drive');
+		connection.on('fileCreated', onStreamDriveFileCreated);
+	}
 
 	if (props.initialFolder) {
 		move(props.initialFolder);
@@ -641,7 +646,9 @@ onActivated(() => {
 });
 
 onBeforeUnmount(() => {
-	connection.dispose();
+	if (connection != null) {
+		connection.dispose();
+	}
 });
 </script>
 

From f25bc9bd95bdf437f9e4535d9c0d9416b03bd506 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 15:03:09 +0900
Subject: [PATCH 06/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 23a90eab52..03b1f17c78 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -263,7 +263,7 @@ function onDrop(ev: DragEvent) {
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
-		if (files.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', {
 			fileId: file.id,
@@ -279,7 +279,7 @@ function onDrop(ev: DragEvent) {
 
 		// 移動先が自分自身ならreject
 		if (folder.value && droppedFolder.id === folder.value.id) return false;
-		if (folders.value.some(f => f.id === droppedFolder.id)) return false;
+		if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
 		removeFolder(droppedFolder.id);
 		misskeyApi('drive/folders/update', {
 			folderId: droppedFolder.id,
@@ -463,16 +463,16 @@ function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== folderToAdd.parentId) return;
 
-	if (folders.value.some(f => f.id === folderToAdd.id)) {
-		const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
-		folders.value[exist] = folderToAdd;
+	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) {
-		folders.value.unshift(folderToAdd);
+		foldersPaginator.items.value.unshift(folderToAdd);
 	} else {
-		folders.value.push(folderToAdd);
+		foldersPaginator.items.value.push(folderToAdd);
 	}
 }
 
@@ -480,27 +480,27 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== fileToAdd.folderId) return;
 
-	if (files.value.some(f => f.id === fileToAdd.id)) {
-		const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
-		files.value[exist] = fileToAdd;
+	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) {
-		files.value.unshift(fileToAdd);
+		filesPaginator.items.value.unshift(fileToAdd);
 	} else {
-		files.value.push(fileToAdd);
+		filesPaginator.items.value.push(fileToAdd);
 	}
 }
 
 function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
 	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
-	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
+	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;
-	files.value = files.value.filter(f => f.id !== fileId);
+	filesPaginator.items.value = filesPaginator.items.value.filter(f => f.id !== fileId);
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {

From c98d72e6e1a439e2f00421cb6854d851c8856bcc Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 15:28:06 +0900
Subject: [PATCH 07/62] wip

---
 packages/frontend/src/components/MkDrive.vue  | 62 ++++++++-----------
 .../src/utility/timeline-date-separate.ts     | 62 ++++++++++++++-----
 2 files changed, 74 insertions(+), 50 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 03b1f17c78..81f25f115f 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -69,25 +69,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkButton v-if="foldersPaginator.canFetchOlder" ref="moreFolders" @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 
-			<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer" :class="$style.files">
-				<div v-for="(file, i) in filesPaginator.items.value" :key="file.id">
-					<div v-if="i > 0 && isSeparatorNeeded(filesPaginator.items.value[i -1].createdAt, file.createdAt)" :class="$style.date">
-						<span><i class="ti ti-chevron-up"></i> {{ getSeparatorInfo(filesPaginator.items.value[i -1].createdAt, file.createdAt).prevText }}</span>
-						<span style="height: 1em; width: 1px; background: var(--MI_THEME-divider);"></span>
-						<span>{{ getSeparatorInfo(filesPaginator.items.value[i -1].createdAt, file.createdAt).nextText }} <i class="ti ti-chevron-down"></i></span>
+			<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer">
+				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
+					<template #header>
+						<div :class="$style.date">
+							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}/{{ item.date.getDate() }}</span>
+						</div>
+					</template>
+
+					<div :class="$style.files">
+						<XFile
+							v-for="file in item.items" :key="file.id"
+							:class="$style.file"
+							:file="file"
+							:folder="folder"
+							:selectMode="select === 'file'"
+							:isSelected="selectedFiles.some(x => x.id === file.id)"
+							@chosen="chooseFile"
+							@dragstart="isDragSource = true"
+							@dragend="isDragSource = false"
+						/>
 					</div>
-					<XFile
-						v-else
-						:class="$style.file"
-						:file="file"
-						:folder="folder"
-						:selectMode="select === 'file'"
-						:isSelected="selectedFiles.some(x => x.id === file.id)"
-						@chosen="chooseFile"
-						@dragstart="isDragSource = true"
-						@dragend="isDragSource = false"
-					/>
-				</div>
+				</MkStickyContainer>
 				<MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 
@@ -121,7 +124,7 @@ import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
 import { chooseFileFromPc } from '@/utility/select-file.js';
 import { store } from '@/store.js';
-import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js';
+import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
 import { usePagination } from '@/composables/use-pagination.js';
 
 const props = withDefaults(defineProps<{
@@ -183,6 +186,8 @@ const foldersPaginator = usePagination({
 	autoInit: false,
 });
 
+const filesTimeline = makeDateGroupedTimelineComputedRef(filesPaginator.items, 'month');
+
 watch(folder, () => emit('cd', folder.value));
 watch(sortModeSelect, () => {
 	initialize();
@@ -725,22 +730,9 @@ onBeforeUnmount(() => {
 
 .folders,
 .files {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.folder,
-.file {
-	flex-grow: 1;
-	width: 128px;
-	margin: 4px;
-	box-sizing: border-box;
-}
-
-.padding {
-	flex-grow: 1;
-	pointer-events: none;
-	width: 128px + 8px;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+	grid-gap: 12px;
 }
 
 .empty {
diff --git a/packages/frontend/src/utility/timeline-date-separate.ts b/packages/frontend/src/utility/timeline-date-separate.ts
index 1071a80962..33ddea048b 100644
--- a/packages/frontend/src/utility/timeline-date-separate.ts
+++ b/packages/frontend/src/utility/timeline-date-separate.ts
@@ -4,7 +4,7 @@
  */
 
 import { computed } from 'vue';
-import type { Ref } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
 
 export function getDateText(dateInstance: Date) {
 	const date = dateInstance.getDate();
@@ -12,19 +12,6 @@ export function getDateText(dateInstance: Date) {
 	return `${month.toString()}/${date.toString()}`;
 }
 
-export type DateSeparetedTimelineItem<T> = {
-	id: string;
-	type: 'item';
-	data: T;
-} | {
-	id: string;
-	type: 'date';
-	prev: Date;
-	prevText: string;
-	next: Date;
-	nextText: string;
-};
-
 // TODO: いちいちDateインスタンス作成するのは無駄感あるから文字列のまま解析したい
 export function isSeparatorNeeded(
 	prev: string | null,
@@ -56,7 +43,20 @@ export function getSeparatorInfo(
 	};
 }
 
-export function makeDateSeparatedTimelineComputedRef<T extends { id: string; createdAt: string; }>(items: Ref<T[]>) {
+export type DateSeparetedTimelineItem<T> = {
+	id: string;
+	type: 'item';
+	data: T;
+} | {
+	id: string;
+	type: 'date';
+	prev: Date;
+	prevText: string;
+	next: Date;
+	nextText: string;
+};
+
+export function makeDateSeparatedTimelineComputedRef<T extends { id: string; createdAt: string; }>(items: Ref<T[]> | ShallowRef<T[]>) {
 	return computed<DateSeparetedTimelineItem<T>[]>(() => {
 		const tl: DateSeparetedTimelineItem<T>[] = [];
 		for (let i = 0; i < items.value.length; i++) {
@@ -92,3 +92,35 @@ export function makeDateSeparatedTimelineComputedRef<T extends { id: string; cre
 		return tl;
 	});
 }
+
+export type DateGroupedTimelineItem<T> = {
+	date: Date;
+	items: T[];
+};
+
+export function makeDateGroupedTimelineComputedRef<T extends { id: string; createdAt: string; }>(items: Ref<T[]> | ShallowRef<T[]>, span: 'day' | 'month' = 'day') {
+	return computed<DateGroupedTimelineItem<T>[]>(() => {
+		const tl: DateGroupedTimelineItem<T>[] = [];
+		for (let i = 0; i < items.value.length; i++) {
+			const item = items.value[i];
+			const date = new Date(item.createdAt);
+			const nextDate = items.value[i + 1] ? new Date(items.value[i + 1].createdAt) : null;
+
+			if (tl.length === 0 || (
+				span === 'day' && tl[tl.length - 1].date.getTime() !== date.getTime()
+			) || (
+				span === 'month' && (
+					tl[tl.length - 1].date.getFullYear() !== date.getFullYear() ||
+					tl[tl.length - 1].date.getMonth() !== date.getMonth()
+				)
+			)) {
+				tl.push({
+					date,
+					items: [],
+				});
+			}
+			tl[tl.length - 1].items.push(item);
+		}
+		return tl;
+	});
+}

From 796b0c3706a765fe062c87ea30506e279bd13739 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 15:35:41 +0900
Subject: [PATCH 08/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 122 ++++++++++---------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 81f25f115f..115f753aab 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -44,64 +44,62 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@drop.prevent.stop="onDrop"
 		@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="foldersPaginator.items.value.length > 0" ref="foldersContainer" :class="$style.folders">
-				<XFolder
-					v-for="(f, i) in foldersPaginator.items.value"
-					:key="f.id"
-					v-anim="i"
-					:class="$style.folder"
-					:folder="f"
-					:selectMode="select === 'folder'"
-					:isSelected="selectedFolders.some(x => x.id === f.id)"
-					@chosen="chooseFolder"
-					@unchose="unchoseFolder"
-					@move="move"
-					@upload="upload"
-					@removeFile="removeFile"
-					@removeFolder="removeFolder"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
-				<MkButton v-if="foldersPaginator.canFetchOlder" ref="moreFolders" @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-
-			<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer">
-				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
-					<template #header>
-						<div :class="$style.date">
-							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}/{{ item.date.getDate() }}</span>
-						</div>
-					</template>
-
-					<div :class="$style.files">
-						<XFile
-							v-for="file in item.items" :key="file.id"
-							:class="$style.file"
-							:file="file"
-							:folder="folder"
-							:selectMode="select === 'file'"
-							:isSelected="selectedFiles.some(x => x.id === file.id)"
-							@chosen="chooseFile"
-							@dragstart="isDragSource = true"
-							@dragend="isDragSource = false"
-						/>
-					</div>
-				</MkStickyContainer>
-				<MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-
-			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
-				<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>
-				<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div>
-				<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
-			</div>
+		<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
+		<div v-show="foldersPaginator.items.value.length > 0" ref="foldersContainer" :class="$style.folders">
+			<XFolder
+				v-for="(f, i) in foldersPaginator.items.value"
+				:key="f.id"
+				v-anim="i"
+				:class="$style.folder"
+				:folder="f"
+				:selectMode="select === 'folder'"
+				:isSelected="selectedFolders.some(x => x.id === f.id)"
+				@chosen="chooseFolder"
+				@unchose="unchoseFolder"
+				@move="move"
+				@upload="upload"
+				@removeFile="removeFile"
+				@removeFolder="removeFolder"
+				@dragstart="isDragSource = true"
+				@dragend="isDragSource = false"
+			/>
+			<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+			<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
+			<MkButton v-if="foldersPaginator.canFetchOlder" ref="moreFolders" @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+		</div>
+
+		<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer">
+			<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
+				<template #header>
+					<div :class="$style.date">
+						<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
+					</div>
+				</template>
+
+				<div :class="$style.files">
+					<XFile
+						v-for="file in item.items" :key="file.id"
+						:class="$style.file"
+						:file="file"
+						:folder="folder"
+						:selectMode="select === 'file'"
+						:isSelected="selectedFiles.some(x => x.id === file.id)"
+						@chosen="chooseFile"
+						@dragstart="isDragSource = true"
+						@dragend="isDragSource = false"
+					/>
+				</div>
+			</MkStickyContainer>
+			<MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+		</div>
+
+		<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
+			<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>
+			<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div>
+			<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
 		</div>
-		<MkLoading v-if="fetching"/>
 	</div>
+	<MkLoading v-if="fetching"/>
 	<div v-if="draghover" :class="$style.dropzone"></div>
 </MkStickyContainer>
 </template>
@@ -712,9 +710,6 @@ onBeforeUnmount(() => {
 }
 
 .main {
-	flex: 1;
-	overflow: auto;
-	padding: var(--MI-margin);
 	user-select: none;
 
 	&.fetching {
@@ -733,6 +728,15 @@ onBeforeUnmount(() => {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 	grid-gap: 12px;
+	padding: var(--MI-margin);
+}
+
+.date {
+	padding: 8px 16px;
+	font-size: 90%;
+	-webkit-backdrop-filter: var(--MI-blur, blur(8px));
+	backdrop-filter: var(--MI-blur, blur(8px));
+	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
 }
 
 .empty {

From 9d6eb954b7feb2fd87d00178f500833448f9233e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 15:40:46 +0900
Subject: [PATCH 09/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 46 ++++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 115f753aab..35aed7c202 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -45,30 +45,30 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@contextmenu.stop="onContextmenu"
 	>
 		<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
-		<div v-show="foldersPaginator.items.value.length > 0" ref="foldersContainer" :class="$style.folders">
-			<XFolder
-				v-for="(f, i) in foldersPaginator.items.value"
-				:key="f.id"
-				v-anim="i"
-				:class="$style.folder"
-				:folder="f"
-				:selectMode="select === 'folder'"
-				:isSelected="selectedFolders.some(x => x.id === f.id)"
-				@chosen="chooseFolder"
-				@unchose="unchoseFolder"
-				@move="move"
-				@upload="upload"
-				@removeFile="removeFile"
-				@removeFolder="removeFolder"
-				@dragstart="isDragSource = true"
-				@dragend="isDragSource = false"
-			/>
-			<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-			<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
-			<MkButton v-if="foldersPaginator.canFetchOlder" ref="moreFolders" @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+		<div v-show="foldersPaginator.items.value.length > 0">
+			<div :class="$style.folders">
+				<XFolder
+					v-for="(f, i) in foldersPaginator.items.value"
+					:key="f.id"
+					v-anim="i"
+					:class="$style.folder"
+					:folder="f"
+					:selectMode="select === 'folder'"
+					:isSelected="selectedFolders.some(x => x.id === f.id)"
+					@chosen="chooseFolder"
+					@unchose="unchoseFolder"
+					@move="move"
+					@upload="upload"
+					@removeFile="removeFile"
+					@removeFolder="removeFolder"
+					@dragstart="isDragSource = true"
+					@dragend="isDragSource = false"
+				/>
+			</div>
+			<MkButton v-if="foldersPaginator.canFetchOlder" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 		</div>
 
-		<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer">
+		<div v-show="filesPaginator.items.value.length > 0">
 			<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
 				<template #header>
 					<div :class="$style.date">
@@ -90,7 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					/>
 				</div>
 			</MkStickyContainer>
-			<MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+			<MkButton v-show="filesPaginator.canFetchOlder" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 		</div>
 
 		<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">

From 8a072b1b4d5c4d81ed616f355eb2d201012d476d Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 17:03:17 +0900
Subject: [PATCH 10/62] wip

---
 .../frontend/src/components/MkDrive.file.vue  |   4 +-
 packages/frontend/src/components/MkDrive.vue  | 143 ++++++++++--------
 .../src/composables/use-pagination.ts         |   6 +-
 3 files changed, 90 insertions(+), 63 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 70ab60cfae..388b8b56d7 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -240,8 +240,8 @@ function onDragend() {
 
 .name {
 	display: block;
-	margin: 4px 0 0 0;
-	font-size: 0.8em;
+	margin: 8px 0 0 0;
+	font-size: 85%;
 	text-align: center;
 	word-break: break-all;
 	color: var(--MI_THEME-fg);
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 35aed7c202..3407805660 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -35,72 +35,80 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</nav>
 	</template>
 
-	<div
-		ref="main"
-		:class="[$style.main, { [$style.uploading]: uploadings.length > 0, [$style.fetching]: fetching }]"
-		@dragover.prevent.stop="onDragover"
-		@dragenter="onDragenter"
-		@dragleave="onDragleave"
-		@drop.prevent.stop="onDrop"
-		@contextmenu.stop="onContextmenu"
-	>
-		<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
-		<div v-show="foldersPaginator.items.value.length > 0">
-			<div :class="$style.folders">
-				<XFolder
-					v-for="(f, i) in foldersPaginator.items.value"
-					:key="f.id"
-					v-anim="i"
-					:class="$style.folder"
-					:folder="f"
-					:selectMode="select === 'folder'"
-					:isSelected="selectedFolders.some(x => x.id === f.id)"
-					@chosen="chooseFolder"
-					@unchose="unchoseFolder"
-					@move="move"
-					@upload="upload"
-					@removeFile="removeFile"
-					@removeFolder="removeFolder"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-			</div>
-			<MkButton v-if="foldersPaginator.canFetchOlder" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
-		</div>
-
-		<div v-show="filesPaginator.items.value.length > 0">
-			<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
-				<template #header>
-					<div :class="$style.date">
-						<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
-					</div>
-				</template>
-
-				<div :class="$style.files">
-					<XFile
-						v-for="file in item.items" :key="file.id"
-						:class="$style.file"
-						:file="file"
-						:folder="folder"
-						:selectMode="select === 'file'"
-						:isSelected="selectedFiles.some(x => x.id === file.id)"
-						@chosen="chooseFile"
+	<div>
+		<div
+			ref="main"
+			:class="[$style.main, { [$style.uploading]: uploadings.length > 0, [$style.fetching]: fetching }]"
+			@dragover.prevent.stop="onDragover"
+			@dragenter="onDragenter"
+			@dragleave="onDragleave"
+			@drop.prevent.stop="onDrop"
+			@contextmenu.stop="onContextmenu"
+		>
+			<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
+			<div v-show="foldersPaginator.items.value.length > 0">
+				<div :class="$style.folders">
+					<XFolder
+						v-for="(f, i) in foldersPaginator.items.value"
+						:key="f.id"
+						v-anim="i"
+						:class="$style.folder"
+						:folder="f"
+						:selectMode="select === 'folder'"
+						:isSelected="selectedFolders.some(x => x.id === f.id)"
+						@chosen="chooseFolder"
+						@unchose="unchoseFolder"
+						@move="move"
+						@upload="upload"
+						@removeFile="removeFile"
+						@removeFolder="removeFolder"
 						@dragstart="isDragSource = true"
 						@dragend="isDragSource = false"
 					/>
 				</div>
-			</MkStickyContainer>
-			<MkButton v-show="filesPaginator.canFetchOlder" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
-		</div>
+				<MkButton v-if="foldersPaginator.canFetchOlder" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+			</div>
 
-		<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
-			<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>
-			<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div>
-			<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
+			<div v-show="filesPaginator.items.value.length > 0">
+				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
+					<template #header>
+						<div :class="$style.date">
+							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
+						</div>
+					</template>
+
+					<div :class="$style.files">
+						<XFile
+							v-for="file in item.items" :key="file.id"
+							:class="$style.file"
+							:file="file"
+							:folder="folder"
+							:selectMode="select === 'file'"
+							:isSelected="selectedFiles.some(x => x.id === file.id)"
+							@chosen="chooseFile"
+							@dragstart="isDragSource = true"
+							@dragend="isDragSource = false"
+						/>
+					</div>
+				</MkStickyContainer>
+				<MkButton v-show="filesPaginator.canFetchOlder" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+			</div>
+
+			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
+				<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>
+				<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div>
+				<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
+			</div>
 		</div>
+		<MkLoading v-if="fetching"/>
+		<div v-if="draghover" :class="$style.dropzone"></div>
 	</div>
-	<MkLoading v-if="fetching"/>
-	<div v-if="draghover" :class="$style.dropzone"></div>
+
+	<template #footer>
+		<div v-if="isEditMode" :class="$style.footer">
+			<MkButton primary rounded @click="move()"><i class="ti ti-folder-symlink"></i> {{ i18n.ts.move }}...</MkButton>
+		</div>
+	</template>
 </MkStickyContainer>
 </template>
 
@@ -156,6 +164,8 @@ const draghover = ref(false);
 // (自分自身の階層にドロップできないようにするためのフラグ)
 const isDragSource = ref(false);
 
+const isEditMode = ref(false);
+
 const fetching = ref(true);
 
 const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt');
@@ -171,6 +181,7 @@ const filesPaginator = usePagination({
 		})),
 	},
 	autoInit: false,
+	autoReInit: false,
 });
 
 const foldersPaginator = usePagination({
@@ -182,6 +193,7 @@ const foldersPaginator = usePagination({
 		})),
 	},
 	autoInit: false,
+	autoReInit: false,
 });
 
 const filesTimeline = makeDateGroupedTimelineComputedRef(filesPaginator.items, 'month');
@@ -613,6 +625,11 @@ function getMenu() {
 		text: i18n.ts.createFolder,
 		icon: 'ti ti-folder-plus',
 		action: () => { createFolder(); },
+	}, { type: 'divider' }, {
+		type: 'switch',
+		text: i18n.ts.edit,
+		icon: 'ti ti-pointer',
+		ref: isEditMode,
 	});
 
 	return menu;
@@ -739,6 +756,14 @@ onBeforeUnmount(() => {
 	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
 }
 
+.footer {
+	padding: 8px 16px;
+	font-size: 90%;
+	-webkit-backdrop-filter: var(--MI-blur, blur(8px));
+	backdrop-filter: var(--MI-blur, blur(8px));
+	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
+}
+
 .empty {
 	padding: 16px;
 	text-align: center;
diff --git a/packages/frontend/src/composables/use-pagination.ts b/packages/frontend/src/composables/use-pagination.ts
index 9325caeadc..cf8543c16a 100644
--- a/packages/frontend/src/composables/use-pagination.ts
+++ b/packages/frontend/src/composables/use-pagination.ts
@@ -40,6 +40,7 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
 export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
 	ctx: PagingCtx<Endpoint>;
 	autoInit?: boolean;
+	autoReInit?: boolean;
 	useShallowRef?: boolean;
 }) {
 	const items = props.useShallowRef ? shallowRef<T[]>([]) : ref<T[]>([]);
@@ -50,8 +51,9 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
 	const canFetchOlder = ref(false);
 	const error = ref(false);
 
-	// パラメータに何らかの変更があった際、再読込したい（チャンネル等のIDが変わったなど）
-	watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
+	if (props.autoReInit !== false) {
+		watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
+	}
 
 	function getNewestId(): string | null | undefined {
 		// 様々な要因により並び順は保証されないのでソートが必要

From 5149e1c28535885dccd26d74ffb2b120ad78e591 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 17:08:25 +0900
Subject: [PATCH 11/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 3407805660..7c618110ad 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -83,7 +83,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:class="$style.file"
 							:file="file"
 							:folder="folder"
-							:selectMode="select === 'file'"
+							:selectMode="select === 'file' || isEditMode"
 							:isSelected="selectedFiles.some(x => x.id === file.id)"
 							@chosen="chooseFile"
 							@dragstart="isDragSource = true"
@@ -405,6 +405,16 @@ function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null
 
 function chooseFile(file: Misskey.entities.DriveFile) {
 	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
+
+	if (isEditMode.value) {
+		if (isAlreadySelected) {
+			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+		} else {
+			selectedFiles.value.push(file);
+		}
+		return;
+	}
+
 	if (props.multiple) {
 		if (isAlreadySelected) {
 			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);

From 6d5e9506e4483b99a850fbab9874f8525dd47c4d Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 17:53:54 +0900
Subject: [PATCH 12/62] wip

---
 .../frontend/src/components/MkDrive.file.vue     | 16 ++++++++--------
 packages/frontend/src/components/MkDrive.vue     | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 388b8b56d7..0bb97c40ed 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -114,7 +114,7 @@ function onDragend() {
 	&:hover {
 		background: rgba(#000, 0.05);
 
-		> .label {
+		.label {
 			&::before,
 			&::after {
 				background: #0b65a5;
@@ -132,7 +132,7 @@ function onDragend() {
 	&:active {
 		background: rgba(#000, 0.1);
 
-		> .label {
+		.label {
 			&::before,
 			&::after {
 				background: #0b588c;
@@ -158,19 +158,19 @@ function onDragend() {
 			background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		}
 
-		> .label {
+		.label {
 			&::before,
 			&::after {
 				display: none;
 			}
 		}
 
-		> .name {
-			color: #fff;
+		.name {
+			color: var(--MI_THEME-fgOnAccent);
 		}
 
-		> .thumbnail {
-			color: #fff;
+		.thumbnail {
+			color: var(--MI_THEME-fgOnAccent);
 		}
 	}
 }
@@ -241,7 +241,7 @@ function onDragend() {
 .name {
 	display: block;
 	margin: 8px 0 0 0;
-	font-size: 85%;
+	font-size: 82%;
 	text-align: center;
 	word-break: break-all;
 	color: var(--MI_THEME-fg);
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 7c618110ad..7a283120da 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -106,7 +106,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<template #footer>
 		<div v-if="isEditMode" :class="$style.footer">
-			<MkButton primary rounded @click="move()"><i class="ti ti-folder-symlink"></i> {{ i18n.ts.move }}...</MkButton>
+			<MkButton primary rounded @click="moveFilesBulk()"><i class="ti ti-folder-symlink"></i> {{ i18n.ts.move }}...</MkButton>
 		</div>
 	</template>
 </MkStickyContainer>
@@ -484,6 +484,17 @@ function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFold
 	});
 }
 
+async function moveFilesBulk() {
+	if (selectedFiles.value.length === 0) return;
+
+	const toFolder = await os.selectDriveFolder(false);
+
+	os.apiWithDialog('drive/files/move-bulk', {
+		fileIds: selectedFiles.value.map(f => f.id),
+		folderId: toFolder[0] ? toFolder[0].id : null,
+	});
+}
+
 function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== folderToAdd.parentId) return;

From 90ac02931736598083c30067219c45b4f461599b Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 18:18:05 +0900
Subject: [PATCH 13/62] wip

---
 .../src/components/MkDrive.folder.vue         |  2 +-
 packages/frontend/src/components/MkDrive.vue  | 54 +++++++++++-----
 ...> MkDriveFileSelectDialog.stories.impl.ts} |  2 +-
 ...Dialog.vue => MkDriveFileSelectDialog.vue} | 20 +++---
 .../components/MkDriveFolderSelectDialog.vue  | 63 +++++++++++++++++++
 packages/frontend/src/os.ts                   | 10 ++-
 .../frontend/src/pages/drive.file.info.vue    |  2 +-
 .../frontend/src/pages/settings/drive.vue     |  2 +-
 .../src/utility/get-drive-file-menu.ts        |  2 +-
 .../frontend/src/widgets/WidgetSlideshow.vue  |  2 +-
 10 files changed, 121 insertions(+), 38 deletions(-)
 rename packages/frontend/src/components/{MkDriveSelectDialog.stories.impl.ts => MkDriveFileSelectDialog.stories.impl.ts} (66%)
 rename packages/frontend/src/components/{MkDriveSelectDialog.vue => MkDriveFileSelectDialog.vue} (54%)
 create mode 100644 packages/frontend/src/components/MkDriveFolderSelectDialog.vue

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 9c72691d21..37181f65b6 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -230,7 +230,7 @@ function rename() {
 }
 
 function move() {
-	os.selectDriveFolder(false).then(folder => {
+	os.selectDriveFolder().then(folder => {
 		if (folder[0] && folder[0].id === props.folder.id) return;
 
 		misskeyApi('drive/folders/update', {
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 7a283120da..f215457a78 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -36,6 +36,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</template>
 
 	<div>
+		<div v-if="select === 'folder'">
+			<template v-if="folder == null">
+				<MkButton v-if="!isRootSelected" @click="isRootSelected = true">
+					<i class="ti ti-square"></i> {{ i18n.ts.selectThisFolder }}
+				</MkButton>
+				<MkButton v-else @click="isRootSelected = false">
+					<i class="ti ti-checkbox"></i> {{ i18n.ts.unselectThisFolder }}
+				</MkButton>
+			</template>
+			<template v-else>
+				<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)">
+					<i class="ti ti-checkbox"></i> {{ i18n.ts.unselectThisFolder }}
+				</MkButton>
+			</template>
+		</div>
+
 		<div
 			ref="main"
 			:class="[$style.main, { [$style.uploading]: uploadings.length > 0, [$style.fetching]: fetching }]"
@@ -85,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:folder="folder"
 							:selectMode="select === 'file' || isEditMode"
 							:isSelected="selectedFiles.some(x => x.id === file.id)"
-							@chosen="chooseFile"
+							@chosen="onChooseFile"
 							@dragstart="isDragSource = true"
 							@dragend="isDragSource = false"
 						/>
@@ -134,7 +153,7 @@ import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef
 import { usePagination } from '@/composables/use-pagination.js';
 
 const props = withDefaults(defineProps<{
-	initialFolder?: Misskey.entities.DriveFolder;
+	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
 	type?: string;
 	multiple?: boolean;
 	select?: 'file' | 'folder' | null;
@@ -144,8 +163,8 @@ const props = withDefaults(defineProps<{
 });
 
 const emit = defineEmits<{
-	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
-	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
+	(ev: 'changeSelectedFiles', v: Misskey.entities.DriveFile[]): void;
+	(ev: 'changeSelectedFolders', v: (Misskey.entities.DriveFolder | null)[]): void;
 	(ev: 'move-root'): void;
 	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
 	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
@@ -153,8 +172,6 @@ const emit = defineEmits<{
 
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
 const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
-const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 
 // ドロップされようとしているか
@@ -166,6 +183,18 @@ const isDragSource = ref(false);
 
 const isEditMode = ref(false);
 
+const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
+const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
+const isRootSelected = ref(false);
+
+watch(selectedFiles, () => {
+	emit('changeSelectedFiles', selectedFiles.value);
+});
+
+watch([selectedFolders, isRootSelected], () => {
+	emit('changeSelectedFolders', isRootSelected.value ? [null, ...selectedFolders.value] : selectedFolders.value);
+});
+
 const fetching = ref(true);
 
 const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt');
@@ -403,7 +432,7 @@ function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null
 	});
 }
 
-function chooseFile(file: Misskey.entities.DriveFile) {
+function onChooseFile(file: Misskey.entities.DriveFile) {
 	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
 
 	if (isEditMode.value) {
@@ -421,13 +450,11 @@ function chooseFile(file: Misskey.entities.DriveFile) {
 		} else {
 			selectedFiles.value.push(file);
 		}
-		emit('change-selection', selectedFiles.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', file);
+			//emit('selected', file);
 		} else {
 			selectedFiles.value = [file];
-			emit('change-selection', [file]);
 		}
 	}
 }
@@ -440,20 +467,17 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
 		} else {
 			selectedFolders.value.push(folderToChoose);
 		}
-		emit('change-selection', selectedFolders.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', folderToChoose);
+			//emit('selected', folderToChoose);
 		} else {
 			selectedFolders.value = [folderToChoose];
-			emit('change-selection', [folderToChoose]);
 		}
 	}
 }
 
 function unchoseFolder(folderToUnchose: Misskey.entities.DriveFolder) {
 	selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToUnchose.id);
-	emit('change-selection', selectedFolders.value);
 }
 
 function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder['id' | 'parentId']) {
@@ -487,7 +511,7 @@ function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFold
 async function moveFilesBulk() {
 	if (selectedFiles.value.length === 0) return;
 
-	const toFolder = await os.selectDriveFolder(false);
+	const toFolder = await os.selectDriveFolder(folder.value ? folder.value.id : null);
 
 	os.apiWithDialog('drive/files/move-bulk', {
 		fileIds: selectedFiles.value.map(f => f.id),
diff --git a/packages/frontend/src/components/MkDriveSelectDialog.stories.impl.ts b/packages/frontend/src/components/MkDriveFileSelectDialog.stories.impl.ts
similarity index 66%
rename from packages/frontend/src/components/MkDriveSelectDialog.stories.impl.ts
rename to packages/frontend/src/components/MkDriveFileSelectDialog.stories.impl.ts
index fe8f705165..a5073337cd 100644
--- a/packages/frontend/src/components/MkDriveSelectDialog.stories.impl.ts
+++ b/packages/frontend/src/components/MkDriveFileSelectDialog.stories.impl.ts
@@ -3,5 +3,5 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import MkDriveSelectDialog from './MkDriveSelectDialog.vue';
+import MkDriveSelectDialog from './MkDriveFileSelectDialog.vue';
 void MkDriveSelectDialog;
diff --git a/packages/frontend/src/components/MkDriveSelectDialog.vue b/packages/frontend/src/components/MkDriveFileSelectDialog.vue
similarity index 54%
rename from packages/frontend/src/components/MkDriveSelectDialog.vue
rename to packages/frontend/src/components/MkDriveFileSelectDialog.vue
index 1b9455e3f3..9cccd4ab5e 100644
--- a/packages/frontend/src/components/MkDriveSelectDialog.vue
+++ b/packages/frontend/src/components/MkDriveFileSelectDialog.vue
@@ -9,43 +9,41 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:width="800"
 	:height="500"
 	:withOkButton="true"
-	:okButtonDisabled="(type === 'file') && (selected.length === 0)"
+	:okButtonDisabled="selected.length === 0"
 	@click="cancel()"
 	@close="cancel()"
 	@ok="ok()"
 	@closed="emit('closed')"
 >
 	<template #header>
-		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
+		{{ multiple ? i18n.ts.selectFiles : i18n.ts.selectFile }}
+		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length }})</span>
 	</template>
-	<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
+	<MkDrive :multiple="multiple" select="file" :initialFolder="initialFolder" @changeSelection="onChangeSelection"/>
 </MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { ref, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from '@/components/MkDrive.vue';
+import MkDrive from '@/components/MkDrive.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
-import number from '@/filters/number.js';
 import { i18n } from '@/i18n.js';
 
 withDefaults(defineProps<{
-	type?: 'file' | 'folder';
+	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
 	multiple: boolean;
 }>(), {
-	type: 'file',
 });
 
 const emit = defineEmits<{
-	(ev: 'done', r?: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
+	(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
 	(ev: 'closed'): void;
 }>();
 
 const dialog = useTemplateRef('dialog');
 
-const selected = ref<Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]>([]);
+const selected = ref<Misskey.entities.DriveFile[]>([]);
 
 function ok() {
 	emit('done', selected.value);
@@ -57,7 +55,7 @@ function cancel() {
 	dialog.value?.close();
 }
 
-function onChangeSelection(v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]) {
+function onChangeSelection(v: Misskey.entities.DriveFile[]) {
 	selected.value = v;
 }
 </script>
diff --git a/packages/frontend/src/components/MkDriveFolderSelectDialog.vue b/packages/frontend/src/components/MkDriveFolderSelectDialog.vue
new file mode 100644
index 0000000000..adc85c49e1
--- /dev/null
+++ b/packages/frontend/src/components/MkDriveFolderSelectDialog.vue
@@ -0,0 +1,63 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="800"
+	:height="500"
+	:withOkButton="true"
+	:okButtonDisabled="selected.length === 0"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="emit('closed')"
+>
+	<template #header>
+		{{ multiple ? i18n.ts.selectFolders : i18n.ts.selectFolder }}
+		<span v-if="multiple && selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length }})</span>
+	</template>
+	<MkDrive :multiple="multiple" select="folder" :initialFolder="initialFolder" @changeSelection="onChangeSelection"/>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkDrive from '@/components/MkDrive.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n.js';
+
+withDefaults(defineProps<{
+	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
+	multiple?: boolean;
+}>(), {
+	initialFolder: null,
+	multiple: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'done', r?: Misskey.entities.DriveFolder[]): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = useTemplateRef('dialog');
+
+const selected = ref<Misskey.entities.DriveFolder[]>([]);
+
+function ok() {
+	emit('done', selected.value);
+	dialog.value?.close();
+}
+
+function cancel() {
+	emit('done');
+	dialog.value?.close();
+}
+
+function onChangeSelection(v: Misskey.entities.DriveFolder[]) {
+	selected.value = v;
+}
+</script>
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index d891525782..9d26242c3c 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -594,8 +594,7 @@ export async function selectUser(opts: { includeSelf?: boolean; localOnly?: bool
 
 export async function selectDriveFile(multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise(resolve => {
-		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
-			type: 'file',
+		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveFileSelectDialog.vue')), {
 			multiple,
 		}, {
 			done: files => {
@@ -608,11 +607,10 @@ export async function selectDriveFile(multiple: boolean): Promise<Misskey.entiti
 	});
 }
 
-export async function selectDriveFolder(multiple: boolean): Promise<Misskey.entities.DriveFolder[]> {
+export async function selectDriveFolder(initialFolder: Misskey.entities.DriveFolder['id'] | null): Promise<Misskey.entities.DriveFolder[]> {
 	return new Promise(resolve => {
-		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
-			type: 'folder',
-			multiple,
+		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveFolderSelectDialog.vue')), {
+			initialFolder,
 		}, {
 			done: folders => {
 				if (folders) {
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 21be0b18a9..fec260be72 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -139,7 +139,7 @@ function crop() {
 function move() {
 	if (!file.value) return;
 
-	os.selectDriveFolder(false).then(folder => {
+	os.selectDriveFolder().then(folder => {
 		misskeyApi('drive/files/update', {
 			fileId: file.value.id,
 			folderId: folder[0] ? folder[0].id : null,
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index 2130cbc868..c4619c354d 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -138,7 +138,7 @@ if (prefer.s.uploadFolder) {
 }
 
 function chooseUploadFolder() {
-	os.selectDriveFolder(false).then(async folder => {
+	os.selectDriveFolder().then(async folder => {
 		prefer.commit('uploadFolder', folder[0] ? folder[0].id : null);
 		os.success();
 		if (prefer.s.uploadFolder) {
diff --git a/packages/frontend/src/utility/get-drive-file-menu.ts b/packages/frontend/src/utility/get-drive-file-menu.ts
index 3c6cbba002..a5595cb0cb 100644
--- a/packages/frontend/src/utility/get-drive-file-menu.ts
+++ b/packages/frontend/src/utility/get-drive-file-menu.ts
@@ -42,7 +42,7 @@ function describe(file: Misskey.entities.DriveFile) {
 }
 
 function move(file: Misskey.entities.DriveFile) {
-	os.selectDriveFolder(false).then(folder => {
+	os.selectDriveFolder().then(folder => {
 		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: folder[0] ? folder[0].id : null,
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
index 2ccbb7a28f..a83e2754f6 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.vue
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -93,7 +93,7 @@ const fetch = () => {
 };
 
 const choose = () => {
-	os.selectDriveFolder(false).then(folder => {
+	os.selectDriveFolder().then(folder => {
 		if (folder[0] == null) {
 			return;
 		}

From ade38bfe2f480432be2d35af1d283f63cffbad59 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 18:28:26 +0900
Subject: [PATCH 14/62] wip

---
 packages/frontend/src/components/MkDrive.vue  |  6 ++-
 .../src/composables/use-pagination.ts         | 44 +++++++++++++------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index f215457a78..fdf231cd9d 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -85,7 +85,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						@dragend="isDragSource = false"
 					/>
 				</div>
-				<MkButton v-if="foldersPaginator.canFetchOlder" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+				<MkButton v-if="foldersPaginator.canFetchOlder.value" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 
 			<div v-show="filesPaginator.items.value.length > 0">
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						/>
 					</div>
 				</MkStickyContainer>
-				<MkButton v-show="filesPaginator.canFetchOlder" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+				<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 
 			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
@@ -203,6 +203,7 @@ const filesPaginator = usePagination({
 	ctx: {
 		endpoint: 'drive/files',
 		limit: 30,
+		canFetchDetection: 'limit',
 		params: computed(() => ({
 			folderId: folder.value ? folder.value.id : null,
 			type: props.type,
@@ -217,6 +218,7 @@ const foldersPaginator = usePagination({
 	ctx: {
 		endpoint: 'drive/folders',
 		limit: 30,
+		canFetchDetection: 'limit',
 		params: computed(() => ({
 			folderId: folder.value ? folder.value.id : null,
 		})),
diff --git a/packages/frontend/src/composables/use-pagination.ts b/packages/frontend/src/composables/use-pagination.ts
index cf8543c16a..b0be8255ef 100644
--- a/packages/frontend/src/composables/use-pagination.ts
+++ b/packages/frontend/src/composables/use-pagination.ts
@@ -35,6 +35,9 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
 
 	baseId?: MisskeyEntity['id'];
 	direction?: 'newer' | 'older';
+
+	// 一部のAPIはさらに遡れる場合でもパフォーマンス上の理由でlimit以下の結果を返す場合があり、その場合はsafe、それ以外はlimitにすることを推奨
+	canFetchDetection?: 'safe' | 'limit';
 };
 
 export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
@@ -95,12 +98,20 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
 				if (i === 3) item._shouldInsertAd_ = true;
 			}
 
-			if (res.length === 0 || props.ctx.noPaging) {
-				pushItems(res);
-				canFetchOlder.value = false;
-			} else {
-				pushItems(res);
-				canFetchOlder.value = true;
+			pushItems(res);
+
+			if (props.ctx.canFetchDetection === 'limit') {
+				if (res.length < FIRST_FETCH_LIMIT) {
+					canFetchOlder.value = false;
+				} else {
+					canFetchOlder.value = true;
+				}
+			} else if (props.ctx.canFetchDetection === 'safe' || props.ctx.canFetchDetection == null) {
+				if (res.length === 0 || props.ctx.noPaging) {
+					canFetchOlder.value = false;
+				} else {
+					canFetchOlder.value = true;
+				}
 			}
 
 			error.value = false;
@@ -133,13 +144,20 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
 				if (i === 10) item._shouldInsertAd_ = true;
 			}
 
-			if (res.length === 0) {
-				canFetchOlder.value = false;
-				fetchingOlder.value = false;
-			} else {
-				pushItems(res);
-				canFetchOlder.value = true;
-				fetchingOlder.value = false;
+			pushItems(res);
+
+			if (props.ctx.canFetchDetection === 'limit') {
+				if (res.length < FIRST_FETCH_LIMIT) {
+					canFetchOlder.value = false;
+				} else {
+					canFetchOlder.value = true;
+				}
+			} else if (props.ctx.canFetchDetection === 'safe' || props.ctx.canFetchDetection == null) {
+				if (res.length === 0) {
+					canFetchOlder.value = false;
+				} else {
+					canFetchOlder.value = true;
+				}
 			}
 		}, err => {
 			fetchingOlder.value = false;

From 40c5cd0013c60c5581d77fa5fa77127c30487ddf Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 10 May 2025 20:15:03 +0900
Subject: [PATCH 15/62] wip

---
 packages/frontend/src/components/MkDrive.vue | 9 ++++++++-
 packages/frontend/src/events.ts              | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index fdf231cd9d..e4caf9aef9 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -151,6 +151,7 @@ import { chooseFileFromPc } from '@/utility/select-file.js';
 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';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@@ -515,10 +516,12 @@ async function moveFilesBulk() {
 
 	const toFolder = await os.selectDriveFolder(folder.value ? folder.value.id : null);
 
-	os.apiWithDialog('drive/files/move-bulk', {
+	await os.apiWithDialog('drive/files/move-bulk', {
 		fileIds: selectedFiles.value.map(f => f.id),
 		folderId: toFolder[0] ? toFolder[0].id : null,
 	});
+
+	globalEvents.emit('driveFilesMoved', selectedFiles.value, toFolder[0]);
 }
 
 function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
@@ -694,6 +697,10 @@ function closeTip() {
 	store.set('readDriveTip', true);
 }
 
+useGlobalEvent('driveFilesMoved', (files, to) => {
+	// TODO
+});
+
 let connection: Misskey.ChannelConnection<Misskey.Channels['drive']> | null = null;
 
 onMounted(() => {
diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts
index 26b1881d15..83412b365a 100644
--- a/packages/frontend/src/events.ts
+++ b/packages/frontend/src/events.ts
@@ -13,6 +13,7 @@ type Events = {
 	clientNotification: (notification: Misskey.entities.Notification) => void;
 	notePosted: (note: Misskey.entities.Note) => void;
 	noteDeleted: (noteId: Misskey.entities.Note['id']) => void;
+	driveFilesMoved: (files: Misskey.entities.DriveFile[], to: Misskey.entities.DriveFolder | null) => void;
 };
 
 export const globalEvents = new EventEmitter<Events>();

From 4d185b49cd5d10356e87c865aa219c7b8442690c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 09:16:16 +0900
Subject: [PATCH 16/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 129 ++++++-------------
 1 file changed, 41 insertions(+), 88 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index e4caf9aef9..72d6ae32f5 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -245,7 +245,9 @@ async function initialize() {
 }
 
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
-	addFile(file, true);
+	if (file.folderId === (folder.value?.id ?? null)) {
+		filesPaginator.prepend(file);
+	}
 }
 
 function onDragover(ev: DragEvent) {
@@ -354,55 +356,55 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 }
 
-function urlUpload() {
-	os.inputText({
+async function urlUpload() {
+	const { canceled, result: url } = await os.inputText({
 		title: i18n.ts.uploadFromUrl,
 		type: 'url',
 		placeholder: i18n.ts.uploadFromUrlDescription,
-	}).then(({ canceled, result: url }) => {
-		if (canceled || !url) return;
-		misskeyApi('drive/files/upload-from-url', {
-			url: url,
-			folderId: folder.value ? folder.value.id : undefined,
-		});
+	});
+	if (canceled || !url) return;
 
-		os.alert({
-			title: i18n.ts.uploadFromUrlRequested,
-			text: i18n.ts.uploadFromUrlMayTakeTime,
-		});
+	await os.apiWithDialog('drive/files/upload-from-url', {
+		url: url,
+		folderId: folder.value ? folder.value.id : undefined,
+	});
+
+	os.alert({
+		title: i18n.ts.uploadFromUrlRequested,
+		text: i18n.ts.uploadFromUrlMayTakeTime,
 	});
 }
 
-function createFolder() {
-	os.inputText({
+async function createFolder() {
+	const { canceled, result: name } = await 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);
 }
 
-function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
-	os.inputText({
+async function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
+	const { canceled, result: name } = await 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: 画面を更新するために自分自身に移動
+	move(updatedFolder);
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
@@ -431,7 +433,9 @@ 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 => {
-		addFile(res, true);
+		if (res.folderId === (folder.value?.id ?? null)) {
+			filesPaginator.prepend(res);
+		}
 	});
 }
 
@@ -524,67 +528,16 @@ 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);
+	foldersPaginator.removeItem(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);
+	filesPaginator.removeItem(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;

From db09744ce87362f16907234f7598a00934e87f7d Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 09:41:15 +0900
Subject: [PATCH 17/62] wip

---
 packages/frontend-embed/@types/global.d.ts    |  3 --
 packages/frontend-embed/eslint.config.js      |  3 --
 packages/frontend-shared/@types/global.d.ts   |  3 --
 packages/frontend-shared/eslint.config.js     |  3 --
 packages/frontend/@types/global.d.ts          |  3 --
 packages/frontend/eslint.config.js            |  3 --
 .../frontend/src/components/MkDrive.file.vue  |  7 +++--
 .../src/components/MkDrive.folder.vue         | 11 ++++----
 .../src/components/MkDrive.navFolder.vue      |  9 +++---
 packages/frontend/src/components/MkDrive.vue  | 28 +++++++++++++++----
 .../frontend/src/components/MkPostForm.vue    |  5 ++--
 packages/frontend/src/consts.ts               | 10 +++++++
 .../frontend/src/pages/chat/room.form.vue     |  5 ++--
 packages/frontend/src/ui/deck/column.vue      |  7 +++--
 packages/frontend/vite.config.ts              |  3 --
 15 files changed, 57 insertions(+), 46 deletions(-)
 create mode 100644 packages/frontend/src/consts.ts

diff --git a/packages/frontend-embed/@types/global.d.ts b/packages/frontend-embed/@types/global.d.ts
index 1025d1bedb..8a067a78ec 100644
--- a/packages/frontend-embed/@types/global.d.ts
+++ b/packages/frontend-embed/@types/global.d.ts
@@ -10,9 +10,6 @@ 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[][];
diff --git a/packages/frontend-embed/eslint.config.js b/packages/frontend-embed/eslint.config.js
index 7805256fd4..2aef311e2e 100644
--- a/packages/frontend-embed/eslint.config.js
+++ b/packages/frontend-embed/eslint.config.js
@@ -30,9 +30,6 @@ 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: {
diff --git a/packages/frontend-shared/@types/global.d.ts b/packages/frontend-shared/@types/global.d.ts
index 4b8d679e75..52081d07b3 100644
--- a/packages/frontend-shared/@types/global.d.ts
+++ b/packages/frontend-shared/@types/global.d.ts
@@ -11,9 +11,6 @@ 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[][];
diff --git a/packages/frontend-shared/eslint.config.js b/packages/frontend-shared/eslint.config.js
index ac5c67d0b6..f6fd64153c 100644
--- a/packages/frontend-shared/eslint.config.js
+++ b/packages/frontend-shared/eslint.config.js
@@ -35,9 +35,6 @@ 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: {
diff --git a/packages/frontend/@types/global.d.ts b/packages/frontend/@types/global.d.ts
index 1025d1bedb..8a067a78ec 100644
--- a/packages/frontend/@types/global.d.ts
+++ b/packages/frontend/@types/global.d.ts
@@ -10,9 +10,6 @@ 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[][];
diff --git a/packages/frontend/eslint.config.js b/packages/frontend/eslint.config.js
index 1b9a9b68c0..8f835975a8 100644
--- a/packages/frontend/eslint.config.js
+++ b/packages/frontend/eslint.config.js
@@ -30,9 +30,6 @@ 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: {
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 0bb97c40ed..8cd28375c4 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -48,6 +48,7 @@ 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();
 
@@ -63,7 +64,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
-	(ev: 'dragstart'): void;
+	(ev: 'dragstart', dragEvent: DragEvent): void;
 	(ev: 'dragend'): void;
 }>();
 
@@ -90,11 +91,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');
+	emit('dragstart', ev);
 }
 
 function onDragend() {
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 37181f65b6..e4791258c8 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -43,6 +43,7 @@ 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_FOLDER } from '@/consts.js';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -101,8 +102,8 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
 
 	if (isFile || isDriveFile || isDriveFolder) {
 		switch (ev.dataTransfer.effectAllowed) {
@@ -148,7 +149,7 @@ 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 !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
@@ -160,7 +161,7 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 
 	//#region ドライブのフォルダ
-	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
+	const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
 	if (driveFolder != null && driveFolder !== '') {
 		const folder = JSON.parse(driveFolder);
 
@@ -198,7 +199,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;
 
 	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 7433aea061..176aceee5a 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -22,6 +22,7 @@ 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_FOLDER } from '@/consts.js';
 
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
@@ -59,8 +60,8 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
 
 	if (isFile || isDriveFile || isDriveFolder) {
 		switch (ev.dataTransfer.effectAllowed) {
@@ -108,7 +109,7 @@ 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 !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
@@ -120,7 +121,7 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 
 	//#region ドライブのフォルダ
-	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
+	const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
 	if (driveFolder != null && driveFolder !== '') {
 		const folder = JSON.parse(driveFolder);
 		// 移動先が自分自身ならreject
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 72d6ae32f5..ffbe293045 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -105,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="isDragSource = true"
+							@dragstart="onFileDragstart(file, $event)"
 							@dragend="isDragSource = false"
 						/>
 					</div>
@@ -152,6 +152,7 @@ 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;
@@ -250,6 +251,19 @@ function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	}
 }
 
+function onFileDragstart(file: Misskey.entities.DriveFile, ev: DragEvent) {
+	if (isEditMode.value) {
+		if (!selectedFiles.value.some(f => f.id === file.id)) {
+			selectedFiles.value.push(file);
+		}
+
+		ev.dataTransfer.effectAllowed = 'move';
+		ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify(selectedFiles.value));
+	}
+
+	isDragSource.value = true;
+}
+
 function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
@@ -261,8 +275,8 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
 	if (isFile || isDriveFile || isDriveFolder) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
@@ -309,7 +323,7 @@ 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 !== '') {
 		const file = JSON.parse(driveFile);
 		if (filesPaginator.items.value.some(f => f.id === file.id)) return;
@@ -322,7 +336,7 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 
 	//#region ドライブのフォルダ
-	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
+	const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
 	if (driveFolder != null && driveFolder !== '') {
 		const droppedFolder = JSON.parse(driveFolder);
 
@@ -651,7 +665,9 @@ function closeTip() {
 }
 
 useGlobalEvent('driveFilesMoved', (files, to) => {
-	// TODO
+	if ((to?.id ?? null) === (folder.value?.id ?? null)) {
+		filesPaginator.unshiftItems(files);
+	}
 });
 
 let connection: Misskey.ChannelConnection<Misskey.Channels['drive']> | null = null;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 5114e98494..7678d18e58 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -138,6 +138,7 @@ 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();
 
@@ -701,7 +702,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;
@@ -743,7 +744,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);
diff --git a/packages/frontend/src/consts.ts b/packages/frontend/src/consts.ts
new file mode 100644
index 0000000000..cbc3e28556
--- /dev/null
+++ b/packages/frontend/src/consts.ts
@@ -0,0 +1,10 @@
+/*
+ * 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';
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index 9389b16ce7..ea15a126a8 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -47,6 +47,7 @@ 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;
@@ -101,7 +102,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) {
@@ -141,7 +142,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();
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 2085c73e03..d86d1f3d08 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -51,6 +51,7 @@ 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);
@@ -262,7 +263,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
@@ -281,7 +282,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';
 
@@ -297,7 +298,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);
 	}
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index aa7bf24174..71c133acc8 100644
--- a/packages/frontend/vite.config.ts
+++ b/packages/frontend/vite.config.ts
@@ -148,9 +148,6 @@ 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,
 		},

From 4ff3cdde873217a055c5a98f63752b00334995ae Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 09:46:52 +0900
Subject: [PATCH 18/62] wip

---
 .../src/components/MkDrive.folder.vue         | 10 ++++----
 .../src/components/MkDrive.navFolder.vue      |  4 ----
 packages/frontend/src/components/MkDrive.vue  | 24 ++++---------------
 3 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index e4791258c8..667369072c 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -43,7 +43,7 @@ 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_FOLDER } from '@/consts.js';
+import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -59,8 +59,6 @@ const emit = defineEmits<{
 	(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;
 }>();
@@ -103,9 +101,11 @@ function onDragover(ev: DragEvent) {
 
 	const isFile = ev.dataTransfer.items[0].kind === '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 isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
 
-	if (isFile || isDriveFile || isDriveFolder) {
+	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -152,7 +152,6 @@ function onDrop(ev: DragEvent) {
 	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
 		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: props.folder.id,
@@ -168,7 +167,6 @@ function onDrop(ev: DragEvent) {
 		// 移動先が自分自身ならreject
 		if (folder.id === props.folder.id) return;
 
-		emit('removeFolder', folder.id);
 		misskeyApi('drive/folders/update', {
 			folderId: folder.id,
 			parentId: props.folder.id,
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 176aceee5a..8eb2083a01 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -32,8 +32,6 @@ 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);
@@ -112,7 +110,6 @@ function onDrop(ev: DragEvent) {
 	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
 		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: props.folder ? props.folder.id : null,
@@ -126,7 +123,6 @@ function onDrop(ev: DragEvent) {
 		const folder = JSON.parse(driveFolder);
 		// 移動先が自分自身ならreject
 		if (props.folder && folder.id === props.folder.id) return;
-		emit('removeFolder', folder.id);
 		misskeyApi('drive/folders/update', {
 			folderId: folder.id,
 			parentId: props.folder ? props.folder.id : null,
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index ffbe293045..5648a1dc4c 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -13,8 +13,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:parentFolder="folder"
 					@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>
@@ -24,8 +22,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:class="[$style.navPathItem]"
 						@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>
@@ -79,8 +75,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 						@unchose="unchoseFolder"
 						@move="move"
 						@upload="upload"
-						@removeFile="removeFile"
-						@removeFolder="removeFolder"
 						@dragstart="isDragSource = true"
 						@dragend="isDragSource = false"
 					/>
@@ -257,8 +251,10 @@ function onFileDragstart(file: Misskey.entities.DriveFile, ev: DragEvent) {
 			selectedFiles.value.push(file);
 		}
 
-		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify(selectedFiles.value));
+		if (ev.dataTransfer) {
+			ev.dataTransfer.effectAllowed = 'move';
+			ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify(selectedFiles.value));
+		}
 	}
 
 	isDragSource.value = true;
@@ -327,7 +323,6 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		if (filesPaginator.items.value.some(f => f.id === file.id)) return;
-		removeFile(file.id);
 		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: folder.value ? folder.value.id : null,
@@ -343,7 +338,6 @@ function onDrop(ev: DragEvent) {
 		// 移動先が自分自身ならreject
 		if (folder.value && droppedFolder.id === folder.value.id) return false;
 		if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
-		removeFolder(droppedFolder.id);
 		misskeyApi('drive/folders/update', {
 			folderId: droppedFolder.id,
 			parentId: folder.value ? folder.value.id : null,
@@ -542,16 +536,6 @@ async function moveFilesBulk() {
 	globalEvents.emit('driveFilesMoved', selectedFiles.value, toFolder[0]);
 }
 
-function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
-	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
-	foldersPaginator.removeItem(folderIdToRemove);
-}
-
-function removeFile(file: Misskey.entities.DriveFile | string) {
-	const fileId = typeof file === 'object' ? file.id : file;
-	filesPaginator.removeItem(fileId);
-}
-
 function goRoot() {
 	// 既にrootにいるなら何もしない
 	if (folder.value == null) return;

From 9bf9b10ba4e758ff3219e7ea56ec5203693415fc Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 09:54:59 +0900
Subject: [PATCH 19/62] wip

---
 .../frontend/src/components/MkDrive.folder.vue |  6 ------
 .../src/components/MkDrive.navFolder.vue       | 15 ---------------
 packages/frontend/src/components/MkDrive.vue   | 18 +++++++++---------
 3 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 667369072c..42746aa0ec 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -8,7 +8,6 @@ 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"
@@ -57,7 +56,6 @@ 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: 'dragstart'): void;
 	(ev: 'dragend'): void;
@@ -77,10 +75,6 @@ function checkboxClicked() {
 	}
 }
 
-function onClick() {
-	emit('move', props.folder);
-}
-
 function onMouseover() {
 	hover.value = true;
 }
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 8eb2083a01..d44cbb6e17 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -6,7 +6,6 @@ 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"
@@ -30,25 +29,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'move', v?: Misskey.entities.DriveFolder): void;
 	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): 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;
 
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 5648a1dc4c..e42165c3bc 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<XNavFolder
 					:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
 					:parentFolder="folder"
-					@move="move"
+					@click="cd(null)"
 					@upload="upload"
 				/>
 				<template v-for="f in hierarchyFolders">
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:folder="f"
 						:parentFolder="folder"
 						:class="[$style.navPathItem]"
-						@move="move"
+						@click="cd(f)"
 						@upload="upload"
 					/>
 				</template>
@@ -42,10 +42,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,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:isSelected="selectedFolders.some(x => x.id === f.id)"
 						@chosen="chooseFolder"
 						@unchose="unchoseFolder"
-						@move="move"
+						@click="cd(f)"
 						@upload="upload"
 						@dragstart="isDragSource = true"
 						@dragend="isDragSource = false"
@@ -412,7 +412,7 @@ async function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 	});
 
 	// FIXME: 画面を更新するために自分自身に移動
-	move(updatedFolder);
+	cd(updatedFolder);
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
@@ -420,7 +420,7 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
 		folderId: folderToDelete.id,
 	}).then(() => {
 		// 削除時に親フォルダに移動
-		move(folderToDelete.parentId);
+		cd(folderToDelete.parentId);
 	}).catch(err => {
 		switch (err.id) {
 			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
@@ -495,7 +495,7 @@ function unchoseFolder(folderToUnchose: Misskey.entities.DriveFolder) {
 	selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToUnchose.id);
 }
 
-function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder['id' | 'parentId']) {
+function cd(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder['id' | 'parentId']) {
 	if (!target) {
 		goRoot();
 		return;
@@ -663,7 +663,7 @@ onMounted(() => {
 	}
 
 	if (props.initialFolder) {
-		move(props.initialFolder);
+		cd(props.initialFolder);
 	} else {
 		initialize();
 	}

From e9ee571ef3595ed5e8c3ba234cbfe763ac55ed55 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 10:58:48 +0900
Subject: [PATCH 20/62] wip

---
 .../src/components/MkDrive.folder.vue         | 90 ++++++++++--------
 .../src/components/MkDrive.navFolder.vue      | 58 ++++++++----
 packages/frontend/src/components/MkDrive.vue  | 92 ++++++++++++-------
 3 files changed, 150 insertions(+), 90 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 42746aa0ec..e0d3705663 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -43,6 +43,7 @@ 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;
@@ -143,46 +144,65 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		misskeyApi('drive/files/update', {
-			fileId: file.id,
-			folderId: props.folder.id,
-		});
+	{
+		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
+		if (driveFile != null && driveFile !== '') {
+			const file = JSON.parse(driveFile);
+			misskeyApi('drive/files/update', {
+				fileId: file.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);
-	if (driveFolder != null && driveFolder !== '') {
-		const folder = JSON.parse(driveFolder);
+	{
+		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
+		if (driveFolder != null && driveFolder !== '') {
+			const folder = JSON.parse(driveFolder);
 
-		// 移動先が自分自身ならreject
-		if (folder.id === props.folder.id) return;
+			// 移動先が自分自身ならreject
+			if (folder.id === props.folder.id) return;
 
-		misskeyApi('drive/folders/update', {
-			folderId: folder.id,
-			parentId: props.folder.id,
-		}).then(() => {
+			misskeyApi('drive/folders/update', {
+				folderId: folder.id,
+				parentId: props.folder.id,
+			}).then(() => {
 			// noop
-		}).catch(err => {
-			switch (err.code) {
-				case 'RECURSIVE_NESTING':
-					claimAchievement('driveFolderCircularReference');
-					os.alert({
-						type: 'error',
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
+			}).catch(err => {
+				switch (err.code) {
+					case 'RECURSIVE_NESTING':
+						claimAchievement('driveFolderCircularReference');
+						os.alert({
+							type: 'error',
+							title: i18n.ts.unableToProcess,
+							text: i18n.ts.circularReferenceFolder,
+						});
+						break;
+					default:
+						os.alert({
+							type: 'error',
+							text: i18n.ts.somethingHappened,
+						});
+				}
+			});
+		}
 	}
 	//#endregion
 }
@@ -204,10 +224,6 @@ function onDragend() {
 	emit('dragend');
 }
 
-function go() {
-	emit('move', props.folder);
-}
-
 function rename() {
 	os.inputText({
 		title: i18n.ts.renameFolder,
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index d44cbb6e17..bbd1584057 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -21,7 +21,8 @@ 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_FOLDER } from '@/consts.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;
@@ -44,9 +45,11 @@ function onDragover(ev: DragEvent) {
 
 	const isFile = ev.dataTransfer.items[0].kind === '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 isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
 
-	if (isFile || isDriveFile || isDriveFolder) {
+	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -92,26 +95,45 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		misskeyApi('drive/files/update', {
-			fileId: file.id,
-			folderId: props.folder ? props.folder.id : null,
-		});
+	{
+		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
+		if (driveFile != null && driveFile !== '') {
+			const file = JSON.parse(driveFile);
+			misskeyApi('drive/files/update', {
+				fileId: file.id,
+				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);
-	if (driveFolder != null && driveFolder !== '') {
-		const folder = JSON.parse(driveFolder);
-		// 移動先が自分自身ならreject
-		if (props.folder && folder.id === props.folder.id) return;
-		misskeyApi('drive/folders/update', {
-			folderId: folder.id,
-			parentId: props.folder ? props.folder.id : null,
-		});
+	{
+		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
+		if (driveFolder != null && driveFolder !== '') {
+			const folder = JSON.parse(driveFolder);
+			// 移動先が自分自身ならreject
+			if (props.folder && folder.id === props.folder.id) return;
+			misskeyApi('drive/folders/update', {
+				folderId: folder.id,
+				parentId: props.folder ? props.folder.id : null,
+			});
+		}
 	}
 	//#endregion
 }
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index e42165c3bc..d6c645c6ef 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -319,47 +319,66 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		if (filesPaginator.items.value.some(f => f.id === file.id)) return;
-		misskeyApi('drive/files/update', {
-			fileId: file.id,
-			folderId: folder.value ? folder.value.id : null,
-		});
+	{
+		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
+		if (driveFile != null && driveFile !== '') {
+			const file = JSON.parse(driveFile);
+			if (filesPaginator.items.value.some(f => f.id === file.id)) return;
+			misskeyApi('drive/files/update', {
+				fileId: file.id,
+				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);
-	if (driveFolder != null && driveFolder !== '') {
-		const droppedFolder = JSON.parse(driveFolder);
+	{
+		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
+		if (driveFolder != null && driveFolder !== '') {
+			const droppedFolder = JSON.parse(driveFolder);
 
-		// 移動先が自分自身ならreject
-		if (folder.value && droppedFolder.id === folder.value.id) return false;
-		if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
-		misskeyApi('drive/folders/update', {
-			folderId: droppedFolder.id,
-			parentId: folder.value ? folder.value.id : null,
-		}).then(() => {
+			// 移動先が自分自身ならreject
+			if (folder.value && droppedFolder.id === folder.value.id) return false;
+			if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
+			misskeyApi('drive/folders/update', {
+				folderId: droppedFolder.id,
+				parentId: folder.value ? folder.value.id : null,
+			}).then(() => {
 			// noop
-		}).catch(err => {
-			switch (err.code) {
-				case 'RECURSIVE_NESTING':
-					claimAchievement('driveFolderCircularReference');
-					os.alert({
-						type: 'error',
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
+			}).catch(err => {
+				switch (err.code) {
+					case 'RECURSIVE_NESTING':
+						claimAchievement('driveFolderCircularReference');
+						os.alert({
+							type: 'error',
+							title: i18n.ts.unableToProcess,
+							text: i18n.ts.circularReferenceFolder,
+						});
+						break;
+					default:
+						os.alert({
+							type: 'error',
+							text: i18n.ts.somethingHappened,
+						});
+				}
+			});
+		}
 	}
 	//#endregion
 }
@@ -649,6 +668,9 @@ function closeTip() {
 }
 
 useGlobalEvent('driveFilesMoved', (files, to) => {
+	for (const f of files) {
+		filesPaginator.removeItem(f.id);
+	}
 	if ((to?.id ?? null) === (folder.value?.id ?? null)) {
 		filesPaginator.unshiftItems(files);
 	}

From f239e6fc62279d06144496ff82b135e8297dfaa8 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 11:11:58 +0900
Subject: [PATCH 21/62] wip

---
 packages/frontend/src/components/MkDrive.folder.vue            | 2 ++
 packages/frontend/src/components/MkDrive.navFolder.vue         | 2 ++
 packages/frontend/src/components/MkDrive.vue                   | 2 ++
 packages/frontend/src/components/MkDriveFileSelectDialog.vue   | 2 +-
 packages/frontend/src/components/MkDriveFolderSelectDialog.vue | 2 +-
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index e0d3705663..488844e77a 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -151,6 +151,8 @@ function onDrop(ev: DragEvent) {
 			misskeyApi('drive/files/update', {
 				fileId: file.id,
 				folderId: props.folder.id,
+			}).then(() => {
+				globalEvents.emit('driveFilesMoved', [file], props.folder);
 			});
 		}
 	}
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index bbd1584057..6b106810cd 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -102,6 +102,8 @@ function onDrop(ev: DragEvent) {
 			misskeyApi('drive/files/update', {
 				fileId: file.id,
 				folderId: props.folder ? props.folder.id : null,
+			}).then(() => {
+				globalEvents.emit('driveFilesMoved', [file], props.folder ?? null);
 			});
 		}
 	}
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index d6c645c6ef..6b32820a84 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -327,6 +327,8 @@ function onDrop(ev: DragEvent) {
 			misskeyApi('drive/files/update', {
 				fileId: file.id,
 				folderId: folder.value ? folder.value.id : null,
+			}).then(() => {
+				globalEvents.emit('driveFilesMoved', [file], folder.value);
 			});
 		}
 	}
diff --git a/packages/frontend/src/components/MkDriveFileSelectDialog.vue b/packages/frontend/src/components/MkDriveFileSelectDialog.vue
index 9cccd4ab5e..50b68b3d0f 100644
--- a/packages/frontend/src/components/MkDriveFileSelectDialog.vue
+++ b/packages/frontend/src/components/MkDriveFileSelectDialog.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		{{ multiple ? i18n.ts.selectFiles : i18n.ts.selectFile }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length }})</span>
 	</template>
-	<MkDrive :multiple="multiple" select="file" :initialFolder="initialFolder" @changeSelection="onChangeSelection"/>
+	<MkDrive :multiple="multiple" select="file" :initialFolder="initialFolder" @changeSelectedFiles="onChangeSelection"/>
 </MkModalWindow>
 </template>
 
diff --git a/packages/frontend/src/components/MkDriveFolderSelectDialog.vue b/packages/frontend/src/components/MkDriveFolderSelectDialog.vue
index adc85c49e1..2ebab1088f 100644
--- a/packages/frontend/src/components/MkDriveFolderSelectDialog.vue
+++ b/packages/frontend/src/components/MkDriveFolderSelectDialog.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		{{ multiple ? i18n.ts.selectFolders : i18n.ts.selectFolder }}
 		<span v-if="multiple && selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length }})</span>
 	</template>
-	<MkDrive :multiple="multiple" select="folder" :initialFolder="initialFolder" @changeSelection="onChangeSelection"/>
+	<MkDrive :multiple="multiple" select="folder" :initialFolder="initialFolder" @changeSelectedFolders="onChangeSelection"/>
 </MkModalWindow>
 </template>
 

From cf701f389d0c4aa40b992a7ec57a832d70ffe6c6 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 13:11:05 +0900
Subject: [PATCH 22/62] wip

---
 .../frontend/src/components/MkDrive.file.vue  |  4 +-
 .../src/components/MkDrive.folder.vue         | 24 ++-------
 .../src/components/MkDrive.navFolder.vue      | 22 ++------
 packages/frontend/src/components/MkDrive.vue  | 54 ++++++++++---------
 .../frontend/src/components/MkPostForm.vue    | 17 +++---
 packages/frontend/src/consts.ts               |  2 -
 .../frontend/src/pages/chat/room.form.vue     | 16 +++---
 7 files changed, 57 insertions(+), 82 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 8cd28375c4..b84badf71f 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -48,7 +48,7 @@ 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';
+import { DATA_TRANSFER_DRIVE_FILES } from '@/consts.js';
 
 const router = useRouter();
 
@@ -91,7 +91,7 @@ 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_FILES, JSON.stringify([props.file]));
 	}
 	isDragging.value = true;
 
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 488844e77a..61de77ade3 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -42,7 +42,7 @@ 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 { DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 import { globalEvents } from '@/events.js';
 
 const props = withDefaults(defineProps<{
@@ -95,12 +95,10 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === '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 isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
 
-	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
+	if (isFile || isDriveFiles || isDriveFolders) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -144,21 +142,6 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	{
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (driveFile != null && driveFile !== '') {
-			const file = JSON.parse(driveFile);
-			misskeyApi('drive/files/update', {
-				fileId: file.id,
-				folderId: props.folder.id,
-			}).then(() => {
-				globalEvents.emit('driveFilesMoved', [file], props.folder);
-			});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
 	{
 		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
 		if (driveFiles != null && driveFiles !== '') {
@@ -174,8 +157,9 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 
 	//#region ドライブのフォルダ
+	// TODO
 	{
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
+		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDERS);
 		if (driveFolder != null && driveFolder !== '') {
 			const folder = JSON.parse(driveFolder);
 
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 6b106810cd..dd7031f111 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -21,7 +21,7 @@ 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 { DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 import { globalEvents } from '@/events.js';
 
 const props = defineProps<{
@@ -44,12 +44,10 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === '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 isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
 
-	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
+	if (isFile || isDriveFiles || isDriveFolders) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -95,21 +93,6 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	{
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (driveFile != null && driveFile !== '') {
-			const file = JSON.parse(driveFile);
-			misskeyApi('drive/files/update', {
-				fileId: file.id,
-				folderId: props.folder ? props.folder.id : null,
-			}).then(() => {
-				globalEvents.emit('driveFilesMoved', [file], props.folder ?? null);
-			});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
 	{
 		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
 		if (driveFiles != null && driveFiles !== '') {
@@ -125,6 +108,7 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 
 	//#region ドライブのフォルダ
+	// TODO
 	{
 		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
 		if (driveFolder != null && driveFolder !== '') {
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 6b32820a84..a0896d4b4f 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -83,14 +83,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 
 			<div v-show="filesPaginator.items.value.length > 0">
-				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
+				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="`${item.date.getFullYear()}/${item.date.getMonth() + 1}`">
 					<template #header>
 						<div :class="$style.date">
 							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
 						</div>
 					</template>
 
-					<div :class="$style.files">
+					<TransitionGroup
+						tag="div"
+						:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
+						:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
+						:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
+						:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
+						:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
+						:class="$style.files"
+					>
 						<XFile
 							v-for="file in item.items" :key="file.id"
 							:class="$style.file"
@@ -102,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							@dragstart="onFileDragstart(file, $event)"
 							@dragend="isDragSource = false"
 						/>
-					</div>
+					</TransitionGroup>
 				</MkStickyContainer>
 				<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
@@ -126,7 +134,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed } from 'vue';
+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';
@@ -146,7 +154,7 @@ 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';
+import { DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@@ -271,9 +279,9 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
-	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
-	if (isFile || isDriveFile || isDriveFolder) {
+	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
+	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
+	if (isFile || isDriveFiles || isDriveFolders) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -319,22 +327,6 @@ function onDrop(ev: DragEvent) {
 	}
 
 	//#region ドライブのファイル
-	{
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (driveFile != null && driveFile !== '') {
-			const file = JSON.parse(driveFile);
-			if (filesPaginator.items.value.some(f => f.id === file.id)) return;
-			misskeyApi('drive/files/update', {
-				fileId: file.id,
-				folderId: folder.value ? folder.value.id : null,
-			}).then(() => {
-				globalEvents.emit('driveFilesMoved', [file], folder.value);
-			});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
 	{
 		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
 		if (driveFiles != null && driveFiles !== '') {
@@ -350,6 +342,7 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 
 	//#region ドライブのフォルダ
+	// TODO
 	{
 		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
 		if (driveFolder != null && driveFolder !== '') {
@@ -704,6 +697,19 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" module>
+.transition_files_move,
+.transition_files_enterActive,
+.transition_files_leaveActive {
+	transition: all 0.2s ease;
+}
+.transition_files_enterFrom,
+.transition_files_leaveTo {
+	opacity: 0;
+}
+.transition_files_leaveActive {
+	position: absolute;
+}
+
 .nav {
 	display: flex;
 	width: 100%;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 7678d18e58..379aee0d6e 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -138,7 +138,7 @@ 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';
+import { DATA_TRANSFER_DRIVE_FILES } from '@/consts.js';
 
 const $i = ensureSignin();
 
@@ -702,8 +702,8 @@ 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;
-	if (isFile || isDriveFile) {
+	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
+	if (isFile || isDriveFiles) {
 		ev.preventDefault();
 		draghover.value = true;
 		switch (ev.dataTransfer.effectAllowed) {
@@ -744,11 +744,12 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILE);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		files.value.push(file);
-		ev.preventDefault();
+	{
+		const driveFiles = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILES);
+		if (driveFiles != null && driveFiles !== '') {
+			files.value.push(...JSON.parse(driveFiles));
+			ev.preventDefault();
+		}
 	}
 	//#endregion
 }
diff --git a/packages/frontend/src/consts.ts b/packages/frontend/src/consts.ts
index cbc3e28556..bdd2cae0d4 100644
--- a/packages/frontend/src/consts.ts
+++ b/packages/frontend/src/consts.ts
@@ -3,8 +3,6 @@
  * 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';
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index ea15a126a8..e5fba04165 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -47,7 +47,7 @@ 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';
+import { DATA_TRANSFER_DRIVE_FILES } from '@/consts.js';
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -102,8 +102,8 @@ 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;
-	if (isFile || isDriveFile) {
+	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
+	if (isFile || isDriveFiles) {
 		ev.preventDefault();
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
@@ -142,10 +142,12 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-	if (driveFile != null && driveFile !== '') {
-		file.value = JSON.parse(driveFile);
-		ev.preventDefault();
+	{
+		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
+		if (driveFiles != null && driveFiles !== '') {
+			file.value = JSON.parse(driveFiles)[0];
+			ev.preventDefault();
+		}
 	}
 	//#endregion
 }

From a9422d6ed6feb7d2cac578f4d39e3530f5026cf6 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 13:47:19 +0900
Subject: [PATCH 23/62] wip

---
 .../frontend/src/components/MkDrive.file.vue  |  4 +-
 .../src/components/MkDrive.folder.vue         | 29 +++++-------
 .../src/components/MkDrive.navFolder.vue      | 27 +++++------
 packages/frontend/src/components/MkDrive.vue  | 25 ++++------
 .../frontend/src/components/MkPostForm.vue    | 11 ++---
 packages/frontend/src/consts.ts               |  8 ----
 packages/frontend/src/drag-and-drop.ts        | 46 +++++++++++++++++++
 .../frontend/src/pages/chat/room.form.vue     | 11 ++---
 packages/frontend/src/ui/deck/column.vue      | 10 ++--
 9 files changed, 96 insertions(+), 75 deletions(-)
 delete mode 100644 packages/frontend/src/consts.ts
 create mode 100644 packages/frontend/src/drag-and-drop.ts

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index b84badf71f..b482f651dc 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -48,7 +48,7 @@ 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_FILES } from '@/consts.js';
+import { setDragData } from '@/drag-and-drop.js';
 
 const router = useRouter();
 
@@ -91,7 +91,7 @@ function onContextmenu(ev: MouseEvent) {
 function onDragstart(ev: DragEvent) {
 	if (ev.dataTransfer) {
 		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify([props.file]));
+		setDragData(ev, 'driveFiles', [props.file]);
 	}
 	isDragging.value = true;
 
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 61de77ade3..3782a847a9 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -42,8 +42,8 @@ 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_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 import { globalEvents } from '@/events.js';
+import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -95,10 +95,7 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
-	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
-
-	if (isFile || isDriveFiles || isDriveFolders) {
+	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -143,31 +140,29 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
+				fileIds: droppedData.map(f => f.id),
 				folderId: props.folder.id,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, props.folder);
+				globalEvents.emit('driveFilesMoved', droppedData, props.folder);
 			});
 		}
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
-	// TODO
 	{
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDERS);
-		if (driveFolder != null && driveFolder !== '') {
-			const folder = JSON.parse(driveFolder);
+		const droppedData = getDragData(ev, 'driveFolders');
+		if (droppedData != null) {
+			const droppedFolder = droppedData[0];
 
 			// 移動先が自分自身ならreject
-			if (folder.id === props.folder.id) return;
+			if (droppedFolder.id === props.folder.id) return;
 
 			misskeyApi('drive/folders/update', {
-				folderId: folder.id,
+				folderId: droppedFolder.id,
 				parentId: props.folder.id,
 			}).then(() => {
 			// noop
@@ -197,7 +192,7 @@ function onDragstart(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FOLDER, JSON.stringify(props.folder));
+	setDragData(ev, 'driveFolders', [props.folder]);
 	isDragging.value = true;
 
 	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index dd7031f111..7be031f8ac 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -21,8 +21,8 @@ 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_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 import { globalEvents } from '@/events.js';
+import { checkDragDataType, getDragData } from '@/drag-and-drop.js';
 
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
@@ -44,10 +44,7 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
-	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
-
-	if (isFile || isDriveFiles || isDriveFolders) {
+	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -94,29 +91,27 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
+				fileIds: droppedData.map(f => f.id),
 				folderId: props.folder ? props.folder.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, props.folder ?? null);
+				globalEvents.emit('driveFilesMoved', droppedData, props.folder ?? null);
 			});
 		}
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
-	// TODO
 	{
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (driveFolder != null && driveFolder !== '') {
-			const folder = JSON.parse(driveFolder);
+		const droppedData = getDragData(ev, 'driveFolders');
+		if (droppedData != null) {
+			const droppedFolder = droppedData[0];
 			// 移動先が自分自身ならreject
-			if (props.folder && folder.id === props.folder.id) return;
+			if (props.folder && droppedFolder.id === props.folder.id) return;
 			misskeyApi('drive/folders/update', {
-				folderId: folder.id,
+				folderId: droppedFolder.id,
 				parentId: props.folder ? props.folder.id : null,
 			});
 		}
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index a0896d4b4f..3a587bc720 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -154,7 +154,7 @@ 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_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
+import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@@ -261,7 +261,7 @@ function onFileDragstart(file: Misskey.entities.DriveFile, ev: DragEvent) {
 
 		if (ev.dataTransfer) {
 			ev.dataTransfer.effectAllowed = 'move';
-			ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify(selectedFiles.value));
+			setDragData(ev, 'driveFiles', selectedFiles.value);
 		}
 	}
 
@@ -279,9 +279,7 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
-	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
-	if (isFile || isDriveFiles || isDriveFolders) {
+	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -328,26 +326,23 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
+				fileIds: droppedData.map(f => f.id),
 				folderId: folder.value ? folder.value.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, folder.value);
+				globalEvents.emit('driveFilesMoved', droppedData, folder.value);
 			});
 		}
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
-	// TODO
 	{
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (driveFolder != null && driveFolder !== '') {
-			const droppedFolder = JSON.parse(driveFolder);
-
+		const droppedData = getDragData(ev, 'driveFolders');
+		if (droppedData != null) {
+			const droppedFolder = droppedData[0];
 			// 移動先が自分自身ならreject
 			if (folder.value && droppedFolder.id === folder.value.id) return false;
 			if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 379aee0d6e..5d19f32ea5 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -138,7 +138,7 @@ import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import { globalEvents } from '@/events.js';
-import { DATA_TRANSFER_DRIVE_FILES } from '@/consts.js';
+import { checkDragDataType, getDragData } from '@/drag-and-drop.js';
 
 const $i = ensureSignin();
 
@@ -702,8 +702,7 @@ async function onPaste(ev: ClipboardEvent) {
 function onDragover(ev) {
 	if (!ev.dataTransfer.items[0]) return;
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
-	if (isFile || isDriveFiles) {
+	if (isFile || checkDragDataType(ev, ['driveFiles'])) {
 		ev.preventDefault();
 		draghover.value = true;
 		switch (ev.dataTransfer.effectAllowed) {
@@ -745,9 +744,9 @@ function onDrop(ev: DragEvent): void {
 
 	//#region ドライブのファイル
 	{
-		const driveFiles = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			files.value.push(...JSON.parse(driveFiles));
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
+			files.value.push(...droppedData);
 			ev.preventDefault();
 		}
 	}
diff --git a/packages/frontend/src/consts.ts b/packages/frontend/src/consts.ts
deleted file mode 100644
index bdd2cae0d4..0000000000
--- a/packages/frontend/src/consts.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-export const DATA_TRANSFER_DRIVE_FILES = 'misskey-drive-files';
-export const DATA_TRANSFER_DRIVE_FOLDERS = 'misskey-drive-folders';
-export const DATA_TRANSFER_DECK_COLUMN = 'misskey-deck-column';
diff --git a/packages/frontend/src/drag-and-drop.ts b/packages/frontend/src/drag-and-drop.ts
new file mode 100644
index 0000000000..3d7910eece
--- /dev/null
+++ b/packages/frontend/src/drag-and-drop.ts
@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as Misskey from 'misskey-js';
+
+type DragDataMap = {
+	driveFiles: Misskey.entities.DriveFile[];
+	driveFolders: Misskey.entities.DriveFolder[];
+	deckColumn: string;
+};
+
+export function setDragData<T extends keyof DragDataMap>(
+	event: DragEvent,
+	type: T,
+	data: DragDataMap[T],
+) {
+	if (event.dataTransfer == null) return;
+
+	event.dataTransfer.setData(`misskey/${type}`, JSON.stringify(data));
+}
+
+export function getDragData<T extends keyof DragDataMap>(
+	event: DragEvent,
+	type: T,
+): DragDataMap[T] | null {
+	if (event.dataTransfer == null) return null;
+
+	const data = event.dataTransfer.getData(`misskey/${type}`);
+	if (data == null || data === '') return null;
+
+	return JSON.parse(data);
+}
+
+export function checkDragDataType(
+	event: DragEvent,
+	types: (keyof DragDataMap)[],
+): boolean {
+	if (event.dataTransfer == null) return false;
+
+	const dataType = event.dataTransfer.types[0];
+	if (dataType == null || dataType === '') return false;
+
+	return types.some((type) => dataType === `misskey/${type}`);
+}
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index e5fba04165..5e84ade08d 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -47,7 +47,7 @@ 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_FILES } from '@/consts.js';
+import { checkDragDataType, getDragData } from '@/drag-and-drop.js';
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -102,8 +102,7 @@ function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
-	if (isFile || isDriveFiles) {
+	if (isFile || checkDragDataType(ev, ['driveFiles'])) {
 		ev.preventDefault();
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
@@ -143,9 +142,9 @@ function onDrop(ev: DragEvent): void {
 
 	//#region ドライブのファイル
 	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			file.value = JSON.parse(driveFiles)[0];
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
+			file.value = droppedData[0];
 			ev.preventDefault();
 		}
 	}
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index d86d1f3d08..4e79b301e3 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -51,7 +51,7 @@ 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';
+import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
@@ -263,7 +263,7 @@ function goTop() {
 
 function onDragstart(ev) {
 	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(DATA_TRANSFER_DECK_COLUMN, props.column.id);
+	setDragData(ev, 'deckColumn', props.column.id);
 
 	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
 	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
@@ -282,7 +282,7 @@ function onDragover(ev) {
 		// 自分自身にはドロップさせない
 		ev.dataTransfer.dropEffect = 'none';
 	} else {
-		const isDeckColumn = ev.dataTransfer.types[0] === DATA_TRANSFER_DECK_COLUMN;
+		const isDeckColumn = checkDragDataType(ev, ['deckColumn']);
 
 		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
 
@@ -298,8 +298,8 @@ function onDrop(ev) {
 	draghover.value = false;
 	os.deckGlobalEvents.emit('column.dragEnd');
 
-	const id = ev.dataTransfer.getData(DATA_TRANSFER_DECK_COLUMN);
-	if (id != null && id !== '') {
+	const id = getDragData(ev, 'deckColumn');
+	if (id != null) {
 		swapColumn(props.column.id, id);
 	}
 }

From 73a83c0064bc4e87538269530c2853688b32398f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 13:38:29 +0900
Subject: [PATCH 24/62] feat(frontend): upload dialog (#16032)

* wip

* wip

* Update MkUploadDialog.vue

* wip

* wip

* wip

* wip

* wip

* Update MkUploadDialog.vue

* wip

* wip

* Update MkDrive.vue
---
 locales/index.d.ts                            |  18 +
 locales/ja-JP.yml                             |   6 +
 .../src/components/MkCropperDialog.vue        |  18 +-
 packages/frontend/src/components/MkDrive.vue  |  14 +-
 .../frontend/src/components/MkModalWindow.vue |  37 +-
 .../frontend/src/components/MkPostForm.vue    |   1 -
 .../src/components/MkUploadDialog.vue         | 375 ++++++++++++++++++
 .../src/components/global/MkSystemIcon.vue    |  26 +-
 .../admin/custom-emojis-manager.register.vue  |   1 -
 .../frontend/src/pages/chat/room.form.vue     |   1 -
 packages/frontend/src/pages/debug.vue         |   2 +
 packages/frontend/src/ui/_common_/common.vue  |   4 -
 packages/frontend/src/ui/_common_/upload.vue  | 134 -------
 .../utility/{upload => }/isWebpSupported.ts   |   0
 packages/frontend/src/utility/select-file.ts  |  25 +-
 packages/frontend/src/utility/upload.ts       | 197 +++------
 .../src/utility/upload/compress-config.ts     |  36 --
 17 files changed, 523 insertions(+), 372 deletions(-)
 create mode 100644 packages/frontend/src/components/MkUploadDialog.vue
 delete mode 100644 packages/frontend/src/ui/_common_/upload.vue
 rename packages/frontend/src/utility/{upload => }/isWebpSupported.ts (100%)
 delete mode 100644 packages/frontend/src/utility/upload/compress-config.ts

diff --git a/locales/index.d.ts b/locales/index.d.ts
index d4ff9a8b03..86987da735 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1210,6 +1210,10 @@ export interface Locale extends ILocale {
      * アップロードが完了するまで時間がかかる場合があります。
      */
     "uploadFromUrlMayTakeTime": string;
+    /**
+     * {n}個のファイルをアップロード
+     */
+    "uploadNFiles": ParameterizedString<"n">;
     /**
      * みつける
      */
@@ -11898,6 +11902,20 @@ export interface Locale extends ILocale {
             "text3": string;
         };
     };
+    "_uploader": {
+        /**
+         * {x}に圧縮
+         */
+        "compressedToX": ParameterizedString<"x">;
+        /**
+         * {x}%節約
+         */
+        "savedXPercent": ParameterizedString<"x">;
+        /**
+         * アップロードされていないファイルがありますが、中止しますか？
+         */
+        "abortConfirm": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8f1a245f02..58d7367856 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -298,6 +298,7 @@ uploadFromUrl: "URLアップロード"
 uploadFromUrlDescription: "アップロードしたいファイルのURL"
 uploadFromUrlRequested: "アップロードをリクエストしました"
 uploadFromUrlMayTakeTime: "アップロードが完了するまで時間がかかる場合があります。"
+uploadNFiles: "{n}個のファイルをアップロード"
 explore: "みつける"
 messageRead: "既読"
 noMoreHistory: "これより過去の履歴はありません"
@@ -3181,3 +3182,8 @@ _serverSetupWizard:
     text1: "Misskeyは有志によって開発されている無料のソフトウェアです。"
     text2: "今後も開発を続けられるように、よろしければぜひカンパをお願いいたします。"
     text3: "支援者向け特典もあります！"
+
+_uploader:
+  compressedToX: "{x}に圧縮"
+  savedXPercent: "{x}%節約"
+  abortConfirm: "アップロードされていないファイルがありますが、中止しますか？"
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index ba21394cbc..99854bc66e 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -15,18 +15,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.cropImage }}</template>
-	<template #default="{ width, height }">
-		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
-			<Transition name="fade">
-				<div v-if="loading" class="loading">
-					<MkLoading/>
-				</div>
-			</Transition>
-			<div class="container">
-				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
+	<div class="mk-cropper-dialog" :style="`--vw: 100%; --vh: 100%;`">
+		<Transition name="fade">
+			<div v-if="loading" class="loading">
+				<MkLoading/>
 			</div>
+		</Transition>
+		<div class="container">
+			<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
 		</div>
-	</template>
+	</div>
 </MkModalWindow>
 </template>
 
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 3a587bc720..ebea1eb745 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -53,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div
 			ref="main"
-			:class="[$style.main, { [$style.uploading]: uploadings.length > 0, [$style.fetching]: fetching }]"
+			:class="[$style.main, { [$style.fetching]: fetching }]"
 			@dragover.prevent.stop="onDragover"
 			@dragenter="onDragenter"
 			@dragleave="onDragleave"
@@ -146,7 +146,6 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
-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';
@@ -176,7 +175,6 @@ const emit = defineEmits<{
 
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
 const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const uploadings = uploads;
 
 // ドロップされようとしているか
 const draghover = ref(false);
@@ -561,12 +559,6 @@ function getMenu() {
 	menu.push({
 		text: i18n.ts.addFile,
 		type: 'label',
-	}, {
-		text: i18n.ts.upload + ' (' + i18n.ts.compress + ')',
-		icon: 'ti ti-upload',
-		action: () => {
-			chooseFileFromPc(true, { uploadFolder: folder.value?.id, keepOriginal: false });
-		},
 	}, {
 		text: i18n.ts.upload,
 		icon: 'ti ti-upload',
@@ -766,10 +758,6 @@ onBeforeUnmount(() => {
 		opacity: 0.5;
 		pointer-events: none;
 	}
-
-	&.uploading {
-		height: calc(100% - 38px - 100px);
-	}
 }
 
 .folders,
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index 19989e375b..6b81e353e6 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
 	<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }">
-		<div ref="headerEl" :class="$style.header">
+		<div :class="$style.header">
 			<button v-if="withOkButton && withCloseButton" :class="$style.headerButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button>
 			<span :class="$style.title">
 				<slot name="header"></slot>
@@ -15,7 +15,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
 		<div :class="$style.body">
-			<slot :width="bodyWidth" :height="bodyHeight"></slot>
+			<slot></slot>
+		</div>
+		<div v-if="$slots.footer" :class="$style.footer">
+			<slot name="footer"></slot>
 		</div>
 	</div>
 </MkModal>
@@ -48,10 +51,6 @@ const emit = defineEmits<{
 }>();
 
 const modal = useTemplateRef('modal');
-const rootEl = useTemplateRef('rootEl');
-const headerEl = useTemplateRef('headerEl');
-const bodyWidth = ref(0);
-const bodyHeight = ref(0);
 
 function close() {
 	modal.value?.close();
@@ -61,23 +60,6 @@ function onBgClick() {
 	emit('click');
 }
 
-const ro = new ResizeObserver((entries, observer) => {
-	if (rootEl.value == null || headerEl.value == null) return;
-	bodyWidth.value = rootEl.value.offsetWidth;
-	bodyHeight.value = rootEl.value.offsetHeight - headerEl.value.offsetHeight;
-});
-
-onMounted(() => {
-	if (rootEl.value == null || headerEl.value == null) return;
-	bodyWidth.value = rootEl.value.offsetWidth;
-	bodyHeight.value = rootEl.value.offsetHeight - headerEl.value.offsetHeight;
-	ro.observe(rootEl.value);
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
-
 defineExpose({
 	close,
 });
@@ -143,7 +125,14 @@ defineExpose({
 .body {
 	flex: 1;
 	overflow: auto;
-	background: var(--MI_THEME-panel);
+	background: var(--MI_THEME-bg);
 	container-type: size;
 }
+
+.footer {
+	padding: 8px 16px;
+	overflow: auto;
+	background: var(--MI_THEME-bg);
+	border-top: 1px solid var(--MI_THEME-divider);
+}
 </style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 5d19f32ea5..4fa33e1f63 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -127,7 +127,6 @@ import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { ensureSignin, notesCount, incNotesCount } from '@/i.js';
 import { getAccounts, openAccountMenu as openAccountMenu_ } from '@/accounts.js';
-import { uploadFile } from '@/utility/upload.js';
 import { deepClone } from '@/utility/clone.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
new file mode 100644
index 0000000000..e942a8300a
--- /dev/null
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -0,0 +1,375 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="800"
+	:height="500"
+	@close="cancel()"
+	@closed="emit('closed')"
+>
+	<template #header>
+		<i class="ti ti-upload"></i> {{ i18n.tsx.uploadNFiles({ n: files.length }) }}
+	</template>
+
+	<div :class="$style.root" class="_gaps_s">
+		<div :class="$style.items" class="_gaps_s">
+			<div
+				v-for="ctx in items"
+				:key="ctx.id"
+				v-panel
+				:class="[$style.item, ctx.waiting ? $style.itemWaiting : null, ctx.uploaded ? $style.itemCompleted : null, ctx.uploadFailed ? $style.itemFailed : null]"
+				:style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }"
+			>
+				<div :class="$style.itemInner">
+					<div>
+						<MkButton :iconOnly="true" rounded @click="showMenu($event, ctx)"><i class="ti ti-dots"></i></MkButton>
+					</div>
+					<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
+					<div :class="$style.itemBody">
+						<div>{{ ctx.name }}</div>
+						<div :class="$style.itemInfo">
+							<span>{{ bytes(ctx.file.size) }}</span>
+							<span v-if="ctx.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(ctx.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - ctx.compressedSize / ctx.file.size) * 100) }) }})</span>
+						</div>
+						<div>
+						</div>
+					</div>
+					<div>
+						<MkSystemIcon v-if="ctx.uploading" :class="$style.itemIcon" type="waiting"/>
+						<MkSystemIcon v-else-if="ctx.uploaded" :class="$style.itemIcon" type="success"/>
+						<MkSystemIcon v-else-if="ctx.uploadFailed" :class="$style.itemIcon" type="error"/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<MkSelect
+			v-if="items.length > 0"
+			v-model="compressionLevel"
+			:items="[
+				{ value: 0, label: i18n.ts.none },
+				{ value: 1, label: i18n.ts.low },
+				{ value: 2, label: i18n.ts.middle },
+				{ value: 3, label: i18n.ts.high },
+			]"
+		>
+			<template #label>{{ i18n.ts.compress }}</template>
+		</MkSelect>
+	</div>
+
+	<template #footer>
+		<div class="_buttonsCenter">
+			<MkButton v-if="isUploading" rounded @click="cancel()"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
+			<MkButton v-else-if="!firstUploadAttempted" primary rounded @click="upload()"><i class="ti ti-upload"></i> {{ i18n.ts.upload }}</MkButton>
+			<MkButton v-else-if="canRetry" primary rounded @click="upload()"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
+		</div>
+	</template>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { computed, markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import { v4 as uuid } from 'uuid';
+import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
+import { apiUrl } from '@@/js/config.js';
+import isAnimated from 'is-file-animated';
+import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n.js';
+import { prefer } from '@/preferences.js';
+import { ensureSignin } from '@/i.js';
+import { instance } from '@/instance.js';
+import MkButton from '@/components/MkButton.vue';
+import bytes from '@/filters/bytes.js';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import { isWebpSupported } from '@/utility/isWebpSupported.js';
+import { uploadFile } from '@/utility/upload.js';
+import * as os from '@/os.js';
+
+const $i = ensureSignin();
+
+const compressionSupportedTypes = [
+	'image/jpeg',
+	'image/png',
+	'image/webp',
+	'image/svg+xml',
+] as const;
+
+const mimeTypeMap = {
+	'image/webp': 'webp',
+	'image/jpeg': 'jpg',
+	'image/png': 'png',
+} as const;
+
+const props = withDefaults(defineProps<{
+	files: File[];
+	folderId?: string | null;
+}>(), {
+
+});
+
+const emit = defineEmits<{
+	(ev: 'done', driveFiles: Misskey.entities.DriveFile[]): void;
+	(ev: 'closed'): void;
+}>();
+
+const items = ref([] as {
+	id: string;
+	name: string;
+	progressMax: number | null;
+	progressValue: number | null;
+	thumbnail: string;
+	waiting: boolean;
+	uploading: boolean;
+	uploaded: Misskey.entities.DriveFile | null;
+	uploadFailed: boolean;
+	compressedSize?: number | null;
+	compressedImage?: Blob | null;
+	file: File;
+}[]);
+
+const dialog = useTemplateRef('dialog');
+
+const firstUploadAttempted = ref(false);
+const isUploading = computed(() => items.value.some(item => item.uploading));
+const canRetry = computed(() => firstUploadAttempted.value && !items.value.some(item => item.uploading || item.waiting) && items.value.some(item => item.uploaded == null));
+
+const compressionLevel = ref<0 | 1 | 2 | 3>(2);
+const compressionSettings = computed(() => {
+	if (compressionLevel.value === 1) {
+		return {
+			maxWidth: 2000,
+			maxHeight: 2000,
+		};
+	} else if (compressionLevel.value === 2) {
+		return {
+			maxWidth: 2000 * 0.75, // =1500
+			maxHeight: 2000 * 0.75, // =1500
+		};
+	} else if (compressionLevel.value === 3) {
+		return {
+			maxWidth: 2000 * 0.75 * 0.75, // =1125
+			maxHeight: 2000 * 0.75 * 0.75, // =1125
+		};
+	} else {
+		return null;
+	}
+});
+
+watch(items, () => {
+	if (items.value.length === 0) {
+		dialog.value?.close();
+		return;
+	}
+
+	if (items.value.every(item => item.uploaded)) {
+		emit('done', items.value.map(item => item.uploaded!));
+		dialog.value?.close();
+	}
+}, { deep: true });
+
+async function cancel() {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.ts._uploader.abortConfirm,
+		okText: i18n.ts.yes,
+		cancelText: i18n.ts.no,
+	});
+	if (canceled) return;
+
+	emit('done', items.value.filter(item => item.uploaded != null).map(item => item.uploaded!));
+	dialog.value?.close();
+}
+
+function showMenu(ev: MouseEvent, item: typeof items.value[0]) {
+
+}
+
+async function upload() { // エラーハンドリングなどを考慮してシーケンシャルにやる
+	firstUploadAttempted.value = true;
+
+	for (const item of items.value.filter(item => item.uploaded == null)) {
+		item.waiting = true;
+		item.uploadFailed = false;
+
+		const shouldCompress = item.compressedImage == null && compressionLevel.value !== 0 && compressionSettings.value && compressionSupportedTypes.includes(item.file.type) && !(await isAnimated(item.file));
+
+		if (shouldCompress) {
+			const config = {
+				mimeType: isWebpSupported() ? 'image/webp' : 'image/jpeg',
+				maxWidth: compressionSettings.value.maxWidth,
+				maxHeight: compressionSettings.value.maxHeight,
+				quality: isWebpSupported() ? 0.85 : 0.8,
+			};
+
+			try {
+				const result = await readAndCompressImage(item.file, config);
+				if (result.size < item.file.size || item.file.type === 'image/webp') {
+					// The compression may not always reduce the file size
+					// (and WebP is not browser safe yet)
+					item.compressedImage = markRaw(result);
+					item.compressedSize = result.size;
+					item.name = item.file.type !== config.mimeType ? `${item.name}.${mimeTypeMap[config.mimeType]}` : item.name;
+				}
+			} catch (err) {
+				console.error('Failed to resize image', err);
+			}
+		}
+
+		item.uploading = true;
+
+		const driveFile = await uploadFile(item.compressedImage ?? item.file, {
+			name: item.name,
+			folderId: props.folderId,
+			onProgress: (progress) => {
+				item.waiting = false;
+				item.progressMax = progress.total;
+				item.progressValue = progress.loaded;
+			},
+		}).catch(err => {
+			item.uploadFailed = true;
+			item.progressMax = null;
+			item.progressValue = null;
+			throw err;
+		}).finally(() => {
+			item.uploading = false;
+		});
+
+		item.uploaded = driveFile;
+	}
+}
+
+onMounted(() => {
+	for (const file of props.files) {
+		const id = uuid();
+		const filename = file.name ?? 'untitled';
+		const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
+		items.value.push({
+			id,
+			name: prefer.s.keepOriginalFilename ? filename : id + extension,
+			progressMax: null,
+			progressValue: null,
+			thumbnail: window.URL.createObjectURL(file),
+			waiting: false,
+			uploading: false,
+			uploaded: null,
+			uploadFailed: false,
+			file: markRaw(file),
+		});
+	}
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 12px;
+}
+
+.items {
+}
+
+.item {
+	position: relative;
+	border-radius: 10px;
+	overflow: clip;
+
+	&::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: var(--p);
+		height: 100%;
+		background: color(from var(--MI_THEME-accent) srgb r g b / 0.5);
+		transition: width 0.2s ease, left 0.2s ease;
+	}
+
+	&.itemWaiting {
+		&::after {
+			--c: color(from var(--MI_THEME-accent) srgb r g b / 0.25);
+
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(-45deg, transparent 25%, var(--c) 25%,var(--c) 50%, transparent 50%, transparent 75%, var(--c) 75%, var(--c));
+			background-size: 25px 25px;
+			animation: stripe .8s infinite linear;
+		}
+	}
+
+	&.itemCompleted {
+		&::before {
+			left: 100%;
+			width: var(--p);
+		}
+
+		.itemBody {
+			color: var(--MI_THEME-accent);
+		}
+	}
+
+	&.itemFailed {
+		.itemBody {
+			color: var(--MI_THEME-error);
+		}
+	}
+}
+
+@keyframes stripe {
+	0% { background-position-x: 0; }
+	100% { background-position-x: -25px; }
+}
+
+.itemInner {
+	position: relative;
+	z-index: 1;
+	padding: 8px 16px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.itemThumbnail {
+	width: 70px;
+	height: 70px;
+	background-color: var(--MI_THEME-bg);
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	border-radius: 6px;
+}
+
+.itemBody {
+	flex: 1;
+	min-width: 0;
+}
+
+@container (max-width: 500px) {
+	.itemBody {
+		font-size: 90%;
+	}
+}
+
+.itemInfo {
+	opacity: 0.7;
+	margin-top: 4px;
+	font-size: 90%;
+	display: flex;
+	gap: 8px;
+}
+
+.itemIcon {
+	width: 35px;
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkSystemIcon.vue b/packages/frontend/src/components/global/MkSystemIcon.vue
index 3454cdc9f2..d2ef0fb2d8 100644
--- a/packages/frontend/src/components/global/MkSystemIcon.vue
+++ b/packages/frontend/src/components/global/MkSystemIcon.vue
@@ -28,13 +28,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<path d="M96,63L63,96" style="--l:47;--duration:0.3s;--delay:0.2s;" :class="[$style.line, $style.animLine]"/>
 	<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.animCircle]"/>
 </svg>
+<svg v-else-if="type === 'waiting'" :class="[$style.icon, $style.waiting]" viewBox="0 0 160 160">
+	<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.animCircleWaiting]"/>
+	<circle cx="80" cy="80" r="56" style="opacity: 0.25;" :class="[$style.line]"/>
+</svg>
 </template>
 
 <script lang="ts" setup>
 import {} from 'vue';
 
 const props = defineProps<{
-	type: 'info' | 'question' | 'success' | 'warn' | 'error';
+	type: 'info' | 'question' | 'success' | 'warn' | 'error' | 'waiting';
 }>();
 </script>
 
@@ -62,6 +66,10 @@ const props = defineProps<{
 	&.error {
 		color: var(--MI_THEME-error);
 	}
+
+	&.waiting {
+		color: var(--MI_THEME-accent);
+	}
 }
 
 .line {
@@ -87,6 +95,13 @@ const props = defineProps<{
 	transform: rotate(-90deg);
 }
 
+.animCircleWaiting {
+	stroke-dasharray: var(--l);
+	stroke-dashoffset: calc(var(--l) / 1.5);
+	animation: waiting 0.75s linear infinite;
+	transform-origin: center;
+}
+
 .animFade {
 	opacity: 0;
 	animation: fade-in var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
@@ -104,6 +119,15 @@ const props = defineProps<{
 	}
 }
 
+@keyframes waiting {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 @keyframes fade-in {
 	0% {
 		opacity: 0;
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
index e8e944df32..0f4912ece1 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
@@ -95,7 +95,6 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { validators } from '@/components/grid/cell-validators.js';
 import { chooseFileFromDrive, chooseFileFromPc } from '@/utility/select-file.js';
-import { uploadFile } from '@/utility/upload.js';
 import { extractDroppedItems, flattenDroppedFiles } from '@/utility/file-drop.js';
 import XRegisterLogs from '@/pages/admin/custom-emojis-manager.logs.vue';
 import { copyGridDataToClipboard } from '@/components/grid/grid-utils.js';
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index 5e84ade08d..cf303301c5 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -41,7 +41,6 @@ import { formatTimeString } from '@/utility/format-time-string.js';
 import { selectFile } from '@/utility/select-file.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
-import { uploadFile } from '@/utility/upload.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { prefer } from '@/preferences.js';
diff --git a/packages/frontend/src/pages/debug.vue b/packages/frontend/src/pages/debug.vue
index 4a28d513f5..5cd68c2c3a 100644
--- a/packages/frontend/src/pages/debug.vue
+++ b/packages/frontend/src/pages/debug.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkSystemIcon v-if="iconType === 'success'" type="success" style="width: 150px;"/>
 			<MkSystemIcon v-if="iconType === 'warn'" type="warn" style="width: 150px;"/>
 			<MkSystemIcon v-if="iconType === 'error'" type="error" style="width: 150px;"/>
+			<MkSystemIcon v-if="iconType === 'waiting'" type="waiting" style="width: 150px;"/>
 			<MkSelect
 				v-model="iconType" :items="[
 					{ label: 'info', value: 'info' },
@@ -30,6 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					{ label: 'success', value: 'success' },
 					{ label: 'warn', value: 'warn' },
 					{ label: 'error', value: 'error' },
+					{ label: 'waiting', value: 'waiting' },
 				]"
 			></MkSelect>
 
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index fcf9fb234d..da20d23cfd 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -65,8 +65,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-on="popup.events"
 />
 
-<XUpload v-if="uploads.length > 0"/>
-
 <component
 	:is="prefer.s.animation ? TransitionGroup : 'div'"
 	tag="div"
@@ -105,7 +103,6 @@ import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
 import { popups } from '@/os.js';
 import { pendingApiRequestsCount } from '@/utility/misskey-api.js';
-import { uploads } from '@/utility/upload.js';
 import * as sound from '@/utility/sound.js';
 import { $i } from '@/i.js';
 import { useStream } from '@/stream.js';
@@ -116,7 +113,6 @@ import { store } from '@/store.js';
 import XNavbar from '@/ui/_common_/navbar.vue';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
-const XUpload = defineAsyncComponent(() => import('./upload.vue'));
 const XWidgets = defineAsyncComponent(() => import('./widgets.vue'));
 
 const drawerMenuShowing = defineModel<boolean>('drawerMenuShowing');
diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue
deleted file mode 100644
index 3e5653e46d..0000000000
--- a/packages/frontend/src/ui/_common_/upload.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="mk-uploader _acrylic" :style="{ zIndex }">
-	<ol v-if="uploads.length > 0">
-		<li v-for="ctx in uploads" :key="ctx.id">
-			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
-			<div class="top">
-				<p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
-				<p class="status">
-					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-					<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
-				</p>
-			</div>
-			<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
-		</li>
-	</ol>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os.js';
-import { uploads } from '@/utility/upload.js';
-import { i18n } from '@/i18n.js';
-
-const zIndex = os.claimZIndex('high');
-</script>
-
-<style lang="scss" scoped>
-.mk-uploader {
-	position: fixed;
-	right: 16px;
-	width: 260px;
-	top: 32px;
-	padding: 16px 20px;
-	pointer-events: none;
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: 8px;
-}
-.mk-uploader:empty {
-  display: none;
-}
-.mk-uploader > ol {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.mk-uploader > ol > li {
-  display: grid;
-  margin: 8px 0 0 0;
-  padding: 0;
-  height: 36px;
-  width: 100%;
-  border-top: solid 8px transparent;
-  grid-template-columns: 36px calc(100% - 44px);
-  grid-template-rows: 1fr 8px;
-  column-gap: 8px;
-  box-sizing: content-box;
-}
-.mk-uploader > ol > li:first-child {
-  margin: 0;
-  box-shadow: none;
-  border-top: none;
-}
-.mk-uploader > ol > li > .img {
-  display: block;
-  background-size: cover;
-  background-position: center center;
-  grid-column: 1/2;
-  grid-row: 1/3;
-}
-.mk-uploader > ol > li > .top {
-  display: flex;
-  grid-column: 2/3;
-  grid-row: 1/2;
-}
-.mk-uploader > ol > li > .top > .name {
-  display: block;
-  padding: 0 8px 0 0;
-  margin: 0;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-shrink: 1;
-}
-.mk-uploader > ol > li > .top > .name > i {
-  margin-right: 4px;
-}
-.mk-uploader > ol > li > .top > .status {
-  display: block;
-  margin: 0 0 0 auto;
-  padding: 0;
-  font-size: 0.8em;
-  flex-shrink: 0;
-}
-.mk-uploader > ol > li > .top > .status > .initing {
-}
-.mk-uploader > ol > li > .top > .status > .kb {
-}
-.mk-uploader > ol > li > .top > .status > .percentage {
-  display: inline-block;
-  width: 48px;
-  text-align: right;
-}
-.mk-uploader > ol > li > .top > .status > .percentage:after {
-  content: '%';
-}
-.mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
-	width: 100%;
-	height: 8px;
-}
-.mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--MI_THEME-accent);
-}
-.mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--MI_THEME-accentAlpha01);
-	background: transparent;
-}
-</style>
diff --git a/packages/frontend/src/utility/upload/isWebpSupported.ts b/packages/frontend/src/utility/isWebpSupported.ts
similarity index 100%
rename from packages/frontend/src/utility/upload/isWebpSupported.ts
rename to packages/frontend/src/utility/isWebpSupported.ts
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index 731ef58302..fe8a87f111 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -3,25 +3,22 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { ref } from 'vue';
+import { defineAsyncComponent, markRaw, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
-import { uploadFile } from '@/utility/upload.js';
 import { prefer } from '@/preferences.js';
 
 export function chooseFileFromPc(
 	multiple: boolean,
 	options?: {
 		uploadFolder?: string | null;
-		keepOriginal?: boolean;
 		nameConverter?: (file: File) => string | undefined;
 	},
 ): Promise<Misskey.entities.DriveFile[]> {
 	const uploadFolder = options?.uploadFolder ?? prefer.s.uploadFolder;
-	const keepOriginal = options?.keepOriginal ?? false;
 	const nameConverter = options?.nameConverter ?? (() => undefined);
 
 	return new Promise((res, rej) => {
@@ -30,15 +27,15 @@ export function chooseFileFromPc(
 		input.multiple = multiple;
 		input.onchange = () => {
 			if (!input.files) return res([]);
-			const promises = Array.from(
-				input.files,
-				file => uploadFile(file, uploadFolder, nameConverter(file), keepOriginal),
-			);
 
-			Promise.all(promises).then(driveFiles => {
-				res(driveFiles);
-			}).catch(err => {
-				// アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない
+			const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUploadDialog.vue')), {
+				files: markRaw(Array.from(input.files)),
+				folderId: uploadFolder,
+			}, {
+				done: driveFiles => {
+					res(driveFiles);
+				},
+				closed: () => dispose(),
 			});
 
 			// 一応廃棄
@@ -100,10 +97,6 @@ function select(src: HTMLElement | EventTarget | null, label: string | null, mul
 			text: label,
 			type: 'label',
 		} : undefined, {
-			text: i18n.ts.upload + ' (' + i18n.ts.compress + ')',
-			icon: 'ti ti-upload',
-			action: () => chooseFileFromPc(multiple, { keepOriginal: false }).then(files => res(files)),
-		}, {
 			text: i18n.ts.upload,
 			icon: 'ti ti-upload',
 			action: () => chooseFileFromPc(multiple, { keepOriginal: true }).then(files => res(files)),
diff --git a/packages/frontend/src/utility/upload.ts b/packages/frontend/src/utility/upload.ts
index 03240749e9..22735db844 100644
--- a/packages/frontend/src/utility/upload.ts
+++ b/packages/frontend/src/utility/upload.ts
@@ -3,160 +3,95 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { reactive, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
-import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
 import { apiUrl } from '@@/js/config.js';
-import { getCompressionConfig } from './upload/compress-config.js';
 import { $i } from '@/i.js';
-import { alert } from '@/os.js';
-import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
-import { prefer } from '@/preferences.js';
-
-type Uploading = {
-	id: string;
-	name: string;
-	progressMax: number | undefined;
-	progressValue: number | undefined;
-	img: string;
-};
-export const uploads = ref<Uploading[]>([]);
-
-const mimeTypeMap = {
-	'image/webp': 'webp',
-	'image/jpeg': 'jpg',
-	'image/png': 'png',
-} as const;
-
-export function uploadFile(
-	file: File,
-	folder?: string | Misskey.entities.DriveFolder | null,
-	name?: string,
-	keepOriginal = false,
-): Promise<Misskey.entities.DriveFile> {
-	if ($i == null) throw new Error('Not logged in');
-
-	const _folder = typeof folder === 'string' ? folder : folder?.id;
-
-	if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
-		alert({
-			type: 'error',
-			title: i18n.ts.failedToUpload,
-			text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
-		});
-		return Promise.reject();
-	}
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
 
+export function uploadFile(file: File | Blob, options: {
+	name?: string;
+	folderId?: string | null;
+	onProgress?: (ctx: { total: number; loaded: number; }) => void;
+} = {}): Promise<Misskey.entities.DriveFile> {
 	return new Promise((resolve, reject) => {
-		const id = uuid();
+		if ($i == null) return reject();
 
-		const reader = new FileReader();
-		reader.onload = async (): Promise<void> => {
-			const filename = name ?? file.name ?? 'untitled';
-			const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
-
-			const ctx = reactive<Uploading>({
-				id,
-				name: prefer.s.keepOriginalFilename ? filename : id + extension,
-				progressMax: undefined,
-				progressValue: undefined,
-				img: window.URL.createObjectURL(file),
+		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.failedToUpload,
+				text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
 			});
+			return reject();
+		}
 
-			uploads.value.push(ctx);
-
-			const config = !keepOriginal ? await getCompressionConfig(file) : undefined;
-			let resizedImage: Blob | undefined;
-			if (config) {
-				try {
-					const resized = await readAndCompressImage(file, config);
-					if (resized.size < file.size || file.type === 'image/webp') {
-						// The compression may not always reduce the file size
-						// (and WebP is not browser safe yet)
-						resizedImage = resized;
-					}
-					if (_DEV_) {
-						const saved = ((1 - resized.size / file.size) * 100).toFixed(2);
-						console.log(`Image compression: before ${file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
-					}
-
-					ctx.name = file.type !== config.mimeType ? `${ctx.name}.${mimeTypeMap[config.mimeType]}` : ctx.name;
-				} catch (err) {
-					console.error('Failed to resize image', err);
-				}
-			}
-
-			const formData = new FormData();
-			formData.append('i', $i!.token);
-			formData.append('force', 'true');
-			formData.append('file', resizedImage ?? file);
-			formData.append('name', ctx.name);
-			if (_folder) formData.append('folderId', _folder);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', apiUrl + '/drive/files/create', true);
-			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
-				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
-					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
-					uploads.value = uploads.value.filter(x => x.id !== id);
-
-					if (xhr.status === 413) {
-						alert({
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', apiUrl + '/drive/files/create', true);
+		xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
+			if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
+				if (xhr.status === 413) {
+					os.alert({
+						type: 'error',
+						title: i18n.ts.failedToUpload,
+						text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+					});
+				} else if (ev.target?.response) {
+					const res = JSON.parse(ev.target.response);
+					if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
+						os.alert({
 							type: 'error',
 							title: i18n.ts.failedToUpload,
-							text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+							text: i18n.ts.cannotUploadBecauseInappropriate,
 						});
-					} else if (ev.target?.response) {
-						const res = JSON.parse(ev.target.response);
-						if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseInappropriate,
-							});
-						} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseNoFreeSpace,
-							});
-						} else {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
-							});
-						}
-					} else {
-						alert({
+					} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
+						os.alert({
 							type: 'error',
-							title: 'Failed to upload',
-							text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
+							title: i18n.ts.failedToUpload,
+							text: i18n.ts.cannotUploadBecauseNoFreeSpace,
+						});
+					} else {
+						os.alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
 						});
 					}
-
-					reject();
-					return;
+				} else {
+					os.alert({
+						type: 'error',
+						title: 'Failed to upload',
+						text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
+					});
 				}
 
-				const driveFile = JSON.parse(ev.target.response);
+				reject();
+				return;
+			}
 
-				resolve(driveFile);
-
-				uploads.value = uploads.value.filter(x => x.id !== id);
-			}) as (ev: ProgressEvent<EventTarget>) => any;
+			const driveFile = JSON.parse(ev.target.response);
+			resolve(driveFile);
+		}) as (ev: ProgressEvent<EventTarget>) => any;
 
+		if (options.onProgress) {
 			xhr.upload.onprogress = ev => {
 				if (ev.lengthComputable) {
-					ctx.progressMax = ev.total;
-					ctx.progressValue = ev.loaded;
+					options.onProgress({
+						total: ev.total,
+						loaded: ev.loaded,
+					});
 				}
 			};
+		}
 
-			xhr.send(formData);
-		};
-		reader.readAsArrayBuffer(file);
+		const formData = new FormData();
+		formData.append('i', $i.token);
+		formData.append('force', 'true');
+		formData.append('file', file);
+		formData.append('name', options.name ?? file.name ?? 'untitled');
+		if (options.folderId) formData.append('folderId', options.folderId);
+
+		xhr.send(formData);
 	});
 }
diff --git a/packages/frontend/src/utility/upload/compress-config.ts b/packages/frontend/src/utility/upload/compress-config.ts
deleted file mode 100644
index 3046b7f518..0000000000
--- a/packages/frontend/src/utility/upload/compress-config.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import isAnimated from 'is-file-animated';
-import { isWebpSupported } from './isWebpSupported.js';
-import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
-
-const compressTypeMap = {
-	'image/jpeg': { quality: 0.90, mimeType: 'image/webp' },
-	'image/png': { quality: 1, mimeType: 'image/webp' },
-	'image/webp': { quality: 0.90, mimeType: 'image/webp' },
-	'image/svg+xml': { quality: 1, mimeType: 'image/webp' },
-} as const;
-
-const compressTypeMapFallback = {
-	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
-	'image/png': { quality: 1, mimeType: 'image/png' },
-	'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
-	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
-} as const;
-
-export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
-	const imgConfig = (isWebpSupported() ? compressTypeMap : compressTypeMapFallback)[file.type];
-	if (!imgConfig || await isAnimated(file)) {
-		return;
-	}
-
-	return {
-		maxWidth: 2048,
-		maxHeight: 2048,
-		debug: true,
-		...imgConfig,
-	};
-}

From 6c7f24fbb8b3718dffc02fa1c78a52c87ad3eeba Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 14:03:50 +0900
Subject: [PATCH 25/62] wip

---
 packages/frontend/src/components/MkDrive.vue       | 14 ++++++--------
 packages/frontend/src/components/MkPostForm.vue    |  8 --------
 packages/frontend/src/events.ts                    |  1 +
 .../pages/admin/custom-emojis-manager.register.vue |  2 +-
 packages/frontend/src/pages/chat/room.form.vue     |  6 ------
 packages/frontend/src/utility/upload.ts            |  2 ++
 6 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index ebea1eb745..b5840dad51 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -446,14 +446,6 @@ 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)) {
-			filesPaginator.prepend(res);
-		}
-	});
-}
-
 function onChooseFile(file: Misskey.entities.DriveFile) {
 	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
 
@@ -649,6 +641,12 @@ function closeTip() {
 	store.set('readDriveTip', true);
 }
 
+useGlobalEvent('driveFileCreated', (file) => {
+	if (file.folderId === (folder.value?.id ?? null)) {
+		filesPaginator.prepend(file);
+	}
+});
+
 useGlobalEvent('driveFilesMoved', (files, to) => {
 	for (const f of files) {
 		filesPaginator.removeItem(f.id);
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 4fa33e1f63..76965f91f5 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -463,14 +463,6 @@ function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities
 	files.value[files.value.findIndex(x => x.id === file.id)] = newFile;
 }
 
-function upload(file: File, name?: string): void {
-	if (props.mock) return;
-
-	uploadFile(file, prefer.s.uploadFolder, name).then(res => {
-		files.value.push(res);
-	});
-}
-
 function setVisibility() {
 	if (props.channel) {
 		visibility.value = 'public';
diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts
index 83412b365a..c1bbec724e 100644
--- a/packages/frontend/src/events.ts
+++ b/packages/frontend/src/events.ts
@@ -13,6 +13,7 @@ type Events = {
 	clientNotification: (notification: Misskey.entities.Notification) => void;
 	notePosted: (note: Misskey.entities.Note) => void;
 	noteDeleted: (noteId: Misskey.entities.Note['id']) => void;
+	driveFileCreated: (file: Misskey.entities.DriveFile) => void;
 	driveFilesMoved: (files: Misskey.entities.DriveFile[], to: Misskey.entities.DriveFolder | null) => void;
 };
 
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
index 0f4912ece1..6b11a181b0 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
@@ -329,7 +329,7 @@ async function onDrop(ev: DragEvent) {
 				Promise.all(
 					droppedFiles.map(async (it) => ({
 						droppedFile: it,
-						driveFile: await uploadFile(
+						driveFile: await uploadFile( // TODO
 							it.file,
 							selectedFolderId.value,
 							it.file.name.replace(/\.[^.]+$/, ''),
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index cf303301c5..ff3ea6d32b 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -176,12 +176,6 @@ function onChangeFile() {
 	if (fileEl.value.files[0]) upload(fileEl.value.files[0]);
 }
 
-function upload(fileToUpload: File, name?: string) {
-	uploadFile(fileToUpload, prefer.s.uploadFolder, name).then(res => {
-		file.value = res;
-	});
-}
-
 function send() {
 	if (!canSend.value) return;
 
diff --git a/packages/frontend/src/utility/upload.ts b/packages/frontend/src/utility/upload.ts
index 22735db844..134d468fff 100644
--- a/packages/frontend/src/utility/upload.ts
+++ b/packages/frontend/src/utility/upload.ts
@@ -9,6 +9,7 @@ import { $i } from '@/i.js';
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { globalEvents } from '@/events.js';
 
 export function uploadFile(file: File | Blob, options: {
 	name?: string;
@@ -71,6 +72,7 @@ export function uploadFile(file: File | Blob, options: {
 			}
 
 			const driveFile = JSON.parse(ev.target.response);
+			globalEvents.emit('driveFileCreated', driveFile);
 			resolve(driveFile);
 		}) as (ev: ProgressEvent<EventTarget>) => any;
 

From 90c40cd153c40421a768b83d50f8f63a4c7ada82 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 14:20:43 +0900
Subject: [PATCH 26/62] wip

---
 packages/frontend/src/components/MkDrive.vue  |  6 ++--
 .../frontend/src/components/MkPostForm.vue    |  2 +-
 ...kUploadDialog.vue => MkUploaderDialog.vue} |  0
 packages/frontend/src/os.ts                   | 19 +++++++++++++
 .../frontend/src/pages/chat/room.form.vue     |  8 ++++--
 packages/frontend/src/utility/select-file.ts  | 28 +++++++------------
 6 files changed, 39 insertions(+), 24 deletions(-)
 rename packages/frontend/src/components/{MkUploadDialog.vue => MkUploaderDialog.vue} (100%)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index b5840dad51..edbde654ec 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -316,9 +316,9 @@ function onDrop(ev: DragEvent) {
 
 	// ドロップされてきたものがファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			upload(file, folder.value);
-		}
+		os.launchUploader(Array.from(ev.dataTransfer.files), {
+			folderId: folder.value?.id ?? null,
+		});
 		return;
 	}
 
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 76965f91f5..457a369ddb 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -729,7 +729,7 @@ function onDrop(ev: DragEvent): void {
 	// ファイルだったら
 	if (ev.dataTransfer && ev.dataTransfer.files.length > 0) {
 		ev.preventDefault();
-		for (const x of Array.from(ev.dataTransfer.files)) upload(x);
+		os.launchUploader(Array.from(ev.dataTransfer.files), {});
 		return;
 	}
 
diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
similarity index 100%
rename from packages/frontend/src/components/MkUploadDialog.vue
rename to packages/frontend/src/components/MkUploaderDialog.vue
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 9d26242c3c..6d58307ea0 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -773,3 +773,22 @@ export function checkExistence(fileData: ArrayBuffer): Promise<any> {
 		});
 	});
 }*/
+
+export function launchUploader(
+	files: File[],
+	options?: {
+		folderId?: string | null;
+	},
+): Promise<Misskey.entities.DriveFile[]> {
+	return new Promise((res, rej) => {
+		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUploaderDialog.vue')), {
+			files: markRaw(files),
+			folderId: options?.folderId,
+		}, {
+			done: driveFiles => {
+				res(driveFiles);
+			},
+			closed: () => dispose(),
+		});
+	});
+}
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index ff3ea6d32b..138359e05e 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -128,7 +128,7 @@ function onDrop(ev: DragEvent): void {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length === 1) {
 		ev.preventDefault();
-		upload(ev.dataTransfer.files[0]);
+		os.launchUploader([Array.from(ev.dataTransfer.files)[0]], {});
 		return;
 	} else if (ev.dataTransfer.files.length > 1) {
 		ev.preventDefault();
@@ -173,7 +173,11 @@ function chooseFile(ev: MouseEvent) {
 function onChangeFile() {
 	if (fileEl.value == null || fileEl.value.files == null) return;
 
-	if (fileEl.value.files[0]) upload(fileEl.value.files[0]);
+	if (fileEl.value.files[0]) {
+		os.launchUploader(Array.from(fileEl.value.files), {}).then(driveFiles => {
+			file.value = driveFiles[0];
+		});
+	}
 }
 
 function send() {
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index fe8a87f111..a5e458b9ff 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { defineAsyncComponent, markRaw, ref } from 'vue';
+import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -12,30 +12,22 @@ import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 
 export function chooseFileFromPc(
-	multiple: boolean,
-	options?: {
-		uploadFolder?: string | null;
-		nameConverter?: (file: File) => string | undefined;
-	},
+	options: {
+		multiple?: boolean;
+		folderId?: string | null;
+	} = {},
 ): Promise<Misskey.entities.DriveFile[]> {
-	const uploadFolder = options?.uploadFolder ?? prefer.s.uploadFolder;
-	const nameConverter = options?.nameConverter ?? (() => undefined);
-
 	return new Promise((res, rej) => {
 		const input = window.document.createElement('input');
 		input.type = 'file';
-		input.multiple = multiple;
+		input.multiple = options.multiple ?? false;
 		input.onchange = () => {
 			if (!input.files) return res([]);
 
-			const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUploadDialog.vue')), {
-				files: markRaw(Array.from(input.files)),
-				folderId: uploadFolder,
-			}, {
-				done: driveFiles => {
-					res(driveFiles);
-				},
-				closed: () => dispose(),
+			os.launchUploader(Array.from(input.files), {
+				folderId: options.folderId,
+			}).then(driveFiles => {
+				res(driveFiles);
 			});
 
 			// 一応廃棄

From 566f7293003060221a75f3c18caa0024fbeeb7ff Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 14:31:05 +0900
Subject: [PATCH 27/62] Update MkPostForm.vue

---
 .../frontend/src/components/MkPostForm.vue    | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 457a369ddb..538dac7e01 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -643,16 +643,25 @@ async function onPaste(ev: ClipboardEvent) {
 	if (props.mock) return;
 	if (!ev.clipboardData) return;
 
+	let pastedFiles: File[] = [];
 	for (const { item, i } of Array.from(ev.clipboardData.items, (data, x) => ({ item: data, i: x }))) {
 		if (item.kind === 'file') {
 			const file = item.getAsFile();
 			if (!file) continue;
 			const lio = file.name.lastIndexOf('.');
 			const ext = lio >= 0 ? file.name.slice(lio) : '';
-			const formatted = `${formatTimeString(new Date(file.lastModified), pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
-			upload(file, formatted);
+			const formattedName = `${formatTimeString(new Date(file.lastModified), pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+			const renamedFile = new File([file], formattedName, { type: file.type });
+			pastedFiles.push(renamedFile);
 		}
 	}
+	if (pastedFiles.length > 0) {
+		ev.preventDefault();
+		os.launchUploader(pastedFiles, {}).then(driveFiles => {
+			files.value.push(...driveFiles);
+		});
+		return;
+	}
 
 	const paste = ev.clipboardData.getData('text');
 
@@ -685,7 +694,9 @@ async function onPaste(ev: ClipboardEvent) {
 
 			const fileName = formatTimeString(new Date(), pastedFileName).replace(/{{number}}/g, '0');
 			const file = new File([paste], `${fileName}.txt`, { type: 'text/plain' });
-			upload(file, `${fileName}.txt`);
+			os.launchUploader([file], {}).then(driveFiles => {
+				files.value.push(...driveFiles);
+			});
 		});
 	}
 }
@@ -729,7 +740,9 @@ function onDrop(ev: DragEvent): void {
 	// ファイルだったら
 	if (ev.dataTransfer && ev.dataTransfer.files.length > 0) {
 		ev.preventDefault();
-		os.launchUploader(Array.from(ev.dataTransfer.files), {});
+		os.launchUploader(Array.from(ev.dataTransfer.files), {}).then(driveFiles => {
+			files.value.push(...driveFiles);
+		});
 		return;
 	}
 

From 37f846af8a810700ebd267ab212c9dc9258c5093 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 15:29:13 +0900
Subject: [PATCH 28/62] wip

---
 .../src/components/MkCropperDialog.vue        | 41 +++----------
 packages/frontend/src/components/MkDrive.vue  |  4 +-
 .../src/components/MkPostFormAttaches.vue     |  2 +-
 .../components/MkUserSetupDialog.Profile.vue  | 14 +++--
 packages/frontend/src/os.ts                   | 59 +++++++++++++++++--
 .../admin/custom-emojis-manager.register.vue  |  4 +-
 .../frontend/src/pages/drive.file.info.vue    |  2 +-
 .../frontend/src/pages/settings/profile.vue   |  4 +-
 .../src/utility/get-drive-file-menu.ts        |  2 +-
 packages/frontend/src/utility/select-file.ts  | 25 ++------
 10 files changed, 86 insertions(+), 71 deletions(-)

diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index 99854bc66e..2174f2ee1f 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -33,27 +33,23 @@ import { onMounted, useTemplateRef, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
-import { apiUrl } from '@@/js/config.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os.js';
-import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
-import { getProxiedImageUrl } from '@/utility/media-proxy.js';
-import { prefer } from '@/preferences.js';
-
-const emit = defineEmits<{
-	(ev: 'ok', cropped: Misskey.entities.DriveFile): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
-}>();
 
 const props = defineProps<{
-	file: Misskey.entities.DriveFile;
+	imageFile: File;
 	aspectRatio: number;
 	uploadFolder?: string | null;
 }>();
 
-const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
+const emit = defineEmits<{
+	(ev: 'ok', cropped: File | Blob): void;
+	(ev: 'cancel'): void;
+	(ev: 'closed'): void;
+}>();
+
+const imgUrl = URL.createObjectURL(props.imageFile);
 const dialogEl = useTemplateRef('dialogEl');
 const imgEl = useTemplateRef('imgEl');
 let cropper: Cropper | null = null;
@@ -71,26 +67,7 @@ const ok = async () => {
 		const croppedCanvas = await croppedSection?.$toCanvas({ width: widthToRender });
 		croppedCanvas?.toBlob(blob => {
 			if (!blob) return;
-			const formData = new FormData();
-			formData.append('file', blob);
-			formData.append('name', `cropped_${props.file.name}`);
-			formData.append('isSensitive', props.file.isSensitive ? 'true' : 'false');
-			if (props.file.comment) { formData.append('comment', props.file.comment);}
-			formData.append('i', $i!.token);
-			if (props.uploadFolder) {
-				formData.append('folderId', props.uploadFolder);
-			} else if (props.uploadFolder !== null && prefer.s.uploadFolder) {
-				formData.append('folderId', prefer.s.uploadFolder);
-			}
-
-			window.fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
-				body: formData,
-			})
-				.then(response => response.json())
-				.then(f => {
-					res(f);
-				});
+			res(blob);
 		});
 	});
 
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index edbde654ec..95a617f491 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -148,7 +148,7 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
-import { chooseFileFromPc } from '@/utility/select-file.js';
+import { chooseFileFromPcAndUpload } from '@/utility/select-file.js';
 import { store } from '@/store.js';
 import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
 import { usePagination } from '@/composables/use-pagination.js';
@@ -555,7 +555,7 @@ function getMenu() {
 		text: i18n.ts.upload,
 		icon: 'ti ti-upload',
 		action: () => {
-			chooseFileFromPc(true, { uploadFolder: folder.value?.id, keepOriginal: true });
+			chooseFileFromPcAndUpload(true, { uploadFolder: folder.value?.id, keepOriginal: true });
 		},
 	}, {
 		text: i18n.ts.fromUrl,
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index e8404cbd4f..a35eb1abf8 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -145,7 +145,7 @@ async function describe(file: Misskey.entities.DriveFile) {
 async function crop(file: Misskey.entities.DriveFile): Promise<void> {
 	if (mock) return;
 
-	const newFile = await os.cropImage(file, { aspectRatio: NaN });
+	const newFile = await os.createCroppedImageDriveFileFromImageDriveFile(file, { aspectRatio: NaN });
 	emit('replaceFile', file, newFile);
 }
 
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
index 30925b854c..a0d7376c8e 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
@@ -37,7 +37,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import FormSlot from '@/components/form/slot.vue';
 import MkInfo from '@/components/MkInfo.vue';
-import { chooseFileFromPc } from '@/utility/select-file.js';
+import { chooseFileFromPcAndUpload } from '@/utility/select-file.js';
 import * as os from '@/os.js';
 import { ensureSignin } from '@/i.js';
 
@@ -49,7 +49,7 @@ const description = ref($i.description ?? '');
 watch(name, () => {
 	os.apiWithDialog('i/update', {
 		// 空文字列をnullにしたいので??は使うな
-		// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+
 		name: name.value || null,
 	}, undefined, {
 		'0b3f9f6a-2f4d-4b1f-9fb4-49d3a2fd7191': {
@@ -62,13 +62,13 @@ watch(name, () => {
 watch(description, () => {
 	os.apiWithDialog('i/update', {
 		// 空文字列をnullにしたいので??は使うな
-		// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+
 		description: description.value || null,
 	});
 });
 
 function setAvatar(ev) {
-	chooseFileFromPc(false).then(async (files) => {
+	os.chooseFileFromPc({ multiple: false }).then(async (files) => {
 		const file = files[0];
 
 		let originalOrCropped = file;
@@ -81,13 +81,15 @@ function setAvatar(ev) {
 		});
 
 		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
+			originalOrCropped = await os.cropImageFile(file, {
 				aspectRatio: 1,
 			});
 		}
 
+		const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
+
 		const i = await os.apiWithDialog('i/update', {
-			avatarId: originalOrCropped.id,
+			avatarId: driveFile.id,
 		});
 		$i.avatarId = i.avatarId;
 		$i.avatarUrl = i.avatarUrl;
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 6d58307ea0..e93d7614b4 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -8,6 +8,7 @@
 import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
+import { getProxiedImageUrl } from './utility/media-proxy.js';
 import type { Component, Ref } from 'vue';
 import type { ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/utility/form.js';
@@ -653,15 +654,13 @@ export async function pickEmoji(src: HTMLElement, opts: ComponentProps<typeof Mk
 	});
 }
 
-export async function cropImage(image: Misskey.entities.DriveFile, options: {
+export async function cropImageFile(imageFile: File, options: {
 	aspectRatio: number;
-	uploadFolder?: string | null;
-}): Promise<Misskey.entities.DriveFile> {
+}): Promise<File> {
 	return new Promise(resolve => {
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {
-			file: image,
+			imageFile: imageFile,
 			aspectRatio: options.aspectRatio,
-			uploadFolder: options.uploadFolder,
 		}, {
 			ok: x => {
 				resolve(x);
@@ -671,6 +670,29 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: {
 	});
 }
 
+export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFile: Misskey.entities.DriveFile, options: {
+	aspectRatio: number;
+	uploadFolder?: string | null;
+}): Promise<Misskey.entities.DriveFile> {
+	return new Promise(resolve => {
+		const imgUrl = getProxiedImageUrl(imageDriveFile.url, undefined, true);
+		const image = new Image();
+		image.src = imgUrl;
+		image.onload = () => {
+			const canvas = window.document.createElement('canvas');
+			const ctx = canvas.getContext('2d')!;
+			canvas.width = image.width;
+			canvas.height = image.height;
+			ctx.drawImage(image, 0, 0);
+			const imageFile = new File([canvas.toBlob()], imageDriveFile.name, { type: imageDriveFile.type });
+
+			cropImageFile(imageFile).then(croppedImageFile => {
+
+			});
+		};
+	});
+}
+
 export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | null, options?: {
 	align?: string;
 	width?: number;
@@ -774,6 +796,32 @@ export function checkExistence(fileData: ArrayBuffer): Promise<any> {
 	});
 }*/
 
+export function chooseFileFromPc(
+	options: {
+		multiple?: boolean;
+	} = {},
+): Promise<File[]> {
+	return new Promise((res, rej) => {
+		const input = window.document.createElement('input');
+		input.type = 'file';
+		input.multiple = options.multiple ?? false;
+		input.onchange = () => {
+			if (!input.files) return res([]);
+
+			res(Array.from(input.files));
+
+			// 一応廃棄
+			(window as any).__misskey_input_ref__ = null;
+		};
+
+		// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+		// iOS Safari で正常に動かす為のおまじない
+		(window as any).__misskey_input_ref__ = input;
+
+		input.click();
+	});
+}
+
 export function launchUploader(
 	files: File[],
 	options?: {
@@ -781,6 +829,7 @@ export function launchUploader(
 	},
 ): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise((res, rej) => {
+		if (files.length === 0) return;
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUploaderDialog.vue')), {
 			files: markRaw(files),
 			folderId: options?.folderId,
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
index 6b11a181b0..a5345f8fc7 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
@@ -94,7 +94,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { validators } from '@/components/grid/cell-validators.js';
-import { chooseFileFromDrive, chooseFileFromPc } from '@/utility/select-file.js';
+import { chooseFileFromDrive, chooseFileFromPcAndUpload } from '@/utility/select-file.js';
 import { extractDroppedItems, flattenDroppedFiles } from '@/utility/file-drop.js';
 import XRegisterLogs from '@/pages/admin/custom-emojis-manager.logs.vue';
 import { copyGridDataToClipboard } from '@/components/grid/grid-utils.js';
@@ -364,7 +364,7 @@ async function onDrop(ev: DragEvent) {
 }
 
 async function onFileSelectClicked() {
-	const driveFiles = await chooseFileFromPc(
+	const driveFiles = await chooseFileFromPcAndUpload(
 		true,
 		{
 			uploadFolder: selectedFolderId.value,
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index fec260be72..a9511a9d17 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -130,7 +130,7 @@ function postThis() {
 function crop() {
 	if (!file.value) return;
 
-	os.cropImage(file.value, {
+	os.createCroppedImageDriveFileFromImageDriveFile(file.value, {
 		aspectRatio: NaN,
 		uploadFolder: file.value.folderId ?? null,
 	});
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 30b7cf9a86..6ef93d36c0 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -268,7 +268,7 @@ function changeAvatar(ev) {
 		});
 
 		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
+			originalOrCropped = await os.createCroppedImageDriveFileFromImageDriveFile(file, {
 				aspectRatio: 1,
 			});
 		}
@@ -294,7 +294,7 @@ function changeBanner(ev) {
 		});
 
 		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
+			originalOrCropped = await os.createCroppedImageDriveFileFromImageDriveFile(file, {
 				aspectRatio: 2,
 			});
 		}
diff --git a/packages/frontend/src/utility/get-drive-file-menu.ts b/packages/frontend/src/utility/get-drive-file-menu.ts
index a5595cb0cb..b87b447e93 100644
--- a/packages/frontend/src/utility/get-drive-file-menu.ts
+++ b/packages/frontend/src/utility/get-drive-file-menu.ts
@@ -116,7 +116,7 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 		menuItems.push({
 			text: i18n.ts.cropImage,
 			icon: 'ti ti-crop',
-			action: () => os.cropImage(file, {
+			action: () => os.createCroppedImageDriveFileFromImageDriveFile(file, {
 				aspectRatio: NaN,
 				uploadFolder: folder ? folder.id : folder,
 			}),
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index a5e458b9ff..b4d9efa3d5 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -11,34 +11,21 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 
-export function chooseFileFromPc(
+export function chooseFileFromPcAndUpload(
 	options: {
 		multiple?: boolean;
 		folderId?: string | null;
 	} = {},
 ): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise((res, rej) => {
-		const input = window.document.createElement('input');
-		input.type = 'file';
-		input.multiple = options.multiple ?? false;
-		input.onchange = () => {
-			if (!input.files) return res([]);
-
-			os.launchUploader(Array.from(input.files), {
+		os.chooseFileFromPc({ multiple: options.multiple }).then(files => {
+			if (files.length === 0) return;
+			os.launchUploader(files, {
 				folderId: options.folderId,
 			}).then(driveFiles => {
 				res(driveFiles);
 			});
-
-			// 一応廃棄
-			(window as any).__misskey_input_ref__ = null;
-		};
-
-		// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
-		// iOS Safari で正常に動かす為のおまじない
-		(window as any).__misskey_input_ref__ = input;
-
-		input.click();
+		});
 	});
 }
 
@@ -91,7 +78,7 @@ function select(src: HTMLElement | EventTarget | null, label: string | null, mul
 		} : undefined, {
 			text: i18n.ts.upload,
 			icon: 'ti ti-upload',
-			action: () => chooseFileFromPc(multiple, { keepOriginal: true }).then(files => res(files)),
+			action: () => chooseFileFromPcAndUpload({ multiple }).then(files => res(files)),
 		}, {
 			text: i18n.ts.fromDrive,
 			icon: 'ti ti-cloud',

From a96e99815efe0445af010451f727b49b6eabe134 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 15:44:15 +0900
Subject: [PATCH 29/62] Update room.form.vue

---
 packages/frontend/src/pages/chat/room.form.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index 138359e05e..952fafb930 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -84,8 +84,11 @@ async function onPaste(ev: ClipboardEvent) {
 			if (!pastedFile) return;
 			const lio = pastedFile.name.lastIndexOf('.');
 			const ext = lio >= 0 ? pastedFile.name.slice(lio) : '';
-			const formatted = formatTimeString(new Date(pastedFile.lastModified), pastedFileName).replace(/{{number}}/g, '1') + ext;
-			if (formatted) upload(pastedFile, formatted);
+			const formattedName = formatTimeString(new Date(pastedFile.lastModified), pastedFileName).replace(/{{number}}/g, '1') + ext;
+			const renamedFile = new File([pastedFile], formattedName, { type: pastedFile.type });
+			os.launchUploader([renamedFile], {}).then(driveFiles => {
+				file.value = driveFiles[0];
+			});
 		}
 	} else {
 		if (items[0].kind === 'file') {

From 48f2d2bb1377399b7bb28436499170997dcc3af1 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 15:49:43 +0900
Subject: [PATCH 30/62] Update os.ts

---
 packages/frontend/src/os.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index e93d7614b4..dd5720b04b 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -829,12 +829,13 @@ export function launchUploader(
 	},
 ): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise((res, rej) => {
-		if (files.length === 0) return;
+		if (files.length === 0) return rej();
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUploaderDialog.vue')), {
 			files: markRaw(files),
 			folderId: options?.folderId,
 		}, {
 			done: driveFiles => {
+				if (driveFiles.length === 0) return rej();
 				res(driveFiles);
 			},
 			closed: () => dispose(),

From 0cb7289eb8339f801fdf044580462570017d812e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 16:58:11 +0900
Subject: [PATCH 31/62] wiop

---
 locales/index.d.ts                            |  4 +++
 locales/ja-JP.yml                             |  1 +
 .../src/components/MkUploaderDialog.vue       | 35 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 86987da735..7a3bec67dd 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -11915,6 +11915,10 @@ export interface Locale extends ILocale {
          * アップロードされていないファイルがありますが、中止しますか？
          */
         "abortConfirm": string;
+        /**
+         * アップロードされていないファイルがありますが、完了しますか？
+         */
+        "doneConfirm": string;
     };
 }
 declare const locales: {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 58d7367856..a9497db4e7 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3187,3 +3187,4 @@ _uploader:
   compressedToX: "{x}に圧縮"
   savedXPercent: "{x}%節約"
   abortConfirm: "アップロードされていないファイルがありますが、中止しますか？"
+  doneConfirm: "アップロードされていないファイルがありますが、完了しますか？"
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index e942a8300a..60f4364592 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -65,7 +65,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_buttonsCenter">
 			<MkButton v-if="isUploading" rounded @click="cancel()"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
 			<MkButton v-else-if="!firstUploadAttempted" primary rounded @click="upload()"><i class="ti ti-upload"></i> {{ i18n.ts.upload }}</MkButton>
-			<MkButton v-else-if="canRetry" primary rounded @click="upload()"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
+
+			<MkButton v-if="canRetry" rounded @click="upload()"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
+			<MkButton v-if="canDone" rounded @click="done()"><i class="ti ti-arrow-right"></i> {{ i18n.ts.done }}</MkButton>
 		</div>
 	</template>
 </MkModalWindow>
@@ -79,6 +81,7 @@ import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
 import { apiUrl } from '@@/js/config.js';
 import isAnimated from 'is-file-animated';
 import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
+import type { MenuItem } from '@/types/menu.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
@@ -116,6 +119,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'done', driveFiles: Misskey.entities.DriveFile[]): void;
+	(ev: 'canceled'): void;
 	(ev: 'closed'): void;
 }>();
 
@@ -139,6 +143,7 @@ const dialog = useTemplateRef('dialog');
 const firstUploadAttempted = ref(false);
 const isUploading = computed(() => items.value.some(item => item.uploading));
 const canRetry = computed(() => firstUploadAttempted.value && !items.value.some(item => item.uploading || item.waiting) && items.value.some(item => item.uploaded == null));
+const canDone = computed(() => items.value.some(item => item.uploaded != null));
 
 const compressionLevel = ref<0 | 1 | 2 | 3>(2);
 const compressionSettings = computed(() => {
@@ -164,6 +169,7 @@ const compressionSettings = computed(() => {
 
 watch(items, () => {
 	if (items.value.length === 0) {
+		emit('canceled');
 		dialog.value?.close();
 		return;
 	}
@@ -183,12 +189,39 @@ async function cancel() {
 	});
 	if (canceled) return;
 
+	emit('canceled');
+	dialog.value?.close();
+}
+
+async function done() {
+	if (items.value.some(item => item.uploaded == null)) {
+		const { canceled } = await os.confirm({
+			type: 'question',
+			text: i18n.ts._uploader.doneConfirm,
+			okText: i18n.ts.yes,
+			cancelText: i18n.ts.no,
+		});
+		if (canceled) return;
+	}
+
 	emit('done', items.value.filter(item => item.uploaded != null).map(item => item.uploaded!));
 	dialog.value?.close();
 }
 
 function showMenu(ev: MouseEvent, item: typeof items.value[0]) {
+	const menu: MenuItem[] = [];
 
+	if (!item.waiting && !item.uploading && !item.uploaded) {
+		menu.push({
+			icon: 'ti ti-x',
+			text: i18n.ts.remove,
+			action: () => {
+				items.value.splice(items.value.indexOf(item), 1);
+			},
+		});
+	}
+
+	os.popupMenu(menu, ev.currentTarget ?? ev.target);
 }
 
 async function upload() { // エラーハンドリングなどを考慮してシーケンシャルにやる

From 7c065584a1ead1ae16e1b685bc2f0cf6a7c3fad3 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 17:12:01 +0900
Subject: [PATCH 32/62] wip

---
 packages/frontend/src/components/MkDrive.vue          | 5 ++++-
 packages/frontend/src/components/MkUploaderDialog.vue | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 95a617f491..89a2a7b95d 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -555,7 +555,10 @@ function getMenu() {
 		text: i18n.ts.upload,
 		icon: 'ti ti-upload',
 		action: () => {
-			chooseFileFromPcAndUpload(true, { uploadFolder: folder.value?.id, keepOriginal: true });
+			chooseFileFromPcAndUpload({
+				multiple: true,
+				folderId: folder.value?.id,
+			});
 		},
 	}, {
 		text: i18n.ts.fromUrl,
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index 60f4364592..eae0470f96 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -32,6 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.itemBody">
 						<div>{{ ctx.name }}</div>
 						<div :class="$style.itemInfo">
+							<span>{{ ctx.file.type }}</span>
 							<span>{{ bytes(ctx.file.size) }}</span>
 							<span v-if="ctx.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(ctx.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - ctx.compressedSize / ctx.file.size) * 100) }) }})</span>
 						</div>

From edeeca8b5f10ebaaa42bea8d3e561ace55ce5506 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 17:30:56 +0900
Subject: [PATCH 33/62] wip

---
 .../src/components/MkCropperDialog.vue        |  2 +-
 packages/frontend/src/os.ts                   | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index 2174f2ee1f..06f3886253 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -38,7 +38,7 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
-	imageFile: File;
+	imageFile: File | Blob;
 	aspectRatio: number;
 	uploadFolder?: string | null;
 }>();
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index dd5720b04b..3b6887a169 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -9,6 +9,7 @@ import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
 import { getProxiedImageUrl } from './utility/media-proxy.js';
+import { uploadFile } from './utility/upload.js';
 import type { Component, Ref } from 'vue';
 import type { ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/utility/form.js';
@@ -654,7 +655,7 @@ export async function pickEmoji(src: HTMLElement, opts: ComponentProps<typeof Mk
 	});
 }
 
-export async function cropImageFile(imageFile: File, options: {
+export async function cropImageFile(imageFile: File | Blob, options: {
 	aspectRatio: number;
 }): Promise<File> {
 	return new Promise(resolve => {
@@ -672,7 +673,6 @@ export async function cropImageFile(imageFile: File, options: {
 
 export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFile: Misskey.entities.DriveFile, options: {
 	aspectRatio: number;
-	uploadFolder?: string | null;
 }): Promise<Misskey.entities.DriveFile> {
 	return new Promise(resolve => {
 		const imgUrl = getProxiedImageUrl(imageDriveFile.url, undefined, true);
@@ -684,10 +684,17 @@ export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFi
 			canvas.width = image.width;
 			canvas.height = image.height;
 			ctx.drawImage(image, 0, 0);
-			const imageFile = new File([canvas.toBlob()], imageDriveFile.name, { type: imageDriveFile.type });
-
-			cropImageFile(imageFile).then(croppedImageFile => {
-
+			canvas.toBlob(blob => {
+				cropImageFile(blob, {
+					aspectRatio: options.aspectRatio,
+				}).then(croppedImageFile => {
+					uploadFile(croppedImageFile, {
+						name: imageDriveFile.name,
+						folderId: imageDriveFile.folderId,
+					}).then(driveFile => {
+						resolve(driveFile);
+					});
+				});
 			});
 		};
 	});

From 0397a5046d4aec5d8a377b230ec2de0008c1a845 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 17:44:59 +0900
Subject: [PATCH 34/62] wip

---
 .../src/components/MkCropperDialog.vue        |   2 -
 .../components/MkUserSetupDialog.Profile.vue  |  47 ++++---
 .../frontend/src/pages/settings/profile.vue   | 118 ++++++++++++------
 3 files changed, 105 insertions(+), 62 deletions(-)

diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index 06f3886253..5c3ca4ba51 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -71,8 +71,6 @@ const ok = async () => {
 		});
 	});
 
-	os.promiseDialog(promise);
-
 	const f = await promise;
 
 	emit('ok', f);
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
index a0d7376c8e..c6e54dc376 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
@@ -67,33 +67,32 @@ watch(description, () => {
 	});
 });
 
-function setAvatar(ev) {
-	os.chooseFileFromPc({ multiple: false }).then(async (files) => {
-		const file = files[0];
+async function setAvatar(ev) {
+	const files = await os.chooseFileFromPc({ multiple: false });
+	const file = files[0];
 
-		let originalOrCropped = file;
+	let originalOrCropped = file;
 
-		const { canceled } = await os.confirm({
-			type: 'question',
-			text: i18n.ts.cropImageAsk,
-			okText: i18n.ts.cropYes,
-			cancelText: i18n.ts.cropNo,
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.cropImageFile(file, {
-				aspectRatio: 1,
-			});
-		}
-
-		const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
-
-		const i = await os.apiWithDialog('i/update', {
-			avatarId: driveFile.id,
-		});
-		$i.avatarId = i.avatarId;
-		$i.avatarUrl = i.avatarUrl;
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.ts.cropImageAsk,
+		okText: i18n.ts.cropYes,
+		cancelText: i18n.ts.cropNo,
 	});
+
+	if (!canceled) {
+		originalOrCropped = await os.cropImageFile(file, {
+			aspectRatio: 1,
+		});
+	}
+
+	const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
+
+	const i = await os.apiWithDialog('i/update', {
+		avatarId: driveFile.id,
+	});
+	$i.avatarId = i.avatarId;
+	$i.avatarUrl = i.avatarUrl;
 }
 </script>
 
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 6ef93d36c0..3057cde76e 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -257,54 +257,100 @@ function save() {
 }
 
 function changeAvatar(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
-		let originalOrCropped = file;
-
-		const { canceled } = await os.confirm({
-			type: 'question',
-			text: i18n.ts.cropImageAsk,
-			okText: i18n.ts.cropYes,
-			cancelText: i18n.ts.cropNo,
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.createCroppedImageDriveFileFromImageDriveFile(file, {
-				aspectRatio: 1,
-			});
-		}
-
+	async function done(driveFile) {
 		const i = await os.apiWithDialog('i/update', {
-			avatarId: originalOrCropped.id,
+			avatarId: driveFile.id,
 		});
 		$i.avatarId = i.avatarId;
 		$i.avatarUrl = i.avatarUrl;
 		claimAchievement('profileFilled');
-	});
+	}
+
+	os.popupMenu([{
+		text: i18n.ts.avatar,
+		type: 'label',
+	}, {
+		text: i18n.ts.upload,
+		icon: 'ti ti-upload',
+		action: async () => {
+			const files = await os.chooseFileFromPc({ multiple: false });
+			const file = files[0];
+
+			let originalOrCropped = file;
+
+			const { canceled } = await os.confirm({
+				type: 'question',
+				text: i18n.ts.cropImageAsk,
+				okText: i18n.ts.cropYes,
+				cancelText: i18n.ts.cropNo,
+			});
+
+			if (!canceled) {
+				originalOrCropped = await os.cropImageFile(file, {
+					aspectRatio: 1,
+				});
+			}
+
+			const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
+			done(driveFile);
+		},
+	}, {
+		text: i18n.ts.fromDrive,
+		icon: 'ti ti-cloud',
+		action: () => {
+			os.selectDriveFile(false).then(files => {
+				done(files[0]);
+			});
+		},
+	}], ev.currentTarget ?? ev.target);
 }
 
 function changeBanner(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
-		let originalOrCropped = file;
-
-		const { canceled } = await os.confirm({
-			type: 'question',
-			text: i18n.ts.cropImageAsk,
-			okText: i18n.ts.cropYes,
-			cancelText: i18n.ts.cropNo,
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.createCroppedImageDriveFileFromImageDriveFile(file, {
-				aspectRatio: 2,
-			});
-		}
-
+	async function done(driveFile) {
 		const i = await os.apiWithDialog('i/update', {
-			bannerId: originalOrCropped.id,
+			bannerId: driveFile.id,
 		});
 		$i.bannerId = i.bannerId;
 		$i.bannerUrl = i.bannerUrl;
-	});
+	}
+
+	os.popupMenu([{
+		text: i18n.ts.banner,
+		type: 'label',
+	}, {
+		text: i18n.ts.upload,
+		icon: 'ti ti-upload',
+		action: async () => {
+			const files = await os.chooseFileFromPc({ multiple: false });
+			const file = files[0];
+
+			let originalOrCropped = file;
+
+			const { canceled } = await os.confirm({
+				type: 'question',
+				text: i18n.ts.cropImageAsk,
+				okText: i18n.ts.cropYes,
+				cancelText: i18n.ts.cropNo,
+			});
+
+			if (!canceled) {
+				originalOrCropped = await os.cropImageFile(file, {
+					aspectRatio: 2,
+				});
+			}
+
+			const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
+			done(driveFile);
+		},
+	}, {
+		text: i18n.ts.fromDrive,
+		icon: 'ti ti-cloud',
+		action: () => {
+			os.selectDriveFile(false).then(files => {
+				done(files[0]);
+			});
+		},
+	}], ev.currentTarget ?? ev.target);
 }
 
 const headerActions = computed(() => []);

From df2971e43795b32708773432c1bf0559aef06c3b Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 18:26:10 +0900
Subject: [PATCH 35/62] wip

---
 .../src/components/MkUploaderDialog.vue       | 19 ++++++++++---------
 packages/frontend/src/utility/select-file.ts  |  1 +
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index eae0470f96..a1119b947f 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:key="ctx.id"
 				v-panel
 				:class="[$style.item, ctx.waiting ? $style.itemWaiting : null, ctx.uploaded ? $style.itemCompleted : null, ctx.uploadFailed ? $style.itemFailed : null]"
-				:style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }"
+				:style="{ '--p': ctx.progress != null ? `${ctx.progress.value / ctx.progress.max * 100}%` : '0%' }"
 			>
 				<div :class="$style.itemInner">
 					<div>
@@ -127,8 +127,7 @@ const emit = defineEmits<{
 const items = ref([] as {
 	id: string;
 	name: string;
-	progressMax: number | null;
-	progressValue: number | null;
+	progress: { max: number; value: number } | null;
 	thumbnail: string;
 	waiting: boolean;
 	uploading: boolean;
@@ -263,13 +262,16 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 			folderId: props.folderId,
 			onProgress: (progress) => {
 				item.waiting = false;
-				item.progressMax = progress.total;
-				item.progressValue = progress.loaded;
+				if (item.progress == null) {
+					item.progress = { max: progress.total, value: progress.loaded };
+				} else {
+					item.progress.value = progress.loaded;
+					item.progress.max = progress.total;
+				}
 			},
 		}).catch(err => {
 			item.uploadFailed = true;
-			item.progressMax = null;
-			item.progressValue = null;
+			item.progress = null;
 			throw err;
 		}).finally(() => {
 			item.uploading = false;
@@ -287,8 +289,7 @@ onMounted(() => {
 		items.value.push({
 			id,
 			name: prefer.s.keepOriginalFilename ? filename : id + extension,
-			progressMax: null,
-			progressValue: null,
+			progress: null,
 			thumbnail: window.URL.createObjectURL(file),
 			waiting: false,
 			uploading: false,
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index b4d9efa3d5..00145169ad 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -48,6 +48,7 @@ export function chooseFileFromUrl(): Promise<Misskey.entities.DriveFile> {
 
 			const marker = Math.random().toString(); // TODO: UUIDとか使う
 
+			// TODO: no websocketモード対応
 			const connection = useStream().useChannel('main');
 			connection.on('urlUploadFinished', urlResponse => {
 				if (urlResponse.marker === marker) {

From 7997ecb8cc41a91f7f5a70f8b7a9684941fc1242 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 18:45:27 +0900
Subject: [PATCH 36/62] wip

---
 .../src/components/MkCropperDialog.vue        |  6 ++--
 .../src/components/MkUploaderDialog.vue       | 30 +++++++++++++++----
 packages/frontend/src/os.ts                   |  2 +-
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index 5c3ca4ba51..7f592fba79 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -39,7 +39,7 @@ import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
 	imageFile: File | Blob;
-	aspectRatio: number;
+	aspectRatio: number | null;
 	uploadFolder?: string | null;
 }>();
 
@@ -99,8 +99,8 @@ onMounted(() => {
 
 	const selection = cropper.getCropperSelection()!;
 	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
-	selection.aspectRatio = props.aspectRatio;
-	selection.initialAspectRatio = props.aspectRatio;
+	if (props.aspectRatio != null) selection.aspectRatio = props.aspectRatio;
+	selection.initialAspectRatio = props.aspectRatio ?? 1;
 	selection.outlined = true;
 
 	window.setTimeout(() => {
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index a1119b947f..aa1ce2e2c2 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -96,14 +96,18 @@ import { isWebpSupported } from '@/utility/isWebpSupported.js';
 import { uploadFile } from '@/utility/upload.js';
 import * as os from '@/os.js';
 
-const $i = ensureSignin();
-
-const compressionSupportedTypes = [
+const COMPRESSION_SUPPORTED_TYPES = [
 	'image/jpeg',
 	'image/png',
 	'image/webp',
 	'image/svg+xml',
-] as const;
+];
+
+const CROPPING_SUPPORTED_TYPES = [
+	'image/jpeg',
+	'image/png',
+	'image/webp',
+];
 
 const mimeTypeMap = {
 	'image/webp': 'webp',
@@ -211,6 +215,21 @@ async function done() {
 function showMenu(ev: MouseEvent, item: typeof items.value[0]) {
 	const menu: MenuItem[] = [];
 
+	if (CROPPING_SUPPORTED_TYPES.includes(item.file.type) && !item.waiting && !item.uploading && !item.uploaded) {
+		menu.push({
+			icon: 'ti ti-crop',
+			text: i18n.ts.cropImage,
+			action: async () => {
+				const cropped = await os.cropImageFile(item.file, { aspectRatio: null });
+				items.value.splice(items.value.indexOf(item), 1, {
+					...item,
+					file: markRaw(cropped),
+					thumbnail: window.URL.createObjectURL(cropped),
+				});
+			},
+		});
+	}
+
 	if (!item.waiting && !item.uploading && !item.uploaded) {
 		menu.push({
 			icon: 'ti ti-x',
@@ -231,7 +250,7 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 		item.waiting = true;
 		item.uploadFailed = false;
 
-		const shouldCompress = item.compressedImage == null && compressionLevel.value !== 0 && compressionSettings.value && compressionSupportedTypes.includes(item.file.type) && !(await isAnimated(item.file));
+		const shouldCompress = item.compressedImage == null && compressionLevel.value !== 0 && compressionSettings.value && COMPRESSION_SUPPORTED_TYPES.includes(item.file.type) && !(await isAnimated(item.file));
 
 		if (shouldCompress) {
 			const config = {
@@ -275,6 +294,7 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 			throw err;
 		}).finally(() => {
 			item.uploading = false;
+			item.waiting = false;
 		});
 
 		item.uploaded = driveFile;
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 3b6887a169..652dc52365 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -656,7 +656,7 @@ export async function pickEmoji(src: HTMLElement, opts: ComponentProps<typeof Mk
 }
 
 export async function cropImageFile(imageFile: File | Blob, options: {
-	aspectRatio: number;
+	aspectRatio: number | null;
 }): Promise<File> {
 	return new Promise(resolve => {
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {

From 0e2a3ebc8d534d22bb3fce7049a7c5b3823cade3 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 19:50:35 +0900
Subject: [PATCH 37/62] wip

---
 .../admin/custom-emojis-manager.register.vue  | 87 +------------------
 1 file changed, 3 insertions(+), 84 deletions(-)

diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
index a5345f8fc7..3a7a8df217 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
@@ -35,20 +35,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XRegisterLogs :logs="requestLogs"/>
 		</MkFolder>
 
-		<div
-			:class="[$style.uploadBox, [isDragOver ? $style.dragOver : {}]]"
-			@dragover.prevent="isDragOver = true"
-			@dragleave.prevent="isDragOver = false"
-			@drop.prevent.stop="onDrop"
-		>
-			<div style="margin-top: 1em">
-				{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaCaption }}
-			</div>
-			<ul>
-				<li>{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList1 }}</li>
-				<li><a @click.prevent="onFileSelectClicked">{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList2 }}</a></li>
-				<li><a @click.prevent="onDriveSelectClicked">{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList3 }}</a></li>
-			</ul>
+		<div class="_buttonsCenter">
+			<MkButton primary rounded @click="onFileSelectClicked">{{ i18n.ts.uplaod }}</MkButton>
+			<MkButton primary rounded @click="onDriveSelectClicked">{{ i18n.ts.fromDrive }}</MkButton>
 		</div>
 
 		<div v-if="gridItems.length > 0" :class="$style.gridArea">
@@ -310,59 +299,6 @@ async function onClearClicked() {
 	}
 }
 
-async function onDrop(ev: DragEvent) {
-	isDragOver.value = false;
-
-	const droppedFiles = await extractDroppedItems(ev).then(it => flattenDroppedFiles(it));
-	const confirm = await os.confirm({
-		type: 'info',
-		text: i18n.tsx._customEmojisManager._local._register.confirmUploadEmojisDescription({ count: droppedFiles.length }),
-	});
-	if (confirm.canceled) {
-		return;
-	}
-
-	const uploadedItems = Array.of<{ droppedFile: DroppedFile, driveFile: Misskey.entities.DriveFile }>();
-	try {
-		uploadedItems.push(
-			...await os.promiseDialog(
-				Promise.all(
-					droppedFiles.map(async (it) => ({
-						droppedFile: it,
-						driveFile: await uploadFile( // TODO
-							it.file,
-							selectedFolderId.value,
-							it.file.name.replace(/\.[^.]+$/, ''),
-							true,
-						),
-					}),
-					),
-				),
-				() => {
-				},
-				() => {
-				},
-			),
-		);
-	} catch (err) {
-		// ダイアログは共通部品側で出ているはずなので何もしない
-		return;
-	}
-
-	const items = uploadedItems.map(({ droppedFile, driveFile }) => {
-		const item = fromDriveFile(driveFile);
-		if (directoryToCategory.value) {
-			item.category = droppedFile.path
-				.replace(/^\//, '')
-				.replace(/\/[^/]+$/, '')
-				.replace(droppedFile.file.name, '');
-		}
-		return item;
-	});
-
-	gridItems.value.push(...items);
-}
-
 async function onFileSelectClicked() {
 	const driveFiles = await chooseFileFromPcAndUpload(
 		true,
@@ -435,23 +371,6 @@ onMounted(async () => {
 	background-color: var(--MI_THEME-infoWarnBg);
 }
 
-.uploadBox {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: auto;
-	border: 0.5px dotted var(--MI_THEME-accentedBg);
-	border-radius: var(--MI-radius);
-	background-color: var(--MI_THEME-accentedBg);
-	box-sizing: border-box;
-
-	&.dragOver {
-		cursor: copy;
-	}
-}
-
 .gridArea {
 	padding-top: 8px;
 	padding-bottom: 8px;

From 41032965f1c98c7dfc1354b9c5d6927e7809e5e7 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 19:55:33 +0900
Subject: [PATCH 38/62] wip

---
 locales/ja-JP.yml                             |  4 ----
 .../frontend/src/components/MkPreview.vue     | 10 ++++++----
 .../components/MkUserSetupDialog.Profile.vue  |  1 -
 packages/frontend/src/os.ts                   |  4 ++--
 .../admin/custom-emojis-manager.register.vue  | 19 +++++++++----------
 .../page-editor/els/page-editor.el.image.vue  |  4 ++--
 .../frontend/src/pages/settings/profile.vue   |  4 ++--
 packages/frontend/src/utility/select-file.ts  |  8 ++++++--
 8 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a9497db4e7..03321e2cbb 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3053,10 +3053,6 @@ _customEmojisManager:
       uploadSettingDescription: "この画面で絵文字アップロードを行う際の動作を設定できます。"
       directoryToCategoryLabel: "ディレクトリ名を\"category\"に入力する"
       directoryToCategoryCaption: "ディレクトリをドラッグ・ドロップした時に、ディレクトリ名を\"category\"に入力します。"
-      emojiInputAreaCaption: "いずれかの方法で登録する絵文字を選択してください。"
-      emojiInputAreaList1: "この枠に画像ファイルまたはディレクトリをドラッグ＆ドロップ"
-      emojiInputAreaList2: "このリンクをクリックしてPCから選択する"
-      emojiInputAreaList3: "このリンクをクリックしてドライブから選択する"
       confirmRegisterEmojisDescription: "リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？（負荷を避けるため、一度の操作で登録可能な絵文字は{count}件までです）"
       confirmClearEmojisDescription: "編集内容を破棄し、リストに表示されている絵文字をクリアします。よろしいですか？"
       confirmUploadEmojisDescription: "ドラッグ＆ドロップされた{count}個のファイルをドライブにアップロードします。実行しますか？"
diff --git a/packages/frontend/src/components/MkPreview.vue b/packages/frontend/src/components/MkPreview.vue
index d8dfbd1655..a3656ac13c 100644
--- a/packages/frontend/src/components/MkPreview.vue
+++ b/packages/frontend/src/components/MkPreview.vue
@@ -18,8 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
 		</div>
 		<div :class="$style.preview__content1__button">
-		<MkButton inline>This is</MkButton>
-		<MkButton inline primary>the button</MkButton>
+			<MkButton inline>This is</MkButton>
+			<MkButton inline primary>the button</MkButton>
 		</div>
 	</div>
 	<div :class="$style.preview__content2" style="pointer-events: none;">
@@ -36,13 +36,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as config from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkRadio from '@/components/MkRadio.vue';
 import * as os from '@/os.js';
-import * as config from '@@/js/config.js';
 import { $i } from '@/i.js';
 
 const text = ref('');
@@ -79,7 +79,9 @@ const openForm = async () => {
 };
 
 const openDrive = async () => {
-	await os.selectDriveFile(false);
+	await os.selectDriveFile({
+		multiple: false,
+	});
 };
 
 const selectUser = async () => {
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
index c6e54dc376..ce3192e230 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
@@ -37,7 +37,6 @@ import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import FormSlot from '@/components/form/slot.vue';
 import MkInfo from '@/components/MkInfo.vue';
-import { chooseFileFromPcAndUpload } from '@/utility/select-file.js';
 import * as os from '@/os.js';
 import { ensureSignin } from '@/i.js';
 
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 652dc52365..eaf63ab289 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -594,10 +594,10 @@ export async function selectUser(opts: { includeSelf?: boolean; localOnly?: bool
 	});
 }
 
-export async function selectDriveFile(multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
+export async function selectDriveFile(options: { multiple?: boolean; } = {}): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise(resolve => {
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveFileSelectDialog.vue')), {
-			multiple,
+			multiple: options.multiple,
 		}, {
 			done: files => {
 				if (files) {
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
index 3a7a8df217..ca26daadaf 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
@@ -300,21 +300,20 @@ async function onClearClicked() {
 }
 
 async function onFileSelectClicked() {
-	const driveFiles = await chooseFileFromPcAndUpload(
-		true,
-		{
-			uploadFolder: selectedFolderId.value,
-			keepOriginal: true,
-			// 拡張子は消す
-			nameConverter: (file) => file.name.replace(/\.[a-zA-Z0-9]+$/, ''),
-		},
-	);
+	const driveFiles = await chooseFileFromPcAndUpload({
+		multiple: true,
+		folderId: selectedFolderId.value,
+		// 拡張子は消す
+		nameConverter: (file) => file.name.replace(/\.[a-zA-Z0-9]+$/, ''),
+	});
 
 	gridItems.value.push(...driveFiles.map(fromDriveFile));
 }
 
 async function onDriveSelectClicked() {
-	const driveFiles = await chooseFileFromDrive(true);
+	const driveFiles = await chooseFileFromDrive({
+		multiple: true,
+	});
 	gridItems.value.push(...driveFiles.map(fromDriveFile));
 }
 
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index 1b98425719..a2a9d0b43f 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
+ 
 import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XContainer from '../page-editor.container.vue';
@@ -41,7 +41,7 @@ const emit = defineEmits<{
 const file = ref<Misskey.entities.DriveFile | null>(null);
 
 async function choose() {
-	os.selectDriveFile(false).then((fileResponse) => {
+	os.selectDriveFile({ multiple: false }).then((fileResponse) => {
 		file.value = fileResponse[0];
 		emit('update:modelValue', {
 			...props.modelValue,
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 3057cde76e..8296983014 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -298,7 +298,7 @@ function changeAvatar(ev) {
 		text: i18n.ts.fromDrive,
 		icon: 'ti ti-cloud',
 		action: () => {
-			os.selectDriveFile(false).then(files => {
+			os.selectDriveFile({ multiple: false }).then(files => {
 				done(files[0]);
 			});
 		},
@@ -346,7 +346,7 @@ function changeBanner(ev) {
 		text: i18n.ts.fromDrive,
 		icon: 'ti ti-cloud',
 		action: () => {
-			os.selectDriveFile(false).then(files => {
+			os.selectDriveFile({ multiple: false }).then(files => {
 				done(files[0]);
 			});
 		},
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index 00145169ad..c7712920f6 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -29,9 +29,13 @@ export function chooseFileFromPcAndUpload(
 	});
 }
 
-export function chooseFileFromDrive(multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
+export function chooseFileFromDrive(options: {
+	multiple?: boolean;
+} = {}): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise((res, rej) => {
-		os.selectDriveFile(multiple).then(files => {
+		os.selectDriveFile({
+			multiple: options.multiple,
+		}).then(files => {
 			res(files);
 		});
 	});

From 6f530b7cbf8993bef15baea6e8d0451489955a60 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 19:57:44 +0900
Subject: [PATCH 39/62] Update select-file.ts

---
 packages/frontend/src/utility/select-file.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index c7712920f6..e3df0850c0 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -87,7 +87,7 @@ function select(src: HTMLElement | EventTarget | null, label: string | null, mul
 		}, {
 			text: i18n.ts.fromDrive,
 			icon: 'ti ti-cloud',
-			action: () => chooseFileFromDrive(multiple).then(files => res(files)),
+			action: () => chooseFileFromDrive({ multiple }).then(files => res(files)),
 		}, {
 			text: i18n.ts.fromUrl,
 			icon: 'ti ti-link',

From 01976c02fbc4df27c6e2d2fbcbc44faa86ba6019 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 20:10:53 +0900
Subject: [PATCH 40/62] wip

---
 locales/index.d.ts                            |  16 --
 packages/frontend/src/components/MkDrive.vue  |   2 +-
 .../src/components/MkFormDialog.file.vue      |   2 +-
 .../frontend/src/components/MkPostForm.vue    |   8 +-
 .../src/components/MkPostFormAttaches.vue     |  12 -
 .../frontend/src/components/MkPreview.vue     |   3 +-
 .../src/components/MkUploaderDialog.vue       |   6 +-
 packages/frontend/src/os.ts                   |  45 ----
 .../custom-emojis-manager.local.list.vue      |   2 +-
 .../admin/custom-emojis-manager.register.vue  |   4 +-
 .../frontend/src/pages/channel-editor.vue     |   2 +-
 .../frontend/src/pages/chat/room.form.vue     |   2 +-
 .../src/pages/custom-emojis-manager.vue       |   2 +-
 .../frontend/src/pages/drive.file.info.vue    |  12 -
 .../frontend/src/pages/emoji-edit-dialog.vue  |   2 +-
 packages/frontend/src/pages/gallery/edit.vue  |   2 +-
 .../page-editor/els/page-editor.el.image.vue  |   6 +-
 .../src/pages/page-editor/page-editor.vue     |   2 +-
 .../src/pages/settings/account-data.vue       |   2 +-
 packages/frontend/src/pages/settings/deck.vue |   2 +-
 .../frontend/src/pages/settings/profile.vue   |   6 +-
 .../src/pages/settings/sounds.sound.vue       |   2 +-
 packages/frontend/src/utility/drive.ts        | 231 ++++++++++++++++++
 .../src/utility/get-drive-file-menu.ts        |  11 -
 packages/frontend/src/utility/select-file.ts  | 105 --------
 packages/frontend/src/utility/upload.ts       |  99 --------
 26 files changed, 256 insertions(+), 332 deletions(-)
 create mode 100644 packages/frontend/src/utility/drive.ts
 delete mode 100644 packages/frontend/src/utility/select-file.ts
 delete mode 100644 packages/frontend/src/utility/upload.ts

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 7a3bec67dd..ff02531489 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -11453,22 +11453,6 @@ export interface Locale extends ILocale {
                  * ディレクトリをドラッグ・ドロップした時に、ディレクトリ名を"category"に入力します。
                  */
                 "directoryToCategoryCaption": string;
-                /**
-                 * いずれかの方法で登録する絵文字を選択してください。
-                 */
-                "emojiInputAreaCaption": string;
-                /**
-                 * この枠に画像ファイルまたはディレクトリをドラッグ＆ドロップ
-                 */
-                "emojiInputAreaList1": string;
-                /**
-                 * このリンクをクリックしてPCから選択する
-                 */
-                "emojiInputAreaList2": string;
-                /**
-                 * このリンクをクリックしてドライブから選択する
-                 */
-                "emojiInputAreaList3": string;
                 /**
                  * リストに表示されている絵文字を新たなカスタム絵文字として登録します。よろしいですか？（負荷を避けるため、一度の操作で登録可能な絵文字は{count}件までです）
                  */
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 89a2a7b95d..48c0fcdbfb 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -148,7 +148,7 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
-import { chooseFileFromPcAndUpload } from '@/utility/select-file.js';
+import { chooseFileFromPcAndUpload } from '@/utility/drive.js';
 import { store } from '@/store.js';
 import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
 import { usePagination } from '@/composables/use-pagination.js';
diff --git a/packages/frontend/src/components/MkFormDialog.file.vue b/packages/frontend/src/components/MkFormDialog.file.vue
index 0a902f3400..a11075c342 100644
--- a/packages/frontend/src/components/MkFormDialog.file.vue
+++ b/packages/frontend/src/components/MkFormDialog.file.vue
@@ -15,7 +15,7 @@ import * as Misskey from 'misskey-js';
 import { computed, ref } from 'vue';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 
 const props = defineProps<{
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 538dac7e01..d07ee2a978 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
 	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-	<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
+	<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text" :files="files" :poll="poll ?? undefined" :useCw="useCw" :cw="cw" :user="postAccount ?? $i"/>
 	<div v-if="showingOptions" style="padding: 8px 16px;">
@@ -120,7 +120,7 @@ import { formatTimeString } from '@/utility/format-time-string.js';
 import { Autocomplete } from '@/utility/autocomplete.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
-import { selectFiles } from '@/utility/select-file.js';
+import { selectFiles } from '@/utility/drive.js';
 import { store } from '@/store.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { i18n } from '@/i18n.js';
@@ -459,10 +459,6 @@ function updateFileName(file, name) {
 	files.value[files.value.findIndex(x => x.id === file.id)].name = name;
 }
 
-function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void {
-	files.value[files.value.findIndex(x => x.id === file.id)] = newFile;
-}
-
 function setVisibility() {
 	if (props.channel) {
 		visibility.value = 'public';
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index a35eb1abf8..01f41d11f8 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -58,7 +58,6 @@ const emit = defineEmits<{
 	(ev: 'detach', id: string): void;
 	(ev: 'changeSensitive', file: Misskey.entities.DriveFile, isSensitive: boolean): void;
 	(ev: 'changeName', file: Misskey.entities.DriveFile, newName: string): void;
-	(ev: 'replaceFile', file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void;
 }>();
 
 let menuShowing = false;
@@ -142,13 +141,6 @@ async function describe(file: Misskey.entities.DriveFile) {
 	});
 }
 
-async function crop(file: Misskey.entities.DriveFile): Promise<void> {
-	if (mock) return;
-
-	const newFile = await os.createCroppedImageDriveFileFromImageDriveFile(file, { aspectRatio: NaN });
-	emit('replaceFile', file, newFile);
-}
-
 function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | KeyboardEvent): void {
 	if (menuShowing) return;
 
@@ -172,10 +164,6 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | Keyboar
 
 	if (isImage) {
 		menuItems.push({
-			text: i18n.ts.cropImage,
-			icon: 'ti ti-crop',
-			action: () : void => { crop(file); },
-		}, {
 			text: i18n.ts.preview,
 			icon: 'ti ti-photo-search',
 			action: () => {
diff --git a/packages/frontend/src/components/MkPreview.vue b/packages/frontend/src/components/MkPreview.vue
index a3656ac13c..6c7bf6be6b 100644
--- a/packages/frontend/src/components/MkPreview.vue
+++ b/packages/frontend/src/components/MkPreview.vue
@@ -44,6 +44,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkRadio from '@/components/MkRadio.vue';
 import * as os from '@/os.js';
 import { $i } from '@/i.js';
+import { chooseDriveFile } from '@/utility/drive.js';
 
 const text = ref('');
 const flag = ref(true);
@@ -79,7 +80,7 @@ const openForm = async () => {
 };
 
 const openDrive = async () => {
-	await os.selectDriveFile({
+	await chooseDriveFile({
 		multiple: false,
 	});
 };
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index aa1ce2e2c2..420557ca50 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -79,21 +79,17 @@ import { computed, markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
-import { apiUrl } from '@@/js/config.js';
 import isAnimated from 'is-file-animated';
-import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
 import type { MenuItem } from '@/types/menu.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
-import { ensureSignin } from '@/i.js';
-import { instance } from '@/instance.js';
 import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import { isWebpSupported } from '@/utility/isWebpSupported.js';
-import { uploadFile } from '@/utility/upload.js';
+import { uploadFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 
 const COMPRESSION_SUPPORTED_TYPES = [
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index eaf63ab289..4faf741f4b 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -9,7 +9,6 @@ import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
 import { getProxiedImageUrl } from './utility/media-proxy.js';
-import { uploadFile } from './utility/upload.js';
 import type { Component, Ref } from 'vue';
 import type { ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/utility/form.js';
@@ -594,21 +593,6 @@ export async function selectUser(opts: { includeSelf?: boolean; localOnly?: bool
 	});
 }
 
-export async function selectDriveFile(options: { multiple?: boolean; } = {}): Promise<Misskey.entities.DriveFile[]> {
-	return new Promise(resolve => {
-		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveFileSelectDialog.vue')), {
-			multiple: options.multiple,
-		}, {
-			done: files => {
-				if (files) {
-					resolve(files);
-				}
-			},
-			closed: () => dispose(),
-		});
-	});
-}
-
 export async function selectDriveFolder(initialFolder: Misskey.entities.DriveFolder['id'] | null): Promise<Misskey.entities.DriveFolder[]> {
 	return new Promise(resolve => {
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveFolderSelectDialog.vue')), {
@@ -671,35 +655,6 @@ export async function cropImageFile(imageFile: File | Blob, options: {
 	});
 }
 
-export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFile: Misskey.entities.DriveFile, options: {
-	aspectRatio: number;
-}): Promise<Misskey.entities.DriveFile> {
-	return new Promise(resolve => {
-		const imgUrl = getProxiedImageUrl(imageDriveFile.url, undefined, true);
-		const image = new Image();
-		image.src = imgUrl;
-		image.onload = () => {
-			const canvas = window.document.createElement('canvas');
-			const ctx = canvas.getContext('2d')!;
-			canvas.width = image.width;
-			canvas.height = image.height;
-			ctx.drawImage(image, 0, 0);
-			canvas.toBlob(blob => {
-				cropImageFile(blob, {
-					aspectRatio: options.aspectRatio,
-				}).then(croppedImageFile => {
-					uploadFile(croppedImageFile, {
-						name: imageDriveFile.name,
-						folderId: imageDriveFile.folderId,
-					}).then(driveFile => {
-						resolve(driveFile);
-					});
-				});
-			});
-		};
-	});
-}
-
 export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | null, options?: {
 	align?: string;
 	width?: number;
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
index 0ff251abb8..68c7048ae1 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
@@ -87,7 +87,7 @@ import MkButton from '@/components/MkButton.vue';
 import { validators } from '@/components/grid/cell-validators.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import MkPagingButtons from '@/components/MkPagingButtons.vue';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import { copyGridDataToClipboard, removeDataFromGrid } from '@/components/grid/grid-utils.js';
 import { useLoading } from '@/composables/use-loading.js';
 
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
index ca26daadaf..e1dabe549f 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
@@ -83,7 +83,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { validators } from '@/components/grid/cell-validators.js';
-import { chooseFileFromDrive, chooseFileFromPcAndUpload } from '@/utility/select-file.js';
+import { chooseDriveFile, chooseFileFromPcAndUpload } from '@/utility/drive.js';
 import { extractDroppedItems, flattenDroppedFiles } from '@/utility/file-drop.js';
 import XRegisterLogs from '@/pages/admin/custom-emojis-manager.logs.vue';
 import { copyGridDataToClipboard } from '@/components/grid/grid-utils.js';
@@ -311,7 +311,7 @@ async function onFileSelectClicked() {
 }
 
 async function onDriveSelectClicked() {
-	const driveFiles = await chooseFileFromDrive({
+	const driveFiles = await chooseDriveFile({
 		multiple: true,
 	});
 	gridItems.value.push(...driveFiles.map(fromDriveFile));
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index 009514cdc8..355b5464a1 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -73,7 +73,7 @@ import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { definePage } from '@/page.js';
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index 952fafb930..6702cd2ec1 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -38,7 +38,7 @@ import { onMounted, watch, ref, shallowRef, computed, nextTick, readonly, onBefo
 import * as Misskey from 'misskey-js';
 //import insertTextAtCursor from 'insert-text-at-cursor';
 import { formatTimeString } from '@/utility/format-time-string.js';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 46e494e6f6..c2bc621f6a 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -78,7 +78,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkRemoteEmojiEditDialog from '@/components/MkRemoteEmojiEditDialog.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSplit from '@/components/form/split.vue';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { getProxiedImageUrl } from '@/utility/media-proxy.js';
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index a9511a9d17..b995d99115 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -20,9 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-tooltip="i18n.ts.createNoteFromTheFile" class="_button" :class="$style.fileQuickActionsOthersButton" @click="postThis()">
 					<i class="ti ti-pencil"></i>
 				</button>
-				<button v-if="isImage" v-tooltip="i18n.ts.cropImage" class="_button" :class="$style.fileQuickActionsOthersButton" @click="crop()">
-					<i class="ti ti-crop"></i>
-				</button>
 				<button v-if="file.isSensitive" v-tooltip="i18n.ts.unmarkAsSensitive" class="_button" :class="$style.fileQuickActionsOthersButton" @click="toggleSensitive()">
 					<i class="ti ti-eye"></i>
 				</button>
@@ -127,15 +124,6 @@ function postThis() {
 	});
 }
 
-function crop() {
-	if (!file.value) return;
-
-	os.createCroppedImageDriveFileFromImageDriveFile(file.value, {
-		aspectRatio: NaN,
-		uploadFolder: file.value.folderId ?? null,
-	});
-}
-
 function move() {
 	if (!file.value) return;
 
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index 0479ed6f6c..41de457427 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -91,7 +91,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { customEmojiCategories } from '@/custom-emojis.js';
 import MkSwitch from '@/components/MkSwitch.vue';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 
 const props = defineProps<{
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index caae30f9fd..1b8c14a156 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -44,7 +44,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSuspense from '@/components/form/suspense.vue';
-import { selectFiles } from '@/utility/select-file.js';
+import { selectFiles } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { definePage } from '@/page.js';
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index a2a9d0b43f..13dedeafb2 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -20,14 +20,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
- 
+
 import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
+import { chooseDriveFile } from '@/utility/drive.js';
 
 const props = defineProps<{
 	modelValue: Misskey.entities.PageBlock & { type: 'image' };
@@ -41,7 +41,7 @@ const emit = defineEmits<{
 const file = ref<Misskey.entities.DriveFile | null>(null);
 
 async function choose() {
-	os.selectDriveFile({ multiple: false }).then((fileResponse) => {
+	chooseDriveFile({ multiple: false }).then((fileResponse) => {
 		file.value = fileResponse[0];
 		emit('update:modelValue', {
 			...props.modelValue,
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index f1b1c2f1d8..49d9150852 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -71,7 +71,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { $i } from '@/i.js';
diff --git a/packages/frontend/src/pages/settings/account-data.vue b/packages/frontend/src/pages/settings/account-data.vue
index 14bea577a3..d175c0dc32 100644
--- a/packages/frontend/src/pages/settings/account-data.vue
+++ b/packages/frontend/src/pages/settings/account-data.vue
@@ -164,7 +164,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { $i } from '@/i.js';
diff --git a/packages/frontend/src/pages/settings/deck.vue b/packages/frontend/src/pages/settings/deck.vue
index 39055268d4..22bd8cbc80 100644
--- a/packages/frontend/src/pages/settings/deck.vue
+++ b/packages/frontend/src/pages/settings/deck.vue
@@ -98,7 +98,7 @@ import { definePage } from '@/page.js';
 import { prefer } from '@/preferences.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
 import { reloadAsk } from '@/utility/reload-ask.js';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 
 const navWindow = prefer.model('deck.navWindow');
 const useSimpleUiForNonRootPages = prefer.model('deck.useSimpleUiForNonRootPages');
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 8296983014..df637d9e9a 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -161,7 +161,7 @@ import MkSelect from '@/components/MkSelect.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import FormSlot from '@/components/form/slot.vue';
-import { selectFile } from '@/utility/select-file.js';
+import { chooseDriveFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i.js';
@@ -298,7 +298,7 @@ function changeAvatar(ev) {
 		text: i18n.ts.fromDrive,
 		icon: 'ti ti-cloud',
 		action: () => {
-			os.selectDriveFile({ multiple: false }).then(files => {
+			chooseDriveFile({ multiple: false }).then(files => {
 				done(files[0]);
 			});
 		},
@@ -346,7 +346,7 @@ function changeBanner(ev) {
 		text: i18n.ts.fromDrive,
 		icon: 'ti ti-cloud',
 		action: () => {
-			os.selectDriveFile({ multiple: false }).then(files => {
+			chooseDriveFile({ multiple: false }).then(files => {
 				done(files[0]);
 			});
 		},
diff --git a/packages/frontend/src/pages/settings/sounds.sound.vue b/packages/frontend/src/pages/settings/sounds.sound.vue
index 1bac19fe47..ffbbefa122 100644
--- a/packages/frontend/src/pages/settings/sounds.sound.vue
+++ b/packages/frontend/src/pages/settings/sounds.sound.vue
@@ -40,7 +40,7 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { playMisskeySfxFile, soundsTypes, getSoundDuration } from '@/utility/sound.js';
-import { selectFile } from '@/utility/select-file.js';
+import { selectFile } from '@/utility/drive.js';
 
 const props = defineProps<{
 	type: SoundType;
diff --git a/packages/frontend/src/utility/drive.ts b/packages/frontend/src/utility/drive.ts
new file mode 100644
index 0000000000..5b6b80f452
--- /dev/null
+++ b/packages/frontend/src/utility/drive.ts
@@ -0,0 +1,231 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
+import { apiUrl } from '@@/js/config.js';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { useStream } from '@/stream.js';
+import { i18n } from '@/i18n.js';
+import { prefer } from '@/preferences.js';
+import { $i } from '@/i.js';
+import { instance } from '@/instance.js';
+import { globalEvents } from '@/events.js';
+import { getProxiedImageUrl } from '@/utility/media-proxy.js';
+
+export function uploadFile(file: File | Blob, options: {
+	name?: string;
+	folderId?: string | null;
+	onProgress?: (ctx: { total: number; loaded: number; }) => void;
+} = {}): Promise<Misskey.entities.DriveFile> {
+	return new Promise((resolve, reject) => {
+		if ($i == null) return reject();
+
+		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.failedToUpload,
+				text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+			});
+			return reject();
+		}
+
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', apiUrl + '/drive/files/create', true);
+		xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
+			if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
+				if (xhr.status === 413) {
+					os.alert({
+						type: 'error',
+						title: i18n.ts.failedToUpload,
+						text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+					});
+				} else if (ev.target?.response) {
+					const res = JSON.parse(ev.target.response);
+					if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
+						os.alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: i18n.ts.cannotUploadBecauseInappropriate,
+						});
+					} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
+						os.alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: i18n.ts.cannotUploadBecauseNoFreeSpace,
+						});
+					} else {
+						os.alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
+						});
+					}
+				} else {
+					os.alert({
+						type: 'error',
+						title: 'Failed to upload',
+						text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
+					});
+				}
+
+				reject();
+				return;
+			}
+
+			const driveFile = JSON.parse(ev.target.response);
+			globalEvents.emit('driveFileCreated', driveFile);
+			resolve(driveFile);
+		}) as (ev: ProgressEvent<EventTarget>) => any;
+
+		if (options.onProgress) {
+			xhr.upload.onprogress = ev => {
+				if (ev.lengthComputable) {
+					options.onProgress({
+						total: ev.total,
+						loaded: ev.loaded,
+					});
+				}
+			};
+		}
+
+		const formData = new FormData();
+		formData.append('i', $i.token);
+		formData.append('force', 'true');
+		formData.append('file', file);
+		formData.append('name', options.name ?? file.name ?? 'untitled');
+		if (options.folderId) formData.append('folderId', options.folderId);
+
+		xhr.send(formData);
+	});
+}
+
+export function chooseFileFromPcAndUpload(
+	options: {
+		multiple?: boolean;
+		folderId?: string | null;
+	} = {},
+): Promise<Misskey.entities.DriveFile[]> {
+	return new Promise((res, rej) => {
+		os.chooseFileFromPc({ multiple: options.multiple }).then(files => {
+			if (files.length === 0) return;
+			os.launchUploader(files, {
+				folderId: options.folderId,
+			}).then(driveFiles => {
+				res(driveFiles);
+			});
+		});
+	});
+}
+
+export function chooseDriveFile(options: {
+	multiple?: boolean;
+} = {}): Promise<Misskey.entities.DriveFile[]> {
+	return new Promise(resolve => {
+		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkDriveFileSelectDialog.vue')), {
+			multiple: options.multiple,
+		}, {
+			done: files => {
+				if (files) {
+					resolve(files);
+				}
+			},
+			closed: () => dispose(),
+		});
+	});
+}
+
+export function chooseFileFromUrl(): Promise<Misskey.entities.DriveFile> {
+	return new Promise((res, rej) => {
+		os.inputText({
+			title: i18n.ts.uploadFromUrl,
+			type: 'url',
+			placeholder: i18n.ts.uploadFromUrlDescription,
+		}).then(({ canceled, result: url }) => {
+			if (canceled) return;
+
+			const marker = Math.random().toString(); // TODO: UUIDとか使う
+
+			// TODO: no websocketモード対応
+			const connection = useStream().useChannel('main');
+			connection.on('urlUploadFinished', urlResponse => {
+				if (urlResponse.marker === marker) {
+					res(urlResponse.file);
+					connection.dispose();
+				}
+			});
+
+			misskeyApi('drive/files/upload-from-url', {
+				url: url,
+				folderId: prefer.s.uploadFolder,
+				marker,
+			});
+
+			os.alert({
+				title: i18n.ts.uploadFromUrlRequested,
+				text: i18n.ts.uploadFromUrlMayTakeTime,
+			});
+		});
+	});
+}
+
+function select(src: HTMLElement | EventTarget | null, label: string | null, multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
+	return new Promise((res, rej) => {
+		os.popupMenu([label ? {
+			text: label,
+			type: 'label',
+		} : undefined, {
+			text: i18n.ts.upload,
+			icon: 'ti ti-upload',
+			action: () => chooseFileFromPcAndUpload({ multiple }).then(files => res(files)),
+		}, {
+			text: i18n.ts.fromDrive,
+			icon: 'ti ti-cloud',
+			action: () => chooseDriveFile({ multiple }).then(files => res(files)),
+		}, {
+			text: i18n.ts.fromUrl,
+			icon: 'ti ti-link',
+			action: () => chooseFileFromUrl().then(file => res([file])),
+		}], src);
+	});
+}
+
+export function selectFile(src: HTMLElement | EventTarget | null, label: string | null = null): Promise<Misskey.entities.DriveFile> {
+	return select(src, label, false).then(files => files[0]);
+}
+
+export function selectFiles(src: HTMLElement | EventTarget | null, label: string | null = null): Promise<Misskey.entities.DriveFile[]> {
+	return select(src, label, true);
+}
+
+export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFile: Misskey.entities.DriveFile, options: {
+	aspectRatio: number | null;
+}): Promise<Misskey.entities.DriveFile> {
+	return new Promise(resolve => {
+		const imgUrl = getProxiedImageUrl(imageDriveFile.url, undefined, true);
+		const image = new Image();
+		image.src = imgUrl;
+		image.onload = () => {
+			const canvas = window.document.createElement('canvas');
+			const ctx = canvas.getContext('2d')!;
+			canvas.width = image.width;
+			canvas.height = image.height;
+			ctx.drawImage(image, 0, 0);
+			canvas.toBlob(blob => {
+				os.cropImageFile(blob, {
+					aspectRatio: options.aspectRatio,
+				}).then(croppedImageFile => {
+					uploadFile(croppedImageFile, {
+						name: imageDriveFile.name,
+						folderId: imageDriveFile.folderId,
+					}).then(driveFile => {
+						resolve(driveFile);
+					});
+				});
+			});
+		};
+	});
+}
diff --git a/packages/frontend/src/utility/get-drive-file-menu.ts b/packages/frontend/src/utility/get-drive-file-menu.ts
index b87b447e93..1475165dc9 100644
--- a/packages/frontend/src/utility/get-drive-file-menu.ts
+++ b/packages/frontend/src/utility/get-drive-file-menu.ts
@@ -112,17 +112,6 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 		action: () => describe(file),
 	});
 
-	if (isImage) {
-		menuItems.push({
-			text: i18n.ts.cropImage,
-			icon: 'ti ti-crop',
-			action: () => os.createCroppedImageDriveFileFromImageDriveFile(file, {
-				aspectRatio: NaN,
-				uploadFolder: folder ? folder.id : folder,
-			}),
-		});
-	}
-
 	menuItems.push({ type: 'divider' }, {
 		text: i18n.ts.createNoteFromTheFile,
 		icon: 'ti ti-pencil',
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
deleted file mode 100644
index e3df0850c0..0000000000
--- a/packages/frontend/src/utility/select-file.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { } from 'vue';
-import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { useStream } from '@/stream.js';
-import { i18n } from '@/i18n.js';
-import { prefer } from '@/preferences.js';
-
-export function chooseFileFromPcAndUpload(
-	options: {
-		multiple?: boolean;
-		folderId?: string | null;
-	} = {},
-): Promise<Misskey.entities.DriveFile[]> {
-	return new Promise((res, rej) => {
-		os.chooseFileFromPc({ multiple: options.multiple }).then(files => {
-			if (files.length === 0) return;
-			os.launchUploader(files, {
-				folderId: options.folderId,
-			}).then(driveFiles => {
-				res(driveFiles);
-			});
-		});
-	});
-}
-
-export function chooseFileFromDrive(options: {
-	multiple?: boolean;
-} = {}): Promise<Misskey.entities.DriveFile[]> {
-	return new Promise((res, rej) => {
-		os.selectDriveFile({
-			multiple: options.multiple,
-		}).then(files => {
-			res(files);
-		});
-	});
-}
-
-export function chooseFileFromUrl(): Promise<Misskey.entities.DriveFile> {
-	return new Promise((res, rej) => {
-		os.inputText({
-			title: i18n.ts.uploadFromUrl,
-			type: 'url',
-			placeholder: i18n.ts.uploadFromUrlDescription,
-		}).then(({ canceled, result: url }) => {
-			if (canceled) return;
-
-			const marker = Math.random().toString(); // TODO: UUIDとか使う
-
-			// TODO: no websocketモード対応
-			const connection = useStream().useChannel('main');
-			connection.on('urlUploadFinished', urlResponse => {
-				if (urlResponse.marker === marker) {
-					res(urlResponse.file);
-					connection.dispose();
-				}
-			});
-
-			misskeyApi('drive/files/upload-from-url', {
-				url: url,
-				folderId: prefer.s.uploadFolder,
-				marker,
-			});
-
-			os.alert({
-				title: i18n.ts.uploadFromUrlRequested,
-				text: i18n.ts.uploadFromUrlMayTakeTime,
-			});
-		});
-	});
-}
-
-function select(src: HTMLElement | EventTarget | null, label: string | null, multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
-	return new Promise((res, rej) => {
-		os.popupMenu([label ? {
-			text: label,
-			type: 'label',
-		} : undefined, {
-			text: i18n.ts.upload,
-			icon: 'ti ti-upload',
-			action: () => chooseFileFromPcAndUpload({ multiple }).then(files => res(files)),
-		}, {
-			text: i18n.ts.fromDrive,
-			icon: 'ti ti-cloud',
-			action: () => chooseFileFromDrive({ multiple }).then(files => res(files)),
-		}, {
-			text: i18n.ts.fromUrl,
-			icon: 'ti ti-link',
-			action: () => chooseFileFromUrl().then(file => res([file])),
-		}], src);
-	});
-}
-
-export function selectFile(src: HTMLElement | EventTarget | null, label: string | null = null): Promise<Misskey.entities.DriveFile> {
-	return select(src, label, false).then(files => files[0]);
-}
-
-export function selectFiles(src: HTMLElement | EventTarget | null, label: string | null = null): Promise<Misskey.entities.DriveFile[]> {
-	return select(src, label, true);
-}
diff --git a/packages/frontend/src/utility/upload.ts b/packages/frontend/src/utility/upload.ts
deleted file mode 100644
index 134d468fff..0000000000
--- a/packages/frontend/src/utility/upload.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import * as Misskey from 'misskey-js';
-import { apiUrl } from '@@/js/config.js';
-import { $i } from '@/i.js';
-import { instance } from '@/instance.js';
-import { i18n } from '@/i18n.js';
-import * as os from '@/os.js';
-import { globalEvents } from '@/events.js';
-
-export function uploadFile(file: File | Blob, options: {
-	name?: string;
-	folderId?: string | null;
-	onProgress?: (ctx: { total: number; loaded: number; }) => void;
-} = {}): Promise<Misskey.entities.DriveFile> {
-	return new Promise((resolve, reject) => {
-		if ($i == null) return reject();
-
-		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.failedToUpload,
-				text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
-			});
-			return reject();
-		}
-
-		const xhr = new XMLHttpRequest();
-		xhr.open('POST', apiUrl + '/drive/files/create', true);
-		xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
-			if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
-				if (xhr.status === 413) {
-					os.alert({
-						type: 'error',
-						title: i18n.ts.failedToUpload,
-						text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
-					});
-				} else if (ev.target?.response) {
-					const res = JSON.parse(ev.target.response);
-					if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
-						os.alert({
-							type: 'error',
-							title: i18n.ts.failedToUpload,
-							text: i18n.ts.cannotUploadBecauseInappropriate,
-						});
-					} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
-						os.alert({
-							type: 'error',
-							title: i18n.ts.failedToUpload,
-							text: i18n.ts.cannotUploadBecauseNoFreeSpace,
-						});
-					} else {
-						os.alert({
-							type: 'error',
-							title: i18n.ts.failedToUpload,
-							text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
-						});
-					}
-				} else {
-					os.alert({
-						type: 'error',
-						title: 'Failed to upload',
-						text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
-					});
-				}
-
-				reject();
-				return;
-			}
-
-			const driveFile = JSON.parse(ev.target.response);
-			globalEvents.emit('driveFileCreated', driveFile);
-			resolve(driveFile);
-		}) as (ev: ProgressEvent<EventTarget>) => any;
-
-		if (options.onProgress) {
-			xhr.upload.onprogress = ev => {
-				if (ev.lengthComputable) {
-					options.onProgress({
-						total: ev.total,
-						loaded: ev.loaded,
-					});
-				}
-			};
-		}
-
-		const formData = new FormData();
-		formData.append('i', $i.token);
-		formData.append('force', 'true');
-		formData.append('file', file);
-		formData.append('name', options.name ?? file.name ?? 'untitled');
-		if (options.folderId) formData.append('folderId', options.folderId);
-
-		xhr.send(formData);
-	});
-}

From 292d004169d5bb55f648a97441eee5ce64ac00c6 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 20:15:44 +0900
Subject: [PATCH 41/62] wip

---
 .../frontend/src/components/MkDrive.folder.vue   |  3 ++-
 packages/frontend/src/os.ts                      | 16 ----------------
 packages/frontend/src/pages/drive.file.info.vue  |  3 ++-
 packages/frontend/src/pages/settings/drive.vue   |  3 ++-
 packages/frontend/src/utility/drive.ts           | 15 +++++++++++++++
 .../frontend/src/utility/get-drive-file-menu.ts  |  3 ++-
 .../frontend/src/widgets/WidgetSlideshow.vue     |  3 ++-
 7 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 3782a847a9..2fa3972360 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -44,6 +44,7 @@ import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
 import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
+import { selectDriveFolder } from '@/utility/drive.js';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -220,7 +221,7 @@ function rename() {
 }
 
 function move() {
-	os.selectDriveFolder().then(folder => {
+	selectDriveFolder(null).then(folder => {
 		if (folder[0] && folder[0].id === props.folder.id) return;
 
 		misskeyApi('drive/folders/update', {
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 4faf741f4b..54fa5a5af9 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -8,7 +8,6 @@
 import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
-import { getProxiedImageUrl } from './utility/media-proxy.js';
 import type { Component, Ref } from 'vue';
 import type { ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/utility/form.js';
@@ -593,21 +592,6 @@ export async function selectUser(opts: { includeSelf?: boolean; localOnly?: bool
 	});
 }
 
-export async function selectDriveFolder(initialFolder: Misskey.entities.DriveFolder['id'] | null): Promise<Misskey.entities.DriveFolder[]> {
-	return new Promise(resolve => {
-		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveFolderSelectDialog.vue')), {
-			initialFolder,
-		}, {
-			done: folders => {
-				if (folders) {
-					resolve(folders);
-				}
-			},
-			closed: () => dispose(),
-		});
-	});
-}
-
 export async function selectRole(params: ComponentProps<typeof MkRoleSelectDialog_TypeReferenceOnly>): Promise<
 	{ canceled: true; result: undefined; } |
 	{ canceled: false; result: Misskey.entities.Role[] }
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index b995d99115..0080407999 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -80,6 +80,7 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useRouter } from '@/router.js';
+import { selectDriveFolder } from '@/utility/drive.js';
 
 const router = useRouter();
 
@@ -127,7 +128,7 @@ function postThis() {
 function move() {
 	if (!file.value) return;
 
-	os.selectDriveFolder().then(folder => {
+	selectDriveFolder(null).then(folder => {
 		misskeyApi('drive/files/update', {
 			fileId: file.value.id,
 			folderId: folder[0] ? folder[0].id : null,
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index c4619c354d..d62e487341 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -99,6 +99,7 @@ import { ensureSignin } from '@/i.js';
 import { prefer } from '@/preferences.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
 import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
+import { selectDriveFolder } from '@/utility/drive.js';
 
 const $i = ensureSignin();
 
@@ -138,7 +139,7 @@ if (prefer.s.uploadFolder) {
 }
 
 function chooseUploadFolder() {
-	os.selectDriveFolder().then(async folder => {
+	selectDriveFolder(null).then(async folder => {
 		prefer.commit('uploadFolder', folder[0] ? folder[0].id : null);
 		os.success();
 		if (prefer.s.uploadFolder) {
diff --git a/packages/frontend/src/utility/drive.ts b/packages/frontend/src/utility/drive.ts
index 5b6b80f452..e29b010c81 100644
--- a/packages/frontend/src/utility/drive.ts
+++ b/packages/frontend/src/utility/drive.ts
@@ -229,3 +229,18 @@ export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFi
 		};
 	});
 }
+
+export async function selectDriveFolder(initialFolder: Misskey.entities.DriveFolder['id'] | null): Promise<Misskey.entities.DriveFolder[]> {
+	return new Promise(resolve => {
+		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkDriveFolderSelectDialog.vue')), {
+			initialFolder,
+		}, {
+			done: folders => {
+				if (folders) {
+					resolve(folders);
+				}
+			},
+			closed: () => dispose(),
+		});
+	});
+}
diff --git a/packages/frontend/src/utility/get-drive-file-menu.ts b/packages/frontend/src/utility/get-drive-file-menu.ts
index 1475165dc9..7a3f9ce1a0 100644
--- a/packages/frontend/src/utility/get-drive-file-menu.ts
+++ b/packages/frontend/src/utility/get-drive-file-menu.ts
@@ -5,6 +5,7 @@
 
 import * as Misskey from 'misskey-js';
 import { defineAsyncComponent } from 'vue';
+import { selectDriveFolder } from './drive.js';
 import type { MenuItem } from '@/types/menu.js';
 import { i18n } from '@/i18n.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
@@ -42,7 +43,7 @@ function describe(file: Misskey.entities.DriveFile) {
 }
 
 function move(file: Misskey.entities.DriveFile) {
-	os.selectDriveFolder().then(folder => {
+	selectDriveFolder(null).then(folder => {
 		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: folder[0] ? folder[0].id : null,
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
index a83e2754f6..3fe8cfa7e6 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.vue
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -26,6 +26,7 @@ import type { GetFormResultType } from '@/utility/form.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
+import { selectDriveFolder } from '@/utility/drive.js';
 
 const name = 'slideshow';
 
@@ -93,7 +94,7 @@ const fetch = () => {
 };
 
 const choose = () => {
-	os.selectDriveFolder().then(folder => {
+	selectDriveFolder(null).then(folder => {
 		if (folder[0] == null) {
 			return;
 		}

From 6573b2ba8e4f274de3dd2d9c3b067db45330e7fc Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 20:18:33 +0900
Subject: [PATCH 42/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 48c0fcdbfb..06447d5a33 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -148,7 +148,7 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
-import { chooseFileFromPcAndUpload } from '@/utility/drive.js';
+import { chooseFileFromPcAndUpload, selectDriveFolder } from '@/utility/drive.js';
 import { store } from '@/store.js';
 import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
 import { usePagination } from '@/composables/use-pagination.js';
@@ -525,7 +525,7 @@ function cd(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder
 async function moveFilesBulk() {
 	if (selectedFiles.value.length === 0) return;
 
-	const toFolder = await os.selectDriveFolder(folder.value ? folder.value.id : null);
+	const toFolder = await selectDriveFolder(folder.value ? folder.value.id : null);
 
 	await os.apiWithDialog('drive/files/move-bulk', {
 		fileIds: selectedFiles.value.map(f => f.id),

From 7725107bc3c45de57ab511012421e1ee455b0507 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 20:32:27 +0900
Subject: [PATCH 43/62] Update drag-and-drop.ts

---
 packages/frontend/src/drag-and-drop.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/drag-and-drop.ts b/packages/frontend/src/drag-and-drop.ts
index 3d7910eece..3c6f22f24b 100644
--- a/packages/frontend/src/drag-and-drop.ts
+++ b/packages/frontend/src/drag-and-drop.ts
@@ -11,6 +11,8 @@ type DragDataMap = {
 	deckColumn: string;
 };
 
+// NOTE: dataTransfer の format は大文字小文字区別されないっぽいので toLowerCase が必要
+
 export function setDragData<T extends keyof DragDataMap>(
 	event: DragEvent,
 	type: T,
@@ -18,7 +20,7 @@ export function setDragData<T extends keyof DragDataMap>(
 ) {
 	if (event.dataTransfer == null) return;
 
-	event.dataTransfer.setData(`misskey/${type}`, JSON.stringify(data));
+	event.dataTransfer.setData(`misskey/${type}`.toLowerCase(), JSON.stringify(data));
 }
 
 export function getDragData<T extends keyof DragDataMap>(
@@ -27,7 +29,7 @@ export function getDragData<T extends keyof DragDataMap>(
 ): DragDataMap[T] | null {
 	if (event.dataTransfer == null) return null;
 
-	const data = event.dataTransfer.getData(`misskey/${type}`);
+	const data = event.dataTransfer.getData(`misskey/${type}`.toLowerCase());
 	if (data == null || data === '') return null;
 
 	return JSON.parse(data);
@@ -42,5 +44,5 @@ export function checkDragDataType(
 	const dataType = event.dataTransfer.types[0];
 	if (dataType == null || dataType === '') return false;
 
-	return types.some((type) => dataType === `misskey/${type}`);
+	return types.some((type) => `misskey/${type}`.toLowerCase() === dataType.toLowerCase());
 }

From 052df8fb1aa860acba5bdd0204397d3368b3e063 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 20:37:10 +0900
Subject: [PATCH 44/62] wip

---
 packages/frontend/src/components/MkDrive.folder.vue   |  2 +-
 .../frontend/src/components/MkDrive.navFolder.vue     |  2 ++
 packages/frontend/src/components/MkDrive.vue          | 11 ++++++++++-
 packages/frontend/src/events.ts                       |  1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 2fa3972360..81b71dd41a 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -166,7 +166,7 @@ function onDrop(ev: DragEvent) {
 				folderId: droppedFolder.id,
 				parentId: props.folder.id,
 			}).then(() => {
-			// noop
+				globalEvents.emit('driveFoldersMoved', [droppedFolder], props.folder);
 			}).catch(err => {
 				switch (err.code) {
 					case 'RECURSIVE_NESTING':
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 7be031f8ac..11890d89e8 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -113,6 +113,8 @@ function onDrop(ev: DragEvent) {
 			misskeyApi('drive/folders/update', {
 				folderId: droppedFolder.id,
 				parentId: props.folder ? props.folder.id : null,
+			}).then(() => {
+				globalEvents.emit('driveFoldersMoved', [droppedFolder], props.folder ?? null);
 			});
 		}
 	}
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 06447d5a33..03762851e9 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -348,7 +348,7 @@ function onDrop(ev: DragEvent) {
 				folderId: droppedFolder.id,
 				parentId: folder.value ? folder.value.id : null,
 			}).then(() => {
-			// noop
+				globalEvents.emit('driveFoldersMoved', [droppedFolder], folder.value);
 			}).catch(err => {
 				switch (err.code) {
 					case 'RECURSIVE_NESTING':
@@ -659,6 +659,15 @@ useGlobalEvent('driveFilesMoved', (files, to) => {
 	}
 });
 
+useGlobalEvent('driveFoldersMoved', (folders, to) => {
+	for (const f of folders) {
+		foldersPaginator.removeItem(f.id);
+	}
+	if ((to?.id ?? null) === (folder.value?.id ?? null)) {
+		foldersPaginator.unshiftItems(folders);
+	}
+});
+
 let connection: Misskey.ChannelConnection<Misskey.Channels['drive']> | null = null;
 
 onMounted(() => {
diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts
index c1bbec724e..b4e97c654c 100644
--- a/packages/frontend/src/events.ts
+++ b/packages/frontend/src/events.ts
@@ -15,6 +15,7 @@ type Events = {
 	noteDeleted: (noteId: Misskey.entities.Note['id']) => void;
 	driveFileCreated: (file: Misskey.entities.DriveFile) => void;
 	driveFilesMoved: (files: Misskey.entities.DriveFile[], to: Misskey.entities.DriveFolder | null) => void;
+	driveFoldersMoved: (folders: Misskey.entities.DriveFolder[], to: Misskey.entities.DriveFolder | null) => void;
 };
 
 export const globalEvents = new EventEmitter<Events>();

From 41f149a35ea9fed88c2f0f6a9d53ebab798a24bb Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 20:42:27 +0900
Subject: [PATCH 45/62] wip

---
 packages/frontend/src/components/MkDrive.vue            | 6 ++++++
 packages/frontend/src/components/MkPostFormAttaches.vue | 6 ++++--
 packages/frontend/src/events.ts                         | 2 ++
 packages/frontend/src/pages/drive.file.info.vue         | 5 ++++-
 packages/frontend/src/utility/get-drive-file-menu.ts    | 7 +++++--
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 03762851e9..94546d8076 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -659,6 +659,12 @@ useGlobalEvent('driveFilesMoved', (files, to) => {
 	}
 });
 
+useGlobalEvent('driveFilesDeleted', (files) => {
+	for (const f of files) {
+		filesPaginator.removeItem(f.id);
+	}
+});
+
 useGlobalEvent('driveFoldersMoved', (folders, to) => {
 	for (const f of folders) {
 		foldersPaginator.removeItem(f.id);
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index 01f41d11f8..dd594ef7f1 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -43,6 +43,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
+import { globalEvents } from '@/events.js';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
@@ -81,12 +82,13 @@ async function detachAndDeleteMedia(file: Misskey.entities.DriveFile) {
 		type: 'warning',
 		text: i18n.tsx.driveFileDeleteConfirm({ name: file.name }),
 	});
-
 	if (canceled) return;
 
-	os.apiWithDialog('drive/files/delete', {
+	await os.apiWithDialog('drive/files/delete', {
 		fileId: file.id,
 	});
+
+	globalEvents.emit('driveFilesDeleted', [file]);
 }
 
 function toggleSensitive(file) {
diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts
index b4e97c654c..0d13523903 100644
--- a/packages/frontend/src/events.ts
+++ b/packages/frontend/src/events.ts
@@ -15,7 +15,9 @@ type Events = {
 	noteDeleted: (noteId: Misskey.entities.Note['id']) => void;
 	driveFileCreated: (file: Misskey.entities.DriveFile) => void;
 	driveFilesMoved: (files: Misskey.entities.DriveFile[], to: Misskey.entities.DriveFolder | null) => void;
+	driveFilesDeleted: (files: Misskey.entities.DriveFile[]) => void;
 	driveFoldersMoved: (folders: Misskey.entities.DriveFolder[], to: Misskey.entities.DriveFolder | null) => void;
+	driveFoldersDeleted: (folders: Misskey.entities.DriveFolder[]) => void;
 };
 
 export const globalEvents = new EventEmitter<Events>();
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 0080407999..e8ac13c223 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -81,6 +81,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useRouter } from '@/router.js';
 import { selectDriveFolder } from '@/utility/drive.js';
+import { globalEvents } from '@/events.js';
 
 const router = useRouter();
 
@@ -199,12 +200,14 @@ async function deleteFile() {
 		type: 'warning',
 		text: i18n.tsx.driveFileDeleteConfirm({ name: file.value.name }),
 	});
-
 	if (canceled) return;
+
 	await os.apiWithDialog('drive/files/delete', {
 		fileId: file.value.id,
 	});
 
+	globalEvents.emit('driveFilesDeleted', [file.value]);
+
 	router.push('/my/drive');
 }
 
diff --git a/packages/frontend/src/utility/get-drive-file-menu.ts b/packages/frontend/src/utility/get-drive-file-menu.ts
index 7a3f9ce1a0..4b4bab3125 100644
--- a/packages/frontend/src/utility/get-drive-file-menu.ts
+++ b/packages/frontend/src/utility/get-drive-file-menu.ts
@@ -12,6 +12,7 @@ import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { prefer } from '@/preferences.js';
+import { globalEvents } from '@/events.js';
 
 function rename(file: Misskey.entities.DriveFile) {
 	os.inputText({
@@ -78,11 +79,13 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
 		type: 'warning',
 		text: i18n.tsx.driveFileDeleteConfirm({ name: file.name }),
 	});
-
 	if (canceled) return;
-	misskeyApi('drive/files/delete', {
+
+	await os.apiWithDialog('drive/files/delete', {
 		fileId: file.id,
 	});
+
+	globalEvents.emit('driveFilesDeleted', [file]);
 }
 
 export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {

From cfd95ce9ac23921c335d8e5dce4564393108f6d0 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 20:43:50 +0900
Subject: [PATCH 46/62] wop

---
 packages/frontend/src/components/MkDrive.folder.vue | 1 +
 packages/frontend/src/components/MkDrive.vue        | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 81b71dd41a..520d5088ec 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -238,6 +238,7 @@ function deleteFolder() {
 		if (prefer.s.uploadFolder === props.folder.id) {
 			prefer.commit('uploadFolder', null);
 		}
+		globalEvents.emit('driveFoldersDeleted', [props.folder]);
 	}).catch(err => {
 		switch (err.id) {
 			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 94546d8076..b1fcfb3fc1 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -428,6 +428,7 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
 	}).then(() => {
 		// 削除時に親フォルダに移動
 		cd(folderToDelete.parentId);
+		globalEvents.emit('driveFoldersDeleted', [folderToDelete]);
 	}).catch(err => {
 		switch (err.id) {
 			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
@@ -674,6 +675,12 @@ useGlobalEvent('driveFoldersMoved', (folders, to) => {
 	}
 });
 
+useGlobalEvent('driveFoldersDeleted', (folders) => {
+	for (const f of folders) {
+		foldersPaginator.removeItem(f.id);
+	}
+});
+
 let connection: Misskey.ChannelConnection<Misskey.Channels['drive']> | null = null;
 
 onMounted(() => {

From 0126523bc40ad54e9944e918265420f8172b19fa Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 21:04:22 +0900
Subject: [PATCH 47/62] wip

---
 .../src/components/MkDrive.folder.vue         | 23 +++++++-
 .../src/components/MkDrive.navFolder.vue      | 12 +++-
 packages/frontend/src/components/MkDrive.vue  | 55 ++++++++++++++-----
 packages/frontend/src/events.ts               |  4 +-
 4 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 520d5088ec..74d5ff5eab 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -147,7 +147,11 @@ function onDrop(ev: DragEvent) {
 				fileIds: droppedData.map(f => f.id),
 				folderId: props.folder.id,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', droppedData, props.folder);
+				globalEvents.emit('driveFilesUpdated', droppedData.map(x => ({
+					...x,
+					folderId: props.folder.id,
+					folder: props.folder,
+				})));
 			});
 		}
 	}
@@ -166,7 +170,11 @@ function onDrop(ev: DragEvent) {
 				folderId: droppedFolder.id,
 				parentId: props.folder.id,
 			}).then(() => {
-				globalEvents.emit('driveFoldersMoved', [droppedFolder], props.folder);
+				globalEvents.emit('driveFoldersUpdated', [droppedFolder].map(x => ({
+					...x,
+					parentId: props.folder.id,
+					parent: props.folder,
+				})));
 			}).catch(err => {
 				switch (err.code) {
 					case 'RECURSIVE_NESTING':
@@ -216,6 +224,11 @@ function rename() {
 		misskeyApi('drive/folders/update', {
 			folderId: props.folder.id,
 			name: name,
+		}).then(() => {
+			globalEvents.emit('driveFoldersUpdated', [{
+				...props.folder,
+				name: name,
+			}]);
 		});
 	});
 }
@@ -227,6 +240,12 @@ function move() {
 		misskeyApi('drive/folders/update', {
 			folderId: props.folder.id,
 			parentId: folder[0] ? folder[0].id : null,
+		}).then(() => {
+			globalEvents.emit('driveFoldersUpdated', [{
+				...props.folder,
+				parentId: folder[0] ? folder[0].id : null,
+				parent: folder[0] ?? null,
+			}]);
 		});
 	});
 }
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 11890d89e8..506af043a7 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -97,7 +97,11 @@ function onDrop(ev: DragEvent) {
 				fileIds: droppedData.map(f => f.id),
 				folderId: props.folder ? props.folder.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', droppedData, props.folder ?? null);
+				globalEvents.emit('driveFilesUpdated', droppedData.map(x => ({
+					...x,
+					folderId: props.folder ? props.folder.id : null,
+					folder: props.folder ?? null,
+				})));
 			});
 		}
 	}
@@ -114,7 +118,11 @@ function onDrop(ev: DragEvent) {
 				folderId: droppedFolder.id,
 				parentId: props.folder ? props.folder.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFoldersMoved', [droppedFolder], props.folder ?? null);
+				globalEvents.emit('driveFoldersUpdated', [droppedFolder].map(x => ({
+					...x,
+					parentId: props.folder ? props.folder.id : null,
+					parent: props.folder ?? null,
+				})));
 			});
 		}
 	}
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index b1fcfb3fc1..61676c1a72 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -330,7 +330,11 @@ function onDrop(ev: DragEvent) {
 				fileIds: droppedData.map(f => f.id),
 				folderId: folder.value ? folder.value.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', droppedData, folder.value);
+				globalEvents.emit('driveFilesUpdated', droppedData.map(x => ({
+					...x,
+					folderId: folder.value ? folder.value.id : null,
+					folder: folder.value,
+				})));
 			});
 		}
 	}
@@ -348,7 +352,11 @@ function onDrop(ev: DragEvent) {
 				folderId: droppedFolder.id,
 				parentId: folder.value ? folder.value.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFoldersMoved', [droppedFolder], folder.value);
+				globalEvents.emit('driveFoldersUpdated', [droppedFolder].map(x => ({
+					...x,
+					parentId: folder.value ? folder.value.id : null,
+					parent: folder.value,
+				})));
 			}).catch(err => {
 				switch (err.code) {
 					case 'RECURSIVE_NESTING':
@@ -418,8 +426,7 @@ async function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 		name: name,
 	});
 
-	// FIXME: 画面を更新するために自分自身に移動
-	cd(updatedFolder);
+	globalEvents.emit('driveFoldersUpdated', [updatedFolder]);
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
@@ -533,7 +540,11 @@ async function moveFilesBulk() {
 		folderId: toFolder[0] ? toFolder[0].id : null,
 	});
 
-	globalEvents.emit('driveFilesMoved', selectedFiles.value, toFolder[0]);
+	globalEvents.emit('driveFilesUpdated', selectedFiles.value.map(x => ({
+		...x,
+		folderId: toFolder[0] ? toFolder[0].id : null,
+		folder: toFolder[0] ?? null,
+	})));
 }
 
 function goRoot() {
@@ -651,12 +662,19 @@ useGlobalEvent('driveFileCreated', (file) => {
 	}
 });
 
-useGlobalEvent('driveFilesMoved', (files, to) => {
+useGlobalEvent('driveFilesUpdated', (files) => {
 	for (const f of files) {
-		filesPaginator.removeItem(f.id);
-	}
-	if ((to?.id ?? null) === (folder.value?.id ?? null)) {
-		filesPaginator.unshiftItems(files);
+		if (filesPaginator.items.value.some(x => x.id === f.id)) {
+			if (f.folderId === (folder.value?.id ?? null)) {
+				filesPaginator.updateItem(f.id, () => f);
+			} else {
+				filesPaginator.removeItem(f.id);
+			}
+		} else {
+			if (f.folderId === (folder.value?.id ?? null)) {
+				filesPaginator.prepend(f);
+			}
+		}
 	}
 });
 
@@ -666,12 +684,19 @@ useGlobalEvent('driveFilesDeleted', (files) => {
 	}
 });
 
-useGlobalEvent('driveFoldersMoved', (folders, to) => {
+useGlobalEvent('driveFoldersUpdated', (folders) => {
 	for (const f of folders) {
-		foldersPaginator.removeItem(f.id);
-	}
-	if ((to?.id ?? null) === (folder.value?.id ?? null)) {
-		foldersPaginator.unshiftItems(folders);
+		if (foldersPaginator.items.value.some(x => x.id === f.id)) {
+			if (f.parentId === (folder.value?.id ?? null)) {
+				foldersPaginator.updateItem(f.id, () => f);
+			} else {
+				foldersPaginator.removeItem(f.id);
+			}
+		} else {
+			if (f.parentId === (folder.value?.id ?? null)) {
+				foldersPaginator.prepend(f);
+			}
+		}
 	}
 });
 
diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts
index 0d13523903..649561cd75 100644
--- a/packages/frontend/src/events.ts
+++ b/packages/frontend/src/events.ts
@@ -14,9 +14,9 @@ type Events = {
 	notePosted: (note: Misskey.entities.Note) => void;
 	noteDeleted: (noteId: Misskey.entities.Note['id']) => void;
 	driveFileCreated: (file: Misskey.entities.DriveFile) => void;
-	driveFilesMoved: (files: Misskey.entities.DriveFile[], to: Misskey.entities.DriveFolder | null) => void;
+	driveFilesUpdated: (files: Misskey.entities.DriveFile[]) => void;
 	driveFilesDeleted: (files: Misskey.entities.DriveFile[]) => void;
-	driveFoldersMoved: (folders: Misskey.entities.DriveFolder[], to: Misskey.entities.DriveFolder | null) => void;
+	driveFoldersUpdated: (folders: Misskey.entities.DriveFolder[]) => void;
 	driveFoldersDeleted: (folders: Misskey.entities.DriveFolder[]) => void;
 };
 

From 7b8f455758e92f47d5b7bdabc1e9eefe7f85f75c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 21:09:51 +0900
Subject: [PATCH 48/62] wip

---
 packages/frontend/src/components/MkDrive.vue       | 6 +-----
 packages/frontend/src/components/MkDriveWindow.vue | 6 +++---
 packages/frontend/src/pages/drive.vue              | 4 ++--
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 61676c1a72..12abd259aa 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer>
+<MkStickyContainer style="background: var(--MI_THEME-bg);">
 	<template #header>
 		<nav :class="$style.nav">
 			<div :class="$style.navPath" @contextmenu.prevent.stop="() => {}">
@@ -168,9 +168,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	(ev: 'changeSelectedFiles', v: Misskey.entities.DriveFile[]): void;
 	(ev: 'changeSelectedFolders', v: (Misskey.entities.DriveFolder | null)[]): void;
-	(ev: 'move-root'): void;
 	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
-	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
 }>();
 
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
@@ -525,7 +523,6 @@ function cd(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder
 
 		if (folderToMove.parent) dive(folderToMove.parent);
 
-		emit('open-folder', folderToMove);
 		initialize();
 	});
 }
@@ -553,7 +550,6 @@ function goRoot() {
 
 	folder.value = null;
 	hierarchyFolders.value = [];
-	emit('move-root');
 	initialize();
 }
 
diff --git a/packages/frontend/src/components/MkDriveWindow.vue b/packages/frontend/src/components/MkDriveWindow.vue
index c0142ec76e..0b8d0bfb8a 100644
--- a/packages/frontend/src/components/MkDriveWindow.vue
+++ b/packages/frontend/src/components/MkDriveWindow.vue
@@ -14,19 +14,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header>
 		{{ i18n.ts.drive }}
 	</template>
-	<XDrive :initialFolder="initialFolder"/>
+	<MkDrive :initialFolder="initialFolder"/>
 </MkWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from '@/components/MkDrive.vue';
+import MkDrive from '@/components/MkDrive.vue';
 import MkWindow from '@/components/MkWindow.vue';
 import { i18n } from '@/i18n.js';
 
 defineProps<{
-	initialFolder?: Misskey.entities.DriveFolder;
+	initialFolder?: Misskey.entities.DriveFolder | null;
 }>();
 
 const emit = defineEmits<{
diff --git a/packages/frontend/src/pages/drive.vue b/packages/frontend/src/pages/drive.vue
index bee54f3fd2..38939f9503 100644
--- a/packages/frontend/src/pages/drive.vue
+++ b/packages/frontend/src/pages/drive.vue
@@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div>
-	<XDrive @cd="x => folder = x"/>
+	<MkDrive @cd="x => folder = x"/>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from '@/components/MkDrive.vue';
+import MkDrive from '@/components/MkDrive.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 

From 6c83545de2c7be227eb0bf4b5cff6488506d5416 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 08:32:59 +0900
Subject: [PATCH 49/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 12abd259aa..59c22ff7cd 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -795,6 +795,7 @@ onBeforeUnmount(() => {
 }
 
 .main {
+	min-height: 100cqh;
 	user-select: none;
 
 	&.fetching {

From 10f691996511c23500848da8a72765482c33b1ca Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 08:38:23 +0900
Subject: [PATCH 50/62] Update CHANGELOG.md

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a72ed9bdb..3e1d00de96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,14 @@
   - デフォルト値は「ローカルのコンテンツだけ公開」になっています
 
 ### Client
+- Feat: ドライブのUIが強化されました
+  - 複数のファイルをまとめて移動できるようになりました
+- Feat: ファイルのアップロードUIが一新されました
+  - アップロード前にファイル情報を確認できるようになりました
+	- 圧縮の品質を選択できるようになりました
+	- アップロードに失敗したときに再試行できるようになりました
+	- アップロード前に画像のクロッピングを行えるようになりました
+	- ファイルサイズのチェックは圧縮後の実際にアップロードされるサイズで行われるようになりました
 - Feat: サーバー初期設定ウィザードが実装されました
   - 簡単なウィザードに従うだけで、サーバーに最適な設定が適用されます
 - Feat: Websocket接続を行わずにMisskeyを利用するNo Websocketモードが実装されました(beta)

From 928d941b3e3d4ba5998053c2a891c75dfbe62103 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 09:15:20 +0900
Subject: [PATCH 51/62] wipo

---
 .../frontend/src/components/MkDrive.folder.vue |  6 ++----
 .../src/components/MkDrive.navFolder.vue       |  6 ++----
 packages/frontend/src/components/MkDrive.vue   | 18 ++++++++++++++----
 .../frontend/src/composables/use-pagination.ts |  2 +-
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 74d5ff5eab..045d3ef93b 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
 	(ev: 'unchose', v: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
+	(ev: 'upload', files: File[], folder: Misskey.entities.DriveFolder);
 	(ev: 'dragstart'): void;
 	(ev: 'dragend'): void;
 }>();
@@ -133,9 +133,7 @@ function onDrop(ev: DragEvent) {
 
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
-		}
+		emit('upload', Array.from(ev.dataTransfer.files), props.folder);
 		return;
 	}
 
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 506af043a7..224aa2dca7 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
+	(ev: 'upload', files: File[], folder?: Misskey.entities.DriveFolder | null): void;
 }>();
 
 const draghover = ref(false);
@@ -83,9 +83,7 @@ function onDrop(ev: DragEvent) {
 
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
-		}
+		emit('upload', Array.from(ev.dataTransfer.files), props.folder);
 		return;
 	}
 
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 59c22ff7cd..5b55327543 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
 					:parentFolder="folder"
 					@click="cd(null)"
-					@upload="upload"
+					@upload="onUploadRequested"
 				/>
 				<template v-for="f in hierarchyFolders">
 					<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:parentFolder="folder"
 						:class="[$style.navPathItem]"
 						@click="cd(f)"
-						@upload="upload"
+						@upload="onUploadRequested"
 					/>
 				</template>
 				<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						@chosen="chooseFolder"
 						@unchose="unchoseFolder"
 						@click="cd(f)"
-						@upload="upload"
+						@upload="onUploadRequested"
 						@dragstart="isDragSource = true"
 						@dragend="isDragSource = false"
 					/>
@@ -112,7 +112,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						/>
 					</TransitionGroup>
 				</MkStickyContainer>
-				<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+				<MkButton v-show="filesPaginator.canFetchOlder.value" :class="$style.loadMore" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 
 			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
@@ -377,6 +377,12 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 }
 
+function onUploadRequested(files: File[], folder: Misskey.entities.DriveFolder | null) {
+	os.launchUploader(files, {
+		folderId: folder?.id ?? null,
+	});
+}
+
 async function urlUpload() {
 	const { canceled, result: url } = await os.inputText({
 		title: i18n.ts.uploadFromUrl,
@@ -821,6 +827,10 @@ onBeforeUnmount(() => {
 	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
 }
 
+.loadMore {
+	margin: 16px auto;
+}
+
 .footer {
 	padding: 8px 16px;
 	font-size: 90%;
diff --git a/packages/frontend/src/composables/use-pagination.ts b/packages/frontend/src/composables/use-pagination.ts
index b0be8255ef..92d7227a71 100644
--- a/packages/frontend/src/composables/use-pagination.ts
+++ b/packages/frontend/src/composables/use-pagination.ts
@@ -159,7 +159,7 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
 					canFetchOlder.value = true;
 				}
 			}
-		}, err => {
+		}).finally(() => {
 			fetchingOlder.value = false;
 		});
 	}

From 3a874dd59d5c43bb8945cc58bafc6b4edab9a789 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 10:49:40 +0900
Subject: [PATCH 52/62] Update MkDrive.folder.vue

---
 .../src/components/MkDrive.folder.vue         | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 045d3ef93b..6ce781a9a5 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -18,14 +18,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@dragstart="onDragstart"
 	@dragend="onDragend"
 >
-	<p :class="$style.name">
-		<template v-if="hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
-		<template v-if="!hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
-		{{ folder.name }}
-	</p>
-	<p v-if="prefer.s.uploadFolder == folder.id" :class="$style.upload">
+	<svg :class="[$style.shape]" viewBox="0 0 200 150" preserveAspectRatio="none">
+		<path d="M190,25C195.523,25 200,29.477 200,35C200,58.415 200,116.585 200,140C200,145.523 195.523,150 190,150C155.86,150 44.14,150 10,150C4.477,150 0,145.523 0,140C0,112.727 0,37.273 0,10C0,4.477 4.477,0 10,-0C26.642,0 59.332,0 70.858,0C73.51,-0 76.054,1.054 77.929,2.929C82.74,7.74 92.26,17.26 97.071,22.071C98.946,23.946 101.49,25 104.142,25C118.808,25 168.535,25 190,25Z" style="fill:var(--MI_THEME-driveFolderBg);"/>
+	</svg>
+	<div :class="$style.name">{{ folder.name }}</div>
+	<div v-if="prefer.s.uploadFolder == folder.id" :class="$style.upload">
 		{{ i18n.ts.uploadFolder }}
-	</p>
+	</div>
 	<button v-if="selectMode" class="_button" :class="$style.checkboxWrapper" @click.prevent.stop="checkboxClicked">
 		<div :class="[$style.checkbox, { [$style.checked]: isSelected }]"></div>
 	</button>
@@ -320,10 +319,9 @@ function onContextmenu(ev: MouseEvent) {
 <style lang="scss" module>
 .root {
 	position: relative;
-	padding: 8px;
-	height: 64px;
-	background: var(--MI_THEME-driveFolderBg);
-	border-radius: 4px;
+	height: 90px;
+	padding: 24px 16px;
+	box-sizing: border-box;
 	cursor: pointer;
 
 	&.draghover {
@@ -341,6 +339,14 @@ function onContextmenu(ev: MouseEvent) {
 	}
 }
 
+.shape {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
 .checkboxWrapper {
 	position: absolute;
 	border-radius: 50%;
@@ -382,7 +388,6 @@ function onContextmenu(ev: MouseEvent) {
 }
 
 .name {
-	margin: 0;
 	font-size: 0.9em;
 }
 
@@ -393,7 +398,6 @@ function onContextmenu(ev: MouseEvent) {
 }
 
 .upload {
-	margin: 4px 4px;
 	font-size: 0.8em;
 	text-align: right;
 }

From 2d8779402a417667b8ba35bfedcc11f3b39715a7 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 12:40:10 +0900
Subject: [PATCH 53/62] wip

---
 locales/index.d.ts                                  | 4 ----
 locales/ja-JP.yml                                   | 1 -
 packages/frontend-shared/themes/_dark.json5         | 1 -
 packages/frontend-shared/themes/_light.json5        | 1 -
 packages/frontend-shared/themes/d-astro.json5       | 1 -
 packages/frontend-shared/themes/d-u0.json5          | 1 -
 packages/frontend-shared/themes/l-u0.json5          | 1 -
 packages/frontend-shared/themes/l-vivid.json5       | 1 -
 packages/frontend/src/components/MkDrive.folder.vue | 2 +-
 9 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index f66ff3be6c..93671448a2 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -8535,10 +8535,6 @@ export interface Locale extends ILocale {
              * 入力ボックスの縁取り
              */
             "inputBorder": string;
-            /**
-             * ドライブフォルダーの背景
-             */
-            "driveFolderBg": string;
             /**
              * バッジ
              */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 068f69c044..60ae549c74 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2237,7 +2237,6 @@ _theme:
     buttonBg: "ボタンの背景"
     buttonHoverBg: "ボタンの背景 (ホバー)"
     inputBorder: "入力ボックスの縁取り"
-    driveFolderBg: "ドライブフォルダーの背景"
     badge: "バッジ"
     messageBg: "チャットの背景"
     fgHighlighted: "強調された文字"
diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index 8ebaf20b64..0d719ef35c 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -61,7 +61,6 @@
 		switchOnFg: '@accent',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		driveFolderBg: ':alpha<0.3<@accent',
 		badge: '#31b1ce',
 		messageBg: '@bg',
 		success: '#86b300',
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index 63ad95ff84..51fb697922 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -61,7 +61,6 @@
 		switchOnFg: '@fgOnAccent',
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
-		driveFolderBg: ':alpha<0.3<@accent',
 		badge: '#31b1ce',
 		messageBg: '@bg',
 		success: '#86b300',
diff --git a/packages/frontend-shared/themes/d-astro.json5 b/packages/frontend-shared/themes/d-astro.json5
index 6d34665528..8ddedbbb07 100644
--- a/packages/frontend-shared/themes/d-astro.json5
+++ b/packages/frontend-shared/themes/d-astro.json5
@@ -38,7 +38,6 @@
 		navIndicator: '@accent',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<-20<@accent',
-		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
diff --git a/packages/frontend-shared/themes/d-u0.json5 b/packages/frontend-shared/themes/d-u0.json5
index 4f6c04b906..8ce6d25328 100644
--- a/packages/frontend-shared/themes/d-u0.json5
+++ b/packages/frontend-shared/themes/d-u0.json5
@@ -47,7 +47,6 @@
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
 		navIndicator: '@indicator',
-		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
diff --git a/packages/frontend-shared/themes/l-u0.json5 b/packages/frontend-shared/themes/l-u0.json5
index 35241986df..f685dfbb42 100644
--- a/packages/frontend-shared/themes/l-u0.json5
+++ b/packages/frontend-shared/themes/l-u0.json5
@@ -49,7 +49,6 @@
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
 		navIndicator: '@indicator',
 		buttonHoverBg: '#0000001a',
-		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
diff --git a/packages/frontend-shared/themes/l-vivid.json5 b/packages/frontend-shared/themes/l-vivid.json5
index 5ad8d60728..487393ea7c 100644
--- a/packages/frontend-shared/themes/l-vivid.json5
+++ b/packages/frontend-shared/themes/l-vivid.json5
@@ -39,7 +39,6 @@
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
 		navIndicator: '@accent',
-		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':darken<3<@fg',
 		fgOnWhite: '@accent',
 		panelHeaderBg: ':lighten<3<@panel',
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 6ce781a9a5..83472eec3d 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@dragend="onDragend"
 >
 	<svg :class="[$style.shape]" viewBox="0 0 200 150" preserveAspectRatio="none">
-		<path d="M190,25C195.523,25 200,29.477 200,35C200,58.415 200,116.585 200,140C200,145.523 195.523,150 190,150C155.86,150 44.14,150 10,150C4.477,150 0,145.523 0,140C0,112.727 0,37.273 0,10C0,4.477 4.477,0 10,-0C26.642,0 59.332,0 70.858,0C73.51,-0 76.054,1.054 77.929,2.929C82.74,7.74 92.26,17.26 97.071,22.071C98.946,23.946 101.49,25 104.142,25C118.808,25 168.535,25 190,25Z" style="fill:var(--MI_THEME-driveFolderBg);"/>
+		<path d="M190,25C195.523,25 200,29.477 200,35C200,58.415 200,116.585 200,140C200,145.523 195.523,150 190,150C155.86,150 44.14,150 10,150C4.477,150 0,145.523 0,140C0,112.727 0,37.273 0,10C0,4.477 4.477,0 10,-0C26.642,0 59.332,0 70.858,0C73.51,-0 76.054,1.054 77.929,2.929C82.74,7.74 92.26,17.26 97.071,22.071C98.946,23.946 101.49,25 104.142,25C118.808,25 168.535,25 190,25Z" style="fill:var(--MI_THEME-accentedBg);"/>
 	</svg>
 	<div :class="$style.name">{{ folder.name }}</div>
 	<div v-if="prefer.s.uploadFolder == folder.id" :class="$style.upload">

From 291659f462e7577ea1040524aeee822412583762 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 13:04:22 +0900
Subject: [PATCH 54/62] Update MkUploaderDialog.vue

---
 .../src/components/MkUploaderDialog.vue       | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index 420557ca50..eeed7c68d1 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -25,12 +25,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:style="{ '--p': ctx.progress != null ? `${ctx.progress.value / ctx.progress.max * 100}%` : '0%' }"
 			>
 				<div :class="$style.itemInner">
-					<div>
+					<div :class="$style.itemActionWrapper">
 						<MkButton :iconOnly="true" rounded @click="showMenu($event, ctx)"><i class="ti ti-dots"></i></MkButton>
 					</div>
 					<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
 					<div :class="$style.itemBody">
-						<div>{{ ctx.name }}</div>
+						<div><MkCondensedLine :minScale="2 / 3">{{ ctx.name }}</MkCondensedLine></div>
 						<div :class="$style.itemInfo">
 							<span>{{ ctx.file.type }}</span>
 							<span>{{ bytes(ctx.file.size) }}</span>
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div>
 						</div>
 					</div>
-					<div>
+					<div :class="$style.itemIconWrapper">
 						<MkSystemIcon v-if="ctx.uploading" :class="$style.itemIcon" type="waiting"/>
 						<MkSystemIcon v-else-if="ctx.uploaded" :class="$style.itemIcon" type="success"/>
 						<MkSystemIcon v-else-if="ctx.uploadFailed" :class="$style.itemIcon" type="error"/>
@@ -406,12 +406,6 @@ onMounted(() => {
 	min-width: 0;
 }
 
-@container (max-width: 500px) {
-	.itemBody {
-		font-size: 90%;
-	}
-}
-
 .itemInfo {
 	opacity: 0.7;
 	margin-top: 4px;
@@ -423,4 +417,34 @@ onMounted(() => {
 .itemIcon {
 	width: 35px;
 }
+
+@container (max-width: 500px) {
+	.itemInner {
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.itemBody {
+		font-size: 90%;
+		text-align: center;
+		width: 100%;
+		min-width: 0;
+	}
+
+	.itemActionWrapper {
+		position: absolute;
+		top: 8px;
+		left: 8px;
+	}
+
+	.itemInfo {
+		justify-content: center;
+	}
+
+	.itemIconWrapper {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+	}
+}
 </style>

From 0c2c5688db51afe1d12bbf555079f380286b25de Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 13:11:06 +0900
Subject: [PATCH 55/62] wip

---
 packages/misskey-js/etc/misskey-js.api.md     |  8 +++
 .../misskey-js/src/autogen/apiClientJSDoc.ts  | 11 ++++
 packages/misskey-js/src/autogen/endpoint.ts   |  3 +
 packages/misskey-js/src/autogen/entities.ts   |  2 +
 packages/misskey-js/src/autogen/types.ts      | 64 +++++++++++++++++++
 5 files changed, 88 insertions(+)

diff --git a/packages/misskey-js/etc/misskey-js.api.md b/packages/misskey-js/etc/misskey-js.api.md
index f085240f84..12f1712866 100644
--- a/packages/misskey-js/etc/misskey-js.api.md
+++ b/packages/misskey-js/etc/misskey-js.api.md
@@ -1247,6 +1247,12 @@ type DriveFilesFindRequest = operations['drive___files___find']['requestBody']['
 // @public (undocumented)
 type DriveFilesFindResponse = operations['drive___files___find']['responses']['200']['content']['application/json'];
 
+// @public (undocumented)
+type DriveFilesMoveBulkRequest = operations['drive___files___move-bulk']['requestBody']['content']['application/json'];
+
+// @public (undocumented)
+type DriveFilesMoveBulkResponse = operations['drive___files___move-bulk']['responses']['200']['content']['application/json'];
+
 // @public (undocumented)
 type DriveFilesRequest = operations['drive___files']['requestBody']['content']['application/json'];
 
@@ -1732,6 +1738,8 @@ declare namespace entities {
         DriveFilesFindResponse,
         DriveFilesFindByHashRequest,
         DriveFilesFindByHashResponse,
+        DriveFilesMoveBulkRequest,
+        DriveFilesMoveBulkResponse,
         DriveFilesShowRequest,
         DriveFilesShowResponse,
         DriveFilesUpdateRequest,
diff --git a/packages/misskey-js/src/autogen/apiClientJSDoc.ts b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
index 12b51a4ac0..537118b9cd 100644
--- a/packages/misskey-js/src/autogen/apiClientJSDoc.ts
+++ b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
@@ -2073,6 +2073,17 @@ declare module '../api.js' {
       credential?: string | null,
     ): Promise<SwitchCaseResponseType<E, P>>;
 
+    /**
+     * No description provided.
+     * 
+     * **Credential required**: *Yes* / **Permission**: *write:drive*
+     */
+    request<E extends 'drive/files/move-bulk', P extends Endpoints[E]['req']>(
+      endpoint: E,
+      params: P,
+      credential?: string | null,
+    ): Promise<SwitchCaseResponseType<E, P>>;
+
     /**
      * Show the properties of a drive file.
      * 
diff --git a/packages/misskey-js/src/autogen/endpoint.ts b/packages/misskey-js/src/autogen/endpoint.ts
index 13adaa9efd..b32e6d07a3 100644
--- a/packages/misskey-js/src/autogen/endpoint.ts
+++ b/packages/misskey-js/src/autogen/endpoint.ts
@@ -282,6 +282,8 @@ import type {
 	DriveFilesFindResponse,
 	DriveFilesFindByHashRequest,
 	DriveFilesFindByHashResponse,
+	DriveFilesMoveBulkRequest,
+	DriveFilesMoveBulkResponse,
 	DriveFilesShowRequest,
 	DriveFilesShowResponse,
 	DriveFilesUpdateRequest,
@@ -823,6 +825,7 @@ export type Endpoints = {
 	'drive/files/delete': { req: DriveFilesDeleteRequest; res: EmptyResponse };
 	'drive/files/find': { req: DriveFilesFindRequest; res: DriveFilesFindResponse };
 	'drive/files/find-by-hash': { req: DriveFilesFindByHashRequest; res: DriveFilesFindByHashResponse };
+	'drive/files/move-bulk': { req: DriveFilesMoveBulkRequest; res: DriveFilesMoveBulkResponse };
 	'drive/files/show': { req: DriveFilesShowRequest; res: DriveFilesShowResponse };
 	'drive/files/update': { req: DriveFilesUpdateRequest; res: DriveFilesUpdateResponse };
 	'drive/files/upload-from-url': { req: DriveFilesUploadFromUrlRequest; res: EmptyResponse };
diff --git a/packages/misskey-js/src/autogen/entities.ts b/packages/misskey-js/src/autogen/entities.ts
index 2030e8ae5d..062af3e30a 100644
--- a/packages/misskey-js/src/autogen/entities.ts
+++ b/packages/misskey-js/src/autogen/entities.ts
@@ -285,6 +285,8 @@ export type DriveFilesFindRequest = operations['drive___files___find']['requestB
 export type DriveFilesFindResponse = operations['drive___files___find']['responses']['200']['content']['application/json'];
 export type DriveFilesFindByHashRequest = operations['drive___files___find-by-hash']['requestBody']['content']['application/json'];
 export type DriveFilesFindByHashResponse = operations['drive___files___find-by-hash']['responses']['200']['content']['application/json'];
+export type DriveFilesMoveBulkRequest = operations['drive___files___move-bulk']['requestBody']['content']['application/json'];
+export type DriveFilesMoveBulkResponse = operations['drive___files___move-bulk']['responses']['200']['content']['application/json'];
 export type DriveFilesShowRequest = operations['drive___files___show']['requestBody']['content']['application/json'];
 export type DriveFilesShowResponse = operations['drive___files___show']['responses']['200']['content']['application/json'];
 export type DriveFilesUpdateRequest = operations['drive___files___update']['requestBody']['content']['application/json'];
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 1abc721997..b156fff6ef 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -1799,6 +1799,15 @@ export type paths = {
      */
     post: operations['drive___files___find-by-hash'];
   };
+  '/drive/files/move-bulk': {
+    /**
+     * drive/files/move-bulk
+     * @description No description provided.
+     *
+     * **Credential required**: *Yes* / **Permission**: *write:drive*
+     */
+    post: operations['drive___files___move-bulk'];
+  };
   '/drive/files/show': {
     /**
      * drive/files/show
@@ -16845,6 +16854,61 @@ export type operations = {
       };
     };
   };
+  /**
+   * drive/files/move-bulk
+   * @description No description provided.
+   *
+   * **Credential required**: *Yes* / **Permission**: *write:drive*
+   */
+  'drive___files___move-bulk': {
+    requestBody: {
+      content: {
+        'application/json': {
+          fileIds: string[];
+          /** Format: misskey:id */
+          folderId?: string | null;
+        };
+      };
+    };
+    responses: {
+      /** @description OK (with results) */
+      200: {
+        content: {
+          'application/json': unknown;
+        };
+      };
+      /** @description Client error */
+      400: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Authentication error */
+      401: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Forbidden error */
+      403: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description I'm Ai */
+      418: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Internal server error */
+      500: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+    };
+  };
   /**
    * drive/files/show
    * @description Show the properties of a drive file.

From 0f789a519fdef94f3aa3ac841897ee110346c56a Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 15:28:38 +0900
Subject: [PATCH 56/62] wip

---
 locales/index.d.ts                                    | 4 ++++
 locales/ja-JP.yml                                     | 1 +
 packages/frontend/src/components/MkUploaderDialog.vue | 5 +++++
 3 files changed, 10 insertions(+)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 93671448a2..b5b7b13c7e 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -11899,6 +11899,10 @@ export interface Locale extends ILocale {
          * アップロードされていないファイルがありますが、完了しますか？
          */
         "doneConfirm": string;
+        /**
+         * アップロード可能な最大ファイルサイズは{x}です。
+         */
+        "maxFileSizeIsX": ParameterizedString<"x">;
     };
     "_clientPerformanceIssueTip": {
         /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 60ae549c74..ea6e6d489f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3183,6 +3183,7 @@ _uploader:
   savedXPercent: "{x}%節約"
   abortConfirm: "アップロードされていないファイルがありますが、中止しますか？"
   doneConfirm: "アップロードされていないファイルがありますが、完了しますか？"
+  maxFileSizeIsX: "アップロード可能な最大ファイルサイズは{x}です。"
 
 _clientPerformanceIssueTip:
   title: "バッテリー消費が多いと感じたら"
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index eeed7c68d1..a76bc52721 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -60,6 +60,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template #label>{{ i18n.ts.compress }}</template>
 		</MkSelect>
+
+		<div>{{ i18n.tsx._uploader.maxFileSizeIsX({ x: $i.policies.maxFileSizeMb + 'MB' }) }}</div>
 	</div>
 
 	<template #footer>
@@ -91,6 +93,9 @@ import MkSelect from '@/components/MkSelect.vue';
 import { isWebpSupported } from '@/utility/isWebpSupported.js';
 import { uploadFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
+import { ensureSignin } from '@/i.js';
+
+const $i = ensureSignin();
 
 const COMPRESSION_SUPPORTED_TYPES = [
 	'image/jpeg',

From 36725b3e8c2d0b85bc67faff06949025c380dd12 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 15:40:49 +0900
Subject: [PATCH 57/62] Update MkUploaderDialog.vue

---
 .../src/components/MkUploaderDialog.vue       | 115 +++++++++++-------
 1 file changed, 74 insertions(+), 41 deletions(-)

diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index a76bc52721..723b129822 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -15,53 +15,57 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<i class="ti ti-upload"></i> {{ i18n.tsx.uploadNFiles({ n: files.length }) }}
 	</template>
 
-	<div :class="$style.root" class="_gaps_s">
-		<div :class="$style.items" class="_gaps_s">
-			<div
-				v-for="ctx in items"
-				:key="ctx.id"
-				v-panel
-				:class="[$style.item, ctx.waiting ? $style.itemWaiting : null, ctx.uploaded ? $style.itemCompleted : null, ctx.uploadFailed ? $style.itemFailed : null]"
-				:style="{ '--p': ctx.progress != null ? `${ctx.progress.value / ctx.progress.max * 100}%` : '0%' }"
-			>
-				<div :class="$style.itemInner">
-					<div :class="$style.itemActionWrapper">
-						<MkButton :iconOnly="true" rounded @click="showMenu($event, ctx)"><i class="ti ti-dots"></i></MkButton>
-					</div>
-					<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
-					<div :class="$style.itemBody">
-						<div><MkCondensedLine :minScale="2 / 3">{{ ctx.name }}</MkCondensedLine></div>
-						<div :class="$style.itemInfo">
-							<span>{{ ctx.file.type }}</span>
-							<span>{{ bytes(ctx.file.size) }}</span>
-							<span v-if="ctx.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(ctx.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - ctx.compressedSize / ctx.file.size) * 100) }) }})</span>
+	<div :class="$style.root">
+		<div :class="[$style.overallProgress, canRetry ? $style.overallProgressError : null]" :style="{ '--op': `${overallProgress}%` }"></div>
+
+		<div :class="$style.main" class="_gaps_s">
+			<div :class="$style.items" class="_gaps_s">
+				<div
+					v-for="ctx in items"
+					:key="ctx.id"
+					v-panel
+					:class="[$style.item, ctx.waiting ? $style.itemWaiting : null, ctx.uploaded ? $style.itemCompleted : null, ctx.uploadFailed ? $style.itemFailed : null]"
+					:style="{ '--p': ctx.progress != null ? `${ctx.progress.value / ctx.progress.max * 100}%` : '0%' }"
+				>
+					<div :class="$style.itemInner">
+						<div :class="$style.itemActionWrapper">
+							<MkButton :iconOnly="true" rounded @click="showMenu($event, ctx)"><i class="ti ti-dots"></i></MkButton>
 						</div>
-						<div>
+						<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
+						<div :class="$style.itemBody">
+							<div><MkCondensedLine :minScale="2 / 3">{{ ctx.name }}</MkCondensedLine></div>
+							<div :class="$style.itemInfo">
+								<span>{{ ctx.file.type }}</span>
+								<span>{{ bytes(ctx.file.size) }}</span>
+								<span v-if="ctx.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(ctx.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - ctx.compressedSize / ctx.file.size) * 100) }) }})</span>
+							</div>
+							<div>
+							</div>
+						</div>
+						<div :class="$style.itemIconWrapper">
+							<MkSystemIcon v-if="ctx.uploading" :class="$style.itemIcon" type="waiting"/>
+							<MkSystemIcon v-else-if="ctx.uploaded" :class="$style.itemIcon" type="success"/>
+							<MkSystemIcon v-else-if="ctx.uploadFailed" :class="$style.itemIcon" type="error"/>
 						</div>
-					</div>
-					<div :class="$style.itemIconWrapper">
-						<MkSystemIcon v-if="ctx.uploading" :class="$style.itemIcon" type="waiting"/>
-						<MkSystemIcon v-else-if="ctx.uploaded" :class="$style.itemIcon" type="success"/>
-						<MkSystemIcon v-else-if="ctx.uploadFailed" :class="$style.itemIcon" type="error"/>
 					</div>
 				</div>
 			</div>
+
+			<MkSelect
+				v-if="items.length > 0"
+				v-model="compressionLevel"
+				:items="[
+					{ value: 0, label: i18n.ts.none },
+					{ value: 1, label: i18n.ts.low },
+					{ value: 2, label: i18n.ts.middle },
+					{ value: 3, label: i18n.ts.high },
+				]"
+			>
+				<template #label>{{ i18n.ts.compress }}</template>
+			</MkSelect>
+
+			<div>{{ i18n.tsx._uploader.maxFileSizeIsX({ x: $i.policies.maxFileSizeMb + 'MB' }) }}</div>
 		</div>
-
-		<MkSelect
-			v-if="items.length > 0"
-			v-model="compressionLevel"
-			:items="[
-				{ value: 0, label: i18n.ts.none },
-				{ value: 1, label: i18n.ts.low },
-				{ value: 2, label: i18n.ts.middle },
-				{ value: 3, label: i18n.ts.high },
-			]"
-		>
-			<template #label>{{ i18n.ts.compress }}</template>
-		</MkSelect>
-
-		<div>{{ i18n.tsx._uploader.maxFileSizeIsX({ x: $i.policies.maxFileSizeMb + 'MB' }) }}</div>
 	</div>
 
 	<template #footer>
@@ -149,6 +153,16 @@ const firstUploadAttempted = ref(false);
 const isUploading = computed(() => items.value.some(item => item.uploading));
 const canRetry = computed(() => firstUploadAttempted.value && !items.value.some(item => item.uploading || item.waiting) && items.value.some(item => item.uploaded == null));
 const canDone = computed(() => items.value.some(item => item.uploaded != null));
+const overallProgress = computed(() => {
+	const max = items.value.length;
+	if (max === 0) return 0;
+	const v = items.value.reduce((acc, item) => {
+		if (item.uploaded) return acc + 1;
+		if (item.progress) return acc + (item.progress.value / item.progress.max);
+		return acc;
+	}, 0);
+	return Math.round((v / max) * 100);
+});
 
 const compressionLevel = ref<0 | 1 | 2 | 3>(2);
 const compressionSettings = computed(() => {
@@ -324,6 +338,25 @@ onMounted(() => {
 
 <style lang="scss" module>
 .root {
+	position: relative;
+}
+
+.overallProgress {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: var(--op);
+	height: 4px;
+	background: var(--MI_THEME-accent);
+	border-radius: 0 999px 999px 0;
+	transition: width 0.2s ease;
+
+	&.overallProgressError {
+		background: var(--MI_THEME-warn);
+	}
+}
+
+.main {
 	padding: 12px;
 }
 

From 4f57fd3e148389be02dcc7cc1863180e4b42209e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 15:52:12 +0900
Subject: [PATCH 58/62] wip

---
 .../frontend/src/components/MkDrive.file.vue  | 20 --------
 packages/frontend/src/components/MkDrive.vue  | 50 +++++++++++--------
 2 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index b482f651dc..bbb6a7ea2a 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -8,7 +8,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.isSelected]: isSelected }]"
 	draggable="true"
 	:title="title"
-	@click="onClick"
 	@contextmenu.stop="onContextmenu"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
@@ -46,24 +45,17 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 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 { setDragData } from '@/drag-and-drop.js';
 
-const router = useRouter();
-
 const props = withDefaults(defineProps<{
 	file: Misskey.entities.DriveFile;
 	folder: Misskey.entities.DriveFolder | null;
 	isSelected?: boolean;
-	selectMode?: boolean;
 }>(), {
 	isSelected: false,
-	selectMode: false,
 });
 
 const emit = defineEmits<{
-	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
 	(ev: 'dragstart', dragEvent: DragEvent): void;
 	(ev: 'dragend'): void;
 }>();
@@ -72,18 +64,6 @@ const isDragging = ref(false);
 
 const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
 
-function onClick(ev: MouseEvent) {
-	if (props.selectMode) {
-		emit('chosen', props.file);
-	} else {
-		if (deviceKind === 'desktop') {
-			router.push(`/my/drive/file/${props.file.id}`);
-		} else {
-			os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
-		}
-	}
-}
-
 function onContextmenu(ev: MouseEvent) {
 	os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
 }
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 5b55327543..5f84938f91 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -104,9 +104,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:class="$style.file"
 							:file="file"
 							:folder="folder"
-							:selectMode="select === 'file' || isEditMode"
 							:isSelected="selectedFiles.some(x => x.id === file.id)"
-							@chosen="onChooseFile"
+							@click="onFileClick($event, file)"
 							@dragstart="onFileDragstart(file, $event)"
 							@dragend="isDragSource = false"
 						/>
@@ -154,6 +153,7 @@ import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef
 import { usePagination } from '@/composables/use-pagination.js';
 import { globalEvents, useGlobalEvent } from '@/events.js';
 import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
+import { getDriveFileMenu } from '@/utility/get-drive-file-menu.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@@ -458,30 +458,38 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
 	});
 }
 
-function onChooseFile(file: Misskey.entities.DriveFile) {
-	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
-
-	if (isEditMode.value) {
-		if (isAlreadySelected) {
-			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
-		} else {
-			selectedFiles.value.push(file);
-		}
-		return;
+function onFileClick(ev: MouseEvent, file: Misskey.entities.DriveFile) {
+	if (ev.shiftKey) {
+		isEditMode.value = true;
 	}
 
-	if (props.multiple) {
-		if (isAlreadySelected) {
-			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+	if (props.select === 'file' || isEditMode.value) {
+		const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
+
+		if (isEditMode.value) {
+			if (isAlreadySelected) {
+				selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+			} else {
+				selectedFiles.value.push(file);
+			}
+			return;
+		}
+
+		if (props.multiple) {
+			if (isAlreadySelected) {
+				selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+			} else {
+				selectedFiles.value.push(file);
+			}
 		} else {
-			selectedFiles.value.push(file);
+			if (isAlreadySelected) {
+				//emit('selected', file);
+			} else {
+				selectedFiles.value = [file];
+			}
 		}
 	} else {
-		if (isAlreadySelected) {
-			//emit('selected', file);
-		} else {
-			selectedFiles.value = [file];
-		}
+		os.popupMenu(getDriveFileMenu(file, folder.value), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
 	}
 }
 

From 3902fe89aaaa8a6c8dbac6f1ff3a1b179406b1db Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 19:31:43 +0900
Subject: [PATCH 59/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 101 +++++++++----------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 5f84938f91..6ebcdff9ef 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -60,59 +60,58 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@drop.prevent.stop="onDrop"
 			@contextmenu.stop="onContextmenu"
 		>
-			<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
-			<div v-show="foldersPaginator.items.value.length > 0">
-				<div :class="$style.folders">
-					<XFolder
-						v-for="(f, i) in foldersPaginator.items.value"
-						:key="f.id"
-						v-anim="i"
-						:class="$style.folder"
-						:folder="f"
-						:selectMode="select === 'folder'"
-						:isSelected="selectedFolders.some(x => x.id === f.id)"
-						@chosen="chooseFolder"
-						@unchose="unchoseFolder"
-						@click="cd(f)"
-						@upload="onUploadRequested"
-						@dragstart="isDragSource = true"
+			<div v-if="!store.r.readDriveTip.value" style="padding: 8px;">
+				<MkInfo closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
+			</div>
+
+			<div :class="$style.folders">
+				<XFolder
+					v-for="(f, i) in foldersPaginator.items.value"
+					:key="f.id"
+					v-anim="i"
+					:class="$style.folder"
+					:folder="f"
+					:selectMode="select === 'folder'"
+					:isSelected="selectedFolders.some(x => x.id === f.id)"
+					@chosen="chooseFolder"
+					@unchose="unchoseFolder"
+					@click="cd(f)"
+					@upload="onUploadRequested"
+					@dragstart="isDragSource = true"
+					@dragend="isDragSource = false"
+				/>
+			</div>
+			<MkButton v-if="foldersPaginator.canFetchOlder.value" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+
+			<MkStickyContainer v-for="(item, i) in filesTimeline" :key="`${item.date.getFullYear()}/${item.date.getMonth() + 1}`">
+				<template #header>
+					<div :class="$style.date">
+						<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
+					</div>
+				</template>
+
+				<TransitionGroup
+					tag="div"
+					:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
+					:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
+					:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
+					:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
+					:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
+					:class="$style.files"
+				>
+					<XFile
+						v-for="file in item.items" :key="file.id"
+						:class="$style.file"
+						:file="file"
+						:folder="folder"
+						:isSelected="selectedFiles.some(x => x.id === file.id)"
+						@click="onFileClick($event, file)"
+						@dragstart="onFileDragstart(file, $event)"
 						@dragend="isDragSource = false"
 					/>
-				</div>
-				<MkButton v-if="foldersPaginator.canFetchOlder.value" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-
-			<div v-show="filesPaginator.items.value.length > 0">
-				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="`${item.date.getFullYear()}/${item.date.getMonth() + 1}`">
-					<template #header>
-						<div :class="$style.date">
-							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
-						</div>
-					</template>
-
-					<TransitionGroup
-						tag="div"
-						:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
-						:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
-						:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
-						:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
-						:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
-						:class="$style.files"
-					>
-						<XFile
-							v-for="file in item.items" :key="file.id"
-							:class="$style.file"
-							:file="file"
-							:folder="folder"
-							:isSelected="selectedFiles.some(x => x.id === file.id)"
-							@click="onFileClick($event, file)"
-							@dragstart="onFileDragstart(file, $event)"
-							@dragend="isDragSource = false"
-						/>
-					</TransitionGroup>
-				</MkStickyContainer>
-				<MkButton v-show="filesPaginator.canFetchOlder.value" :class="$style.loadMore" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
+				</TransitionGroup>
+			</MkStickyContainer>
+			<MkButton v-show="filesPaginator.canFetchOlder.value" :class="$style.loadMore" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 
 			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
 				<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>

From bff910c62014bfba012bd676280e734e16404932 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 14 May 2025 19:38:12 +0900
Subject: [PATCH 60/62] Update MkDrive.vue

---
 packages/frontend/src/components/MkDrive.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 6ebcdff9ef..5604f0226f 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -823,7 +823,14 @@ onBeforeUnmount(() => {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 	grid-gap: 12px;
-	padding: var(--MI-margin);
+	padding: 16px 32px;
+}
+
+@container (max-width: 600px) {
+	.folders,
+	.files {
+		padding: 16px;
+	}
 }
 
 .date {

From 6ce18fad6a431437fb0abb88ed97c2b661fbb8b9 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 19 May 2025 14:16:48 +0900
Subject: [PATCH 61/62] wip

---
 .../src/server/api/endpoints/drive/files/move-bulk.ts     | 2 --
 packages/misskey-js/etc/misskey-js.api.md                 | 4 ----
 packages/misskey-js/src/autogen/endpoint.ts               | 3 +--
 packages/misskey-js/src/autogen/entities.ts               | 1 -
 packages/misskey-js/src/autogen/types.ts                  | 8 +++-----
 5 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts b/packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts
index 79e505575b..c8500895eb 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/move-bulk.ts
@@ -18,8 +18,6 @@ export const meta = {
 
 	errors: {
 	},
-
-	res: {},
 } as const;
 
 export const paramDef = {
diff --git a/packages/misskey-js/etc/misskey-js.api.md b/packages/misskey-js/etc/misskey-js.api.md
index 12f1712866..a305087fdb 100644
--- a/packages/misskey-js/etc/misskey-js.api.md
+++ b/packages/misskey-js/etc/misskey-js.api.md
@@ -1250,9 +1250,6 @@ type DriveFilesFindResponse = operations['drive___files___find']['responses']['2
 // @public (undocumented)
 type DriveFilesMoveBulkRequest = operations['drive___files___move-bulk']['requestBody']['content']['application/json'];
 
-// @public (undocumented)
-type DriveFilesMoveBulkResponse = operations['drive___files___move-bulk']['responses']['200']['content']['application/json'];
-
 // @public (undocumented)
 type DriveFilesRequest = operations['drive___files']['requestBody']['content']['application/json'];
 
@@ -1739,7 +1736,6 @@ declare namespace entities {
         DriveFilesFindByHashRequest,
         DriveFilesFindByHashResponse,
         DriveFilesMoveBulkRequest,
-        DriveFilesMoveBulkResponse,
         DriveFilesShowRequest,
         DriveFilesShowResponse,
         DriveFilesUpdateRequest,
diff --git a/packages/misskey-js/src/autogen/endpoint.ts b/packages/misskey-js/src/autogen/endpoint.ts
index b32e6d07a3..a108cba7c1 100644
--- a/packages/misskey-js/src/autogen/endpoint.ts
+++ b/packages/misskey-js/src/autogen/endpoint.ts
@@ -283,7 +283,6 @@ import type {
 	DriveFilesFindByHashRequest,
 	DriveFilesFindByHashResponse,
 	DriveFilesMoveBulkRequest,
-	DriveFilesMoveBulkResponse,
 	DriveFilesShowRequest,
 	DriveFilesShowResponse,
 	DriveFilesUpdateRequest,
@@ -825,7 +824,7 @@ export type Endpoints = {
 	'drive/files/delete': { req: DriveFilesDeleteRequest; res: EmptyResponse };
 	'drive/files/find': { req: DriveFilesFindRequest; res: DriveFilesFindResponse };
 	'drive/files/find-by-hash': { req: DriveFilesFindByHashRequest; res: DriveFilesFindByHashResponse };
-	'drive/files/move-bulk': { req: DriveFilesMoveBulkRequest; res: DriveFilesMoveBulkResponse };
+	'drive/files/move-bulk': { req: DriveFilesMoveBulkRequest; res: EmptyResponse };
 	'drive/files/show': { req: DriveFilesShowRequest; res: DriveFilesShowResponse };
 	'drive/files/update': { req: DriveFilesUpdateRequest; res: DriveFilesUpdateResponse };
 	'drive/files/upload-from-url': { req: DriveFilesUploadFromUrlRequest; res: EmptyResponse };
diff --git a/packages/misskey-js/src/autogen/entities.ts b/packages/misskey-js/src/autogen/entities.ts
index 062af3e30a..4b18cda5d8 100644
--- a/packages/misskey-js/src/autogen/entities.ts
+++ b/packages/misskey-js/src/autogen/entities.ts
@@ -286,7 +286,6 @@ export type DriveFilesFindResponse = operations['drive___files___find']['respons
 export type DriveFilesFindByHashRequest = operations['drive___files___find-by-hash']['requestBody']['content']['application/json'];
 export type DriveFilesFindByHashResponse = operations['drive___files___find-by-hash']['responses']['200']['content']['application/json'];
 export type DriveFilesMoveBulkRequest = operations['drive___files___move-bulk']['requestBody']['content']['application/json'];
-export type DriveFilesMoveBulkResponse = operations['drive___files___move-bulk']['responses']['200']['content']['application/json'];
 export type DriveFilesShowRequest = operations['drive___files___show']['requestBody']['content']['application/json'];
 export type DriveFilesShowResponse = operations['drive___files___show']['responses']['200']['content']['application/json'];
 export type DriveFilesUpdateRequest = operations['drive___files___update']['requestBody']['content']['application/json'];
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index b156fff6ef..4e2c03c784 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -16871,11 +16871,9 @@ export type operations = {
       };
     };
     responses: {
-      /** @description OK (with results) */
-      200: {
-        content: {
-          'application/json': unknown;
-        };
+      /** @description OK (without any results) */
+      204: {
+        content: never;
       };
       /** @description Client error */
       400: {

From 9f775395f53a4ca4ff915ae017671ee7bcb74703 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 19 May 2025 15:46:43 +0900
Subject: [PATCH 62/62] wip

---
 .../src/components/MkUploaderDialog.vue       | 47 +++++++++++++------
 .../components/MkUserSetupDialog.Profile.vue  |  2 +-
 packages/frontend/src/os.ts                   |  2 +
 .../frontend/src/pages/chat/room.form.vue     |  6 +--
 .../frontend/src/pages/settings/profile.vue   |  4 +-
 5 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index 723b129822..3a83247d4b 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -51,6 +51,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 
+			<div v-if="props.multiple">
+				<MkButton style="margin: auto;" :iconOnly="true" rounded @click="chooseFile($event)"><i class="ti ti-plus"></i></MkButton>
+			</div>
+
 			<MkSelect
 				v-if="items.length > 0"
 				v-model="compressionLevel"
@@ -123,8 +127,9 @@ const mimeTypeMap = {
 const props = withDefaults(defineProps<{
 	files: File[];
 	folderId?: string | null;
+	multiple?: boolean;
 }>(), {
-
+	multiple: true,
 });
 
 const emit = defineEmits<{
@@ -316,22 +321,34 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 	}
 }
 
+async function chooseFile(ev: MouseEvent) {
+	const newFiles = await os.chooseFileFromPc({ multiple: true });
+
+	for (const file of newFiles) {
+		initializeFile(file);
+	}
+}
+
+function initializeFile(file: File) {
+	const id = uuid();
+	const filename = file.name ?? 'untitled';
+	const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
+	items.value.push({
+		id,
+		name: prefer.s.keepOriginalFilename ? filename : id + extension,
+		progress: null,
+		thumbnail: window.URL.createObjectURL(file),
+		waiting: false,
+		uploading: false,
+		uploaded: null,
+		uploadFailed: false,
+		file: markRaw(file),
+	});
+}
+
 onMounted(() => {
 	for (const file of props.files) {
-		const id = uuid();
-		const filename = file.name ?? 'untitled';
-		const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
-		items.value.push({
-			id,
-			name: prefer.s.keepOriginalFilename ? filename : id + extension,
-			progress: null,
-			thumbnail: window.URL.createObjectURL(file),
-			waiting: false,
-			uploading: false,
-			uploaded: null,
-			uploadFailed: false,
-			file: markRaw(file),
-		});
+		initializeFile(file);
 	}
 });
 </script>
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
index ce3192e230..4e96eff82e 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
@@ -85,7 +85,7 @@ async function setAvatar(ev) {
 		});
 	}
 
-	const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
+	const driveFile = (await os.launchUploader([originalOrCropped], { multiple: false }))[0];
 
 	const i = await os.apiWithDialog('i/update', {
 		avatarId: driveFile.id,
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 54fa5a5af9..6d49408f26 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -772,6 +772,7 @@ export function launchUploader(
 	files: File[],
 	options?: {
 		folderId?: string | null;
+		multiple?: boolean;
 	},
 ): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise((res, rej) => {
@@ -779,6 +780,7 @@ export function launchUploader(
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUploaderDialog.vue')), {
 			files: markRaw(files),
 			folderId: options?.folderId,
+			multiple: options?.multiple,
 		}, {
 			done: driveFiles => {
 				if (driveFiles.length === 0) return rej();
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index 6702cd2ec1..7e3be67230 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -86,7 +86,7 @@ async function onPaste(ev: ClipboardEvent) {
 			const ext = lio >= 0 ? pastedFile.name.slice(lio) : '';
 			const formattedName = formatTimeString(new Date(pastedFile.lastModified), pastedFileName).replace(/{{number}}/g, '1') + ext;
 			const renamedFile = new File([pastedFile], formattedName, { type: pastedFile.type });
-			os.launchUploader([renamedFile], {}).then(driveFiles => {
+			os.launchUploader([renamedFile], { multiple: false }).then(driveFiles => {
 				file.value = driveFiles[0];
 			});
 		}
@@ -131,7 +131,7 @@ function onDrop(ev: DragEvent): void {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length === 1) {
 		ev.preventDefault();
-		os.launchUploader([Array.from(ev.dataTransfer.files)[0]], {});
+		os.launchUploader([Array.from(ev.dataTransfer.files)[0]], { multiple: false });
 		return;
 	} else if (ev.dataTransfer.files.length > 1) {
 		ev.preventDefault();
@@ -177,7 +177,7 @@ function onChangeFile() {
 	if (fileEl.value == null || fileEl.value.files == null) return;
 
 	if (fileEl.value.files[0]) {
-		os.launchUploader(Array.from(fileEl.value.files), {}).then(driveFiles => {
+		os.launchUploader(Array.from(fileEl.value.files), { multiple: false }).then(driveFiles => {
 			file.value = driveFiles[0];
 		});
 	}
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index df637d9e9a..cd1565f39e 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -291,7 +291,7 @@ function changeAvatar(ev) {
 				});
 			}
 
-			const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
+			const driveFile = (await os.launchUploader([originalOrCropped], { multiple: false }))[0];
 			done(driveFile);
 		},
 	}, {
@@ -339,7 +339,7 @@ function changeBanner(ev) {
 				});
 			}
 
-			const driveFile = (await os.launchUploader([originalOrCropped], {}))[0];
+			const driveFile = (await os.launchUploader([originalOrCropped], { multiple: false }))[0];
 			done(driveFile);
 		},
 	}, {