From 3e4cc32e51c346327081845a794a538d832cc3fc Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:36:57 +0900
Subject: [PATCH] refactor: split mkcodediff to isolate concerns

---
 packages/frontend/src/components/MkCode.vue   | 20 ++++---
 .../src/components/MkCodeDiff.stories.impl.ts | 44 +++++++++++++++
 .../frontend/src/components/MkCodeDiff.vue    | 14 +++++
 .../src/pages/admin/modlog.ModLog.vue         | 54 +++++++++----------
 4 files changed, 97 insertions(+), 35 deletions(-)
 create mode 100644 packages/frontend/src/components/MkCodeDiff.stories.impl.ts
 create mode 100644 packages/frontend/src/components/MkCodeDiff.vue

diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index 5ef5d4e29c..58eb405de0 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -44,13 +44,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts" setup>
-import { defineAsyncComponent, ref, computed } from 'vue';
-import { i18n } from '@/i18n.js';
-import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
-import { prefer } from '@/preferences.js';
-
-const props = withDefaults(defineProps<{
+<script lang="ts">
+export type MkCodeProps = {
 	code: string;
 	diffBase?: string;
 	forceShow?: boolean;
@@ -58,7 +53,16 @@ const props = withDefaults(defineProps<{
 	withOuterStyle?: boolean;
 	lang?: string;
 	maxHeight?: number | null;
-}>(), {
+};
+</script>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, ref, computed } from 'vue';
+import { i18n } from '@/i18n.js';
+import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
+import { prefer } from '@/preferences.js';
+
+const props = withDefaults(defineProps<MkCodeProps>(), {
 	copyButton: true,
 	forceShow: false,
 	withOuterStyle: true,
diff --git a/packages/frontend/src/components/MkCodeDiff.stories.impl.ts b/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
new file mode 100644
index 0000000000..fae9d459fb
--- /dev/null
+++ b/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
@@ -0,0 +1,44 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-default-export */
+import type { StoryObj } from '@storybook/vue3';
+import MkCode from './MkCode.vue';
+const code = `for (let i, 100) {
+	<: if (i % 15 == 0) "FizzBuzz"
+		elif (i % 3 == 0) "Fizz"
+		elif (i % 5 == 0) "Buzz"
+		else i
+}`;
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkCode,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkCode v-bind="props" />',
+		};
+	},
+	args: {
+		code,
+		lang: 'is',
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkCode>;
diff --git a/packages/frontend/src/components/MkCodeDiff.vue b/packages/frontend/src/components/MkCodeDiff.vue
new file mode 100644
index 0000000000..2d781377af
--- /dev/null
+++ b/packages/frontend/src/components/MkCodeDiff.vue
@@ -0,0 +1,14 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkCode v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+import MkCode from '@/components/MkCode.vue';
+import type { MkCodeProps } from '@/components/MkCode.vue';
+const props = defineProps<MkCodeProps & { diffBase: string }>();
+</script>
diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index afb0385182..6a97a4303b 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -138,22 +138,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 
 		<template v-if="log.type === 'updateServerSettings'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateUserNote'">
 			<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'suspend'">
 			<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
@@ -162,13 +162,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
 		</template>
 		<template v-else-if="log.type === 'updateRole'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'assignRole'">
 			<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
@@ -180,91 +180,91 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 		<template v-else-if="log.type === 'updateCustomEmoji'">
 			<div>{{ i18n.ts.emoji }}: {{ log.info.emojiId }}</div>
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAd'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateGlobalAnnouncement'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateUserAnnouncement'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAvatarDecoration'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateRemoteInstanceNote'">
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateSystemWebhook'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAbuseReportNotificationRecipient'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAbuseReportNote'">
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateProxyAccountDescription'">
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 
 		<details>
@@ -277,7 +277,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import MkCode from '@/components/MkCode.vue';
+import MkCodeDiff from '@/components/MkCodeDiff.vue';
 import JSON5 from 'json5';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';