feat: フォルダーやファイルでもIDをコピーできるように (#11189)

* feat: フォルダーやファイルでもIDをコピーできるように close #11188

* docs: update CHANGELOG.md

CHANGELOG.md

@@ -24,6 +24,7 @@
 - 画像を動画と同様に簡単に隠せるように
 - オリジナル画像を保持せずにアップロードする場合webpでアップロードされるように(Safari以外)
 - 見たことのあるRenoteを省略して表示をオンのときに自分のnoteのrenoteを省略するように
+- フォルダーやファイルに対しても開発者モード使用時、IDをコピーできるように
 - Fix: サーバーメトリクスが90度傾いている
 - Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正

locales/index.d.ts

@@ -57,6 +57,8 @@ export interface Locale {
     "copyUsername": string;
     "copyUserId": string;
     "copyNoteId": string;
+    "copyFileId": string;
+    "copyFolderId": string;
     "searchUser": string;
     "reply": string;
     "loadMore": string;

locales/ja-JP.yml

@@ -54,6 +54,8 @@ copyRSS: "RSSをコピー"
 copyUsername: "ユーザー名をコピー"
 copyUserId: "ユーザーIDをコピー"
 copyNoteId: "ノートIDをコピー"
+copyFileId: "ファイルIDをコピー"
+copyFolderId: "フォルダーIDをコピー"
 searchUser: "ユーザーを検索"
 reply: "返信"
 loadMore: "もっと見る"

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

@@ -33,6 +33,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { claimAchievement } from '@/scripts/achievements';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -244,7 +245,8 @@ function setAsUploadFolder() {
 }
 
 function onContextmenu(ev: MouseEvent) {
-	os.contextMenu([{
+	let menu;
+	menu = [{
 		text: i18n.ts.openInWindow,
 		icon: 'ti ti-app-window',
 		action: () => {
@@ -262,7 +264,17 @@ function onContextmenu(ev: MouseEvent) {
 		icon: 'ti ti-trash',
 		danger: true,
 		action: deleteFolder,
-	}], ev);
+	}];
+	if (defaultStore.state.devMode) {
+		menu = menu.concat([null, {
+			icon: 'ti ti-id',
+			text: i18n.ts.copyFolderId,
+			action: () => {
+				copyToClipboard(props.folder.id);
+			},
+		}]);
+	}
+	os.contextMenu(menu, ev);
 }
 </script>
 

packages/frontend/src/scripts/get-drive-file-menu.ts

@@ -4,6 +4,7 @@ import { i18n } from '@/i18n';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 import { MenuItem } from '@/types/menu';
+import { defaultStore } from '@/store';
 
 function rename(file: Misskey.entities.DriveFile) {
 	os.inputText({
@@ -69,7 +70,8 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
 
 export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
 	const isImage = file.type.startsWith('image/');
-	return [{
+	let menu;
+	menu = [{
 		text: i18n.ts.rename,
 		icon: 'ti ti-forms',
 		action: () => rename(file),
@@ -111,4 +113,16 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 		danger: true,
 		action: () => deleteFile(file),
 	}];
+
+	if (defaultStore.state.devMode) {
+		menu = menu.concat([null, {
+			icon: 'ti ti-id',
+			text: i18n.ts.copyFileId,
+			action: () => {
+				copyToClipboard(file.id);
+			},
+		}]);
+	}
+
+	return menu;
 }