From 12d56d69bbeebd8cf98dd76f4c5cc3b96de9c3cb Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Fri, 6 Oct 2023 00:13:37 +0900
Subject: [PATCH] test

---
 .../frontend/src/components/MkDrive.file.vue  | 406 ++++++++----------
 packages/frontend/src/components/MkDrive.vue  | 117 ++---
 .../src/scripts/get-drive-file-menu.ts        |  51 +--
 3 files changed, 277 insertions(+), 297 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 6cc18eae34..9c3e66ddfb 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -4,290 +4,258 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-  <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>
+<div
+	:class="[$style.root, { [$style.isSelected]: isSelected || isSelectedFile }]"
+	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>
 
-      <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, watch} 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, 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秒）を設定
-}
+import { i18n } from '@/i18n.js';
+import { $i } from '@/account.js';
+import { getDriveFileMenu, getDriveMultiFileMenu } from '@/scripts/get-drive-file-menu.js';
+import { isTouchUsing } from '@/scripts/touch.js';
 
-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;
-  multipleselect?;
-  isLongPressing?;
+	file: Misskey.entities.DriveFile;
+	folder: Misskey.entities.DriveFolder | null;
+	isSelected?: boolean;
+	selectMode?: boolean;
+  SelectFiles?: string[];
 }>(), {
-  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 isSelectedFile = 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);
+
+watch(props.SelectFiles, () => {
+	const index = props.SelectFiles.findIndex(item => item.id === props.file.id);
+	isSelectedFile.value = index !== -1;
 });
+
 function onClick(ev: MouseEvent) {
-
-  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) {
+	console.log('onclick');
+	if (props.selectMode) {
+		emit('chosen', props.file);
+	} else if (!ev.shiftKey && !isTouchUsing && !isSelectedFile.value) {
+		os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	} else if (!ev.shiftKey && isSelectedFile.value && props.SelectFiles.length === 0) {
+		os.popupMenu(getDriveMultiFileMenu(props.SelectFiles), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	} else if (isTouchUsing && !isSelectedFile.value && props.SelectFiles.length === 0) {
     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) {
-
-  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
-  }
+	console.log('oncontext');
+	if (!isTouchUsing) {
+		if (!ev.shiftKey && !isSelectedFile.value) {
+			os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
+		} else if (isSelectedFile.value) {
+			os.contextMenu(getDriveMultiFileMenu(props.SelectFiles), ev);
+		}
+	}
 }
 
 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;
-
-  emit('dragstart');
+	if (ev.dataTransfer) {
+		ev.dataTransfer.effectAllowed = 'move';
+		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
+	}
+	isDragging.value = true;
+	console.log(isDragging.value)
+	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.vue b/packages/frontend/src/components/MkDrive.vue
index d2dea8f9f1..55f76a968f 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>
-<div :class="$style.root">
+<div :class="$style.root" @scroll="handleScroll">
 	<nav :class="$style.nav">
 		<div :class="$style.navPath" @contextmenu.prevent.stop="() => {}">
 			<XNavFolder
@@ -14,7 +14,6 @@ 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>
@@ -26,7 +25,6 @@ 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>
@@ -53,7 +51,6 @@ 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,15 +73,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="folder"
 					:selectMode="select === 'file'"
 					:isSelected="selectedFiles.some(x => x.id === file.id)"
+					:SelectFiles="SelectFiles"
 					@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"
+					@pointerdown="startLongPress(file)"
+					@pointerup="endLongPress"
+					@pointermove="debounceEvent"
+					@pointercancel="debounceEvent"
+					@click.shift.left.exact="multipleSelect(file)"
 				/>
 				<!-- 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>
@@ -116,7 +113,7 @@ import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { uploadFile, uploads } from '@/scripts/upload.js';
 import { claimAchievement } from '@/scripts/achievements.js';
-
+import { isTouchUsing } from '@/scripts/touch.js';
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
 	type?: string;
@@ -127,24 +124,6 @@ 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;
@@ -167,7 +146,11 @@ 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 SelectFiles = ref([]);
+const isLongPressing = ref(false);
+let longPressTimeout = null;
+const isScrolling = ref(false); // スクロール中でない状態で初期化
+
 // ドロップされようとしているか
 const draghover = ref(false);
 
@@ -186,6 +169,47 @@ watch(folder, () => emit('cd', folder.value));
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
 }
