From a0927c53533d29628b6d242a9afc8b60eed44acc Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Wed, 4 Oct 2023 01:00:59 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=89=E3=83=A9=E3=82=A4=E3=83=96=E8=A4=87?=
 =?UTF-8?q?=E6=95=B0=E9=81=B8=E6=8A=9E=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=AA=E3=81=A3=E3=81=9F=E5=8F=AF=E8=83=BD?=
 =?UTF-8?q?=E6=80=A7=E3=81=8C=E3=81=82=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |   1 +
 locales/ja-JP.yml                             |   1 +
 packages/frontend/package.json                |   2 +
 .../frontend/src/components/MkDrive.file.vue  | 387 ++++++++++--------
 .../src/components/MkDrive.folder.vue         | 157 +++++--
 .../src/components/MkDrive.navFolder.vue      |  21 +-
 packages/frontend/src/components/MkDrive.vue  |  50 ++-
 .../src/scripts/get-drive-file-menu.ts        |  49 ++-
 pnpm-lock.yaml                                | 130 +++---
 9 files changed, 524 insertions(+), 274 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 47e542d4e3..af30a68f8b 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -79,6 +79,7 @@ export interface Locale {
     "files": string;
     "download": string;
     "driveFileDeleteConfirm": string;
+    "driveFolderDeleteConfirm": string;
     "unfollowConfirm": string;
     "exportRequested": string;
     "importRequested": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index ed24aa9e85..9f51fa5505 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -76,6 +76,7 @@ export: "エクスポート"
 files: "ファイル"
 download: "ダウンロード"
 driveFileDeleteConfirm: "ファイル「{name}」を削除しますか?このファイルを使用した一部のコンテンツも削除されます。"
+driveFolderDeleteConfirm: "フォルダ「{name}」を削除しますか?このフォルダの中に存在するファイルを使用した一部のコンテンツも削除されます。"
 unfollowConfirm: "{name}のフォローを解除しますか?"
 exportRequested: "エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。"
 importRequested: "インポートをリクエストしました。これには時間がかかる場合があります。"
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 1f704cd258..9204bda32d 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -27,6 +27,7 @@
 		"@vitejs/plugin-vue": "4.3.4",
 		"@vue-macros/reactivity-transform": "0.3.23",
 		"@vue/compiler-sfc": "3.3.4",
+		"@vueuse/core": "^10.4.1",
 		"astring": "1.8.6",
 		"autosize": "6.0.1",
 		"broadcast-channel": "5.3.0",
@@ -74,6 +75,7 @@
 		"vanilla-tilt": "1.8.1",
 		"vite": "4.4.9",
 		"vue": "3.3.4",
+		"vue-multiselect": "^2.1.7",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vuedraggable": "next"
 	},
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index e3f96724d9..6cc18eae34 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -4,239 +4,290 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div
-	:class="[$style.root, { [$style.isSelected]: isSelected }]"
-	draggable="true"
-	:title="title"
-	@click="onClick"
-	@contextmenu.stop="onContextmenu"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
->
-	<div style="pointer-events: none;">
-		<div v-if="$i?.avatarId == file.id" :class="[$style.label]">
-			<img :class="$style.labelImg" src="/client-assets/label.svg"/>
-			<p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
-		</div>
-		<div v-if="$i?.bannerId == file.id" :class="[$style.label]">
-			<img :class="$style.labelImg" src="/client-assets/label.svg"/>
-			<p :class="$style.labelText">{{ i18n.ts.banner }}</p>
-		</div>
-		<div v-if="file.isSensitive" :class="[$style.label, $style.red]">
-			<img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
-			<p :class="$style.labelText">{{ i18n.ts.sensitive }}</p>
-		</div>
+  <div
+      :class="[$style.root, { [$style.isSelected]: isSelected },{[$style.isSelected]: isMultiSelect}]"
+      draggable="true"
+      :title="title"
+      @click="onClick"
+      @pointerdown="startLongPress(file)"
+      @pointerup="endLongPress"
+      @contextmenu.stop="onContextmenu"
+      @dragstart="onDragstart"
+      @dragend="onDragend"
+  >
+    <div style="pointer-events: none;">
+      <div v-if="$i?.avatarId == file.id" :class="[$style.label]">
+        <img :class="$style.labelImg" src="/client-assets/label.svg"/>
+        <p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
+      </div>
+      <div v-if="$i?.bannerId == file.id" :class="[$style.label]">
+        <img :class="$style.labelImg" src="/client-assets/label.svg"/>
+        <p :class="$style.labelText">{{ i18n.ts.banner }}</p>
+      </div>
+      <div v-if="file.isSensitive" :class="[$style.label, $style.red]">
+        <img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
+        <p :class="$style.labelText">{{ i18n.ts.sensitive }}</p>
+      </div>
 
