ドライブで複数選択できるようにした

locales/index.d.ts

@@ -79,6 +79,10 @@ export interface Locale {
     "files": string;
     "download": string;
     "driveFileDeleteConfirm": string;
+    "driveFilesDeleteConfirm": string;
+    "driveFilesSensitiveonConfirm": string;
+    "driveFilesSensitiveoffConfirm": string;
+    "driveFolderDeleteConfirm": string;
     "unfollowConfirm": string;
     "exportRequested": string;
     "importRequested": string;

locales/ja-JP.yml

@@ -76,6 +76,10 @@ export: "エクスポート"
 files: "ファイル"
 download: "ダウンロード"
 driveFileDeleteConfirm: "ファイル「{name}」を削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
+driveFilesDeleteConfirm: "{name}つのファイルを削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
+driveFilesSensitiveonConfirm: "{name}つのファイルをセンシティブにしますか？"
+driveFilesSensitiveoffConfirm: "{name}つのファイルのセンシティブを解除しますか？"
+driveFolderDeleteConfirm: "フォルダ「{name}」を削除しますか？このフォルダの中に存在するファイルを使用した一部のコンテンツも削除されます。"
 unfollowConfirm: "{name}のフォローを解除しますか？"
 exportRequested: "エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。"
 importRequested: "インポートをリクエストしました。これには時間がかかる場合があります。"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2023.9.3-prismisskey.2",
+	"version": "2023.9.3-prismisskey.3",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
@@ -18,6 +18,7 @@
 		"build-assets": "node ./scripts/build-assets.mjs",
 		"build": "pnpm build-pre && pnpm -r build && pnpm build-assets",
 		"build-storybook": "pnpm --filter frontend build-storybook",
+		"build-and-start": "pnpm build && pnpm start",
 		"start": "pnpm check:connect && cd packages/backend && node ./built/boot/entry.js",
 		"start:test": "cd packages/backend && cross-env NODE_ENV=test node ./built/boot/entry.js",
 		"init": "pnpm migrate",

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

@@ -44,6 +44,7 @@ const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
 	isSelected?: boolean;
 	selectMode?: boolean;
+  selectedFiles?: string[];
 }>(), {
 	isSelected: false,
 	selectMode: false,
@@ -143,10 +144,19 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
+    if (props.selectedFiles.length > 0) {
+      props.selectedFiles.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
 
@@ -221,6 +231,57 @@ function rename() {
 }
 
 function deleteFolder() {
+  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);
+          }
+          allResults.forEach((r,i)=>{
+            os.api('drive/files/delete',{fileId: r.id})
+          })
+
           os.api('drive/folders/delete', {
             folderId: props.folder.id,
           }).then(() => {
@@ -243,7 +304,46 @@ function deleteFolder() {
                 });
             }
           });
