From 244c4c0b507647ef8f727aecaf1bd23367aeffa9 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 16 Nov 2024 20:35:34 +0900
Subject: [PATCH] perf?(frontend): DI.pageMetadata, DI.router

---
 .../frontend/src/components/MkPageWindow.vue  |  19 +-
 .../src/components/global/MkPageHeader.vue    |  22 +-
 .../src/components/global/RouterView.vue      |  29 +-
 packages/frontend/src/di.ts                   |  16 +
 packages/frontend/src/pages/admin/index.vue   | 408 +++++++++---------
 .../frontend/src/pages/admin/performance.vue  |   4 +-
 packages/frontend/src/pages/flash/flash.vue   |  15 +-
 packages/frontend/src/pages/gallery/post.vue  |   5 +-
 packages/frontend/src/pages/note.vue          |  12 +-
 packages/frontend/src/pages/page.vue          |  15 +-
 .../frontend/src/pages/settings/index.vue     | 394 ++++++++---------
 .../frontend/src/pages/user/followers.vue     |   7 +-
 .../frontend/src/pages/user/following.vue     |   7 +-
 packages/frontend/src/pages/user/index.vue    |  14 +-
 packages/frontend/src/router/definition.ts    |   2 +
 packages/frontend/src/router/main.ts          |   3 +-
 packages/frontend/src/router/supplier.ts      |   7 +-
 .../frontend/src/scripts/page-metadata.ts     | 108 ++---
 .../frontend/src/scripts/tms/provide-ui.ts    |  25 --
 packages/frontend/src/ui/classic.vue          |  35 +-
 packages/frontend/src/ui/deck.vue             |   3 -
 packages/frontend/src/ui/deck/main-column.vue |  21 +-
 packages/frontend/src/ui/minimum.vue          |  31 +-
 packages/frontend/src/ui/universal.vue        |  33 +-
 packages/frontend/src/ui/visitor.vue          |  34 +-
 packages/frontend/src/ui/zen.vue              |  32 +-
 26 files changed, 603 insertions(+), 698 deletions(-)
 create mode 100644 packages/frontend/src/di.ts
 delete mode 100644 packages/frontend/src/scripts/tms/provide-ui.ts

diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 87686a6499a8..da717510a7b6 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -16,9 +16,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="emit('closed')"
 >
 	<template #header>
-		<template v-if="pageMetadata">
-			<i v-if="pageMetadata.icon" :class="pageMetadata.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageMetadata.title }}</span>
+		<template v-if="routingPageMetadataRef">
+			<i v-if="routingPageMetadataRef.icon" :class="routingPageMetadataRef.icon" style="margin-right: 0.5em;"></i>
+			<span>{{ routingPageMetadataRef.title }}</span>
 		</template>
 	</template>
 
@@ -38,11 +38,14 @@ import { popout as _popout } from '@/scripts/popout.js';
 import { copyText } from '@/scripts/tms/clipboard.js';
 import { useScrollPositionManager } from '@/nirax.js';
 import { i18n } from '@/i18n.js';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { openingWindowsCount } from '@/os.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { useRouterFactory } from '@/router/supplier.js';
 import { mainRouter } from '@/router/main.js';