-		<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
+      <MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
 
-		<p :class="$style.name">
-			<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name }}</span>
-			<span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
-		</p>
-	</div>
-</div>
+      <p :class="$style.name">
+        <span>{{
+            file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name
+          }}</span>
+        <span v-if="file.name.lastIndexOf('.') != -1"
+              style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
+      </p>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import {computed, ref, watch} from 'vue';
 import * as Misskey from 'misskey-js';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import bytes from '@/filters/bytes.js';
 import * as os from '@/os.js';
-import { i18n } from '@/i18n.js';
-import { $i } from '@/account.js';
-import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.js';
+import {i18n} from '@/i18n.js';
+import {$i} from '@/account.js';
+import {getDriveFileMenu, getDriveFileMultiMenu} from '@/scripts/get-drive-file-menu.js';
+const isLongPressing = ref(false);
+let longPressTimeout = null;
+import {defaultStore} from '@/store.js'
+function startLongPress() {
+  isLongPressing.value = true;
+  longPressTimeout = setTimeout(() => {
+    if (isLongPressing) {
+    }
+  }, 800); // 長押しと判断する時間(1秒)を設定
+}
 
+function endLongPress() {
+  isLongPressing.value = false;
+  clearTimeout(longPressTimeout);
+}
+
+const isMultiSelect = ref(false);
 const props = withDefaults(defineProps<{
-	file: Misskey.entities.DriveFile;
-	folder: Misskey.entities.DriveFolder | null;
-	isSelected?: boolean;
-	selectMode?: boolean;
+  file: Misskey.entities.DriveFile;
+  folder: Misskey.entities.DriveFolder | null;
+  isSelected?: boolean;
+  selectMode?: boolean;
+  multipleselect?;
+  isLongPressing?;
 }>(), {
-	isSelected: false,
-	selectMode: false,
+  isSelected: false,
+  selectMode: false,
 });
 
 const emit = defineEmits<{
-	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
+  (ev: 'chosen', r: Misskey.entities.DriveFile): void;
+  (ev: 'dragstart'): void;
+  (ev: 'dragend'): void;
 }>();
 
 const isDragging = ref(false);
 
 const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
-
+watch(props.multipleselect, () => {
+  isMultiSelect.value = !!props.multipleselect.some(item => item.id === props.file.id);
+});
 function onClick(ev: MouseEvent) {
-	if (props.selectMode) {
-		emit('chosen', props.file);
-	} else {
-		os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
-	}
-}
 
