From d609f41f61d82d64cb8b01a0f4e52fb1af2c893e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 18 Mar 2025 17:31:25 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkPageWindow.vue  |   7 +-
 .../src/components/global/MkPageHeader.vue    |   4 +-
 .../components/global/NestedRouterView.vue    |  65 ++++++
 .../src/components/global/RouterView.vue      |  60 +++---
 .../components/global/StackingRouterView.vue  | 191 ++++++++++++++++++
 packages/frontend/src/components/index.ts     |   6 +
 packages/frontend/src/di.ts                   |   1 +
 packages/frontend/src/page.ts                 |  11 +-
 .../frontend/src/pages/admin/_header_.vue     |   8 +-
 packages/frontend/src/pages/admin/index.vue   |   6 +-
 .../frontend/src/pages/settings/index.vue     |   4 +-
 .../frontend/src/pages/settings/other.vue     |   4 +
 packages/frontend/src/pages/timeline.vue      |   8 +-
 packages/frontend/src/preferences/def.ts      |   4 +
 packages/frontend/src/ui/deck/main-column.vue |   5 +-
 packages/frontend/src/ui/minimum.vue          |   2 +-
 packages/frontend/src/ui/universal.vue        |   5 +-
 packages/frontend/src/ui/visitor.vue          |   2 +-
 packages/frontend/src/ui/zen.vue              |   2 +-
 .../utility/autogen/settings-search-index.ts  |   2 +-
 20 files changed, 324 insertions(+), 73 deletions(-)
 create mode 100644 packages/frontend/src/components/global/NestedRouterView.vue
 create mode 100644 packages/frontend/src/components/global/StackingRouterView.vue

diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 51f19faf29..eae2ccec4a 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -22,8 +22,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div :class="$style.root" class="_pageContainer">
-		<RouterView :key="reloadCount" :router="windowRouter"/>
+	<div :class="$style.root">
+		<StackingRouterView :key="reloadCount" :router="windowRouter"/>
+		<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :key="reloadCount" :router="windowRouter"/>
+		<RouterView v-else :key="reloadCount" :router="windowRouter"/>
 	</div>
 </MkWindow>
 </template>
@@ -44,6 +46,7 @@ import { useRouterFactory } from '@/router/supplier.js';
 import { mainRouter } from '@/router/main.js';
 import { analytics } from '@/analytics.js';
 import { DI } from '@/di.js';
+import { prefer } from '@/preferences.js';
 
 const props = defineProps<{
 	initialPath: string;
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 69bbd88cb6..b353269fef 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -49,9 +49,9 @@ import type { Tab } from './MkPageHeader.tabs.vue';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import type { PageMetadata } from '@/page.js';
 import { globalEvents } from '@/events.js';
-import { injectReactiveMetadata } from '@/page.js';
 import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
 import { $i } from '@/i.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	overridePageMetadata?: PageMetadata;
@@ -69,7 +69,7 @@ const emit = defineEmits<{
 	(ev: 'update:tab', key: string);
 }>();
 
-const injectedPageMetadata = injectReactiveMetadata();
+const injectedPageMetadata = inject(DI.pageMetadata);
 const pageMetadata = computed(() => props.overridePageMetadata ?? injectedPageMetadata.value);
 
 const hideTitle = computed(() => inject('shouldOmitHeaderTitle', false) || props.hideTitle);
diff --git a/packages/frontend/src/components/global/NestedRouterView.vue b/packages/frontend/src/components/global/NestedRouterView.vue
new file mode 100644
index 0000000000..eb7192d8e0
--- /dev/null
+++ b/packages/frontend/src/components/global/NestedRouterView.vue
@@ -0,0 +1,65 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<Suspense :timeout="0">
+	<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+
+	<template #fallback>
+		<MkLoading/>
+	</template>
+</Suspense>
+</template>
+
+<script lang="ts" setup>
+import { inject, onBeforeUnmount, provide, ref, shallowRef } from 'vue';
+import type { IRouter, Resolved } from '@/nirax.js';
+import MkLoadingPage from '@/pages/_loading_.vue';
+import { DI } from '@/di.js';
+
+const props = defineProps<{
+	router?: IRouter;
+}>();
+
+const router = props.router ?? inject(DI.router);
+
+if (router == null) {
+	throw new Error('no router provided');
+}
+
+const currentDepth = inject(DI.routerCurrentDepth, 0);
+provide(DI.routerCurrentDepth, currentDepth + 1);
+
+function resolveNested(current: Resolved, d = 0): Resolved | null {
+	if (d === currentDepth) {
+		return current;
+	} else {
+		if (current.child) {
+			return resolveNested(current.child, d + 1);
+		} else {
+			return null;
+		}
+	}
+}
+
+const current = resolveNested(router.current)!;
+const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
+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));
+}
+
+router.addListener('change', onChange);
+
+onBeforeUnmount(() => {
+	router.removeListener('change', onChange);
+});
+</script>
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 25a29a4ae7..b01e355c5e 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -4,18 +4,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<KeepAlive
-	:max="prefer.s.numberOfPageCache"
-	:exclude="pageCacheController"
->
-	<Suspense :timeout="0">
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+<div class="_pageContainer" style="height: 100%;">
+	<KeepAlive
+		:max="prefer.s.numberOfPageCache"
+		:exclude="pageCacheController"
+	>
+		<Suspense :timeout="0">
+			<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
 