+import { DI } from '@/di.js';
+
+const { routingPageMetadataRef } = useRoutingPageMetadata();
 
 const props = defineProps<{
 	initialPath: string;
@@ -56,7 +59,6 @@ const routerFactory = useRouterFactory();
 const windowRouter = routerFactory(props.initialPath);
 
 const contents = shallowRef<HTMLElement | null>(null);
-const pageMetadata = ref<null | PageMetadata>(null);
 const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
 const history = ref<{ path: string; key: string; }[]>([{
 	path: windowRouter.getCurrentPath(),
@@ -100,12 +102,7 @@ windowRouter.addListener('replace', ctx => {
 
 windowRouter.init();
 
-provide('router', windowRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-});
-provideReactiveMetadata(pageMetadata);
+provide(DI.router, windowRouter);
 provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
 provide('forceSpacerMin', true);
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index fd421ec9a8bc..4a5f7f04a14a 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -11,18 +11,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft"/>
 
-		<template v-if="pageMetadata">
+		<template v-if="pageMetadataRef">
 			<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
-				<div v-if="pageMetadata.avatar" :class="$style.titleAvatarContainer">
-					<MkAvatar :class="$style.titleAvatar" :user="pageMetadata.avatar" indicator/>
+				<div v-if="pageMetadataRef.withUserAvatar" :class="$style.titleAvatarContainer">
+					<MkAvatar :class="$style.titleAvatar" :user="pageMetadataRef.withUserAvatar" indicator/>
 				</div>
-				<i v-else-if="pageMetadata.icon" :class="[$style.titleIcon, pageMetadata.icon]"></i>
+				<i v-else-if="pageMetadataRef.icon" :class="[$style.titleIcon, pageMetadataRef.icon]"></i>
 
 				<div :class="$style.title">
-					<MkUserName v-if="pageMetadata.userName" :user="pageMetadata.userName" :nowrap="true"/>
-					<div v-else-if="pageMetadata.title">{{ pageMetadata.title }}</div>
-					<div v-if="pageMetadata.subtitle" :class="$style.subtitle">
-						{{ pageMetadata.subtitle }}
+					<MkUserName v-if="pageMetadataRef.withUserName" :user="pageMetadataRef.withUserName" :nowrap="true"/>
+					<div v-else-if="pageMetadataRef.title">{{ pageMetadataRef.title }}</div>
+					<div v-if="pageMetadataRef.subtitle" :class="$style.subtitle">
+						{{ pageMetadataRef.subtitle }}
 					</div>
 				</div>
 			</div>
@@ -67,9 +67,11 @@ import { onMounted, onUnmounted, ref, inject, shallowRef, computed } from 'vue';
 import { scrollToTop } from '@@/js/scroll.js';
 import XTabs, { Tab } from './MkPageHeader.tabs.vue';
 import type { PageHeaderItem } from '@/types/page-header.js';
-import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import MkButton from '@/components/MkButton.vue';
+import { DI } from '@/di.js';
+
+const pageMetadataRef = inject(DI.pageMetadata);
 
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
@@ -87,8 +89,6 @@ const emit = defineEmits<{
 	(ev: 'update:tab', key: string): void;
 }>();
 
-const pageMetadata = injectReactiveMetadata();
-
 const hideTitle = inject<boolean>('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject<boolean>('shouldHeaderThin', false);
 
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 252adfc7fce9..e072debba265 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -20,24 +20,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
-import { IRouter, Resolved } from '@/nirax.js';
+import { IRouter, Resolved, RouterEvent } from '@/nirax.js';
 import { defaultStore } from '@/store.js';
 import { globalEvents } from '@/events.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
+import { DI } from '@/di.js';
 
 const props = defineProps<{
 	router?: IRouter;
 	nested?: boolean;
 }>();
 
-const router = props.router ?? inject<IRouter | null>('router', null);
+const router = props.router ?? inject(DI.router, null);
 
 if (router == null) {
 	throw new Error('no router provided');
 }
 
-const currentDepth = inject<number>('routerCurrentDepth', 0);
-provide('routerCurrentDepth', currentDepth + 1);
+const currentDepth = inject(DI.routerDepth, 0);
+provide(DI.routerDepth, currentDepth + 1);
 
 function resolveNested(current: Resolved, d = 0): Resolved | null {
 	if (!props.nested) return current;
@@ -58,12 +59,12 @@ const currentPageComponent = shallowRef('component' in current.route ? current.r
 const currentPageProps = ref(current.props);
 const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
 
-function onChange({ resolved, key: newKey }) {
-	const current = resolveNested(resolved);
-	if (current == null || 'redirect' in current.route) return;
-	currentPageComponent.value = current.route.component;
-	currentPageProps.value = current.props;
-	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
+const onChange: RouterEvent['change'] = ({ resolved, key: newKey }) => {
+	const current_ = resolveNested(resolved);
+	if (current_ == null || 'redirect' in current_.route) return;
+	currentPageComponent.value = current_.route.component;
+	currentPageProps.value = current_.props;
+	key.value = newKey + JSON.stringify(Object.fromEntries(current_.props));
 
 	nextTick(() => {
 		// ページ遷移完了後に再びキャッシュを有効化
@@ -71,12 +72,11 @@ function onChange({ resolved, key: newKey }) {
 			clearCacheRequested.value = false;
 		}
 	});
-}
+};
 
 router.addListener('change', onChange);
 
-// #region キャッシュ制御
-
+//#region キャッシュ制御
 /**
  * キャッシュクリアが有効になったら、全キャッシュをクリアする
  *
@@ -92,8 +92,7 @@ globalEvents.on('requestClearPageCache', () => {
 		clearCacheRequested.value = true;
 	}
 });
-
-// #endregion
+//#endregion
 
 onBeforeUnmount(() => {
 	router.removeListener('change', onChange);
diff --git a/packages/frontend/src/di.ts b/packages/frontend/src/di.ts
new file mode 100644
index 000000000000..cfd688d32773
--- /dev/null
+++ b/packages/frontend/src/di.ts
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { InjectionKey, ShallowRef } from 'vue';
+import type { IRouter } from '@/nirax.js';
+import type { PageMetadata, PageMetadataReceiver } from '@/scripts/page-metadata.js';
+
+export const DI = Object.freeze({
+	router: Symbol() as InjectionKey<IRouter>,
+	routerFactory: Symbol() as InjectionKey<((path: string) => IRouter)>,
+	routerDepth: Symbol() as InjectionKey<number>,
+	pageMetadata: Symbol() as InjectionKey<Readonly<ShallowRef<PageMetadata>>>,
+	pageMetadataReceiver: Symbol() as InjectionKey<PageMetadataReceiver>,
+});
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index d32e2832ef9b..135794937ccd 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-if="childPageMetadata == null"/></template>
+	<template #header><MkPageHeader v-if="childPage == null && !isWide"/></template>
 	<template #default>
 		<div ref="rootEl" :class="[$style.root, { [$style.wide]: isWide }]">
 			<div v-if="showNav" :class="$style.navRoot">
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkInfo v-if="noEmailServer" warn>{{ i18n.ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
 						</div>
 
-						<TmsSuperMenu :def="menuDef" :wideMode="isWide"></TmsSuperMenu>
+						<TmsSuperMenu :def="menuDef" :wideMode="isWide"/>
 					</div>
 				</MkSpacer>
 			</div>
@@ -39,14 +39,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
 import { lookupUser, lookupUserByEmail, lookupFile } from '@/scripts/admin-lookup.js';
 import { lookup } from '@/scripts/lookup.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { PageMetadata, definePageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { definePageMetadata, useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/router/supplier.js';
 import MkInfo from '@/components/MkInfo.vue';
 import TmsSuperMenu from '@/components/TmsSuperMenu.vue';
@@ -55,18 +55,8 @@ import { type ISuperMenuDefinitions } from '@/components/TmsSuperMenu.impl.js';
 const ROOT_PAGE_PATH = '/admin' as const;
 const INITIAL_PAGE_PATH = '/admin/overview' as const;
 
-const rootEl = shallowRef<HTMLElement | null>(null);
-
-const showNav = computed(() => {
-	if (isWide.value) return true; // wideなら常に表示
-	return isRoot.value; // rootなら表示
-});
-const showMain = computed(() => {
-	if (!isRoot.value) return true; // 非rootなら常に表示
-	return isWide.value; // wideなら表示
-});
-
-const isEmpty = (x: unknown): boolean => x == null || x === '';
+//#region admin info
+const isEmpty = (x: string | null | undefined) => x == null || x === '';
 
 const thereIsUnresolvedAbuseReport = ref(false);
 onMounted(() => {
@@ -83,235 +73,76 @@ const noMaintainerInformation = computed(() => isEmpty(instance.maintainerName)
 const noInquiryUrl = computed(() => isEmpty(instance.inquiryUrl));
 const noBotProtection = computed(() => !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha && !instance.enableTurnstile && !instance.enableMcaptcha);
 const noEmailServer = computed(() => !instance.enableEmail);
+//#endregion
+
+//#region admin routing
+const { routingPageMetadataRef } = useRoutingPageMetadata();
+
+const rootEl = useTemplateRef('rootEl');
 
 const router = useRouter();
-const currentPage = computed(() => router.currentRef.value.child);
-const isRoot = computed(() => currentPage.value?.route.name == null);
 
-watch(router.currentRef, (to) => {
-	if (to.route.path === ROOT_PAGE_PATH && to.child?.route.name == null) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
-	}
+const childPage = computed(() => {
+	if (router.currentRef.value.route.path !== ROOT_PAGE_PATH) return null;
+	if (router.currentRef.value.child?.route.name === '_empty_') return null;
+	return router.currentRef.value.child ?? null;
 });
 
 const isWide = ref(false);
 const WIDE_THRESHOLD = 600 as const;
 
-watch(isWide, () => {
-	if (isRoot.value) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
-	}
-});
-
 const ro = new ResizeObserver((entries) => {
-	const inlineSize = entries.at(0)?.borderBoxSize.at(0)?.inlineSize;
-	if (inlineSize == null) return;
+	const inlineSize = entries.at(0)?.borderBoxSize.at(0)?.inlineSize ?? 0;
+	if (inlineSize === 0) return;
 	isWide.value = inlineSize >= WIDE_THRESHOLD;
 });
 
 onMounted(() => {
 	if (rootEl.value != null) {
-		isWide.value = rootEl.value.offsetWidth >= WIDE_THRESHOLD;
 		ro.observe(rootEl.value);
 	}
-	if (isRoot.value) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
-	}
 });
 
-onActivated(() => {
-	if (rootEl.value != null) {
-		isWide.value = rootEl.value.offsetWidth >= WIDE_THRESHOLD;
+onUnmounted(() => {
+	ro.disconnect();
+});
+
+watch([router.currentRef, isWide], ([current, wide]) => {
+	if (!wide) return;
+	if (current.route.path !== ROOT_PAGE_PATH) return;
+	if (current.child == null || current.child.route.name === '_empty_') {
+		router.replace(INITIAL_PAGE_PATH);
 	}
-	if (isRoot.value) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
+});
+
+const showNav = computed(() => {
+	if (childPage.value != null) {
+		return isWide.value;
 	}
+	return true;
 });
 
-onUnmounted(() => {
-	ro.disconnect();
+const showMain = computed(() => {
+	if (childPage.value != null) {
+		return true;
+	}
+	return isWide.value;
 });
 
-const childPageMetadata = ref<null | PageMetadata>(null);
-const pageMetadata = computed<PageMetadata>(() => {
-	if (childPageMetadata.value != null) {
-		return childPageMetadata.value;
+definePageMetadata(() => {
+	if (childPage.value != null && routingPageMetadataRef.value != null) {
+		return {
+			...routingPageMetadataRef.value,
+		};
 	}
 	return {
 		title: i18n.ts.controlPanel,
 		icon: 'ti ti-settings',
 	};
 });
+//#endregion
 
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	childPageMetadata.value = info;
-});
-provideReactiveMetadata(pageMetadata);
-
-definePageMetadata(() => pageMetadata.value);
-
-//#region menuDef
-const menuDef = computed<ISuperMenuDefinitions>(() => [{
-	title: i18n.ts.quickAction,
-	items: [{
-		type: 'button' as const,
-		icon: 'ti ti-search',
-		text: i18n.ts.lookup,
-		action: adminLookup,
-	}, ...(instance.disableRegistration ? [{
-		type: 'button' as const,
-		icon: 'ti ti-user-plus',
-		text: i18n.ts.createInviteCode,
-		action: invite,
-	}] : [])],
-}, {
-	title: i18n.ts.administration,
-	items: [{
-		icon: 'ti ti-dashboard',
-		text: i18n.ts.dashboard,
-		to: '/admin/overview',
-		active: currentPage.value?.route.name === 'overview',
-	}, {
-		icon: 'ti ti-users',
-		text: i18n.ts.users,
-		to: '/admin/users',
-		active: currentPage.value?.route.name === 'users',
-	}, {
-		icon: 'ti ti-user-plus',
-		text: i18n.ts.invite,
-		to: '/admin/invites',
-		active: currentPage.value?.route.name === 'invites',
-	}, {
-		icon: 'ti ti-badges',
-		text: i18n.ts.roles,
-		to: '/admin/roles',
-		active: currentPage.value?.route.name === 'roles',
-	}, {
-		icon: 'ti ti-icons',
-		text: i18n.ts.customEmojis,
-		to: '/admin/emojis',
-		active: currentPage.value?.route.name === 'emojis',
-	}, {
-		icon: 'ti ti-sparkles',
-		text: i18n.ts.avatarDecorations,
-		to: '/admin/avatar-decorations',
-		active: currentPage.value?.route.name === 'avatarDecorations',
-	}, {
-		icon: 'ti ti-whirl',
-		text: i18n.ts.federation,
-		to: '/admin/federation',
-		active: currentPage.value?.route.name === 'federation',
-	}, {
-		icon: 'ti ti-clock-play',
-		text: i18n.ts.jobQueue,
-		to: '/admin/queue',
-		active: currentPage.value?.route.name === 'queue',
-	}, {
-		icon: 'ti ti-cloud',
-		text: i18n.ts.files,
-		to: '/admin/files',
-		active: currentPage.value?.route.name === 'files',
-	}, {
-		icon: 'ti ti-speakerphone',
-		text: i18n.ts.announcements,
-		to: '/admin/announcements',
-		active: currentPage.value?.route.name === 'announcements',
-	}, {
-		icon: 'ti ti-ad',
-		text: i18n.ts.ads,
-		to: '/admin/ads',
-		active: currentPage.value?.route.name === 'ads',
-	}, {
-		icon: 'ti ti-exclamation-circle',
-		text: i18n.ts.abuseReports,
-		to: '/admin/abuses',
-		active: currentPage.value?.route.name === 'abuses',
-	}, {
-		icon: 'ti ti-list-search',
-		text: i18n.ts.moderationLogs,
-		to: '/admin/modlog',
-		active: currentPage.value?.route.name === 'modlog',
-	}],
-}, {
-	title: i18n.ts.settings,
-	items: [{
-		icon: 'ti ti-settings',
-		text: i18n.ts.general,
-		to: '/admin/settings',
-		active: currentPage.value?.route.name === 'settings',
-	}, {
-		icon: 'ti ti-paint',
-		text: i18n.ts.branding,
-		to: '/admin/branding',
-		active: currentPage.value?.route.name === 'branding',
-	}, {
-		icon: 'ti ti-shield',
-		text: i18n.ts.moderation,
-		to: '/admin/moderation',
-		active: currentPage.value?.route.name === 'moderation',
-	}, {
-		icon: 'ti ti-mail',
-		text: i18n.ts.emailServer,
-		to: '/admin/email-settings',
-		active: currentPage.value?.route.name === 'email-settings',
-	}, {
-		icon: 'ti ti-cloud',
-		text: i18n.ts.objectStorage,
-		to: '/admin/object-storage',
-		active: currentPage.value?.route.name === 'object-storage',
-	}, {
-		icon: 'ti ti-lock',
-		text: i18n.ts.security,
-		to: '/admin/security',
-		active: currentPage.value?.route.name === 'security',
-	}, {
-		icon: 'ti ti-planet',
-		text: i18n.ts.relays,
-		to: '/admin/relays',
-		active: currentPage.value?.route.name === 'relays',
-	}, {
-		icon: 'ti ti-link',
-		text: i18n.ts.externalServices,
-		to: '/admin/external-services',
-		active: currentPage.value?.route.name === 'external-services',
-	}, {
-		icon: 'ti ti-webhook',
-		text: 'Webhook',
-		to: '/admin/system-webhook',
-		active: currentPage.value?.route.name === 'system-webhook',
-	}, {
-		icon: 'ti ti-bolt',
-		text: i18n.ts.performance,
-		to: '/admin/performance',
-		active: currentPage.value?.route.name === 'performance',
-	}],
-}, {
-	title: i18n.ts.info,
-	items: [{
-		icon: 'ti ti-database',
-		text: i18n.ts.database,
-		to: '/admin/database',
-		active: currentPage.value?.route.name === 'database',
-	}],
-}]);
-
+//#region admin menuDef
 function invite() {
 	misskeyApi('admin/invite/create').then(x => {
 		os.alert({
@@ -353,6 +184,155 @@ function adminLookup(ev: MouseEvent) {
 		},
 	}], ev.currentTarget ?? ev.target);
 }
+
+const menuDef = computed(() => [
+	{
+		title: i18n.ts.quickAction,
+		items: [{
+			type: 'button' as const,
+			icon: 'ti ti-search',
+			text: i18n.ts.lookup,
+			action: adminLookup,
+		}, ...(instance.disableRegistration ? [{
+			type: 'button' as const,
+			icon: 'ti ti-user-plus',
+			text: i18n.ts.createInviteCode,
+			action: invite,
+		}] : [])],
+	},
+	{
+		title: i18n.ts.administration,
+		items: [{
+			icon: 'ti ti-dashboard',
+			text: i18n.ts.dashboard,
+			to: '/admin/overview',
+			active: childPage.value?.route.name === 'overview',
+		}, {
+			icon: 'ti ti-users',
+			text: i18n.ts.users,
+			to: '/admin/users',
+			active: childPage.value?.route.name === 'users',
+		}, {
+			icon: 'ti ti-user-plus',
+			text: i18n.ts.invite,
+			to: '/admin/invites',
+			active: childPage.value?.route.name === 'invites',
+		}, {
+			icon: 'ti ti-badges',
+			text: i18n.ts.roles,
+			to: '/admin/roles',
+			active: childPage.value?.route.name === 'roles',
+		}, {
+			icon: 'ti ti-icons',
+			text: i18n.ts.customEmojis,
+			to: '/admin/emojis',
+			active: childPage.value?.route.name === 'emojis',
+		}, {
+			icon: 'ti ti-sparkles',
+			text: i18n.ts.avatarDecorations,
+			to: '/admin/avatar-decorations',
+			active: childPage.value?.route.name === 'avatarDecorations',
+		}, {
+			icon: 'ti ti-whirl',
+			text: i18n.ts.federation,
+			to: '/admin/federation',
+			active: childPage.value?.route.name === 'federation',
+		}, {
+			icon: 'ti ti-clock-play',
+			text: i18n.ts.jobQueue,
+			to: '/admin/queue',
+			active: childPage.value?.route.name === 'queue',
+		}, {
+			icon: 'ti ti-cloud',
+			text: i18n.ts.files,
+			to: '/admin/files',
+			active: childPage.value?.route.name === 'files',
+		}, {
+			icon: 'ti ti-speakerphone',
+			text: i18n.ts.announcements,
+			to: '/admin/announcements',
+			active: childPage.value?.route.name === 'announcements',
+		}, {
+			icon: 'ti ti-ad',
+			text: i18n.ts.ads,
+			to: '/admin/ads',
+			active: childPage.value?.route.name === 'ads',
+		}, {
+			icon: 'ti ti-exclamation-circle',
+			text: i18n.ts.abuseReports,
+			to: '/admin/abuses',
+			active: childPage.value?.route.name === 'abuses',
+		}, {
+			icon: 'ti ti-list-search',
+			text: i18n.ts.moderationLogs,
+			to: '/admin/modlog',
+			active: childPage.value?.route.name === 'modlog',
+		}],
+	},
+	{
+		title: i18n.ts.settings,
+		items: [{
+			icon: 'ti ti-settings',
+			text: i18n.ts.general,
+			to: '/admin/settings',
+			active: childPage.value?.route.name === 'settings',
+		}, {
+			icon: 'ti ti-paint',
+			text: i18n.ts.branding,
+			to: '/admin/branding',
+			active: childPage.value?.route.name === 'branding',
+		}, {
+			icon: 'ti ti-shield',
+			text: i18n.ts.moderation,
+			to: '/admin/moderation',
+			active: childPage.value?.route.name === 'moderation',
+		}, {
+			icon: 'ti ti-mail',
+			text: i18n.ts.emailServer,
+			to: '/admin/email-settings',
+			active: childPage.value?.route.name === 'email-settings',
+		}, {
+			icon: 'ti ti-cloud',
+			text: i18n.ts.objectStorage,
+			to: '/admin/object-storage',
+			active: childPage.value?.route.name === 'object-storage',
+		}, {
+			icon: 'ti ti-lock',
+			text: i18n.ts.security,
+			to: '/admin/security',
+			active: childPage.value?.route.name === 'security',
+		}, {
+			icon: 'ti ti-planet',
+			text: i18n.ts.relays,
+			to: '/admin/relays',
+			active: childPage.value?.route.name === 'relays',
+		}, {
+			icon: 'ti ti-link',
+			text: i18n.ts.externalServices,
+			to: '/admin/external-services',
+			active: childPage.value?.route.name === 'external-services',
+		}, {
+			icon: 'ti ti-webhook',
+			text: 'Webhook',
+			to: '/admin/system-webhook',
+			active: childPage.value?.route.name === 'system-webhook',
+		}, {
+			icon: 'ti ti-bolt',
+			text: i18n.ts.performance,
+			to: '/admin/performance',
+			active: childPage.value?.route.name === 'performance',
+		}],
+	},
+	{
+		title: i18n.ts.info,
+		items: [{
+			icon: 'ti ti-database',
+			text: i18n.ts.database,
+			to: '/admin/database',
+			active: childPage.value?.route.name === 'database',
+		}],
+	},
+] as const satisfies ISuperMenuDefinitions);
 //#endregion
 </script>
 
diff --git a/packages/frontend/src/pages/admin/performance.vue b/packages/frontend/src/pages/admin/performance.vue
index 1dbd37c18814..fe61d3eaf14b 100644
--- a/packages/frontend/src/pages/admin/performance.vue
+++ b/packages/frontend/src/pages/admin/performance.vue
@@ -202,7 +202,7 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => []);
 
 definePageMetadata(() => ({
-	title: i18n.ts.other,
-	icon: 'ti ti-adjustments',
+	title: i18n.ts.performance,
+	icon: 'ti ti-bolt',
 }));
 </script>
diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue
index caaa93ff3447..d31349c2a2ed 100644
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -301,14 +301,15 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => []);
 
 definePageMetadata(() => ({
-	title: flash.value ? flash.value.title : 'Play',
+	title: 'Play',
 	...flash.value ? {
-		avatar: flash.value.user,
-		path: `/play/${flash.value.id}`,
-		share: {
-			title: flash.value.title,
-			text: flash.value.summary,
-		},
+		title: flash.value.title,
+		withUserAvatar: flash.value.user,
+		// path: `/play/${flash.value.id}`,
+		// share: {
+		// 	title: flash.value.title,
+		// 	text: flash.value.summary,
+		// },
 	} : {},
 }));
 </script>
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index a7f480844f99..a185e2d0fdec 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -209,9 +209,10 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => []);
 
 definePageMetadata(() => ({
-	title: post.value ? post.value.title : i18n.ts.gallery,
+	title: i18n.ts.gallery,
 	...post.value ? {
-		avatar: post.value.user,
+		title: post.value.title,
+		withUserAvatar: post.value.user,
 	} : {},
 }));
 </script>
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 3e1d04bd6dd8..4210a58419ad 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -159,12 +159,12 @@ definePageMetadata(() => ({
 	title: i18n.ts.note,
 	...note.value ? {
 		subtitle: dateString(note.value.createdAt),
-		avatar: note.value.user,
-		path: `/notes/${note.value.id}`,
-		share: {
-			title: i18n.tsx.noteOf({ user: note.value.user.name }),
-			text: note.value.text,
-		},
+		withUserAvatar: note.value.user,
+		// path: `/notes/${note.value.id}`,
+		// share: {
+		// 	title: i18n.tsx.noteOf({ user: note.value.user.name }),
+		// 	text: note.value.text,
+		// },
 	} : {},
 }));
 </script>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index 4f30b77d56c0..6070dc4f3d5b 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -323,14 +323,15 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => []);
 
 definePageMetadata(() => ({
-	title: page.value ? page.value.title || page.value.name : i18n.ts.pages,
+	title: i18n.ts.pages,
 	...page.value ? {
-		avatar: page.value.user,
-		path: `/@${page.value.user.username}/pages/${page.value.name}`,
-		share: {
-			title: page.value.title || page.value.name,
-			text: page.value.summary,
-		},
+		title: page.value.title || page.value.name,
+		withUserAvatar: page.value.user,
+		// path: `/@${page.value.user.username}/pages/${page.value.name}`,
+		// share: {
+		// 	title: page.value.title || page.value.name,
+		// 	text: page.value.summary,
+		// },
 	} : {},
 }));
 </script>
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index a982080cfd5e..8d46a8b84f16 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-if="childPageMetadata == null"/></template>
+	<template #header><MkPageHeader v-if="childPage == null && !isWide"/></template>
 	<template #default>
 		<div ref="rootEl" :class="[$style.root, { [$style.wide]: isWide }]">
 			<div v-if="showNav" :class="$style.navRoot">
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkInfo v-if="emailNotConfigured" warn>{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
 						</div>
 
-						<TmsSuperMenu :def="menuDef" :wideMode="isWide"></TmsSuperMenu>
+						<TmsSuperMenu :def="menuDef" :wideMode="isWide"/>
 					</div>
 				</MkSpacer>
 			</div>
@@ -31,257 +31,237 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { signinRequired, signout } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
 import { clearCache } from '@/scripts/clear-cache.js';
-import { PageMetadata, definePageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { definePageMetadata, useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/router/supplier.js';
 import MkInfo from '@/components/MkInfo.vue';
 import TmsSuperMenu from '@/components/TmsSuperMenu.vue';
 import { type ISuperMenuDefinitions } from '@/components/TmsSuperMenu.impl.js';
 
+const $i = signinRequired();
+
 const ROOT_PAGE_PATH = '/settings' as const;
 const INITIAL_PAGE_PATH = '/settings/profile' as const;
 
-const $i = signinRequired();
-
-const rootEl = shallowRef<HTMLElement | null>(null);
+//#region settings info
+const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
+//#endregion
 
-const showNav = computed(() => {
-	if (isWide.value) return true; // wideなら常に表示
-	return isRoot.value; // rootなら表示
-});
-const showMain = computed(() => {
-	if (!isRoot.value) return true; // 非rootなら常に表示
-	return isWide.value; // wideなら表示
-});
+//#region settings routing
+const { routingPageMetadataRef } = useRoutingPageMetadata();
 
-const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
+const rootEl = useTemplateRef('rootEl');
 
 const router = useRouter();
-const currentPage = computed(() => router.currentRef.value.child);
-const isRoot = computed(() => currentPage.value?.route.name == null);
 
-watch(router.currentRef, (to) => {
-	if (to.route.path === ROOT_PAGE_PATH && to.child?.route.name == null) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
-	}
+const childPage = computed(() => {
+	if (router.currentRef.value.route.path !== ROOT_PAGE_PATH) return null;
+	if (router.currentRef.value.child?.route.name === '_empty_') return null;
+	return router.currentRef.value.child ?? null;
 });
 
 const isWide = ref(false);
 const WIDE_THRESHOLD = 600 as const;
 
-watch(isWide, () => {
-	if (isRoot.value) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
-	}
-});
-
 const ro = new ResizeObserver((entries) => {
-	const inlineSize = entries.at(0)?.borderBoxSize.at(0)?.inlineSize;
-	if (inlineSize == null) return;
+	const inlineSize = entries.at(0)?.borderBoxSize.at(0)?.inlineSize ?? 0;
+	if (inlineSize === 0) return;
 	isWide.value = inlineSize >= WIDE_THRESHOLD;
 });
 
 onMounted(() => {
 	if (rootEl.value != null) {
-		isWide.value = rootEl.value.offsetWidth >= WIDE_THRESHOLD;
 		ro.observe(rootEl.value);
 	}
-	if (isRoot.value) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
-	}
 });
 
-onActivated(() => {
-	if (rootEl.value != null) {
-		isWide.value = rootEl.value.offsetWidth >= WIDE_THRESHOLD;
+onUnmounted(() => {
+	ro.disconnect();
+});
+
+watch([router.currentRef, isWide], ([current, wide]) => {
+	if (!wide) return;
+	if (current.route.path !== ROOT_PAGE_PATH) return;
+	if (current.child == null || current.child.route.name === '_empty_') {
+		router.replace(INITIAL_PAGE_PATH);
 	}
-	if (isRoot.value) {
-		if (isWide.value) {
-			router.replace(INITIAL_PAGE_PATH);
-		} else {
-			childPageMetadata.value = null;
-		}
+});
+
+const showNav = computed(() => {
+	if (childPage.value != null) {
+		return isWide.value;
 	}
+	return true;
 });
 
-onUnmounted(() => {
-	ro.disconnect();
+const showMain = computed(() => {
+	if (childPage.value != null) {
+		return true;
+	}
+	return isWide.value;
 });
 
-const childPageMetadata = ref<null | PageMetadata>(null);
-const pageMetadata = computed<PageMetadata>(() => {
-	if (childPageMetadata.value != null) {
-		return childPageMetadata.value;
+definePageMetadata(() => {
+	if (childPage.value != null && routingPageMetadataRef.value != null) {
+		return {
+			...routingPageMetadataRef.value,
+		};
 	}
 	return {
 		title: i18n.ts.settings,
 		icon: 'ti ti-settings',
 	};
 });
+//#endregion
 
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	childPageMetadata.value = info;
-});
-provideReactiveMetadata(pageMetadata);
-
-definePageMetadata(() => pageMetadata.value);
-
-//#region menuDef
-const menuDef = computed<ISuperMenuDefinitions>(() => [{
-	title: i18n.ts.basicSettings,
-	items: [{
-		icon: 'ti ti-user',
-		text: i18n.ts.profile,
-		to: '/settings/profile',
-		active: currentPage.value?.route.name === 'profile',
-	}, {
-		icon: 'ti ti-lock-open',
-		text: i18n.ts.privacy,
-		to: '/settings/privacy',
-		active: currentPage.value?.route.name === 'privacy',
-	}, {
-		icon: 'ti ti-mood-happy',
-		text: i18n.ts.emojiPicker,
-		to: '/settings/emoji-picker',
-		active: currentPage.value?.route.name === 'emojiPicker',
-	}, {
-		icon: 'ti ti-cloud',
-		text: i18n.ts.drive,
-		to: '/settings/drive',
-		active: currentPage.value?.route.name === 'drive',
-	}, {
-		icon: 'ti ti-bell',
-		text: i18n.ts.notifications,
-		to: '/settings/notifications',
-		active: currentPage.value?.route.name === 'notifications',
-	}, {
-		icon: 'ti ti-mail',
-		text: i18n.ts.email,
-		to: '/settings/email',
-		active: currentPage.value?.route.name === 'email',
-	}, {
-		icon: 'ti ti-lock',
-		text: i18n.ts.security,
-		to: '/settings/security',
-		active: currentPage.value?.route.name === 'security',
-	}],
-}, {
-	title: i18n.ts.clientSettings,
-	items: [{
-		icon: 'ti ti-adjustments',
-		text: i18n.ts.general,
-		to: '/settings/general',
-		active: currentPage.value?.route.name === 'general',
-	}, {
-		icon: 'ti ti-palette',
-		text: i18n.ts.theme,
-		to: '/settings/theme',
-		active: currentPage.value?.route.name === 'theme',
-	}, {
-		icon: 'ti ti-menu-2',
-		text: i18n.ts.navbar,
-		to: '/settings/navbar',
-		active: currentPage.value?.route.name === 'navbar',
-	}, {
-		icon: 'ti ti-equal-double',
-		text: i18n.ts.statusbar,
-		to: '/settings/statusbar',
-		active: currentPage.value?.route.name === 'statusbar',
-	}, {
-		icon: 'ti ti-music',
-		text: i18n.ts.sounds,
-		to: '/settings/sounds',
-		active: currentPage.value?.route.name === 'sounds',
-	}, {
-		icon: 'ti ti-plug',
-		text: i18n.ts.plugins,
-		to: '/settings/plugin',
-		active: currentPage.value?.route.name === 'plugin',
-	}],
-}, {
-	title: i18n.ts.otherSettings,
-	items: [{
-		icon: 'ti ti-badges',
-		text: i18n.ts.roles,
-		to: '/settings/roles',
-		active: currentPage.value?.route.name === 'roles',
-	}, {
-		icon: 'ti ti-ban',
-		text: i18n.ts.muteAndBlock,
-		to: '/settings/mute-block',
-		active: currentPage.value?.route.name === 'mute-block',
-	}, {
-		icon: 'ti ti-api',
-		text: 'API',
-		to: '/settings/api',
-		active: currentPage.value?.route.name === 'api',
-	}, {
-		icon: 'ti ti-webhook',
-		text: 'Webhook',
-		to: '/settings/webhook',
-		active: currentPage.value?.route.name === 'webhook',
-	}, {
-		icon: 'ti ti-package',
-		text: i18n.ts.importAndExport,
-		to: '/settings/import-export',
-		active: currentPage.value?.route.name === 'import-export',
-	}, {
-		icon: 'ti ti-plane',
-		text: `${i18n.ts.accountMigration}`,
-		to: '/settings/migration',
-		active: currentPage.value?.route.name === 'migration',
-	}, {
-		icon: 'ti ti-dots',
-		text: i18n.ts.other,
-		to: '/settings/other',
-		active: currentPage.value?.route.name === 'other',
-	}],
-}, {
-	items: [{
-		icon: 'ti ti-device-floppy',
-		text: i18n.ts.preferencesBackups,
-		to: '/settings/preferences-backups',
-		active: currentPage.value?.route.name === 'preferences-backups',
-	}, {
-		type: 'button' as const,
-		icon: 'ti ti-trash',
-		text: i18n.ts.clearCache,
-		action: async () => {
-			await clearCache();
-		},
-	}, {
-		type: 'button' as const,
-		icon: 'ti ti-power',
-		text: i18n.ts.logout,
-		action: async () => {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.ts.logoutConfirm,
-			});
-			if (canceled) return;
-			signout();
-		},
-		danger: true,
-	}],
-}]);
+//#region settings menuDef
+const menuDef = computed(() => [
+	{
+		title: i18n.ts.basicSettings,
+		items: [{
+			icon: 'ti ti-user',
+			text: i18n.ts.profile,
+			to: '/settings/profile',
+			active: childPage.value?.route.name === 'profile',
+		}, {
+			icon: 'ti ti-lock-open',
+			text: i18n.ts.privacy,
+			to: '/settings/privacy',
+			active: childPage.value?.route.name === 'privacy',
+		}, {
+			icon: 'ti ti-mood-happy',
+			text: i18n.ts.emojiPicker,
+			to: '/settings/emoji-picker',
+			active: childPage.value?.route.name === 'emojiPicker',
+		}, {
+			icon: 'ti ti-cloud',
+			text: i18n.ts.drive,
+			to: '/settings/drive',
+			active: childPage.value?.route.name === 'drive',
+		}, {
+			icon: 'ti ti-bell',
+			text: i18n.ts.notifications,
+			to: '/settings/notifications',
+			active: childPage.value?.route.name === 'notifications',
+		}, {
+			icon: 'ti ti-mail',
+			text: i18n.ts.email,
+			to: '/settings/email',
+			active: childPage.value?.route.name === 'email',
+		}, {
+			icon: 'ti ti-lock',
+			text: i18n.ts.security,
+			to: '/settings/security',
+			active: childPage.value?.route.name === 'security',
+		}],
+	},
+	{
+		title: i18n.ts.clientSettings,
+		items: [{
+			icon: 'ti ti-adjustments',
+			text: i18n.ts.general,
+			to: '/settings/general',
+			active: childPage.value?.route.name === 'general',
+		}, {
+			icon: 'ti ti-palette',
+			text: i18n.ts.theme,
+			to: '/settings/theme',
+			active: childPage.value?.route.name === 'theme',
+		}, {
+			icon: 'ti ti-menu-2',
+			text: i18n.ts.navbar,
+			to: '/settings/navbar',
+			active: childPage.value?.route.name === 'navbar',
+		}, {
+			icon: 'ti ti-equal-double',
+			text: i18n.ts.statusbar,
+			to: '/settings/statusbar',
+			active: childPage.value?.route.name === 'statusbar',
+		}, {
+			icon: 'ti ti-music',
+			text: i18n.ts.sounds,
+			to: '/settings/sounds',
+			active: childPage.value?.route.name === 'sounds',
+		}, {
+			icon: 'ti ti-plug',
+			text: i18n.ts.plugins,
+			to: '/settings/plugin',
+			active: childPage.value?.route.name === 'plugin',
+		}],
+	},
+	{
+		title: i18n.ts.otherSettings,
+		items: [{
+			icon: 'ti ti-badges',
+			text: i18n.ts.roles,
+			to: '/settings/roles',
+			active: childPage.value?.route.name === 'roles',
+		}, {
+			icon: 'ti ti-ban',
+			text: i18n.ts.muteAndBlock,
+			to: '/settings/mute-block',
+			active: childPage.value?.route.name === 'mute-block',
+		}, {
+			icon: 'ti ti-api',
+			text: 'API',
+			to: '/settings/api',
+			active: childPage.value?.route.name === 'api',
+		}, {
+			icon: 'ti ti-webhook',
+			text: 'Webhook',
+			to: '/settings/webhook',
+			active: childPage.value?.route.name === 'webhook',
+		}, {
+			icon: 'ti ti-package',
+			text: i18n.ts.importAndExport,
+			to: '/settings/import-export',
+			active: childPage.value?.route.name === 'import-export',
+		}, {
+			icon: 'ti ti-plane',
+			text: `${i18n.ts.accountMigration}`,
+			to: '/settings/migration',
+			active: childPage.value?.route.name === 'migration',
+		}, {
+			icon: 'ti ti-dots',
+			text: i18n.ts.other,
+			to: '/settings/other',
+			active: childPage.value?.route.name === 'other',
+		}],
+	},
+	{
+		items: [{
+			icon: 'ti ti-device-floppy',
+			text: i18n.ts.preferencesBackups,
+			to: '/settings/preferences-backups',
+			active: childPage.value?.route.name === 'preferences-backups',
+		}, {
+			type: 'button' as const,
+			icon: 'ti ti-trash',
+			text: i18n.ts.clearCache,
+			action: async () => {
+				await clearCache();
+			},
+		}, {
+			type: 'button' as const,
+			icon: 'ti ti-power',
+			text: i18n.ts.logout,
+			action: async () => {
+				const { canceled } = await os.confirm({
+					type: 'warning',
+					text: i18n.ts.logoutConfirm,
+				});
+				if (canceled) return;
+				signout();
+			},
+			danger: true,
+		}],
+	},
+] as const satisfies ISuperMenuDefinitions);
 //#endregion
 </script>
 
diff --git a/packages/frontend/src/pages/user/followers.vue b/packages/frontend/src/pages/user/followers.vue
index 70883242e5d5..6bab3ecd968d 100644
--- a/packages/frontend/src/pages/user/followers.vue
+++ b/packages/frontend/src/pages/user/followers.vue
@@ -25,6 +25,7 @@ import XFollowList from './follow-list.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
+import { acct } from '@/filters/user.js';
 
 const props = withDefaults(defineProps<{
 	acct: string;
@@ -56,10 +57,10 @@ definePageMetadata(() => ({
 	title: i18n.ts.user,
 	icon: 'ti ti-user',
 	...user.value ? {
-		title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
+		title: user.value.name ? `${user.value.name} (@${acct(user.value)})` : `@${acct(user.value)}`,
 		subtitle: i18n.ts.followers,
-		userName: user.value,
-		avatar: user.value,
+		withUserAvatar: user.value,
+		withUserName: user.value,
 	} : {},
 }));
 </script>
diff --git a/packages/frontend/src/pages/user/following.vue b/packages/frontend/src/pages/user/following.vue
index 37b25f694f99..c328e2c13052 100644
--- a/packages/frontend/src/pages/user/following.vue
+++ b/packages/frontend/src/pages/user/following.vue
@@ -25,6 +25,7 @@ import XFollowList from './follow-list.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
+import { acct as getAcct } from '@/filters/user.js';
 
 const props = withDefaults(defineProps<{
 	acct: string;
@@ -56,10 +57,10 @@ definePageMetadata(() => ({
 	title: i18n.ts.user,
 	icon: 'ti ti-user',
 	...user.value ? {
-		title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
+		title: user.value.name ? `${user.value.name} (@${getAcct(user.value)})` : `@${getAcct(user.value)}`,
 		subtitle: i18n.ts.following,
-		userName: user.value,
-		avatar: user.value,
+		withUserAvatar: user.value,
+		withUserName: user.value,
 	} : {},
 }));
 </script>
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index d86238740180..469103ad6a5b 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -144,14 +144,14 @@ definePageMetadata(() => ({
 	title: i18n.ts.user,
 	icon: 'ti ti-user',
 	...user.value ? {
-		title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
+		title: user.value.name ? `${user.value.name} (@${getAcct(user.value)})` : `@${getAcct(user.value)}`,
 		subtitle: `@${getAcct(user.value)}`,
-		userName: user.value,
-		avatar: user.value,
-		path: `/@${user.value.username}`,
-		share: {
-			title: user.value.name,
-		},
+		withUserAvatar: user.value,
+		withUserName: user.value,
+		// path: `/@${user.value.username}`,
+		// share: {
+		// 	title: user.value.name,
+		// },
 	} : {},
 }));
 </script>
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index f4baa955d5c9..1d9ce3010a33 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -181,6 +181,7 @@ const routes: RouteDef[] = [{
 		component: page(() => import('@/pages/settings/other.vue')),
 	}, {
 		path: '/',
+		name: '_empty_',
 		component: page(() => import('@/pages/_empty_.vue')),
 	}],
 }, {
@@ -488,6 +489,7 @@ const routes: RouteDef[] = [{
 		component: page(() => import('@/pages/admin/system-webhook.vue')),
 	}, {
 		path: '/',
+		name: '_empty_',
 		component: page(() => import('@/pages/_empty_.vue')),
 	}],
 }, {
diff --git a/packages/frontend/src/router/main.ts b/packages/frontend/src/router/main.ts
index c4b8ccb3ad95..f6d610110139 100644
--- a/packages/frontend/src/router/main.ts
+++ b/packages/frontend/src/router/main.ts
@@ -6,13 +6,14 @@
 import { EventEmitter } from 'eventemitter3';
 import type { App, ShallowRef } from 'vue';
 import { IRouter, Resolved, RouteDef, RouterEvent, RouterFlag } from '@/nirax.js';
+import { DI } from '@/di.js';
 
 /**
  * {@link Router}による画面遷移を可能とするために{@link mainRouter}をセットアップする。
  * また、{@link Router}のインスタンスを作成するためのファクトリも{@link provide}経由で公開する（`routerFactory`というキーで取得可能）
  */
 export function setupRouter(app: App, routerFactory: ((path: string) => IRouter)): void {
-	app.provide('routerFactory', routerFactory);
+	app.provide(DI.routerFactory, routerFactory);
 
 	const mainRouter = routerFactory(location.pathname + location.search + location.hash);
 
diff --git a/packages/frontend/src/router/supplier.ts b/packages/frontend/src/router/supplier.ts
index 7da236f4e73d..bdfe0c2c3756 100644
--- a/packages/frontend/src/router/supplier.ts
+++ b/packages/frontend/src/router/supplier.ts
@@ -4,15 +4,16 @@
  */
 
 import { inject } from 'vue';
-import { IRouter, Router } from '@/nirax.js';
+import { IRouter } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
+import { DI } from '@/di.js';
 
 /**
  * メインの{@link Router}を取得する。
  * あらかじめ{@link setupRouter}を実行しておく必要がある（{@link provide}により{@link IRouter}のインスタンスを注入可能であるならばこの限りではない）
  */
 export function useRouter(): IRouter {
-	return inject<Router | null>('router', null) ?? mainRouter;
+	return inject(DI.router, null) ?? mainRouter;
 }
 
 /**
@@ -20,7 +21,7 @@ export function useRouter(): IRouter {
  * あらかじめ{@link setupRouter}を実行しておく必要がある。
  */
 export function useRouterFactory(): (path: string) => IRouter {
-	const factory = inject<(path: string) => IRouter>('routerFactory');
+	const factory = inject(DI.routerFactory);
 	if (!factory) {
 		console.error('routerFactory is not defined.');
 		throw new Error('routerFactory is not defined.');
diff --git a/packages/frontend/src/scripts/page-metadata.ts b/packages/frontend/src/scripts/page-metadata.ts
index 0e3b093ecf95..0e892ae3d38f 100644
--- a/packages/frontend/src/scripts/page-metadata.ts
+++ b/packages/frontend/src/scripts/page-metadata.ts
@@ -3,68 +3,54 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import * as Misskey from 'misskey-js';
-import { MaybeRefOrGetter, Ref, inject, isRef, onActivated, onBeforeUnmount, provide, ref, toValue, watch } from 'vue';
+import { type MaybeRefOrGetter, inject, onActivated, onDeactivated, onMounted, onUnmounted, provide, ref, shallowReadonly, shallowRef, toValue, watch } from 'vue';
+import type * as Misskey from 'misskey-js';
+import { DI } from '@/di.js';
 
 export type PageMetadata = {
-	title: string;
-	subtitle?: string;
-	icon?: string | null;
-	avatar?: Misskey.entities.User | null;
-	userName?: Misskey.entities.User | null;
-	needWideArea?: boolean;
-};
-
-type PageMetadataGetter = () => PageMetadata;
-type PageMetadataReceiver = (getter: PageMetadataGetter) => void;
-
-const RECEIVER_KEY = Symbol('ReceiverKey');
-const setReceiver = (v: PageMetadataReceiver): void => {
-	provide<PageMetadataReceiver>(RECEIVER_KEY, v);
-};
-const getReceiver = (): PageMetadataReceiver | undefined => {
-	return inject<PageMetadataReceiver>(RECEIVER_KEY);
-};
-
-const METADATA_KEY = Symbol('MetadataKey');
-const setMetadata = (v: Ref<PageMetadata | null>): void => {
-	provide<Ref<PageMetadata | null>>(METADATA_KEY, v);
-};
-const getMetadata = (): Ref<PageMetadata | null> | undefined => {
-	return inject<Ref<PageMetadata | null>>(METADATA_KEY);
-};
-
-export const definePageMetadata = (maybeRefOrGetterMetadata: MaybeRefOrGetter<PageMetadata>): void => {
-	const metadataRef = ref(toValue(maybeRefOrGetterMetadata));
-	const metadataGetter = () => metadataRef.value;
-	const receiver = getReceiver();
-
-	// setup handler
-	receiver?.(metadataGetter);
-
-	// update handler
-	onBeforeUnmount(watch(
-		() => toValue(maybeRefOrGetterMetadata),
-		(metadata) => {
-			metadataRef.value = metadata;
-			receiver?.(metadataGetter);
-		},
-		{ deep: true },
-	));
-	onActivated(() => {
-		receiver?.(metadataGetter);
+	readonly title: string;
+	readonly subtitle?: string | null;
+	readonly icon?: string | null;
+	readonly needWideArea?: boolean;
+	readonly withUserAvatar?: Misskey.entities.User | null;
+	readonly withUserName?: Misskey.entities.User | null;
+};
+
+export type PageMetadataReceiver = ((pageMetadata: PageMetadata) => void);
+
+export function definePageMetadata(maybeRefOrGetterPageMetadata: MaybeRefOrGetter<PageMetadata>) {
+	const pageActiveRef = ref(false);
+	onMounted(() => pageActiveRef.value = true);
+	onActivated(() => pageActiveRef.value = true);
+	onUnmounted(() => pageActiveRef.value = false);
+	onDeactivated(() => pageActiveRef.value = false);
+
+	const receiver = inject(DI.pageMetadataReceiver);
+
+	const pageMetadataRef = shallowRef(toValue(maybeRefOrGetterPageMetadata));
+	provide(DI.pageMetadata, shallowReadonly(pageMetadataRef));
+	receiver?.(pageMetadataRef.value);
+
+	watch(() => toValue(maybeRefOrGetterPageMetadata), (pageMetadata) => {
+		pageMetadataRef.value = pageMetadata;
+		if (pageActiveRef.value) {
+			receiver?.(pageMetadataRef.value);
+		}
+	}, { deep: true });
+
+	watch(pageActiveRef, (to, from) => {
+		if (to && !from) {
+			receiver?.(pageMetadataRef.value);
+		}
 	});
-};
-
-export const provideMetadataReceiver = (receiver: PageMetadataReceiver): void => {
-	setReceiver(receiver);
-};
+}
 
-export const provideReactiveMetadata = (metadataRef: Ref<PageMetadata | null>): void => {
-	setMetadata(metadataRef);
-};
-
-export const injectReactiveMetadata = (): Ref<PageMetadata | null> => {
-	const metadataRef = getMetadata();
-	return isRef(metadataRef) ? metadataRef : ref(null);
-};
+export function useRoutingPageMetadata() {
+	const routingPageMetadataRef = shallowRef<PageMetadata | null>(null);
+	provide(DI.pageMetadataReceiver, (pageMetadata) => {
+		routingPageMetadataRef.value = pageMetadata;
+	});
+	return {
+		routingPageMetadataRef: shallowReadonly(routingPageMetadataRef),
+	} as const;
+}
diff --git a/packages/frontend/src/scripts/tms/provide-ui.ts b/packages/frontend/src/scripts/tms/provide-ui.ts
deleted file mode 100644
index a7c647ca3ab4..000000000000
--- a/packages/frontend/src/scripts/tms/provide-ui.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { inject, provide } from 'vue';
-
-type Ui = (
-	| 'universal'
-	| 'deck'
-	| 'classic'
-	| 'visitor'
-	| 'zen'
-	| 'minimum'
-);
-
-const UI_PROVIDE_KEY = Symbol('UiProvideKey');
-
-export const provideUi = (ui: Ui): void => {
-	provide(UI_PROVIDE_KEY, ui);
-};
-
-export const injectUi = (): Ui | undefined => {
-	return inject<Ui>(UI_PROVIDE_KEY);
-};
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 86030613523c..b40d4e131b08 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="!showMenuOnTop" class="sidebar">
 			<XSidebar/>
 		</div>
-		<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
+		<div v-else-if="!routingPageMetadataRef?.needWideArea" ref="widgetsLeft" class="widgets left">
 			<XWidgets place="left" :marginTop="'var(--MI-margin)'" @mounted="attachSticky(widgetsLeft)"/>
 		</div>
 
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</main>
 
-		<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
+		<div v-if="isDesktop && !routingPageMetadataRef?.needWideArea" ref="widgetsRight" class="widgets right">
 			<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--MI-margin)'" @mounted="attachSticky(widgetsRight)"/>
 		</div>
 	</div>
@@ -46,24 +46,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef } from 'vue';
+import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef, watch } from 'vue';
 import { instanceName } from '@@/js/config.js';
 import { isLink } from '@@/js/is-link.js';
 import XSidebar from './classic.sidebar.vue';
 import XCommon from './_common_/common.vue';
 import { StickySidebar } from '@/scripts/sticky-sidebar.js';
 import * as os from '@/os.js';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { mainRouter } from '@/router/main.js';
-import { provideUi } from '@/scripts/tms/provide-ui.js';
+import { DI } from '@/di.js';
 
 const XHeaderMenu = defineAsyncComponent(() => import('./classic.header.vue'));
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 
-provideUi('classic');
+const { routingPageMetadataRef } = useRoutingPageMetadata();
+watch(routingPageMetadataRef, (pageMetadata) => {
+	if (pageMetadata == null) return;
+	if (isRoot.value && pageMetadata.title === instanceName) {
+		document.title = pageMetadata.title;
+	} else {
+		document.title = `${pageMetadata.title} | ${instanceName}`;
+	}
+});
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -71,7 +79,6 @@ const DESKTOP_THRESHOLD = 1100;
 
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 
-const pageMetadata = ref<null | PageMetadata>(null);
 const widgetsShowing = ref(false);
 const fullView = ref(false);
 const globalHeaderHeight = ref(0);
@@ -81,19 +88,7 @@ const live2d = shallowRef<HTMLIFrameElement>();
 const widgetsLeft = ref<HTMLElement>();
 const widgetsRight = ref<HTMLElement>();
 
-provide('router', mainRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-	if (pageMetadata.value) {
-		if (isRoot.value && pageMetadata.value.title === instanceName) {
-			document.title = pageMetadata.value.title;
-		} else {
-			document.title = `${pageMetadata.value.title} | ${instanceName}`;
-		}
-	}
-});
-provideReactiveMetadata(pageMetadata);
+provide(DI.router, mainRouter);
 provide('shouldHeaderThin', showMenuOnTop.value);
 provide('forceSpacerMin', true);
 
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 417e20bbe993..831a086d86c7 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -118,7 +118,6 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue';
 import XDirectColumn from '@/ui/deck/direct-column.vue';
 import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
 import { mainRouter } from '@/router/main.js';
-import { provideUi } from '@/scripts/tms/provide-ui.js';
 
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
@@ -136,8 +135,6 @@ const columnComponents = {
 	roleTimeline: XRoleTimelineColumn,
 };
 
-provideUi('deck');
-
 mainRouter.navHook = (path, flag): boolean => {
 	if (flag === 'forcePage') return false;
 	const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
index d8c7d0ebea47..1073443013be 100644
--- a/packages/frontend/src/ui/deck/main-column.vue
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <XColumn v-if="deckStore.state.alwaysShowMainColumn || mainRouter.currentRoute.value.name !== 'index'" :column="column" :isStacked="isStacked">
 	<template #header>
-		<template v-if="pageMetadata">
-			<i :class="pageMetadata.icon"></i>
-			{{ pageMetadata.title }}
+		<template v-if="routingPageMetadataRef">
+			<i :class="routingPageMetadataRef.icon"></i>
+			{{ routingPageMetadataRef.title }}
 		</template>
 	</template>
 
@@ -19,16 +19,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { provide, shallowRef, ref } from 'vue';
+import { provide, shallowRef } from 'vue';
 import { getScrollContainer } from '@@/js/scroll.js';
 import { isLink } from '@@/js/is-link.js';
 import XColumn from './column.vue';
 import { deckStore, Column } from '@/ui/deck/deck-store.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { useScrollPositionManager } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
+import { DI } from '@/di.js';
+
+const { routingPageMetadataRef } = useRoutingPageMetadata();
 
 const props = defineProps<{
 	column: Column;
@@ -36,14 +39,8 @@ const props = defineProps<{
 }>();
 
 const contents = shallowRef<HTMLElement>();
-const pageMetadata = ref<null | PageMetadata>(null);
 
-provide('router', mainRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-});
-provideReactiveMetadata(pageMetadata);
+provide(DI.router, mainRouter);
 
 /*
 function back() {
diff --git a/packages/frontend/src/ui/minimum.vue b/packages/frontend/src/ui/minimum.vue
index a807e07244f9..8e40279d3a27 100644
--- a/packages/frontend/src/ui/minimum.vue
+++ b/packages/frontend/src/ui/minimum.vue
@@ -14,32 +14,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref } from 'vue';
+import { computed, watch } from 'vue';
 import { instanceName } from '@@/js/config.js';
 import XCommon from './_common_/common.vue';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { mainRouter } from '@/router/main.js';
-import { provideUi } from '@/scripts/tms/provide-ui.js';
 
-provideUi('minimum');
-
-const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
-
-const pageMetadata = ref<null | PageMetadata>(null);
-
-provide('router', mainRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-	if (pageMetadata.value) {
-		if (isRoot.value && pageMetadata.value.title === instanceName) {
-			document.title = pageMetadata.value.title;
-		} else {
-			document.title = `${pageMetadata.value.title} | ${instanceName}`;
-		}
+const { routingPageMetadataRef } = useRoutingPageMetadata();
+watch(routingPageMetadataRef, (pageMetadata) => {
+	if (pageMetadata == null) return;
+	if (isRoot.value && pageMetadata.title === instanceName) {
+		document.title = pageMetadata.title;
+	} else {
+		document.title = `${pageMetadata.title} | ${instanceName}`;
 	}
 });
-provideReactiveMetadata(pageMetadata);
+
+const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
 document.documentElement.style.overflowY = 'scroll';
 </script>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index ba451c345f98..c1fa7110fde5 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -18,11 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.spacer"></div>
 	</MkStickyContainer>
 
-	<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
+	<div v-if="isDesktop && !routingPageMetadataRef?.needWideArea" :class="$style.widgets">
 		<XWidgets/>
 	</div>
 
-	<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
+	<button v-if="(!isDesktop || routingPageMetadataRef?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 
 	<div v-if="isMobile" ref="navFooter" :class="$style.nav">
 		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
@@ -107,19 +107,27 @@ import { defaultStore } from '@/store.js';
 import { navbarItemDef } from '@/navbar.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { useScrollPositionManager } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
-import { provideUi } from '@/scripts/tms/provide-ui.js';
+import { DI } from '@/di.js';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
 
-provideUi('universal');
+const { routingPageMetadataRef } = useRoutingPageMetadata();
+watch(routingPageMetadataRef, (pageMetadata) => {
+	if (pageMetadata == null) return;
+	if (isRoot.value && pageMetadata.title === instanceName) {
+		document.title = pageMetadata.title;
+	} else {
+		document.title = `${pageMetadata.title} | ${instanceName}`;
+	}
+});
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -133,24 +141,11 @@ window.addEventListener('resize', () => {
 	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
 }, { passive: true });
 
-const pageMetadata = ref<null | PageMetadata>(null);
 const widgetsShowing = ref(false);
 const navFooter = shallowRef<HTMLElement>();
 const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
 
-provide('router', mainRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-	if (pageMetadata.value) {
-		if (isRoot.value && pageMetadata.value.title === instanceName) {
-			document.title = pageMetadata.value.title;
-		} else {
-			document.title = `${pageMetadata.value.title} | ${instanceName}`;
-		}
-	}
-});
-provideReactiveMetadata(pageMetadata);
+provide(DI.router, mainRouter);
 
 const menuIndicated = computed(() => {
 	for (const def in navbarItemDef) {
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 9ba1c85e4f46..9cfe285a130b 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -69,20 +69,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, provide, ref } from 'vue';
+import { computed, onMounted, provide, ref, watch } from 'vue';
 import { instanceName } from '@@/js/config.js';
 import XCommon from './_common_/common.vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
 import { mainRouter } from '@/router/main.js';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
-import { provideUi } from '@/scripts/tms/provide-ui.js';
-
-provideUi('visitor');
+import { DI } from '@/di.js';
+
+const { routingPageMetadataRef } = useRoutingPageMetadata();
+watch(routingPageMetadataRef, (pageMetadata) => {
+	if (pageMetadata == null) return;
+	if (isRoot.value && pageMetadata.title === instanceName) {
+		document.title = pageMetadata.title;
+	} else {
+		document.title = `${pageMetadata.title} | ${instanceName}`;
+	}
+});
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -96,21 +104,7 @@ onMounted(() => {
 	}, { passive: true });
 });
 
-const pageMetadata = ref<null | PageMetadata>(null);
-
-provide('router', mainRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-	if (pageMetadata.value) {
-		if (isRoot.value && pageMetadata.value.title === instanceName) {
-			document.title = pageMetadata.value.title;
-		} else {
-			document.title = `${pageMetadata.value.title} | ${instanceName}`;
-		}
-	}
-});
-provideReactiveMetadata(pageMetadata);
+provide(DI.router, mainRouter);
 
 const isTimelineAvailable = ref(instance.policies.ltlAvailable || instance.policies.gtlAvailable);
 
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 9ca2b45aec7b..cdd2efece996 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -22,35 +22,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref } from 'vue';
+import { computed, provide, watch } from 'vue';
 import { instanceName, ui } from '@@/js/config.js';
 import XCommon from './_common_/common.vue';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { useRoutingPageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { mainRouter } from '@/router/main.js';
-import { provideUi } from '@/scripts/tms/provide-ui.js';
+import { DI } from '@/di.js';
 
-provideUi('zen');
+const { routingPageMetadataRef } = useRoutingPageMetadata();
+watch(routingPageMetadataRef, (pageMetadata) => {
+	if (pageMetadata == null) return;
+	if (isRoot.value && pageMetadata.title === instanceName) {
+		document.title = pageMetadata.title;
+	} else {
+		document.title = `${pageMetadata.title} | ${instanceName}`;
+	}
+});
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
-const pageMetadata = ref<null | PageMetadata>(null);
-
 const showBottom = !(new URLSearchParams(location.search)).has('zen') && ui === 'deck';
 
-provide('router', mainRouter);
-provideMetadataReceiver((metadataGetter) => {
-	const info = metadataGetter();
-	pageMetadata.value = info;
-	if (pageMetadata.value) {
-		if (isRoot.value && pageMetadata.value.title === instanceName) {
-			document.title = pageMetadata.value.title;
-		} else {
-			document.title = `${pageMetadata.value.title} | ${instanceName}`;
-		}
-	}
-});
-provideReactiveMetadata(pageMetadata);
+provide(DI.router, mainRouter);
 
 function goToMisskey() {
 	window.location.href = '/';