+  if (props.selectMode) {
+    emit('chosen', props.file);
+  } else if (ev.shiftKey && ev.button === 2 || isMultiSelect.value  ) {
+    os.popupMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+
+  }
+  else if (!ev.shiftKey) {
+    os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+
+  }
+}
+function device() {
+  var ua = navigator.userAgent;
+  if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
+    return 'mobile';
+  }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
+    return 'tablet';
+  }else{
+    return 'desktop';
+  }
+}
 function onContextmenu(ev: MouseEvent) {
-	os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
+
+  if (!ev.shiftKey && !isMultiSelect.value) {
+    os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
+  } else if (ev.shiftKey && props.multipleselect.length > 0 && ev.button === 2) {
+      os.contextMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), ev);
+  } else if(device()=== "desktop"){
+    os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
+
+  }
+  if (props.isLongPressing){
+    isMultiSelect.value = !isMultiSelect.value
+  }
 }
 
 function onDragstart(ev: DragEvent) {
-	if (ev.dataTransfer) {
-		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
-	}
-	isDragging.value = true;
+  if (ev.dataTransfer) {
+    ev.dataTransfer.effectAllowed = 'move';
+    ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
+  }
+  isDragging.value = true;
 
-	emit('dragstart');
+  emit('dragstart');
 }
 
 function onDragend() {
-	isDragging.value = false;
-	emit('dragend');
+  isDragging.value = false;
+  emit('dragend');
 }
 </script>
 
 <style lang="scss" module>
 .root {
-	position: relative;
-	padding: 8px 0 0 0;
-	min-height: 180px;
-	border-radius: 8px;
-	cursor: pointer;
+  position: relative;
+  padding: 8px 0 0 0;
+  min-height: 180px;
+  border-radius: 8px;
+  cursor: pointer;
 
-	&:hover {
-		background: rgba(#000, 0.05);
+  &:hover {
+    background: rgba(#000, 0.05);
 
-		> .label {
-			&:before,
-			&:after {
-				background: #0b65a5;
-			}
+    > .label {
+      &:before,
+      &:after {
+        background: #0b65a5;
+      }
 
-			&.red {
-				&:before,
-				&:after {
-					background: #c12113;
-				}
-			}
-		}
-	}
+      &.red {
+        &:before,
+        &:after {
+          background: #c12113;
+        }
+      }
+    }
+  }
 
-	&:active {
-		background: rgba(#000, 0.1);
+  &:active {
+    background: rgba(#000, 0.1);
 
-		> .label {
-			&:before,
-			&:after {
-				background: #0b588c;
-			}
+    > .label {
+      &:before,
+      &:after {
+        background: #0b588c;
+      }
 
-			&.red {
-				&:before,
-				&:after {
-					background: #ce2212;
-				}
-			}
-		}
-	}
+      &.red {
+        &:before,
+        &:after {
+          background: #ce2212;
+        }
+      }
+    }
+  }
 
-	&.isSelected {
-		background: var(--accent);
+  &.isSelected {
+    background: var(--accent);
 
-		&:hover {
-			background: var(--accentLighten);
-		}
+    &:hover {
+      background: var(--accentLighten);
+    }
 
-		&:active {
-			background: var(--accentDarken);
-		}
+    &:active {
+      background: var(--accentDarken);
+    }
 
-		> .label {
-			&:before,
-			&:after {
-				display: none;
-			}
-		}
+    > .label {
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
 
-		> .name {
-			color: #fff;
-		}
+    > .name {
+      color: #fff;
+    }
 
-		> .thumbnail {
-			color: #fff;
-		}
-	}
+    > .thumbnail {
+      color: #fff;
+    }
+  }
 }
 
 .label {
-	position: absolute;
-	top: 0;
-	left: 0;
-	pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
 
-	&:before,
-	&:after {
-		content: "";
-		display: block;
-		position: absolute;
-		z-index: 1;
-		background: #0c7ac9;
-	}
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    z-index: 1;
+    background: #0c7ac9;
+  }
 
-	&:before {
-		top: 0;
-		left: 57px;
-		width: 28px;
-		height: 8px;
-	}
+  &:before {
+    top: 0;
+    left: 57px;
+    width: 28px;
+    height: 8px;
+  }
 
-	&:after {
-		top: 57px;
-		left: 0;
-		width: 8px;
-		height: 28px;
-	}
+  &:after {
+    top: 57px;
+    left: 0;
+    width: 8px;
+    height: 28px;
+  }
 
-	&.red {
-		&:before,
-		&:after {
-			background: #c12113;
-		}
-	}
+  &.red {
+    &:before,
+    &:after {
+      background: #c12113;
+    }
+  }
 }
 
 .labelImg {
-	position: absolute;
-	z-index: 2;
-	top: 0;
-	left: 0;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
 }
 
 .labelText {
-	position: absolute;
-	z-index: 3;
-	top: 19px;
-	left: -28px;
-	width: 120px;
-	margin: 0;
-	text-align: center;
-	line-height: 28px;
-	color: #fff;
-	transform: rotate(-45deg);
+  position: absolute;
+  z-index: 3;
+  top: 19px;
+  left: -28px;
+  width: 120px;
+  margin: 0;
+  text-align: center;
+  line-height: 28px;
+  color: #fff;
+  transform: rotate(-45deg);
 }
 
 .thumbnail {
-	width: 110px;
-	height: 110px;
-	margin: auto;
+  width: 110px;
+  height: 110px;
+  margin: auto;
 }
 
 .name {
-	display: block;
-	margin: 4px 0 0 0;
-	font-size: 0.8em;
-	text-align: center;
-	word-break: break-all;
-	color: var(--fg);
-	overflow: hidden;
+  display: block;
+  margin: 4px 0 0 0;
+  font-size: 0.8em;
+  text-align: center;
+  word-break: break-all;
+  color: var(--fg);
+  overflow: hidden;
 }
 </style>
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 5322664664..07fa06fb0e 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@drop.prevent.stop="onDrop"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
+
 >
 	<p :class="$style.name">
 		<template v-if="hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
@@ -44,6 +45,7 @@ const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
 	isSelected?: boolean;
 	selectMode?: boolean;
+  multipleselect?;
 }>(), {
 	isSelected: false,
 	selectMode: false,
@@ -143,11 +145,22 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
-		os.api('drive/files/update', {
-			fileId: file.id,
-			folderId: props.folder.id,
-		});
-	}
+    if (props.multipleselect.length > 0) {
+      props.multipleselect.forEach((e)=>{
+        os.api('drive/files/update', {
+          fileId: e.id,
+          folderId: props.folder.id,
+        });
+      })
+    }else{
+      os.api('drive/files/update', {
+        fileId: file.id,
+        folderId: props.folder.id,
+      });
+    }
+
+
+  }
 	//#endregion
 
 	//#region ドライブのフォルダ
@@ -221,28 +234,118 @@ function rename() {
 }
 
 function deleteFolder() {
-	os.api('drive/folders/delete', {
-		folderId: props.folder.id,
-	}).then(() => {
-		if (defaultStore.state.uploadFolder === props.folder.id) {
-			defaultStore.set('uploadFolder', null);
-		}
-	}).catch(err => {
-		switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-				os.alert({
-					type: 'error',
-					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders,
-				});
-				break;
-			default:
-				os.alert({
-					type: 'error',
-					text: i18n.ts.unableToDelete,
-				});
-		}
-	});
+    os.api('drive/folders/show', {
+        folderId: props.folder.id,
+    }).then(async (r) => {
+
+      if (r.foldersCount > 0) {
+        await os.alert({
+          type: 'error',
+          title: i18n.ts.unableToDelete,
+          text: 'フォルダ内にフォルダが存在するため、削除できません。 \n フォルダ内のフォルダを削除してから試してみてください。',
+        });
+      }
+
+      if (r.filesCount > 0) {
+
+        const {canceled} = await os.confirm({
+          type: 'warning',
+          text: i18n.t('driveFolderDeleteConfirm', {name: props.folder.name}),
+        });
+
+        if (canceled) return;
+
+        let allResults = [];
+        let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
+        allResults = allResults.concat(Result)
+        while (Result.length >= 31) {
+          const untilId = Result[Result.length - 1].id;
+          Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
+          allResults = allResults.concat(Result); // pushをconcatに変更
+        }
+        allResults.forEach((r,i)=>{
+          os.api('drive/files/delete',{fileId: r.id})
+        })
+
+
+        os.api('drive/folders/show', {
+          folderId: props.folder.id,
+        }).then(async (r) =>{
+          if (r.filesCount > 0) {
+
+            let allResults = [];
+            let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
+            allResults = allResults.concat(Result)
+            while (Result.length >= 31) {
+              const untilId = Result[Result.length - 1].id;
+              Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
+              allResults = allResults.concat(Result); // pushをconcatに変更
+            }
+            allResults.forEach((r,i)=>{
+              console.log(r)
+              os.api('drive/files/delete',{fileId: r.id})
+            })
+
+            os.api('drive/folders/delete', {
+              folderId: props.folder.id,
+            }).then(() => {
+              if (defaultStore.state.uploadFolder === props.folder.id) {
+                defaultStore.set('uploadFolder', null);
+              }
+            }).catch(err => {
+              switch (err.id) {
+                case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+                  os.alert({
+                    type: 'error',
+                    title: i18n.ts.unableToDelete,
+                    text: i18n.ts.hasChildFilesOrFolders,
+                  });
+                  break;
+                default:
+                  os.alert({
+                    type: 'error',
+                    text: i18n.ts.unableToDelete,
+                  });
+              }
+            });
+
+            os.api('drive/folders/delete', {
+              folderId: props.folder.id,
+            })
+          }else{
+            os.api('drive/folders/delete', {
+              folderId: props.folder.id,
+            })
+          }
+        })
+
+      } else {
+
+        await os.api('drive/folders/delete', {
+          folderId: props.folder.id,
+        }).then(() => {
+          if (defaultStore.state.uploadFolder === props.folder.id) {
+            defaultStore.set('uploadFolder', null);
+          }
+        }).catch(err => {
+          switch (err.id) {
+            case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+              os.alert({
+                type: 'error',
+                title: i18n.ts.unableToDelete,
+                text: i18n.ts.hasChildFilesOrFolders,
+              });
+              break;
+            default:
+              os.alert({
+                type: 'error',
+                text: i18n.ts.unableToDelete,
+              });
+          }
+        });
+      }
+    })
+
 }
 
 function setAsUploadFolder() {
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 59458ad568..d960d86209 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -26,6 +26,7 @@ import { i18n } from '@/i18n.js';
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
 	parentFolder: Misskey.entities.DriveFolder | null;
+  multipleselect?;
 }>();
 
 const emit = defineEmits<{
@@ -112,10 +113,22 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
-		os.api('drive/files/update', {
-			fileId: file.id,
-			folderId: props.folder ? props.folder.id : null,
-		});
+
+    if (props.multipleselect.length > 0) {
+
+      props.multipleselect.forEach((e)=>{
+        os.api('drive/files/update', {
+          fileId: e.id,
+          folderId:  props.folder ? props.folder.id : null,
+        });
+      })
+
+    }else{
+      os.api('drive/files/update', {
+        fileId: file.id,
+        folderId:  props.folder ? props.folder.id : null,
+      });
+    }
 	}
 	//#endregion
 
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 648e4c4e3d..d2dea8f9f1 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				@upload="upload"
 				@removeFile="removeFile"
 				@removeFolder="removeFolder"
+        :multipleselect="multipleselect"
 			/>
 			<template v-for="f in hierarchyFolders">
 				<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -25,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					@upload="upload"
 					@removeFile="removeFile"
 					@removeFolder="removeFolder"
+          :multipleselect="multipleselect"
 				/>
 			</template>
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -51,6 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="f"
 					:selectMode="select === 'folder'"
 					:isSelected="selectedFolders.some(x => x.id === f.id)"
+          :multipleselect="multipleselect"
 					@chosen="chooseFolder"
 					@move="move"
 					@upload="upload"
@@ -76,6 +79,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					@chosen="chooseFile"
 					@dragstart="isDragSource = true"
 					@dragend="isDragSource = false"
+          @pointerdown="startLongPress(file)"
+          @pointerup="endLongPress"
+          @click.shift.left.exact="selectClick(file)"
+          @click.ctrl.left.exact="selectClick(file)"
+          :multipleselect="multipleselect"
+          :isLongPressing="isLongPressing"
 				/>
 				<!-- 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>
@@ -118,6 +127,24 @@ const props = withDefaults(defineProps<{
 	select: null,
 });
 
+const isLongPressing = ref(false);
+let longPressTimeout = null;
+
+function startLongPress(file) {
+  isLongPressing.value = true;
+  longPressTimeout = setTimeout(() => {
+    if (isLongPressing) {
+      selectClick(file)
+    }
+  }, 800); // 長押しと判断する時間(1秒)を設定
+}
+
+function endLongPress() {
+  isLongPressing.value = false;
+  clearTimeout(longPressTimeout);
+}
+
+
 const emit = defineEmits<{
 	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
 	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
@@ -140,7 +167,7 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 const connection = useStream().useChannel('drive');
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
-
+let multipleselect = ref([]);
 // ドロップされようとしているか
 const draghover = ref(false);
 
@@ -168,7 +195,18 @@ function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
 		addFile(file, true);
 	}
 }
