enhance(frontend): プラグインのソースコードを確認・コピーできるように (#11873)

* (add) plugin: view and copy source code

* (fix) plugin permission ui

* Update Changelog

CHANGELOG.md

@@ -67,6 +67,7 @@
 - Enhance: ノート詳細ページ読み込み時のパフォーマンスが向上しました
 - Enhance: タイムラインでリスト/アンテナ選択時のパフォーマンスを改善
 - Enhance: 「Moderation note」、「Add moderation note」をローカライズできるように
+- Enhance: プラグインのソースコードを確認・コピーできるように
 - Enhance: 細かなデザインの調整
 - Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正
 - Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
@@ -76,6 +77,7 @@
 - Fix: Misskeyプラグインをインストールする際のAiScriptバージョンのチェックが0.14.0以降に対応していない問題を修正
 - Fix: 他のサーバーのユーザーへ「メッセージを送信」した時の初期テキストのメンションが間違っている問題を修正
 - Fix: 環境によってはMisskey Webが開けない問題を修正
+- Fix: プラグインの権限リストが見れない問題を修正
 
 ### Server
 - Change: cacheRemoteFilesの初期値はfalseになりました

locales/index.d.ts

@@ -1632,6 +1632,7 @@ export interface Locale {
         "install": string;
         "installWarn": string;
         "manage": string;
+        "viewSource": string;
     };
     "_preferencesBackups": {
         "list": string;

locales/ja-JP.yml

@@ -1549,6 +1549,7 @@ _plugin:
   install: "プラグインのインストール"
   installWarn: "信頼できないプラグインはインストールしないでください。"
   manage: "プラグインの管理"
+  viewSource: "ソースを表示"
 
 _preferencesBackups:
   list: "作成したバックアップ"

packages/frontend/src/pages/settings/plugin.vue

@@ -10,28 +10,49 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<FormSection>
 		<template #label>{{ i18n.ts.manage }}</template>
 		<div class="_gaps_s">
-			<div v-for="plugin in plugins" :key="plugin.id" class="_panel _gaps_s" style="padding: 20px;">
-				<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
-
-				<MkSwitch :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</MkSwitch>
-
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.author }}</template>
-					<template #value>{{ plugin.author }}</template>
-				</MkKeyValue>
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.description }}</template>
-					<template #value>{{ plugin.description }}</template>
-				</MkKeyValue>
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.permission }}</template>
-					<template #value>{{ plugin.permission }}</template>
-				</MkKeyValue>
+			<div v-for="plugin in plugins" :key="plugin.id" class="_panel _gaps_m" style="padding: 20px;">
+				<div class="_gaps_s">
+					<span style="display: flex; align-items: center;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
+					<MkSwitch :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</MkSwitch>
+				</div>
+
+				<div class="_gaps_s">
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.author }}</template>
+						<template #value>{{ plugin.author }}</template>
+					</MkKeyValue>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.description }}</template>
+						<template #value>{{ plugin.description }}</template>
+					</MkKeyValue>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.permission }}</template>
+						<template #value>
+							<ul style="margin-top: 0; margin-bottom: 0;">
+								<li v-for="permission in plugin.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
+								<li v-if="!plugin.permissions || plugin.permissions.length === 0">{{ i18n.ts.none }}</li>
+							</ul>
+						</template>
+					</MkKeyValue>
+				</div>
 
 				<div class="_buttons">
 					<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
 					<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
 				</div>
+
+				<MkFolder>
+					<template #icon><i class="ti ti-code"></i></template>
+					<template #label>{{ i18n.ts._plugin.viewSource }}</template>
+
+					<div class="_gaps_s">
+						<div class="_buttons">
+							<MkButton inline @click="copy(plugin)"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</MkButton>
+						</div>
+
+						<MkCode :code="plugin.src ?? ''"/>
+					</div>
+				</MkFolder>
 			</div>
 		</div>
 	</FormSection>
@@ -44,8 +65,11 @@ import FormLink from '@/components/form/link.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkCode from '@/components/MkCode.vue';
+import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import * as os from '@/os.js';
+import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { ColdDeviceStorage } from '@/store.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
@@ -61,6 +85,11 @@ function uninstall(plugin) {
 	});
 }
 
+function copy(plugin) {
+	copyToClipboard(plugin.src ?? '');
+	os.success();
+}
+
 // TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
 async function config(plugin) {
 	const config = plugin.config;

packages/frontend/src/store.ts

@@ -381,6 +381,9 @@ export type Plugin = {
 	src: string | null;
 	version: string;
 	ast: any[];
+	author?: string;
+	description?: string;
+	permissions?: string[];
 };
 
 interface Watcher {