refactor(client): Create root.vue and select the ui in it (#9312)

packages/client/src/init.ts

@@ -38,6 +38,7 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
+import rootComponent from '@/root.vue';
 
 (async () => {
 	console.info(`Misskey v${version}`);
@@ -158,13 +159,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		initializeSw();
 	});
 
-	const app = createApp(
+	const app = createApp(rootComponent);
-		window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
-		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
-		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
-		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-		defineAsyncComponent(() => import('@/ui/universal.vue')),
-	);
 
 	if (_DEV_) {
 		app.config.performance = true;

packages/client/src/root.vue

@@ -0,0 +1,19 @@
+<template>
+<ZenUi v-if="searchString === '?zen'" />
+<VisitorUi v-else-if="!$i" />
+<DeckUi v-else-if="ui === 'deck'" />
+<ClassicUi v-else-if="ui === 'classic'" />
+<UniversalUi v-else />
+</template>
+
+<script lang="ts" setup>
+import ZenUi from '@/ui/zen.vue';
+import VisitorUi from '@/ui/visitor.vue';
+import DeckUi from '@/ui/deck.vue';
+import ClassicUi from '@/ui/classic.vue';
+import UniversalUi from '@/ui/universal.vue';
+import { $i } from '@/account';
+import { ui } from '@/config';
+
+const searchString = window.location.search;
+</script>