+function selectClick(file) {
+  const index = multipleselect.value.findIndex(item => item.id === file.id);
 
+  if (index !== -1) {
+    // File is already selected, so remove it
+    multipleselect.value.splice(index, 1);
+  } else {
+    // File is not selected, so add it
+    multipleselect.value.push(file);
+  }
+
+}
 function onStreamDriveFileDeleted(fileId: string) {
 	removeFile(fileId);
 }
@@ -405,6 +443,7 @@ function chooseFile(file: Misskey.entities.DriveFile) {
 			emit('change-selection', [file]);
 		}
 	}
+
 }
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
@@ -427,6 +466,7 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
 }
 
 function move(target?: Misskey.entities.DriveFolder) {
+  multipleselect.value = []
 	if (!target) {
 		goRoot();
 		return;
@@ -491,11 +531,17 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
 	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
 	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
+  const index = multipleselect.value.findIndex(item => item.id === file.id);
+  if (index !== -1) {
+    // File is already selected, so remove it
+    multipleselect.value.splice(index, 1);
+  }
 }
 
 function removeFile(file: Misskey.entities.DriveFile | string) {
 	const fileId = typeof file === 'object' ? file.id : file;
 	files.value = files.value.filter(f => f.id !== fileId);
+  multipleselect.value = multipleselect.value.filter(a => a.id !== fileId)
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -645,10 +691,12 @@ function getMenu() {
 }
 
 function showMenu(ev: MouseEvent) {
+  multipleselect.value = []
 	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
 }
 
 function onContextmenu(ev: MouseEvent) {
+  multipleselect.value = []
 	os.contextMenu(getMenu(), ev);
 }
 
diff --git a/packages/frontend/src/scripts/get-drive-file-menu.ts b/packages/frontend/src/scripts/get-drive-file-menu.ts
index 0964108249..15f822acc6 100644
--- a/packages/frontend/src/scripts/get-drive-file-menu.ts
+++ b/packages/frontend/src/scripts/get-drive-file-menu.ts
@@ -39,10 +39,10 @@ function describe(file: Misskey.entities.DriveFile) {
 	}, 'closed');
 }
 