-		<template #fallback>
-			<MkLoading/>
-		</template>
-	</Suspense>
-</KeepAlive>
+			<template #fallback>
+				<MkLoading/>
+			</template>
+		</Suspense>
+	</KeepAlive>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -28,7 +30,6 @@ import { DI } from '@/di.js';
 
 const props = defineProps<{
 	router?: IRouter;
-	nested?: boolean;
 }>();
 
 const router = props.router ?? inject(DI.router);
@@ -40,31 +41,16 @@ if (router == null) {
 const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
-function resolveNested(current: Resolved, d = 0): Resolved | null {
-	if (!props.nested) return current;
-
-	if (d === currentDepth) {
-		return current;
-	} else {
-		if (current.child) {
-			return resolveNested(current.child, d + 1);
-		} else {
-			return null;
-		}
-	}
-}
-
-const current = resolveNested(router.current)!;
+const current = router.current!;
 const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
 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));
+	if (resolved == null || 'redirect' in resolved.route) return;
+	currentPageComponent.value = resolved.route.component;
+	currentPageProps.value = resolved.props;
+	key.value = newKey + JSON.stringify(Object.fromEntries(resolved.props));
 
 	nextTick(() => {
 		// ページ遷移完了後に再びキャッシュを有効化
@@ -79,11 +65,11 @@ router.addListener('change', onChange);
 // #region キャッシュ制御
 
 /**
- * キャッシュクリアが有効になったら、全キャッシュをクリアする
- *
- * keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
- * キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
- */
+	 * キャッシュクリアが有効になったら、全キャッシュをクリアする
+	 *
+	 * keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
+	 * キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
+	 */
 const pageCacheController = computed(() => clearCacheRequested.value ? /.*/ : undefined);
 const clearCacheRequested = ref(false);
 
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
new file mode 100644
index 0000000000..c9364bdffa
--- /dev/null
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -0,0 +1,191 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<TransitionGroup
+	:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
+	:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
+	:duration="200"
+	tag="div" :class="$style.root"
+>
+	<div v-for="(tab, i) in tabs" :key="tab.key" :class="$style.tab" :style="{ '--i': i }">
+		<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
+		<div :class="$style.tabFg">
+			<div :class="$style.tabContent" class="_pageContainer" @click.stop="">
+				<Suspense :timeout="0">
+					<component :is="tab.component" v-bind="Object.fromEntries(tab.props)"/>
+
+					<template #fallback>
+						<MkLoading/>
+					</template>
+				</Suspense>
+			</div>
+		</div>
+	</div>
+</TransitionGroup>
+</template>
+
+<script lang="ts" setup>
+import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
+import type { IRouter, Resolved, RouteDef } from '@/nirax.js';
+import { prefer } from '@/preferences.js';
+import { globalEvents } from '@/events.js';
+import MkLoadingPage from '@/pages/_loading_.vue';
+import { DI } from '@/di.js';
+import { deepEqual } from '@/utility/deep-equal.js';
+
+const props = defineProps<{
+	router?: IRouter;
+}>();
+
+const router = props.router ?? inject(DI.router);
+
+if (router == null) {
+	throw new Error('no router provided');
+}
+
+const currentDepth = inject(DI.routerCurrentDepth, 0);
+provide(DI.routerCurrentDepth, currentDepth + 1);
+
+const current = router.current!;
+const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
+
+const tabs = shallowRef([{
+	key: key.value,
+	path: router.getCurrentPath(),
+	component: 'component' in current.route ? current.route.component : MkLoadingPage,
+	props: current.props,
+}]);
+
+function onChange({ resolved, key: newKey }) {
+	const currentTab = tabs.value[tabs.value.length - 1];
+	if (resolved == null || 'redirect' in resolved.route) return;
+	if (resolved.route.path === currentTab.path && deepEqual(resolved.props, currentTab.props)) return;
+	key.value = newKey + JSON.stringify(Object.fromEntries(resolved.props));
+
+	if (tabs.value.some(tab => tab.key === key.value)) {
+		const newTabs = [];
+		for (const tab of tabs.value) {
+			newTabs.push(tab);
+
+			if (tab.key === key.value) {
+				break;
+			}
+		}
+		tabs.value = newTabs;
+		return;
+	}
+
+	tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
+		...tabs.value.slice(1),
+		{
+			key: key.value,
+			path: router.getCurrentPath(),
+			component: resolved.route.component,
+			props: resolved.props,
+		},
+	] : [...tabs.value, {
+		key: key.value,
+		path: router.getCurrentPath(),
+		component: resolved.route.component,
+		props: resolved.props,
+	}];
+}
+
+function back() {
+	const last = tabs.value[tabs.value.length - 1];
+	router.replace(last.path, last.key);
+	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
+}
+
+router.addListener('change', onChange);
+
+onBeforeUnmount(() => {
+	router.removeListener('change', onChange);
+});
+</script>
+
+<style lang="scss" module>
+.transition_x_move,
+.transition_x_enterActive,
+.transition_x_leaveActive {
+	.tabBg {
+		transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
+	}
+
+	.tabFg {
+		transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
+	}
+}
+.transition_x_enterFrom,
+.transition_x_leaveTo {
+	.tabBg {
+		opacity: 0;
+	}
+
+	.tabFg {
+		opacity: 0;
+		transform: translateY(100px);
+	}
+}
+.transition_x_leaveActive {
+	.tabFg {
+		//position: absolute;
+	}
+}
+
+.root {
+	position: relative;
+	height: 100%;
+	overflow: clip;
+}
+
+.tabBg {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #0003;
+	-webkit-backdrop-filter: var(--MI-blur, blur(3px));
+	backdrop-filter: var(--MI-blur, blur(3px));
+}
+
+.tab {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	box-sizing: border-box;
+
+	&:not(:nth-child(1)) {
+		.tabFg {
+			position: absolute;
+			z-index: 1;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: calc(100% - 20px * var(--i));
+		}
+	}
+}
+
+.tabFg {
+	position: relative;
+	height: 100%;
+	background: var(--MI_THEME-bg);
+	border-radius: 16px 16px 0 0;
+	overflow: clip;
+}
+
+.tabContent {
+	height: 100%;
+}
+</style>
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 66ac871f7d..c28c457e33 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -16,6 +16,8 @@ import MkTime from './global/MkTime.vue';
 import MkUrl from './global/MkUrl.vue';
 import I18n from './global/I18n.vue';
 import RouterView from './global/RouterView.vue';
+import NestedRouterView from './global/NestedRouterView.vue';
+import StackingRouterView from './global/StackingRouterView.vue';
 import MkLoading from './global/MkLoading.vue';
 import MkError from './global/MkError.vue';
 import MkAd from './global/MkAd.vue';
@@ -38,6 +40,8 @@ export default function(app: App) {
 export const components = {
 	I18n: I18n,
 	RouterView: RouterView,
+	NestedRouterView: NestedRouterView,
+	StackingRouterView: StackingRouterView,
 	Mfm: Mfm,
 	MkA: MkA,
 	MkAcct: MkAcct,
@@ -65,6 +69,8 @@ declare module '@vue/runtime-core' {
 	export interface GlobalComponents {
 		I18n: typeof I18n;
 		RouterView: typeof RouterView;
+		NestedRouterView: typeof NestedRouterView;
+		StackingRouterView: typeof StackingRouterView;
 		Mfm: typeof Mfm;
 		MkA: typeof MkA;
 		MkAcct: typeof MkAcct;
diff --git a/packages/frontend/src/di.ts b/packages/frontend/src/di.ts
index 192242984c..2afe35550d 100644
--- a/packages/frontend/src/di.ts
+++ b/packages/frontend/src/di.ts
@@ -10,4 +10,5 @@ export const DI = {
 	routerCurrentDepth: Symbol() as InjectionKey<number>,
 	router: Symbol() as InjectionKey<IRouter>,
 	mock: Symbol() as InjectionKey<boolean>,
+	pageMetadata: Symbol() as InjectionKey<Ref<Record<string, any>>>,
 };
diff --git a/packages/frontend/src/page.ts b/packages/frontend/src/page.ts
index f3ec09a16f..0107f17be4 100644
--- a/packages/frontend/src/page.ts
+++ b/packages/frontend/src/page.ts
@@ -5,6 +5,7 @@
 
 import * as Misskey from 'misskey-js';
 import { inject, isRef, onActivated, onBeforeUnmount, provide, ref, toValue, watch } from 'vue';
+import { DI } from './di.js';
 import type { MaybeRefOrGetter, Ref } from 'vue';
 
 export type PageMetadata = {
@@ -31,9 +32,6 @@ 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 definePage = (maybeRefOrGetterMetadata: MaybeRefOrGetter<PageMetadata>): void => {
 	const metadataRef = ref(toValue(maybeRefOrGetterMetadata));
@@ -55,6 +53,8 @@ export const definePage = (maybeRefOrGetterMetadata: MaybeRefOrGetter<PageMetada
 	onActivated(() => {
 		receiver?.(metadataGetter);
 	});
+
+	provide(DI.pageMetadata, metadataRef);
 };
 
 export const provideMetadataReceiver = (receiver: PageMetadataReceiver): void => {
@@ -64,8 +64,3 @@ export const provideMetadataReceiver = (receiver: PageMetadataReceiver): void =>
 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);
-};
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index 1382cad9a4..f073a4af7e 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -33,13 +33,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch, nextTick } from 'vue';
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch, nextTick, inject } from 'vue';
 import tinycolor from 'tinycolor2';
 import { scrollToTop } from '@@/js/scroll.js';
 import { popupMenu } from '@/os.js';
 import MkButton from '@/components/MkButton.vue';
 import { globalEvents } from '@/events.js';
-import { injectReactiveMetadata } from '@/page.js';
+import { DI } from '@/di.js';
 
 type Tab = {
 	key?: string | null;
@@ -66,7 +66,7 @@ const emit = defineEmits<{
 	(ev: 'update:tab', key: string);
 }>();
 
-const pageMetadata = injectReactiveMetadata();
+const pageMetadata = inject(DI.pageMetadata);
 
 const el = shallowRef<HTMLElement>(null);
 const tabRefs = {};
@@ -119,7 +119,7 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 }
 
 const calcBg = () => {
-	const rawBg = pageMetadata.value?.bg ?? 'var(--MI_THEME-bg)';
+	const rawBg = pageMetadata.value.bg ?? 'var(--MI_THEME-bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
 	tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 5c47ea8ddc..7e7467859b 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -25,16 +25,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkSpacer>
 	</div>
 	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-		<RouterView nested/>
+		<NestedRouterView/>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { onActivated, onMounted, onUnmounted, provide, watch, ref, computed } from 'vue';
+import type { SuperMenuDef } from '@/components/MkSuperMenu.vue';
+import type { PageMetadata } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import MkSuperMenu from '@/components/MkSuperMenu.vue';
-import type { SuperMenuDef } from '@/components/MkSuperMenu.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import { instance } from '@/instance.js';
 import { lookup } from '@/utility/lookup.js';
@@ -42,7 +43,6 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { lookupUser, lookupUserByEmail, lookupFile } from '@/utility/admin-lookup.js';
 import { definePage, provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
-import type { PageMetadata } from '@/page.js';
 import { useRouter } from '@/router/supplier.js';
 
 const isEmpty = (x: string | null) => x == null || x === '';
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index ef148dd9af..ea1b714aed 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -20,8 +20,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 				<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-					<div class="bkzroven" style="container-type: inline-size;">
-						<RouterView nested/>
+					<div style="container-type: inline-size;">
+						<NestedRouterView/>
 					</div>
 				</div>
 			</div>
diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index 3d425ff406..d81c6fc93d 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -91,6 +91,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkSwitch v-model="skipNoteRender">
 							<template #label>Enable note render skipping</template>
 						</MkSwitch>
+						<MkSwitch v-model="stackingRouterView">
+							<template #label>Enable stacking router view</template>
+						</MkSwitch>
 					</div>
 				</MkFolder>
 			</SearchMarker>
@@ -142,6 +145,7 @@ const reportError = prefer.model('reportError');
 const enableCondensedLine = prefer.model('enableCondensedLine');
 const skipNoteRender = prefer.model('skipNoteRender');
 const devMode = prefer.model('devMode');
+const stackingRouterView = prefer.model('experimental.stackingRouterView');
 
 watch(skipNoteRender, async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index b8f5ece02b..68f4b7a26d 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, provide, shallowRef, ref, onMounted, onActivated } from 'vue';
-import { getScrollContainer, scroll } from '@@/js/scroll.js';
+import { scroll } from '@@/js/scroll.js';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import type { MenuItem } from '@/types/menu.js';
 import type { BasicTimelineType } from '@/timelines.js';
@@ -56,15 +56,9 @@ import { deepMerge } from '@/utility/merge.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
 import { prefer } from '@/preferences.js';
-import { useScrollPositionManager } from '@/nirax.js';
-import { useRouter } from '@/router/supplier.js';
 
 provide('shouldOmitHeaderTitle', true);
 
-const router = useRouter();
-
-useScrollPositionManager(() => getScrollContainer(rootEl.value), router);
-
 const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();
 
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index 9ad604ae72..dd1e39ab06 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -367,4 +367,8 @@ export const PREF_DEF = {
 			sfxVolume: 1,
 		},
 	},
+
+	'experimental.stackingRouterView': {
+		default: false,
+	},
 } satisfies PreferencesDefinition;
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
index 5de5d0a866..b4d494fb09 100644
--- a/packages/frontend/src/ui/deck/main-column.vue
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -12,8 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div class="_pageContainer" style="height: 100%;">
-		<RouterView @contextmenu.stop="onContextmenu"/>
+	<div style="height: 100%;">
+		<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" @contextmenu.stop="onContextmenu"/>
+		<RouterView v-else @contextmenu.stop="onContextmenu"/>
 	</div>
 </XColumn>
 </template>
diff --git a/packages/frontend/src/ui/minimum.vue b/packages/frontend/src/ui/minimum.vue
index ebaa46850c..7b58829ff5 100644
--- a/packages/frontend/src/ui/minimum.vue
+++ b/packages/frontend/src/ui/minimum.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div class="_pageContainer" style="height: 100%;">
+	<div style="height: 100%;">
 		<RouterView/>
 	</div>
 
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 28c05ec748..be933d5324 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -13,8 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XAnnouncements v-if="$i"/>
 			<XStatusBars :class="$style.statusbars"/>
 		</div>
-		<div :class="$style.content" class="_pageContainer">
-			<RouterView/>
+		<div :class="$style.content">
+			<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']"/>
+			<RouterView v-else/>
 		</div>
 		<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>
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index c5b7e0663a..976c3584a7 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button v-if="!isRoot" :class="$style.homeButton" class="_button" @click="goHome">
 			<i class="ti ti-home"></i>
 		</button>
-		<div :class="$style.content" class="_pageContainer">
+		<div :class="$style.content">
 			<RouterView/>
 		</div>
 	</div>
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 45524d1fbb..d60611a19c 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root">
 	<div :class="$style.contents">
-		<div class="_pageContainer" style="flex: 1; min-height: 0;">
+		<div style="flex: 1; min-height: 0;">
 			<RouterView/>
 		</div>
 
diff --git a/packages/frontend/src/utility/autogen/settings-search-index.ts b/packages/frontend/src/utility/autogen/settings-search-index.ts
index 0c83e72d82..fd92876880 100644
--- a/packages/frontend/src/utility/autogen/settings-search-index.ts
+++ b/packages/frontend/src/utility/autogen/settings-search-index.ts
@@ -572,7 +572,7 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['experimental', 'feature', 'flags'],
 			},
 			{
-				id: '54wETGawJ',
+				id: 'zWbGKohZ2',
 				label: i18n.ts.developer,
 				keywords: ['developer', 'mode', 'debug'],
 			},