From 1684ca256898e236a0cb3a2417f5756b5b1ddf48 Mon Sep 17 00:00:00 2001
From: FineArchs <cicada1003@gmail.com>
Date: Mon, 30 Sep 2024 16:44:08 +0900
Subject: [PATCH 1/7] create MkExtensionInstaller.vue

---
 .../src/components/MkExtensionInstaller.vue   | 157 ++++++++++++++++++
 .../frontend/src/pages/install-extensions.vue | 106 +-----------
 2 files changed, 162 insertions(+), 101 deletions(-)
 create mode 100644 packages/frontend/src/components/MkExtensionInstaller.vue

diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
new file mode 100644
index 000000000000..a7650d0e3a5f
--- /dev/null
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -0,0 +1,157 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m" :class="$style.extInstallerRoot">
+	<div :class="$style.extInstallerIconWrapper">
+		<i v-if="extension.type === 'plugin'" class="ti ti-plug"></i>
+		<i v-else-if="extension.type === 'theme'" class="ti ti-palette"></i>
+		<i v-else class="ti ti-download"></i>
+	</div>
+	<h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].title }}</h2>
+	<div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div>
+	<MkInfo v-if="extension.type === 'plugin'" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
+	<FormSection>
+		<template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template>
+		<div class="_gaps_s">
+			<FormSplit>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.name }}</template>
+					<template #value>{{ extension.meta.name }}</template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.author }}</template>
+					<template #value>{{ extension.meta.author }}</template>
+				</MkKeyValue>
+			</FormSplit>
+			<MkKeyValue v-if="extension.type === 'plugin'">
+				<template #key>{{ i18n.ts.description }}</template>
+				<template #value>{{ extension.meta.description }}</template>
+			</MkKeyValue>
+			<MkKeyValue v-if="extension.type === 'plugin'">
+				<template #key>{{ i18n.ts.version }}</template>
+				<template #value>{{ extension.meta.version }}</template>
+			</MkKeyValue>
+			<MkKeyValue v-if="extension.type === 'plugin'">
+				<template #key>{{ i18n.ts.permission }}</template>
+				<template #value>
+					<ul :class="$style.extInstallerKVList">
+						<li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
+					</ul>
+				</template>
+			</MkKeyValue>
+			<MkKeyValue v-if="extension.type === 'theme' && extension.meta.base">
+				<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
+				<template #value>{{ i18n.ts[extension.meta.base] }}</template>
+			</MkKeyValue>
+			<MkFolder>
+				<template #icon><i class="ti ti-code"></i></template>
+				<template #label>{{ i18n.ts._plugin.viewSource }}</template>
+
+				<MkCode :code="extension.raw"/>
+			</MkFolder>
+		</div>
+	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
+		<div class="_gaps_s">
+			<MkKeyValue v-if="url">
+				<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
+				<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
+			</MkKeyValue>
+			<MkKeyValue v-if="hashVerified">
+				<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
+				<template #value>
+					<i class="ti ti-check" style="color: var(--accent)"></i>
+				</template>
+			</MkKeyValue>
+		</div>
+	</FormSection>
+	<div class="_buttonsCenter">
+		<MkButton primary @click="emits('confirm')"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+export type Extension = {
+	type: 'plugin';
+	raw: string;
+	meta: {
+		name: string;
+		author: string;
+		description?: string;
+		version?: string;
+		permissions?: string[];
+		config?: Record<string, any>;
+	};
+} | {
+	type: 'theme';
+	raw: string;
+	meta: {
+		name: string;
+		author: string;
+		base?: 'light' | 'dark';
+	};
+};
+</script>
+<script lang="ts" setup>
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSplit from '@/components/form/split.vue';
+import MkCode from '@/components/MkCode.vue';
+import MkUrl from '@/components/global/MkUrl.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import { i18n } from '@/i18n.js';
+
+const props = defineProps<{
+	extension: Extension;
+	url?: string;
+	hashVerified?: boolean;
+}>();
+
+const emits = defineEmits<{
+	(ev: 'confirm'): void;
+}>();
+</script>
+
+<style lang="scss" module>
+.extInstallerRoot {
+	border-radius: var(--radius);
+	background: var(--panel);
+	padding: 1.5rem;
+}
+
+.extInstallerIconWrapper {
+	width: 48px;
+	height: 48px;
+	font-size: 24px;
+	line-height: 48px;
+	text-align: center;
+	border-radius: 50%;
+	margin-left: auto;
+	margin-right: auto;
+
+	background-color: var(--accentedBg);
+	color: var(--accent);
+}
+
+.extInstallerTitle {
+	font-size: 1.2rem;
+	text-align: center;
+	margin: 0;
+}
+
+.extInstallerNormDesc {
+	text-align: center;
+}
+
+.extInstallerKVList {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+</style>
diff --git a/packages/frontend/src/pages/install-extensions.vue b/packages/frontend/src/pages/install-extensions.vue
index 4bee437f6582..898c7f58b9ff 100644
--- a/packages/frontend/src/pages/install-extensions.vue
+++ b/packages/frontend/src/pages/install-extensions.vue
@@ -8,76 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="500">
 		<MkLoading v-if="uiPhase === 'fetching'"/>
-		<div v-else-if="uiPhase === 'confirm' && data" class="_gaps_m" :class="$style.extInstallerRoot">
-			<div :class="$style.extInstallerIconWrapper">
-				<i v-if="data.type === 'plugin'" class="ti ti-plug"></i>
-				<i v-else-if="data.type === 'theme'" class="ti ti-palette"></i>
-				<i v-else class="ti ti-download"></i>
-			</div>
-			<h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${data.type}`].title }}</h2>
-			<div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div>
-			<MkInfo v-if="data.type === 'plugin'" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
-			<FormSection>
-				<template #label>{{ i18n.ts._externalResourceInstaller[`_${data.type}`].metaTitle }}</template>
-				<div class="_gaps_s">
-					<FormSplit>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.name }}</template>
-							<template #value>{{ data.meta?.name }}</template>
-						</MkKeyValue>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.author }}</template>
-							<template #value>{{ data.meta?.author }}</template>
-						</MkKeyValue>
-					</FormSplit>
-					<MkKeyValue v-if="data.type === 'plugin'">
-						<template #key>{{ i18n.ts.description }}</template>
-						<template #value>{{ data.meta?.description }}</template>
-					</MkKeyValue>
-					<MkKeyValue v-if="data.type === 'plugin'">
-						<template #key>{{ i18n.ts.version }}</template>
-						<template #value>{{ data.meta?.version }}</template>
-					</MkKeyValue>
-					<MkKeyValue v-if="data.type === 'plugin'">
-						<template #key>{{ i18n.ts.permission }}</template>
-						<template #value>
-							<ul :class="$style.extInstallerKVList">
-								<li v-for="permission in data.meta?.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
-							</ul>
-						</template>
-					</MkKeyValue>
-					<MkKeyValue v-if="data.type === 'theme' && data.meta?.base">
-						<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
-						<template #value>{{ i18n.ts[data.meta.base] }}</template>
-					</MkKeyValue>
-					<MkFolder>
-						<template #icon><i class="ti ti-code"></i></template>
-						<template #label>{{ i18n.ts._plugin.viewSource }}</template>
-
-						<MkCode :code="data.raw ?? ''"/>
-					</MkFolder>
-				</div>
-			</FormSection>
-			<FormSection>
-				<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
-				<div class="_gaps_s">
-					<MkKeyValue>
-						<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
-						<template #value><MkUrl :url="url ?? ''" :showUrlPreview="false"></MkUrl></template>
-					</MkKeyValue>
-					<MkKeyValue>
-						<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
-						<template #value>
-							<!--この画面が出ている時点でハッシュの検証には成功している-->
-							<i class="ti ti-check" style="color: var(--accent)"></i>
-						</template>
-					</MkKeyValue>
-				</div>
-			</FormSection>
-			<div class="_buttonsCenter">
-				<MkButton primary @click="install()"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
-			</div>
-		</div>
+		<!-- この画面が表示されている時点でハッシュの検証には成功している -->
+		<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" :url="url" hashVerified @confirm="install()"/>
 		<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
 			<div :class="$style.extInstallerIconWrapper">
 				<i class="ti ti-circle-x"></i>
@@ -96,14 +28,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, computed, onActivated, onDeactivated, nextTick } from 'vue';
 import MkLoading from '@/components/global/MkLoading.vue';
+import MkExtensionInstaller, { type Extension } from '@/components/MkExtensionInstaller.vue';
 import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSplit from '@/components/form/split.vue';
-import MkCode from '@/components/MkCode.vue';
-import MkUrl from '@/components/global/MkUrl.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { AiScriptPluginMeta, parsePluginMeta, installPlugin } from '@/scripts/install-plugin.js';
@@ -124,24 +50,7 @@ const errorKV = ref<{
 const url = ref<string | null>(null);
 const hash = ref<string | null>(null);
 
-const data = ref<{
-	type: 'plugin' | 'theme';
-	raw: string;
-	meta?: {
-		// Plugin & Theme Common
-		name: string;
-		author: string;
-
-		// Plugin
-		description?: string;
-		version?: string;
-		permissions?: string[];
-		config?: Record<string, any>;
-
-		// Theme
-		base?: 'light' | 'dark';
-	};
-} | null>(null);
+const data = ref<Extension | null>(null);
 
 function goBack(): void {
 	history.back();
@@ -227,7 +136,7 @@ async function fetch() {
 				data.value = {
 					type: 'theme',
 					meta: {
-						description,
+						// description, // 使用されていない
 						...meta,
 					},
 					raw: res.data,
@@ -353,9 +262,4 @@ definePageMetadata(() => ({
 .extInstallerNormDesc {
 	text-align: center;
 }
-
-.extInstallerKVList {
-	margin-top: 0;
-	margin-bottom: 0;
-}
 </style>

From fa796780eaae4db3c69cfd2e853d948496312100 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Mon, 30 Sep 2024 17:05:48 +0900
Subject: [PATCH 2/7] annotation

---
 packages/frontend/src/components/MkExtensionInstaller.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
index a7650d0e3a5f..e81424eb9ee0 100644
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -62,6 +62,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
 			</MkKeyValue>
 			<MkKeyValue v-if="hashVerified">
+				<!-- TODO: ハッシュ検証に失敗した場合の表示も作る -->
+				<!-- その場合、hashVerifiedがfalseなら失敗表示、undefinedなら表示なしで分けたい -->
 				<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
 				<template #value>
 					<i class="ti ti-check" style="color: var(--accent)"></i>

From 45f0853686faf869e5a70ed8dd1c53f49483db49 Mon Sep 17 00:00:00 2001
From: FineArchs <cicada1003@gmail.com>
Date: Mon, 30 Sep 2024 18:18:52 +0900
Subject: [PATCH 3/7] add fallbacks

---
 .../src/components/MkExtensionInstaller.vue   | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
index a7650d0e3a5f..deac5e1c42e9 100644
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -6,13 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div class="_gaps_m" :class="$style.extInstallerRoot">
 	<div :class="$style.extInstallerIconWrapper">
-		<i v-if="extension.type === 'plugin'" class="ti ti-plug"></i>
-		<i v-else-if="extension.type === 'theme'" class="ti ti-palette"></i>
+		<i v-if="isPlugin" class="ti ti-plug"></i>
+		<i v-else-if="isTheme" class="ti ti-palette"></i>
+		<!-- 拡張用？ -->
 		<i v-else class="ti ti-download"></i>
 	</div>
 	<h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].title }}</h2>
 	<div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div>
-	<MkInfo v-if="extension.type === 'plugin'" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
+	<MkInfo v-if="isPlugin" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
 	<FormSection>
 		<template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template>
 		<div class="_gaps_s">
@@ -26,25 +27,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #value>{{ extension.meta.author }}</template>
 				</MkKeyValue>
 			</FormSplit>
-			<MkKeyValue v-if="extension.type === 'plugin'">
+			<MkKeyValue v-if="isPlugin">
 				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ extension.meta.description }}</template>
+				<template #value>{{ extension.meta.description ?? i18n.ts.none }}</template>
 			</MkKeyValue>
-			<MkKeyValue v-if="extension.type === 'plugin'">
+			<MkKeyValue v-if="isPlugin">
 				<template #key>{{ i18n.ts.version }}</template>
 				<template #value>{{ extension.meta.version }}</template>
 			</MkKeyValue>
-			<MkKeyValue v-if="extension.type === 'plugin'">
+			<MkKeyValue v-if="isPlugin">
 				<template #key>{{ i18n.ts.permission }}</template>
 				<template #value>
-					<ul :class="$style.extInstallerKVList">
+					<ul v-if="extension.meta.permissions && extension.meta.permissions.length > 0" :class="$style.extInstallerKVList">
 						<li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
 					</ul>
+					<template v-else>{{ i18n.ts.none }}</template>
 				</template>
 			</MkKeyValue>
-			<MkKeyValue v-if="extension.type === 'theme' && extension.meta.base">
+			<MkKeyValue v-if="isTheme">
 				<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
-				<template #value>{{ i18n.ts[extension.meta.base] }}</template>
+				<template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</template>
 			</MkKeyValue>
 			<MkFolder>
 				<template #icon><i class="ti ti-code"></i></template>
@@ -81,9 +83,9 @@ export type Extension = {
 	raw: string;
 	meta: {
 		name: string;
+		version: string;
 		author: string;
 		description?: string;
-		version?: string;
 		permissions?: string[];
 		config?: Record<string, any>;
 	};
@@ -98,6 +100,7 @@ export type Extension = {
 };
 </script>
 <script lang="ts" setup>
+import { computed } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
@@ -108,6 +111,9 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import { i18n } from '@/i18n.js';
 
+const isPlugin = computed(() => props.extension.type === 'plugin');
+const isTheme = computed(() => props.extension.type === 'theme');
+
 const props = defineProps<{
 	extension: Extension;
 	url?: string;

From c02bed0c42844a5a0a65326f43a0cf2f2a078de5 Mon Sep 17 00:00:00 2001
From: FineArchs <cicada1003@gmail.com>
Date: Mon, 30 Sep 2024 19:56:37 +0900
Subject: [PATCH 4/7] storybook

---
 .../MkExtensionInstaller.stories.impl.ts      | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 packages/frontend/src/components/MkExtensionInstaller.stories.impl.ts

diff --git a/packages/frontend/src/components/MkExtensionInstaller.stories.impl.ts b/packages/frontend/src/components/MkExtensionInstaller.stories.impl.ts
new file mode 100644
index 000000000000..6763f7c54692
--- /dev/null
+++ b/packages/frontend/src/components/MkExtensionInstaller.stories.impl.ts
@@ -0,0 +1,83 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { StoryObj } from '@storybook/vue3';
+import MkExtensionInstaller from './MkExtensionInstaller.vue';
+import lightTheme from '@@/themes/_light.json5';
+
+export const Plugin = {
+	render(args) {
+		return {
+			components: {
+				MkExtensionInstaller,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkExtensionInstaller v-bind="props" />',
+		};
+	},
+	args: {
+		extension: {
+			type: 'plugin',
+			raw: '"do nothing"',
+			meta: {
+				name: 'do nothing plugin',
+				version: '1.0',
+				author: 'syuilo and misskey-project',
+				description: 'a plugin that does nothing',
+				permissions: ['read:account'],
+				config: {
+					'doNothing': true,
+				},
+			},
+		},
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkExtensionInstaller>;
+
+export const Theme = {
+	render(args) {
+		return {
+			components: {
+				MkExtensionInstaller,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkExtensionInstaller v-bind="props" />',
+		};
+	},
+	args: {
+		extension: {
+			type: 'theme',
+			raw: JSON.stringify(lightTheme),
+			meta: lightTheme,
+		},
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkExtensionInstaller>;

From eca59081a3e0eb8b6256c814a719d9acde77c3ba Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Tue, 1 Oct 2024 08:40:59 +0900
Subject: [PATCH 5/7] update annotations

---
 packages/frontend/src/components/MkExtensionInstaller.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
index 4cfbc720ddcd..a7b8d4f2c1f7 100644
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -64,8 +64,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
 			</MkKeyValue>
 			<MkKeyValue v-if="hashVerified">
-				<!-- TODO: ハッシュ検証に失敗した場合の表示も作る -->
-				<!-- その場合、hashVerifiedがfalseなら失敗表示、undefinedなら表示なしで分けたい -->
+				<!-- hashVerifiedがfalseでも失敗表示は出ないので、エラー表示は別で作成すること -->
+				<!-- そもそもこのコンポーネントはハッシュ検証が必要であれば事前に済ませていることを前提としている -->
 				<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
 				<template #value>
 					<i class="ti ti-check" style="color: var(--accent)"></i>
@@ -119,7 +119,7 @@ const isTheme = computed(() => props.extension.type === 'theme');
 const props = defineProps<{
 	extension: Extension;
 	url?: string;
-	hashVerified?: boolean;
+	hashVerified?: boolean; // true: 検証成功表示 false/undefined: 検証不要、表示なし
 }>();
 
 const emits = defineEmits<{

From 717b3873dd9640efbb0a47f665ac96a0b6baded6 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Tue, 1 Oct 2024 08:42:41 +0900
Subject: [PATCH 6/7] Update MkExtensionInstaller.vue

---
 packages/frontend/src/components/MkExtensionInstaller.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
index a7b8d4f2c1f7..d1cb234e91e8 100644
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkFolder>
 		</div>
 	</FormSection>
-	<FormSection>
+	<FormSection v-if="url || hashVerified">
 		<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
 		<div class="_gaps_s">
 			<MkKeyValue v-if="url">

From fd58e9c9bb11ca50d7459d4f4b08c2dad4b975c2 Mon Sep 17 00:00:00 2001
From: FineArchs <cicada1003@gmail.com>
Date: Thu, 3 Oct 2024 10:21:57 +0900
Subject: [PATCH 7/7] use additonalInfo slot

---
 .../src/components/MkExtensionInstaller.vue   | 21 +---------------
 .../frontend/src/pages/install-extensions.vue | 25 +++++++++++++++++--
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
index d1cb234e91e8..0f7acd69e723 100644
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -56,23 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkFolder>
 		</div>
 	</FormSection>
-	<FormSection v-if="url || hashVerified">
-		<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
-		<div class="_gaps_s">
-			<MkKeyValue v-if="url">
-				<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
-				<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
-			</MkKeyValue>
-			<MkKeyValue v-if="hashVerified">
-				<!-- hashVerifiedがfalseでも失敗表示は出ないので、エラー表示は別で作成すること -->
-				<!-- そもそもこのコンポーネントはハッシュ検証が必要であれば事前に済ませていることを前提としている -->
-				<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
-				<template #value>
-					<i class="ti ti-check" style="color: var(--accent)"></i>
-				</template>
-			</MkKeyValue>
-		</div>
-	</FormSection>
+	<slot name="additionalInfo"/>
 	<div class="_buttonsCenter">
 		<MkButton primary @click="emits('confirm')"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
 	</div>
@@ -107,7 +91,6 @@ import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkCode from '@/components/MkCode.vue';
-import MkUrl from '@/components/global/MkUrl.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
@@ -118,8 +101,6 @@ const isTheme = computed(() => props.extension.type === 'theme');
 
 const props = defineProps<{
 	extension: Extension;
-	url?: string;
-	hashVerified?: boolean; // true: 検証成功表示 false/undefined: 検証不要、表示なし
 }>();
 
 const emits = defineEmits<{
diff --git a/packages/frontend/src/pages/install-extensions.vue b/packages/frontend/src/pages/install-extensions.vue
index 898c7f58b9ff..83f16fce6861 100644
--- a/packages/frontend/src/pages/install-extensions.vue
+++ b/packages/frontend/src/pages/install-extensions.vue
@@ -8,8 +8,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="500">
 		<MkLoading v-if="uiPhase === 'fetching'"/>
-		<!-- この画面が表示されている時点でハッシュの検証には成功している -->
-		<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" :url="url" hashVerified @confirm="install()"/>
+		<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()">
+			<template #additionalInfo>
+				<FormSection>
+					<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
+					<div class="_gaps_s">
+						<MkKeyValue>
+							<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
+							<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
+						</MkKeyValue>
+						<MkKeyValue>
+							<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
+							<template #value>
+								<!-- この画面が出ている時点でハッシュの検証には成功している -->
+								<i class="ti ti-check" style="color: var(--accent)"></i>
+							</template>
+						</MkKeyValue>
+					</div>
+				</FormSection>
+			</template>
+		</MkExtensionInstaller>
 		<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
 			<div :class="$style.extInstallerIconWrapper">
 				<i class="ti ti-circle-x"></i>
@@ -30,6 +48,9 @@ import { ref, computed, onActivated, onDeactivated, nextTick } from 'vue';
 import MkLoading from '@/components/global/MkLoading.vue';
 import MkExtensionInstaller, { type Extension } from '@/components/MkExtensionInstaller.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkUrl from '@/components/global/MkUrl.vue';
+import FormSection from '@/components/form/section.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { AiScriptPluginMeta, parsePluginMeta, installPlugin } from '@/scripts/install-plugin.js';