-function toggleSensitive(file: Misskey.entities.DriveFile) {
+function toggleSensitive(file: Misskey.entities.DriveFile , isSensitive?) {
 	os.api('drive/files/update', {
 		fileId: file.id,
-		isSensitive: !file.isSensitive,
+		isSensitive: isSensitive !== null ? isSensitive : !file.isSensitive
 	}).catch(err => {
 		os.alert({
 			type: 'error',
@@ -72,7 +72,20 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
 		fileId: file.id,
 	});
 }
+async function deleteSelectFile(files) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: files.length+'つのファイルをまとめて削除しますか?',
+	});
 
+	if (canceled) return;
+	files.forEach((e) => {
+		os.api('drive/files/delete', {
+			fileId: e.id,
+		});
+	})
+
+}
 export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
 	const isImage = file.type.startsWith('image/');
 	let menu;
@@ -131,3 +144,35 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 
 	return menu;
 }
+
+export function getDriveFileMultiMenu(file, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
+
+	let menu;
+	menu = [{
+		text: i18n.ts.unmarkAsSensitive,
+		icon: 'ti ti-eye',
+		action: () => {file.forEach((e) => toggleSensitive(e,false))}
+	},{
+		text: i18n.ts.markAsSensitive,
+		icon: 'ti ti-eye-exclamation',
+		action: () => {file.forEach((e) => toggleSensitive(e,true))}
+		,
+	},{
+		text: i18n.ts.delete,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () =>  deleteSelectFile(file),
+	}];
+
+	if (defaultStore.state.devMode) {
+		menu = menu.concat([null, {
+			icon: 'ti ti-id',
+			text: i18n.ts.copyFileId,
+			action: () => {
+				copyToClipboard(file.id);
+			},
+		}]);
+	}
+
+	return menu;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ce08699c0..cf7a537469 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -673,6 +673,9 @@ importers:
       '@vue/compiler-sfc':
         specifier: 3.3.4
         version: 3.3.4
+      '@vueuse/core':
+        specifier: ^10.4.1
+        version: 10.4.1(vue@3.3.4)
       astring:
         specifier: 1.8.6
         version: 1.8.6
@@ -814,6 +817,9 @@ importers:
       vue:
         specifier: 3.3.4
         version: 3.3.4
+      vue-multiselect:
+        specifier: ^2.1.7
+        version: 2.1.7
       vue-prism-editor:
         specifier: 2.0.0-alpha.2
         version: 2.0.0-alpha.2(vue@3.3.4)
@@ -979,7 +985,7 @@ importers:
         version: 7.4.5
       storybook-addon-misskey-theme:
         specifier: github:misskey-dev/storybook-addon-misskey-theme
-        version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.4)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0)
+        version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.5)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0)
       summaly:
         specifier: github:misskey-dev/summaly
         version: github.com/misskey-dev/summaly/d2d8db49943ccb201c1b1b283e9d0a630519fac7