+
+          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() {
 	defaultStore.set('uploadFolder', props.folder.id);

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;
+  selectedFiles: string[];
 }>();
 
 const emit = defineEmits<{
@@ -112,11 +113,20 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
+		if (props.selectedFiles.length > 0) {
+			props.selectedFiles.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
 
 	//#region ドライブのフォルダ

packages/frontend/src/components/MkDrive.vue

@@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XNavFolder
 				:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
 				:parentFolder="folder"
+        :selectedFiles="selectedFiles"
 				@move="move"
 				@upload="upload"
 				@removeFile="removeFile"
@@ -27,10 +28,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 					@removeFolder="removeFolder"
 				/>
 			</template>
-			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
+			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i
+				class="ti ti-chevron-right"
+			></i></span>
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
 		</div>
-		<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
+		<button v-if="!multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード</button>
+    <span   v-if="multiple && selectedFiles.length > 0"   style="padding-right: 12px; margin-top: auto; margin-bottom: auto;opacity: 0.5;">
+      ({{ number(selectedFiles.length) }})
+    </span>
+		<button v-if="multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード解除</button>
+		<button v-if="multiple && selectedFiles.length === 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
+			全選択
+		</button>
+		<button v-if="multiple && selectedFiles.length !== 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
+			全選択解除
+		</button>
+		<button class="_button" @click="showMenu"><i class="ti ti-dots"></i></button>
 	</nav>
 	<div
 		ref="main"
@@ -51,6 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="f"
 					:selectMode="select === 'folder'"
 					:isSelected="selectedFolders.some(x => x.id === f.id)"
+          :selectedFiles="selectedFiles"
 					@chosen="chooseFolder"
 					@move="move"
 					@upload="upload"
@@ -73,6 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="folder"
 					:selectMode="select === 'file'"
 					:isSelected="selectedFiles.some(x => x.id === file.id)"
+          @click.shift.left.exact="filesSelect"
 					@chosen="chooseFile"
 					@dragstart="isDragSource = true"
 					@dragend="isDragSource = false"
@@ -83,14 +99,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<div v-if="files.length == 0 && folders.length == 0 && !fetching" :class="$style.empty">
 				<div v-if="draghover">{{ i18n.t('empty-draghover') }}</div>
-				<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</div>
+				<div v-if="!draghover && folder == null">
+					<strong>{{
+						i18n.ts.emptyDrive
+					}}</strong><br/>{{ i18n.t('empty-drive-description') }}
+				</div>
 				<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
 			</div>
 		</div>
 		<MkLoading v-if="fetching"/>
 	</div>
 	<div v-if="draghover" :class="$style.dropzone"></div>
-	<input ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
+	<input
+		ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1"
+		@change="onChangeFileInput"
+	/>
 </div>
 </template>
 
@@ -107,6 +130,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 number from "@/filters/number.js";
 
 const props = withDefaults(defineProps<{
   initialFolder?: Misskey.entities.DriveFolder;
@@ -140,6 +164,8 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 const connection = useStream().useChannel('drive');
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
+const multiple = ref(props.multiple || false);
+const select = ref(props.select || null);
 
 // ドロップされようとしているか
 const draghover = ref(false);
@@ -390,7 +416,7 @@ 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 (props.multiple) {
+	if (multiple.value) {
 		if (isAlreadySelected) {
 			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
 		} else {
@@ -409,7 +435,7 @@ function chooseFile(file: Misskey.entities.DriveFile) {
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
 	const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
-	if (props.multiple) {
+	if (multiple.value) {
 		if (isAlreadySelected) {
 			selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
 		} else {
@@ -496,6 +522,7 @@ function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
 function removeFile(file: Misskey.entities.DriveFile | string) {
 	const fileId = typeof file === 'object' ? file.id : file;
 	files.value = files.value.filter(f => f.id !== fileId);
+  selectedFiles.value = selectedFiles.value.filter(f => f.id !== fileId);
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -505,6 +532,7 @@ function appendFile(file: Misskey.entities.DriveFile) {
 function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
 	addFolder(folderToAppend);
 }
+
 /*
 function prependFile(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
@@ -621,31 +649,128 @@ function getMenu() {
 	}, {
 		text: i18n.ts.upload,
 		icon: 'ti ti-upload',
-		action: () => { selectLocalFile(); },
+		action: () => {
+			selectLocalFile();
+		},
 	}, {
 		text: i18n.ts.fromUrl,
 		icon: 'ti ti-link',
-		action: () => { urlUpload(); },
+		action: () => {
+			urlUpload();
+		},
 	}, null, {
 		text: folder.value ? folder.value.name : i18n.ts.drive,
 		type: 'label',
 	}, folder.value ? {
 		text: i18n.ts.renameFolder,
 		icon: 'ti ti-forms',
-		action: () => { renameFolder(folder.value); },
+		action: () => {
+			renameFolder(folder.value);
+		},
 	} : undefined, folder.value ? {
 		text: i18n.ts.deleteFolder,
 		icon: 'ti ti-trash',
-		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
+		action: () => {
+			deleteFolder(folder.value as Misskey.entities.DriveFolder);
+		},
 	} : undefined, {
 		text: i18n.ts.createFolder,
 		icon: 'ti ti-folder-plus',
-		action: () => { createFolder(); },
+		action: () => {
+			createFolder();
+		},
 	}];
 }
 
+async function isSensitive(Files, isSensitive: boolean) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t(isSensitive ? 'driveFilesSensitiveonConfirm' : 'driveFilesSensitiveoffConfirm', { name: Files.length }),
+	});
+
+	if (canceled) return;
+	Files.forEach((file) => {
+		os.api('drive/files/update', {
+			fileId: file.id,
+			isSensitive,
+		});
+	});
+}
+
+async function fileDelete(Files) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('driveFilesDeleteConfirm', { name: Files.length }),
+	});
+
+	if (canceled) return;
+	Files.forEach((file) => {
+		os.api('drive/files/delete', {
+			fileId: file.id,
+		});
+	});
+}
+
+function getFilesMenu(Files) {
+	return [{
+		text: i18n.ts.createNoteFromTheFile,
+		icon: 'ti ti-pencil',
+		action: () => {
+			if (Files.length >= 16) {
+				os.confirm({
+					type: 'warning',
+					text: '16ファイル以上添付しようとしています',
+				});
+				return;
+			} else {
+				os.post({
+					initialFiles: [...Files],
+				});
+			}
+		},
+	}, {
+		text: i18n.ts.unmarkAsSensitive,
+		icon: 'ti ti-eye',
+		action: () => {
+			isSensitive(Files, false);
+		},
+	}, {
+		text: i18n.ts.markAsSensitive,
+		icon: 'ti ti-eye-exclamation',
+		action: () => {
+			isSensitive(Files, true);
+		},
+	}, {
+		text: i18n.ts.delete,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () => {
+			fileDelete(Files);
+		},
+	}];
+}
+
+function filesSelect() {
+	multiple.value = !multiple.value;
+	select.value = (select.value === null) ? 'file' : null;
+	selectedFiles.value = [];
+}
+
+function filesAllSelect() {
+	if (selectedFiles.value.length === 0) {
+		selectedFiles.value = files.value;
+	} else {
+		selectedFiles.value = [];
+	}
+}
+
 function showMenu(ev: MouseEvent) {
+	console.log(selectedFiles.value.length);
+	if (selectedFiles.value.length === 0) {
 		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	} else {
+		os.popupMenu(getFilesMenu(selectedFiles.value), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	}
 }
 
 function onContextmenu(ev: MouseEvent) {
@@ -696,7 +821,10 @@ onBeforeUnmount(() => {
 
 .nav {
   display: flex;
-	z-index: 2;
+  top: 0;
+  position: sticky;
+  z-index: 1000;
+  background-color: var(--bg);
   width: 100%;
   padding: 0 8px;
   box-sizing: border-box;