Refactor admin/index to use Composition API (#8662)

* refactor(client): refactor admin/index to use Composition API

* fix(client): fix navigation to initial admin pages

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

* fix(client): re-add abuses page to admin/index

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

packages/client/src/pages/admin/index.vue

@@ -1,6 +1,6 @@
 <template>
 <div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-	<div v-if="!narrow || page == null" class="nav">
+	<div v-if="!narrow || initialPage == null" class="nav">
 		<MkHeader :info="header"></MkHeader>
 	
 		<MkSpacer :content-max="700" :margin-min="16">
@@ -12,21 +12,21 @@
 				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
 				<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ $ts.configure }}</MkA></MkInfo>
 
-				<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
+				<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
 			</div>
 		</MkSpacer>
 	</div>
-	<div class="main">
+	<div v-if="!(narrow && initialPage == null)" class="main">
 		<MkStickyContainer>
 			<template #header><MkHeader v-if="childInfo && !childInfo.hideHeader" :info="childInfo"/></template>
-			<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
+			<component :is="component" :ref="el => pageChanged(el)" :key="initialPage" v-bind="pageProps"/>
 		</MkStickyContainer>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineAsyncComponent, defineComponent, isRef, nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { defineAsyncComponent, nextTick, onMounted, onUnmounted, provide, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
 import MkInfo from '@/components/ui/info.vue';
@@ -35,62 +35,42 @@ import { instance } from '@/instance';
 import * as symbols from '@/symbols';
 import * as os from '@/os';
 import { lookupUser } from '@/scripts/lookup-user';
+import { MisskeyNavigator } from '@/scripts/navigate';
 
-export default defineComponent({
+const isEmpty = (x: string | null) => x == null || x === '';
-	components: {
-		MkSuperMenu,
-		MkInfo,
-	},
 
-	provide: {
+const nav = new MisskeyNavigator();
-		shouldOmitHeaderTitle: false,
-	},
 
-	props: {
+const indexInfo = {
-		initialPage: {
-			type: String,
-			required: false
-		}
-	},
-
-	setup(props, context) {
-		const indexInfo = {
 	title: i18n.ts.controlPanel,
 	icon: 'fas fa-cog',
 	bg: 'var(--bg)',
 	hideHeader: true,
-		};
+};
-		const INFO = ref(indexInfo);
-		const childInfo = ref(null);
-		const page = ref(props.initialPage);
-		const narrow = ref(false);
-		const view = ref(null);
-		const el = ref(null);
-		const pageChanged = (page) => {
-			if (page == null) return;
-			const viewInfo = page[symbols.PAGE_INFO];
-			if (isRef(viewInfo)) {
-				watch(viewInfo, () => {
-					childInfo.value = viewInfo.value;
-				}, { immediate: true });
-			} else {
-				childInfo.value = viewInfo;
-			}
-		};
-		const pageProps = ref({});
 
-		const isEmpty = (x: any) => x == null || x == '';
+const props = defineProps<{
+	initialPage?: string,
+}>();
 
-		const noMaintainerInformation = ref(false);
+provide('shouldOmitHeaderTitle', false);
-		const noBotProtection = ref(false);
 
-		os.api('meta', { detail: true }).then(meta => {
+let INFO = $ref(indexInfo);
-			// TODO: 設定が完了しても残ったままになるので、ストリーミングでmeta更新イベントを受け取ってよしなに更新する
+let childInfo = $ref(null);
-			noMaintainerInformation.value = isEmpty(meta.maintainerName) || isEmpty(meta.maintainerEmail);
+let page = $ref(props.initialPage);
-			noBotProtection.value = !meta.enableHcaptcha && !meta.enableRecaptcha;
+let narrow = $ref(false);
-		});
+let view = $ref(null);
+let el = $ref(null);
+let pageProps = $ref({});
+let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+let noBotProtection = !instance.enableHcaptcha && !instance.enableRecaptcha;
 
-		const menuDef = computed(() => [{
+const NARROW_THRESHOLD = 600;
+const ro = new ResizeObserver((entries, observer) => {
+	if (entries.length === 0) return;
+	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
+});
+
+const menuDef = $computed(() => [{
 	title: i18n.ts.quickAction,
 	items: [{
 		type: 'button',
@@ -103,114 +83,115 @@ export default defineComponent({
 		text: i18n.ts.invite,
 		action: invite,
 	}] : [])],
-		}, {
+}, {
 	title: i18n.ts.administration,
 	items: [{
 		icon: 'fas fa-tachometer-alt',
 		text: i18n.ts.dashboard,
 		to: '/admin/overview',
-				active: page.value === 'overview',
+		active: props.initialPage === 'overview',
 	}, {
 		icon: 'fas fa-users',
 		text: i18n.ts.users,
 		to: '/admin/users',
-				active: page.value === 'users',
+		active: props.initialPage === 'users',
 	}, {
 		icon: 'fas fa-laugh',
 		text: i18n.ts.customEmojis,
 		to: '/admin/emojis',
-				active: page.value === 'emojis',
+		active: props.initialPage === 'emojis',
 	}, {
 		icon: 'fas fa-globe',
 		text: i18n.ts.federation,
 		to: '/admin/federation',
-				active: page.value === 'federation',
+		active: props.initialPage === 'federation',
 	}, {
 		icon: 'fas fa-clipboard-list',
 		text: i18n.ts.jobQueue,
 		to: '/admin/queue',
-				active: page.value === 'queue',
+		active: props.initialPage === 'queue',
 	}, {
 		icon: 'fas fa-cloud',
 		text: i18n.ts.files,
 		to: '/admin/files',
-				active: page.value === 'files',
+		active: props.initialPage === 'files',
 	}, {
 		icon: 'fas fa-broadcast-tower',
 		text: i18n.ts.announcements,
 		to: '/admin/announcements',
-				active: page.value === 'announcements',
+		active: props.initialPage === 'announcements',
 	}, {
 		icon: 'fas fa-audio-description',
 		text: i18n.ts.ads,
 		to: '/admin/ads',
-				active: page.value === 'ads',
+		active: props.initialPage === 'ads',
 	}, {
 		icon: 'fas fa-exclamation-circle',
 		text: i18n.ts.abuseReports,
 		to: '/admin/abuses',
-				active: page.value === 'abuses',
+		active: props.initialPage === 'abuses',
 	}],
-		}, {
+}, {
 	title: i18n.ts.settings,
 	items: [{
 		icon: 'fas fa-cog',
 		text: i18n.ts.general,
 		to: '/admin/settings',
-				active: page.value === 'settings',
+		active: props.initialPage === 'settings',
 	}, {
 		icon: 'fas fa-envelope',
 		text: i18n.ts.emailServer,
 		to: '/admin/email-settings',
-				active: page.value === 'email-settings',
+		active: props.initialPage === 'email-settings',
 	}, {
 		icon: 'fas fa-cloud',
 		text: i18n.ts.objectStorage,
 		to: '/admin/object-storage',
-				active: page.value === 'object-storage',
+		active: props.initialPage === 'object-storage',
 	}, {
 		icon: 'fas fa-lock',
 		text: i18n.ts.security,
 		to: '/admin/security',
-				active: page.value === 'security',
+		active: props.initialPage === 'security',
 	}, {
 		icon: 'fas fa-globe',
 		text: i18n.ts.relays,
 		to: '/admin/relays',
-				active: page.value === 'relays',
+		active: props.initialPage === 'relays',
 	}, {
 		icon: 'fas fa-share-alt',
 		text: i18n.ts.integration,
 		to: '/admin/integrations',
-				active: page.value === 'integrations',
+		active: props.initialPage === 'integrations',
 	}, {
 		icon: 'fas fa-ban',
 		text: i18n.ts.instanceBlocking,
 		to: '/admin/instance-block',
-				active: page.value === 'instance-block',
+		active: props.initialPage === 'instance-block',
 	}, {
 		icon: 'fas fa-ghost',
 		text: i18n.ts.proxyAccount,
 		to: '/admin/proxy-account',
-				active: page.value === 'proxy-account',
+		active: props.initialPage === 'proxy-account',
 	}, {
 		icon: 'fas fa-cogs',
 		text: i18n.ts.other,
 		to: '/admin/other-settings',
-				active: page.value === 'other-settings',
+		active: props.initialPage === 'other-settings',
 	}],
-		}, {
+}, {
 	title: i18n.ts.info,
 	items: [{
 		icon: 'fas fa-database',
 		text: i18n.ts.database,
 		to: '/admin/database',
-				active: page.value === 'database',
+		active: props.initialPage === 'database',
 	}],
-		}]);
+}]);
-		const component = computed(() => {
+
-			if (page.value == null) return null;
+const component = $computed(() => {
-			switch (page.value) {
+	if (props.initialPage == null) return null;
+	switch (props.initialPage) {
 		case 'overview': return defineAsyncComponent(() => import('./overview.vue'));
 		case 'users': return defineAsyncComponent(() => import('./users.vue'));
 		case 'emojis': return defineAsyncComponent(() => import('./emojis.vue'));
@@ -231,35 +212,54 @@ export default defineComponent({
 		case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue'));
 		case 'other-settings': return defineAsyncComponent(() => import('./other-settings.vue'));
 	}
-		});
+});
 
-		watch(component, () => {
+watch(component, () => {
-			pageProps.value = {};
+	pageProps = {};
 
 	nextTick(() => {
-				scroll(el.value, { top: 0 });
+		scroll(el, { top: 0 });
 	});
-		}, { immediate: true });
+}, { immediate: true });
 
-		watch(() => props.initialPage, () => {
+watch(() => props.initialPage, () => {
-			if (props.initialPage == null && !narrow.value) {
+	if (props.initialPage == null && !narrow) {
-				page.value = 'overview';
+		nav.push('/admin/overview');
 	} else {
-				page.value = props.initialPage;
 		if (props.initialPage == null) {
-					INFO.value = indexInfo;
+			INFO = indexInfo;
 		}
 	}
-		});
+});
 
-		onMounted(() => {
+watch(narrow, () => {
-			narrow.value = el.value.offsetWidth < 800;
+	if (props.initialPage == null && !narrow) {
-			if (!narrow.value) {
+		nav.push('/admin/overview');
-				page.value = 'overview';
 	}
-		});
+});
 
-		const invite = () => {
+onMounted(() => {
+	ro.observe(el);
+
+	narrow = el.offsetWidth < NARROW_THRESHOLD;
+	if (props.initialPage == null && !narrow) {
+		nav.push('/admin/overview');
+	}
+});
+
+onUnmounted(() => {
+	ro.disconnect();
+});
+
+const pageChanged = (page) => {
+	if (page == null) {
+		childInfo = null;
+	} else {
+		childInfo = page[symbols.PAGE_INFO];
+	}
+};
+
+const invite = () => {
 	os.api('admin/invite').then(x => {
 		os.alert({
 			type: 'info',
@@ -271,9 +271,9 @@ export default defineComponent({
 			text: e
 		});
 	});
-		};
+};
 
-		const lookup = (ev) => {
+const lookup = (ev) => {
 	os.popupMenu([{
 		text: i18n.ts.user,
 		icon: 'fas fa-user',
@@ -299,28 +299,13 @@ export default defineComponent({
 			alert('TODO');
 		}
 	}], ev.currentTarget ?? ev.target);
-		};
+};
 
-		return {
+defineExpose({
 	[symbols.PAGE_INFO]: INFO,
-			menuDef,
 	header: {
 		title: i18n.ts.controlPanel,
-			},
+	}
-			noMaintainerInformation,
-			noBotProtection,
-			page,
-			narrow,
-			view,
-			el,
-			pageChanged,
-			childInfo,
-			pageProps,
-			component,
-			invite,
-			lookup,
-		};
-	},
 });
 </script>