@@ -6276,17 +6282,6 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/channels@7.4.4:
-    resolution: {integrity: sha512-YA2T3hClL95nFBBelm8wMOyWFDzfxKvyHAPQi+8YeYpZcPivwg/P9YnRhTTMbiZNkfoWKq4ZRuc79UP1iNLi3g==}
-    dependencies:
-      '@storybook/client-logger': 7.4.4
-      '@storybook/core-events': 7.4.4
-      '@storybook/global': 5.0.0
-      qs: 6.11.1
-      telejson: 7.2.0
-      tiny-invariant: 1.3.1
-    dev: true
-
   /@storybook/channels@7.4.5:
     resolution: {integrity: sha512-zWPZn4CxPFXsrrSRQ9JD8GmTeWeFYgr3sTBpe23hnhYookCXVNJ6AcaXogrT9b2ALfbB6MiFDbZIHHTgIgbWpg==}
     dependencies:
@@ -6350,12 +6345,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@storybook/client-logger@7.4.4:
-    resolution: {integrity: sha512-rC/GcCy3DLtTI+oOHLBc6rq/c3oGF/mvdeWrhMM+berQplHJrOCI2pcldjVw8Fc25gLPK0LUlaOp1dfgt2Ri3Q==}
-    dependencies:
-      '@storybook/global': 5.0.0
-    dev: true
-
   /@storybook/client-logger@7.4.5:
     resolution: {integrity: sha512-Bn6eTAjhPDUfLpvuxhKkpDpOtkadfkSmkBNBZRu3r0Dzk2J1nNyKV5K6D8dOU4PFVof4z/gXYj5bktT29jKsmw==}
     dependencies:
