enhance(frontend): サーバーの初期設定ウィザードをやり直せるように

1 files changed, 57 insertions, 0 deletions

diff --git a/packages/frontend/src/components/MkServerSetupWizardDialog.vue b/packages/frontend/src/components/MkServerSetupWizardDialog.vue
new file mode 100644
index 0000000000..ea2c5dd47f
--- /dev/null
+++ b/packages/frontend/src/components/MkServerSetupWizardDialog.vue
@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="windowEl"
+	:withOkButton="false"
+	:okButtonDisabled="false"
+	:width="500"
+	:height="600"
+	@close="onCloseModalWindow"
+	@closed="emit('closed')"
+>
+	<template #header>Server setup wizard</template>
+	<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
+		<Suspense>
+			<template #default>
+				<MkServerSetupWizard @finished="onWizardFinished"/>
+			</template>
+			<template #fallback>
+				<MkLoading/>
+			</template>
+		</Suspense>
+	</div>
+</MkModalWindow>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkServerSetupWizard from '@/components/MkServerSetupWizard.vue';
+
+const emit = defineEmits<{
+	(ev: 'closed'),
+}>();
+
+const windowEl = useTemplateRef('windowEl');
+
+function onWizardFinished() {
+	windowEl.value?.close();
+}
+
+function onCloseModalWindow() {
+	windowEl.value?.close();
+}
+</script>
+
+<style module lang="scss">
+.root {
+	max-height: 410px;
+	height: 410px;
+	display: flex;
+	flex-direction: column;
+}
+</style>