ドライブ複数選択できるようになった可能性がある

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;

locales/ja-JP.yml

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

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"
 	},

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

@@ -4,15 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div
+  <div
-	:class="[$style.root, { [$style.isSelected]: isSelected }]"
+      :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"/>
@@ -30,28 +32,49 @@ SPDX-License-Identifier: AGPL-3.0-only
       <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>{{
-			<span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</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>
+  </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 {i18n} from '@/i18n.js';
-import { $i } from '@/account.js';
+import {$i} from '@/account.js';
-import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.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;
+  multipleselect?;
+  isLongPressing?;
 }>(), {
   isSelected: false,
   selectMode: false,
@@ -66,17 +89,45 @@ const emit = defineEmits<{
 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 {
+  } 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) {
+
+  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) {

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,10 +145,21 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.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
 
@@ -221,6 +234,58 @@ 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); // 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(() => {
@@ -243,6 +308,44 @@ 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() {

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);
+
+    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
 

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);
 }
 

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;
+}

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