@@ -6383,29 +6372,6 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/components@7.4.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-tFOSu3IoAab/0aY2TY66Go0Nba7AB/+ZB9GFet+dxWypIKGLcPjyX2POIumJU4swzK+4IA8GxgDQ2itS6EOISQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@radix-ui/react-select': 1.2.2(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toolbar': 1.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.4.4
-      '@storybook/csf': 0.1.0
-      '@storybook/global': 5.0.0
-      '@storybook/theming': 7.4.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.4.4
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0)
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-    dev: true
-
   /@storybook/components@7.4.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-boskkfvMBB8CFYY9+1ofFNyKrdWXTY/ghzt7oK80dz6f2Eseo/WXK3OsCdCq5vWbLRCdbgJ8zXG8pAFi4yBsxA==}
     peerDependencies:
@@ -6467,12 +6433,6 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/core-events@7.4.4:
-    resolution: {integrity: sha512-kOf4I/a1XC9CaGFwJG5WR2KnkwrOkWX68TLh7OlelKxdl/WjxA4zfzaFPC/8zyCSLdGFLPKNqr1w+ezkb+9Irw==}
-    dependencies:
-      ts-dedent: 2.2.0
-    dev: true
-
   /@storybook/core-events@7.4.5:
     resolution: {integrity: sha512-Jzy/adSC95saYCZlgXE5j7jmiMLAXYpnBFBxEtBdXwSWEBb0zt21n1nyWBEAv9s/k2gqDXlPHKHeL5Mn6y40zA==}
     dependencies:
