From 4a0e9686625a399529879ea92f51d93bd7204340 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 1 Sep 2025 16:23:05 +0900
Subject: [PATCH 1/2] refactor

---
 .../suspense.vue => global/MkSuspense.vue}    | 20 +++++++++----
 packages/frontend/src/components/index.ts     |  3 ++
 .../frontend/src/pages/about.overview.vue     |  5 ++--
 packages/frontend/src/pages/admin-file.vue    | 30 ++++++++-----------
 .../frontend/src/pages/admin/database.vue     |  5 ++--
 .../src/pages/admin/object-storage.vue        |  1 -
 packages/frontend/src/pages/gallery/edit.vue  |  5 ++--
 7 files changed, 35 insertions(+), 34 deletions(-)
 rename packages/frontend/src/components/{form/suspense.vue => global/MkSuspense.vue} (69%)

diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/global/MkSuspense.vue
similarity index 69%
rename from packages/frontend/src/components/form/suspense.vue
rename to packages/frontend/src/components/global/MkSuspense.vue
index 3b23acf612..4a79cce552 100644
--- a/packages/frontend/src/components/form/suspense.vue
+++ b/packages/frontend/src/components/global/MkSuspense.vue
@@ -1,3 +1,4 @@
+@ -1,70 +0,0 @@
 <!--
 SPDX-FileCopyrightText: syuilo and misskey-project
 SPDX-License-Identifier: AGPL-3.0-only
@@ -12,8 +13,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 <div v-else>
 	<div :class="$style.error">
-		<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div>
-		<MkButton inline style="margin-top: 16px;" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
+		<slot name="error" :error="error">
+			<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div>
+			<div v-if="error">{{ JSON.stringify(error) }}</div>
+			<MkButton inline style="margin-top: 16px;" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
+		</slot>
 	</div>
 </div>
 </template>
@@ -27,15 +31,17 @@ const props = defineProps<{
 	p: () => Promise<T>;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'resolved', result: T): void;
+}>();
+
 const pending = ref(true);
 const resolved = ref(false);
 const rejected = ref(false);
 const result = ref<T | null>(null);
+const error = ref<any | null>(null);
 
 const process = () => {
-	if (props.p == null) {
-		return;
-	}
 	const promise = props.p();
 	pending.value = true;
 	resolved.value = false;
@@ -44,10 +50,12 @@ const process = () => {
 		pending.value = false;
 		resolved.value = true;
 		result.value = _result;
+		emit('resolved', _result);
 	});