+let timeout;
+const debounceEvent = (event) => {
+  if (isTouchUsing &&  SelectFiles.value.length === 0) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      isLongPressing.value = false;
+    }, 900);
+  }else{
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      isLongPressing.value = false;
+		}, 80);
+  }
+};
+
+function startLongPress(file) {
+  console.log(SelectFiles.value.length)
+	if (isTouchUsing && SelectFiles.value.length === 0) {
+		isLongPressing.value = true;
+		longPressTimeout = setTimeout(() => {
+			if (isLongPressing.value) {
+				multipleSelect(file);
+			}
+		}, 1000);
+	}else{
+    isLongPressing.value = true;
+    longPressTimeout = setTimeout(() => {
+      if (isLongPressing.value) {
+        multipleSelect(file);
+      }
+    }, 100);
+  }
+}
+
+
+function endLongPress() {
+	if (isTouchUsing) {
+		isLongPressing.value = false;
+		clearTimeout(longPressTimeout);
+	}
+}
 
 function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
 	const current = folder.value ? folder.value.id : null;
@@ -195,18 +219,7 @@ 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);
 }
@@ -214,7 +227,14 @@ function onStreamDriveFileDeleted(fileId: string) {
 function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
 	addFolder(createdFolder, true);
 }
-
+function multipleSelect(file) {
+	const index = SelectFiles.value.findIndex(item => item.id === file.id);
+	if (index !== -1) {
+		SelectFiles.value.splice(index, 1);
+	} else {
+		SelectFiles.value.push(file);
+	}
+}
 function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== updatedFolder.parentId) {
@@ -443,7 +463,6 @@ function chooseFile(file: Misskey.entities.DriveFile) {
 			emit('change-selection', [file]);
 		}
 	}
-
 }
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
@@ -466,7 +485,6 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
 }
 
 function move(target?: Misskey.entities.DriveFolder) {
-  multipleselect.value = []
 	if (!target) {
 		goRoot();
 		return;
@@ -531,17 +549,11 @@ 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) {
@@ -691,12 +703,10 @@ function getMenu() {
 }
 
 function showMenu(ev: MouseEvent) {
-  multipleselect.value = []
 	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
 }
-
+const contents = ref(null);
 function onContextmenu(ev: MouseEvent) {
-  multipleselect.value = []
 	os.contextMenu(getMenu(), ev);
 }
 
@@ -733,6 +743,7 @@ onBeforeUnmount(() => {
 	connection.dispose();
 	ilFilesObserver.disconnect();
 });
+
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/scripts/get-drive-file-menu.ts b/packages/frontend/src/scripts/get-drive-file-menu.ts
index 15f822acc6..76be8ee9c6 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 , isSensitive?) {
+function toggleSensitive(file: Misskey.entities.DriveFile) {
 	os.api('drive/files/update', {
 		fileId: file.id,
-		isSensitive: isSensitive !== null ? isSensitive : !file.isSensitive
+		isSensitive: !file.isSensitive,
 	}).catch(err => {
 		os.alert({
 			type: 'error',
@@ -72,16 +72,30 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
 		fileId: file.id,
 	});
 }
-async function deleteSelectFile(files) {
+async function MultideleteFile(files: Misskey.entities.DriveFile[] | null) {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-		text: files.length+'つのファイルをまとめて削除しますか？',
+		text: i18n.t('driveMultiFileDeleteConfirm', { name: files.length }),
 	});
 
 	if (canceled) return;
-	files.forEach((e) => {
+	files.forEach((e)=>{
 		os.api('drive/files/delete', {
 			fileId: e.id,
+        });
+	})
+}
+function isSensitive(files: Misskey.entities.DriveFile[] | null ,sensitive:boolean) {
+	files.forEach((e)=>{
+		os.api('drive/files/update', {
+			fileId: e.id,
+			isSensitive: sensitive,
+		}).catch(err => {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.error,
+				text: err.message,
+			});
 		});
 	})
 
@@ -144,35 +158,22 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 
 	return menu;
 }
-
-export function getDriveFileMultiMenu(file, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
-
+export function getDriveMultiFileMenu(files: string[] & boolean): MenuItem[] {
 	let menu;
 	menu = [{
-		text: i18n.ts.unmarkAsSensitive,
+		text:  i18n.ts.unmarkAsSensitive,
 		icon: 'ti ti-eye',
-		action: () => {file.forEach((e) => toggleSensitive(e,false))}
+		action: () => isSensitive(files,false),
 	},{
 		text: i18n.ts.markAsSensitive,
-		icon: 'ti ti-eye-exclamation',
-		action: () => {file.forEach((e) => toggleSensitive(e,true))}
-		,
-	},{
+		icon:  'ti ti-eye-exclamation',
+		action: () => isSensitive(files,true),
+	}, {
 		text: i18n.ts.delete,
 		icon: 'ti ti-trash',
 		danger: true,
-		action: () =>  deleteSelectFile(file),
+		action: () => MultideleteFile(files),
 	}];
 
-	if (defaultStore.state.devMode) {
-		menu = menu.concat([null, {
-			icon: 'ti ti-id',
-			text: i18n.ts.copyFileId,
-			action: () => {
-				copyToClipboard(file.id);
-			},
-		}]);
-	}
-
 	return menu;
 }