@@ -6807,20 +6767,6 @@ packages:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/theming@7.4.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-ABIwLRUj2IZKMGxKq+fCCFcY7w52P1a+q8j7qrlELaTe4M74K6rwTgRF0/AFgWeiGRkNuA7z8DjQ73xQLoLqUg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.0(react@18.2.0)
-      '@storybook/client-logger': 7.4.4
-      '@storybook/global': 5.0.0
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@storybook/theming@7.4.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-QSIJDIMzOegzlhubIBaYIovf4mlf+AVL0SmQOskPS8GZ6s9t77yUUI6gZTEjO+S4eB3djXRsfTTijQ8+z4XmRA==}
     peerDependencies:
@@ -6835,15 +6781,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/types@7.4.4:
-    resolution: {integrity: sha512-B0VdgGb1XGEb9g3UuEd9xANCIhR3anvA3w0uYSG+7uMOflnEawwZksTSxvvoGM2hx9vC4pNT4Fci9sEC903UkA==}
-    dependencies:
-      '@storybook/channels': 7.4.4
-      '@types/babel__core': 7.20.0
-      '@types/express': 4.17.17
-      file-system-cache: 2.3.0
-    dev: true
-
   /@storybook/types@7.4.5:
     resolution: {integrity: sha512-DTWFNjfRTpncjufDoUs0QnNkgHG2qThGKWL1D6sO18cYI02zWPyHWD8/cbqlvtT7XIGe3s1iUEfCTdU5GcwWBA==}
     dependencies:
@@ -7965,6 +7902,10 @@ packages:
       '@types/node': 20.7.1
     dev: true
 
+  /@types/web-bluetooth@0.0.17:
+    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
+    dev: false
+
   /@types/web-push@3.6.1:
     resolution: {integrity: sha512-Zu6Iju7c4IlE8I8eEeFLYRb7XFqvHFmWWAYr1cmug9EX3c6CDarxIXWN/GO0sxjbJLkHPwozUzp6cLdXsrq7Ew==}
     dependencies:
@@ -8396,6 +8337,31 @@ packages:
       - typescript
     dev: true
 
+  /@vueuse/core@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.4.1
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/metadata@10.4.1:
+    resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
+    dev: false
+
+  /@vueuse/shared@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==}
+    dependencies:
+      vue-demi: 0.14.6(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@webgpu/types@0.1.30:
     resolution: {integrity: sha512-9AXJSmL3MzY8ZL//JjudA//q+2kBRGhLBFpkdGksWIuxrMy81nFrCzj2Am+mbh8WoU6rXmv7cY5E3rdlyru2Qg==}
     requiresBuild: true
@@ -19184,6 +19150,21 @@ packages:
       vue: 3.3.4
     dev: false
 
+  /vue-demi@0.14.6(vue@3.3.4):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
   /vue-docgen-api@4.64.1(vue@3.3.4):
     resolution: {integrity: sha512-jbOf7ByE3Zvtuk+429Jorl+eIeh2aB2Fx1GUo3xJd1aByJWE8KDlSEa6b11PB1ze8f0sRUBraRDinICCk0KY7g==}
     dependencies:
@@ -19228,6 +19209,11 @@ packages:
       vue: 3.3.4
     dev: true
 
+  /vue-multiselect@2.1.7:
+    resolution: {integrity: sha512-KIegcN+Ntwg3cbkY/jhw2s/+XJUM0Lpi/LcKFYCS8PrZHcWBl2iKCVze7ZCnRj3w8H7/lUJ9v7rj9KQiNxApBw==}
+    engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
+    dev: false
+
   /vue-prism-editor@2.0.0-alpha.2(vue@3.3.4):
     resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==}
     engines: {node: '>=10'}
@@ -19707,7 +19693,7 @@ packages:
       sharp: 0.31.3
     dev: false
 
-  github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.4)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0):
+  github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.4.5)(@storybook/components@7.4.5)(@storybook/core-events@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(@storybook/types@7.4.5)(react-dom@18.2.0)(react@18.2.0):
     resolution: {tarball: https://codeload.github.com/misskey-dev/storybook-addon-misskey-theme/tar.gz/cf583db098365b2ccc81a82f63ca9c93bc32b640}
     id: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640
     name: storybook-addon-misskey-theme
@@ -19729,7 +19715,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/blocks': 7.4.5(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/components': 7.4.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.4.5(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.4.5
       '@storybook/manager-api': 7.4.5(react-dom@18.2.0)(react@18.2.0)
       '@storybook/preview-api': 7.4.5