-	promise.catch(() => {
+	promise.catch((_error) => {
 		pending.value = false;
 		rejected.value = true;
+		error.value = _error;
 	});
 };
 
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 6b1b80695f..eadf88ebd9 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -20,6 +20,7 @@ import NestedRouterView from './global/NestedRouterView.vue';
 import StackingRouterView from './global/StackingRouterView.vue';
 import MkLoading from './global/MkLoading.vue';
 import MkError from './global/MkError.vue';
+import MkSuspense from './global/MkSuspense.vue';
 import MkAd from './global/MkAd.vue';
 import MkPageHeader from './global/MkPageHeader.vue';
 import MkStickyContainer from './global/MkStickyContainer.vue';
@@ -60,6 +61,7 @@ export const components = {
 	MkUrl: MkUrl,
 	MkLoading: MkLoading,
 	MkError: MkError,
+	MkSuspense: MkSuspense,
 	MkAd: MkAd,
 	MkPageHeader: MkPageHeader,
 	MkStickyContainer: MkStickyContainer,
@@ -94,6 +96,7 @@ declare module '@vue/runtime-core' {
 		MkUrl: typeof MkUrl;
 		MkLoading: typeof MkLoading;
 		MkError: typeof MkError;
+		MkSuspense: typeof MkSuspense;
 		MkAd: typeof MkAd;
 		MkPageHeader: typeof MkPageHeader;
 		MkStickyContainer: typeof MkStickyContainer;
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 4786615173..03d500044c 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</FormSection>
 
-	<FormSuspense v-slot="{ result: stats }" :p="initStats">
+	<MkSuspense v-slot="{ result: stats }" :p="initStats">
 		<FormSection>
 			<template #label>{{ i18n.ts.statistics }}</template>
 			<FormSplit>
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkKeyValue>
 			</FormSplit>
 		</FormSection>
-	</FormSuspense>
+	</MkSuspense>
 
 	<FormSection>
 		<template #label>Well-known resources</template>
@@ -134,7 +134,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkLink from '@/components/MkLink.vue';
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index 63d3640f9c..608a77c06b 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<XRoot v-if="file != null && info != null" :file="file" :info="info"/>
-<div v-else-if="error != null">Error: {{ error }}</div>
-<MkLoading v-else/>
+<MkSuspense v-slot="{ result }" :p="_fetch_" @resolved="(result) => file = result.file">
+	<XRoot v-if="result.file != null && result.info != null" :file="result.file" :info="result.info"/>
+</MkSuspense>
 </template>
 
 <script lang="ts" setup>
@@ -17,27 +17,21 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 
-const file = ref<Misskey.entities.DriveFile | null>(null);
-const info = ref<Misskey.entities.AdminDriveShowFileResponse | null>(null);
-
-const error = ref<string | null>(null);
-
 const props = defineProps<{
 	fileId: string,
 }>();
 
-async function _fetch_() {
-	try {
-		file.value = await misskeyApi('drive/files/show', { fileId: props.fileId });
-	} catch (err: any) {
-		error.value = err.message + ' ' + err.id;
-		return;
-	}
-
-	info.value = await misskeyApi('admin/drive/show-file', { fileId: props.fileId });
+function _fetch_() {
+	return Promise.all([
+		misskeyApi('drive/files/show', { fileId: props.fileId }),
+		misskeyApi('admin/drive/show-file', { fileId: props.fileId }),
+	]).then((result) => ({
+		file: result[0],
+		info: result[1],
+	}));
 }
 
-_fetch_();
+const file = ref<Misskey.entities.DriveFile | null>(null);
 
 definePage(() => ({
 	title: file.value ? `${i18n.ts.file}: ${file.value.name}` : i18n.ts.file,
diff --git a/packages/frontend/src/pages/admin/database.vue b/packages/frontend/src/pages/admin/database.vue
index d51f43c098..f41967d3bd 100644
--- a/packages/frontend/src/pages/admin/database.vue
+++ b/packages/frontend/src/pages/admin/database.vue
@@ -6,19 +6,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
 	<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
-		<FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
+		<MkSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
 			<MkKeyValue v-for="table in database" :key="table[0]" oneline style="margin: 1em 0;">
 				<template #key>{{ table[0] }}</template>
 				<template #value>{{ bytes(table[1].size) }} ({{ number(table[1].count) }} recs)</template>
 			</MkKeyValue>
-		</FormSuspense>
+		</MkSuspense>
 	</div>
 </PageWithHeader>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import bytes from '@/filters/bytes.js';
diff --git a/packages/frontend/src/pages/admin/object-storage.vue b/packages/frontend/src/pages/admin/object-storage.vue
index d42c23a51e..d6ac72571e 100644
--- a/packages/frontend/src/pages/admin/object-storage.vue
+++ b/packages/frontend/src/pages/admin/object-storage.vue
@@ -109,7 +109,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkInput from '@/components/MkInput.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index 3fd462e0b9..09bc6375ac 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
 	<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
-		<FormSuspense :p="init" class="_gaps">
+		<MkSuspense :p="init" class="_gaps">
 			<MkInput v-model="title">
 				<template #label>{{ i18n.ts.title }}</template>
 			</MkInput>
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<MkButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
-		</FormSuspense>
+		</MkSuspense>
 	</div>
 </PageWithHeader>
 </template>
@@ -43,7 +43,6 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import { selectFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';

From 3566bc207f2fb3cb7cba42fc638f7b30f7e00531 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 1 Sep 2025 16:36:15 +0900
Subject: [PATCH 2/2] refactor

---
 .../frontend/src/pages/gallery/edit.root.vue  | 145 +++++++++++++++++
 packages/frontend/src/pages/gallery/edit.vue  | 150 ++----------------
 2 files changed, 157 insertions(+), 138 deletions(-)
 create mode 100644 packages/frontend/src/pages/gallery/edit.root.vue

diff --git a/packages/frontend/src/pages/gallery/edit.root.vue b/packages/frontend/src/pages/gallery/edit.root.vue
new file mode 100644
index 0000000000..45493ab561
--- /dev/null
+++ b/packages/frontend/src/pages/gallery/edit.root.vue
@@ -0,0 +1,145 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<PageWithHeader :actions="headerActions" :tabs="headerTabs">
+	<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
+		<MkInput v-model="title">
+			<template #label>{{ i18n.ts.title }}</template>
+		</MkInput>
+
+		<MkTextarea v-model="description" :max="500">
+			<template #label>{{ i18n.ts.description }}</template>
+		</MkTextarea>
+
+		<div class="_gaps_s">
+			<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : '' }">
+				<div class="name">{{ file.name }}</div>
+				<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
+			</div>
+			<MkButton primary @click="chooseFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</MkButton>
+		</div>
+
+		<MkSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</MkSwitch>
+
+		<div class="_buttons">
+			<MkButton v-if="props.post != null" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+			<MkButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</MkButton>
+
+			<MkButton v-if="props.post != null" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+		</div>
+	</div>
+</PageWithHeader>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import { selectFile } from '@/utility/drive.js';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import { useRouter } from '@/router.js';
+
+const router = useRouter();
+
+const props = defineProps<{
+	post: Misskey.entities.GalleryPost | null;
+}>();
+
+const files = ref(props.post?.files ?? []);
+const description = ref(props.post?.description ?? null);
+const title = ref(props.post?.title ?? '');
+const isSensitive = ref(props.post?.isSensitive ?? false);
+
+function chooseFile(evt) {
+	selectFile({
+		anchorElement: evt.currentTarget ?? evt.target,
+		multiple: true,
+	}).then(selected => {
+		files.value = files.value.concat(selected);
+	});
+}
+
+function remove(file) {
+	files.value = files.value.filter(f => f.id !== file.id);
+}
+
+async function save() {
+	if (props.post != null) {
+		await os.apiWithDialog('gallery/posts/update', {
+			postId: props.post.id,
+			title: title.value,
+			description: description.value,
+			fileIds: files.value.map(file => file.id),
+			isSensitive: isSensitive.value,
+		});
+		router.push('/gallery/:postId', {
+			params: {
+				postId: props.post.id,
+			},
+		});
+	} else {
+		const created = await os.apiWithDialog('gallery/posts/create', {
+			title: title.value,
+			description: description.value,
+			fileIds: files.value.map(file => file.id),
+			isSensitive: isSensitive.value,
+		});
+		router.push('/gallery/:postId', {
+			params: {
+				postId: created.id,
+			},
+		});
+	}
+}
+
+async function del() {
+	if (props.post == null) return;
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.deleteConfirm,
+	});
+	if (canceled) return;
+	await os.apiWithDialog('gallery/posts/delete', {
+		postId: props.post.id,
+	});
+	router.push('/gallery');
+}
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => []);
+</script>
+
+<style lang="scss" scoped>
+.wqugxsfx {
+	height: 200px;
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	position: relative;
+
+	> .name {
+		position: absolute;
+		top: 8px;
+		left: 9px;
+		padding: 8px;
+		background: var(--MI_THEME-panel);
+	}
+
+	> .remove {
+		position: absolute;
+		top: 8px;
+		right: 9px;
+		padding: 8px;
+		background: var(--MI_THEME-panel);
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index 09bc6375ac..12d1a37390 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -4,161 +4,35 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader :actions="headerActions" :tabs="headerTabs">
-	<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
-		<MkSuspense :p="init" class="_gaps">
-			<MkInput v-model="title">
-				<template #label>{{ i18n.ts.title }}</template>
-			</MkInput>
-
-			<MkTextarea v-model="description" :max="500">
-				<template #label>{{ i18n.ts.description }}</template>
-			</MkTextarea>
-
-			<div class="_gaps_s">
-				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : '' }">
-					<div class="name">{{ file.name }}</div>
-					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
-				</div>
-				<MkButton primary @click="chooseFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</MkButton>
-			</div>
-
-			<MkSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</MkSwitch>
-
-			<div class="_buttons">
-				<MkButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-				<MkButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</MkButton>
-
-				<MkButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
-			</div>
-		</MkSuspense>
-	</div>
-</PageWithHeader>
+<MkSuspense v-slot="{ result }" :p="_fetch_">
+	<XRoot :post="result"/>
+</MkSuspense>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref } from 'vue';
+import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/MkInput.vue';
-import MkTextarea from '@/components/MkTextarea.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import { selectFile } from '@/utility/drive.js';
-import * as os from '@/os.js';
+import XRoot from './edit.root.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
-import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
-import { useRouter } from '@/router.js';
-
-const router = useRouter();
+import { definePage } from '@/page.js';
 
 const props = defineProps<{
-	postId?: string;
+	postId?: string,
 }>();
 
-const init = ref<(() => Promise<any>) | null>(null);
-const files = ref<Misskey.entities.DriveFile[]>([]);
-const description = ref<string | null>(null);
-const title = ref<string | null>(null);
-const isSensitive = ref(false);
-
-function chooseFile(evt) {
-	selectFile({
-		anchorElement: evt.currentTarget ?? evt.target,
-		multiple: true,
-	}).then(selected => {
-		files.value = files.value.concat(selected);
-	});
-}
-
-function remove(file) {
-	files.value = files.value.filter(f => f.id !== file.id);
-}
-
-async function save() {
-	if (props.postId) {
-		await os.apiWithDialog('gallery/posts/update', {
-			postId: props.postId,
-			title: title.value,
-			description: description.value,
-			fileIds: files.value.map(file => file.id),
-			isSensitive: isSensitive.value,
-		});
-		router.push('/gallery/:postId', {
-			params: {
-				postId: props.postId,
-			},
-		});
+function _fetch_() {
+	if (props.postId == null) {
+		return Promise.resolve(null);
 	} else {
-		const created = await os.apiWithDialog('gallery/posts/create', {
-			title: title.value,
-			description: description.value,
-			fileIds: files.value.map(file => file.id),
-			isSensitive: isSensitive.value,
-		});
-		router.push('/gallery/:postId', {
-			params: {
-				postId: created.id,
-			},
+		return misskeyApi('gallery/posts/show', {
+			postId: props.postId,
 		});
 	}
 }
 
-async function del() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.ts.deleteConfirm,
-	});
-	if (canceled) return;
-	await os.apiWithDialog('gallery/posts/delete', {
-		postId: props.postId,
-	});
-	router.push('/gallery');
-}
-
-watch(() => props.postId, () => {
-	init.value = () => props.postId ? misskeyApi('gallery/posts/show', {
-		postId: props.postId,
-	}).then(post => {
-		files.value = post.files ?? [];
-		title.value = post.title;
-		description.value = post.description;
-		isSensitive.value = post.isSensitive;
-	}) : Promise.resolve(null);
-}, { immediate: true });
-
-const headerActions = computed(() => []);
-
-const headerTabs = computed(() => []);
-
 definePage(() => ({
 	title: props.postId ? i18n.ts.edit : i18n.ts.postToGallery,
 	icon: 'ti ti-pencil',
 }));
 </script>
-
-<style lang="scss" scoped>
-.wqugxsfx {
-	height: 200px;
-	background-size: contain;
-	background-position: center;
-	background-repeat: no-repeat;
-	position: relative;
-
-	> .name {
-		position: absolute;
-		top: 8px;
-		left: 9px;
-		padding: 8px;
-		background: var(--MI_THEME-panel);
-	}
-
-	> .remove {
-		position: absolute;
-		top: 8px;
-		right: 9px;
-		padding: 8px;
-		background: var(--MI_THEME-panel);
-	}
-}
-</style>