From 3399c786a863369ea530fed8ab24e74628826221 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 20 Mar 2025 13:33:01 +0900
Subject: [PATCH] refactor(frontend): refactor components

---
 .../src/components/MkPageWithAnimBg.vue       | 21 +++++
 .../frontend/src/pages/install-extensions.vue | 77 +++++++++----------
 packages/frontend/src/pages/miauth.vue        |  9 +--
 packages/frontend/src/pages/oauth.vue         |  7 +-
 .../frontend/src/pages/signup-complete.vue    | 11 ++-
 packages/frontend/src/pages/welcome.setup.vue |  7 +-
 6 files changed, 72 insertions(+), 60 deletions(-)
 create mode 100644 packages/frontend/src/components/MkPageWithAnimBg.vue

diff --git a/packages/frontend/src/components/MkPageWithAnimBg.vue b/packages/frontend/src/components/MkPageWithAnimBg.vue
new file mode 100644
index 0000000000..a00b196a04
--- /dev/null
+++ b/packages/frontend/src/components/MkPageWithAnimBg.vue
@@ -0,0 +1,21 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div>
+	<MkAnimBg style="position: absolute;"/>
+	<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import MkAnimBg from '@/components/MkAnimBg.vue';
+</script>
+
+<style lang="scss" module>
+
+</style>
diff --git a/packages/frontend/src/pages/install-extensions.vue b/packages/frontend/src/pages/install-extensions.vue
index 47c49e547a..40d58027de 100644
--- a/packages/frontend/src/pages/install-extensions.vue
+++ b/packages/frontend/src/pages/install-extensions.vue
@@ -4,46 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
-	<MkAnimBg style="position: absolute;"/>
-	<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
-		<MkStickyContainer>
-			<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-			<MkSpacer :contentMax="550">
-				<MkLoading v-if="uiPhase === 'fetching'"/>
-				<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
-					<template #additionalInfo>
-						<FormSection>
-							<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(--MI_THEME-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>
-					</div>
-					<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
-					<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
-					<div class="_buttonsCenter">
-						<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
-					</div>
+<MkPageWithAnimBg>
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :contentMax="550">
+			<MkLoading v-if="uiPhase === 'fetching'"/>
+			<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
+				<template #additionalInfo>
+					<FormSection>
+						<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(--MI_THEME-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>
 				</div>
-			</MkSpacer>
-		</MkStickyContainer>
-	</div>
-</div>
+				<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
+				<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
+				<div class="_buttonsCenter">
+					<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
+				</div>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
+</MkPageWithAnimBg>
 </template>
 
 <script lang="ts" setup>
@@ -63,7 +60,7 @@ import { parseThemeCode, installTheme } from '@/theme.js';
 import { unisonReload } from '@/utility/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 
 const uiPhase = ref<'fetching' | 'confirm' | 'error'>('fetching');
 const errorKV = ref<{
diff --git a/packages/frontend/src/pages/miauth.vue b/packages/frontend/src/pages/miauth.vue
index 79437f3f17..687315e9b7 100644
--- a/packages/frontend/src/pages/miauth.vue
+++ b/packages/frontend/src/pages/miauth.vue
@@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<div :class="$style.form">
 			<MkAuthConfirm
@@ -25,16 +24,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkAuthConfirm>
 		</div>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>
 
 <script lang="ts" setup>
 import { computed, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
-
 import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { definePage } from '@/page.js';
diff --git a/packages/frontend/src/pages/oauth.vue b/packages/frontend/src/pages/oauth.vue
index e8b88b4bc9..49664c8b08 100644
--- a/packages/frontend/src/pages/oauth.vue
+++ b/packages/frontend/src/pages/oauth.vue
@@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<div :class="$style.form">
 			<MkAuthConfirm
@@ -19,12 +18,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			/>
 		</div>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import { definePage } from '@/page.js';
 import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
 
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index e37f05f1be..6dc07ff1ee 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<form :class="$style.form" class="_panel" @submit.prevent="submit()">
 			<div :class="$style.banner">
@@ -21,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</form>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -64,8 +63,8 @@ function submit() {
 	min-height: 100svh;
 	padding: 32px 32px 64px 32px;
 	box-sizing: border-box;
-display: grid;
-place-content: center;
+	display: grid;
+	place-content: center;
 }
 
 .form {
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index d9e3ca9966..7a4fa20bcf 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<form :class="$style.form" class="_panel" @submit.prevent="submit()">
 			<div :class="$style.title">
@@ -35,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</form>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>
 
 <script lang="ts" setup>
@@ -46,7 +45,7 @@ import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import { login } from '@/accounts.js';
 
 const username = ref('');