Merge branch 'develop' into chat

packages/frontend/src/components/MkPageWindow.vue

@@ -22,8 +22,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div ref="contents" :class="$style.root" style="container-type: inline-size;">
-		<RouterView :key="reloadCount" :router="windowRouter"/>
+	<div :class="$style.root">
+		<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :key="reloadCount" :router="windowRouter"/>
+		<RouterView v-else :key="reloadCount" :router="windowRouter"/>
 	</div>
 </MkWindow>
 </template>
@@ -31,13 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
 import { url } from '@@/js/config.js';
-import { getScrollContainer } from '@@/js/scroll.js';
 import type { PageMetadata } from '@/page.js';
 import RouterView from '@/components/global/RouterView.vue';
 import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/utility/popout.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
-import { useScrollPositionManager } from '@/nirax.js';
 import { i18n } from '@/i18n.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
 import { openingWindowsCount } from '@/os.js';
@@ -46,6 +45,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;
@@ -58,7 +58,6 @@ const emit = defineEmits<{
 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; }[]>([{
@@ -177,8 +176,6 @@ function popout() {
 	windowEl.value?.close();
 }
 
-useScrollPositionManager(() => getScrollContainer(contents.value), windowRouter);
-
 onMounted(() => {
 	analytics.page({
 		path: props.initialPath,
@@ -202,9 +199,7 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
-	overscroll-behavior: contain;
-
-	min-height: 100%;
+	height: 100%;
 	background: var(--MI_THEME-bg);
 
 	--MI-margin: var(--MI-marginHalf);

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);

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>

packages/frontend/src/components/global/RouterView.vue

@@ -4,6 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
+<div class="_pageContainer" style="height: 100%;">
 	<KeepAlive
 		:max="prefer.s.numberOfPageCache"
 		:exclude="pageCacheController"
@@ -16,6 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</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(() => {
 		// ページ遷移完了後に再びキャッシュを有効化

packages/frontend/src/components/global/StackingRouterView.vue

@@ -0,0 +1,256 @@
+<!--
+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.tabs"
+>
+	<div v-for="(tab, i) in tabs" :key="tab.key" :class="$style.tab" :style="{ '--i': i - 1 }">
+		<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
+		<div :class="$style.tabFg" @click.stop="back()">
+			<div v-if="i > 0" :class="$style.tabMenu">
+				<svg :class="$style.tabMenuShape" viewBox="0 0 24 16">
+					<g transform="matrix(2.04108e-17,-0.333333,0.222222,1.36072e-17,21.3333,15.9989)">
+						<path d="M23.997,-42C47.903,-23.457 47.997,12 47.997,12L-0.003,12L-0.003,-96C-0.003,-96 0.091,-60.543 23.997,-42Z" style="fill:var(--MI_THEME-panel);"/>
+					</g>
+				</svg>
+				<button :class="$style.tabMenuButton" class="_button" @click.stop="mount"><i class="ti ti-rectangle"></i></button>
+				<button :class="$style.tabMenuButton" class="_button" @click.stop="back"><i class="ti ti-x"></i></button>
+			</div>
+			<div v-if="i > 0" :class="$style.tabBorder"></div>
+			<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 tabs = shallowRef([{
+	key: router.getCurrentPath(),
+	path: router.getCurrentPath(),
+	route: router.current.route.path,
+	component: 'component' in router.current.route ? router.current.route.component : MkLoadingPage,
+	props: router.current.props,
+}]);
+
+function onChange({ resolved }) {
+	const currentTab = tabs.value[tabs.value.length - 1];
+	const route = resolved.route.path;
+	if (resolved == null || 'redirect' in resolved.route) return;
+	if (resolved.route.path === currentTab.path && deepEqual(resolved.props, currentTab.props)) return;
+	const fullPath = router.getCurrentPath();
+
+	if (tabs.value.some(tab => tab.route === route && deepEqual(resolved.props, tab.props))) {
+		const newTabs = [];
+		for (const tab of tabs.value) {
+			newTabs.push(tab);
+
+			if (tab.route === route && deepEqual(resolved.props, tab.props)) {
+				break;
+			}
+		}
+		tabs.value = newTabs;
+		return;
+	}
+
+	tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
+		...tabs.value.slice(1),
+		{
+			key: fullPath,
+			path: fullPath,
+			route,
+			component: resolved.route.component,
+			props: resolved.props,
+		},
+	] : [...tabs.value, {
+		key: fullPath,
+		path: fullPath,
+		route,
+		component: resolved.route.component,
+		props: resolved.props,
+	}];
+}
+
+function onReplace({ path }) {
+	const currentTab = tabs.value[tabs.value.length - 1];
+	console.log('replace', currentTab.path, path);
+	currentTab.path = path;
+	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1), currentTab];
+}
+
+function mount() {
+	const currentTab = tabs.value[tabs.value.length - 1];
+	tabs.value = [currentTab];
+}
+
+function back() {
+	const prev = tabs.value[tabs.value.length - 2];
+	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
+	router.replace(prev.path, prev.key);
+}
+
+router.addListener('replace', onReplace);
+router.addListener('change', onChange);
+
+onBeforeUnmount(() => {
+	router.removeListener('replace', onReplace);
+	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;
+	}
+}
+
+.tabs {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.tab {
+	overflow: clip;
+
+	&:first-child {
+		position: relative;
+		width: 100%;
+		height: 100%;
+
+		.tabFg {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+
+		.tabContent {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	&:not(:first-child) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+
+		.tabBg {
+			position: absolute;
+			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));
+		}
+
+		.tabFg {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: calc(100% - (10px + (20px * var(--i))));
+			display: flex;
+			flex-direction: column;
+		}
+
+		.tabContent {
+			flex: 1;
+			width: 100%;
+			height: 100%;
+			background: var(--MI_THEME-bg);
+		}
+	}
+}
+
+.tabMenu {
+	position: relative;
+	margin-left: auto;
+	padding: 0 4px;
+	background: var(--MI_THEME-panel);
+}
+
+.tabMenuShape {
+	position: absolute;
+	bottom: -1px;
+	left: -100%;
+	height: calc(100% + 1px);
+	width: 129%;
+	pointer-events: none;
+}
+
+.tabBorder {
+	height: 6px;
+	background: var(--MI_THEME-panel);
+}
+
+.tabMenuButton {
+	padding: 8px;
+	font-size: 13px;
+}
+</style>

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;

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>>>,
 };

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);
-};

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();

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 === '';

packages/frontend/src/pages/custom-emojis-manager.vue

@@ -4,7 +4,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900">
@@ -70,7 +69,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
-</div>
 </template>
 
 <script lang="ts" setup>

packages/frontend/src/pages/settings/index.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer>
+<MkStickyContainer class="_pageScrollable">
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900" :marginMin="20" :marginMax="32">
 		<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
@@ -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>

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 });

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -4,31 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<MkFeaturedPhotos class="bg"/>
-	<XTimeline class="tl"/>
-	<div class="shape1"></div>
-	<div class="shape2"></div>
-	<div class="logo-wrapper">
-		<div class="powered-by">Powered by</div>
-		<img :src="misskeysvg" class="misskey"/>
+<div v-if="meta" :class="$style.root">
+	<MkFeaturedPhotos :class="$style.bg"/>
+	<XTimeline :class="$style.tl"/>
+	<div :class="$style.shape1"></div>
+	<div :class="$style.shape2"></div>
+	<div :class="$style.logoWrapper">
+		<div :class="$style.poweredBy">Powered by</div>
+		<img :src="misskeysvg" :class="$style.misskey"/>
 	</div>
-	<div class="emojis">
-		<MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="❤"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="😆"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="🎉"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="🍮"/>
-	</div>
-	<div class="contents">
+	<div :class="$style.contents">
 		<MkVisitorDashboard/>
 	</div>
-	<div v-if="instances && instances.length > 0" class="federation">
+	<div v-if="instances && instances.length > 0" :class="$style.federation">
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
 				<!--<MkInstanceCardMini :instance="instance"/>-->
-				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
-				<span class="name _monospace">{{ instance.host }}</span>
+				<img v-if="instance.iconUrl" :class="$style.federationInstanceIcon" :src="getInstanceIcon(instance)" alt=""/>
+				<span class="_monospace">{{ instance.host }}</span>
 			</MkA>
 		</MarqueeText>
 	</div>
@@ -66,9 +59,14 @@ misskeyApiGet('federation/instances', {
 });
 </script>
 
-<style lang="scss" scoped>
-.rsqzvsbo {
-	> .bg {
+<style lang="scss" module>
+.root {
+	height: 100cqh;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+.bg {
 	position: fixed;
 	top: 0;
 	right: 0;
@@ -76,7 +74,7 @@ misskeyApiGet('federation/instances', {
 	height: 100vh;
 }
 
-	> .tl {
+.tl {
 	position: fixed;
 	top: 0;
 	bottom: 0;
@@ -94,7 +92,7 @@ misskeyApiGet('federation/instances', {
 	}
 }
 
-	> .shape1 {
+.shape1 {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -103,7 +101,7 @@ misskeyApiGet('federation/instances', {
 	background: var(--MI_THEME-accent);
 	clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
 }
-	> .shape2 {
+.shape2 {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -114,7 +112,7 @@ misskeyApiGet('federation/instances', {
 	opacity: 0.5;
 }
 
-	> .logo-wrapper {
+.logoWrapper {
 	position: fixed;
 	top: 36px;
 	left: 36px;
@@ -122,34 +120,21 @@ misskeyApiGet('federation/instances', {
 	color: #fff;
 	user-select: none;
 	pointer-events: none;
+}
 
-		> .powered-by {
+.poweredBy {
 	margin-bottom: 2px;
 }
 
-		> .misskey {
-			width: 140px;
+.misskey {
+	width: 120px;
+
 	@media (max-width: 450px) {
-				width: 130px;
-			}
-		}
-	}
-
-	> .emojis {
-		position: fixed;
-		bottom: 32px;
-		left: 35px;
-
-		> * {
-			margin-right: 8px;
-		}
-
-		@media (max-width: 1200px) {
-			display: none;
+		width: 100px;
 	}
 }
 
-	> .contents {
+.contents {
 	position: relative;
 	width: min(430px, calc(100% - 32px));
 	margin-left: 128px;
@@ -160,7 +145,7 @@ misskeyApiGet('federation/instances', {
 	}
 }
 
-	> .federation {
+.federation {
 	position: fixed;
 	bottom: 16px;
 	left: 0;
@@ -178,10 +163,7 @@ misskeyApiGet('federation/instances', {
 		display: none;
 	}
 }
-}
-</style>
 
-<style lang="scss" module>
 .federationInstance {
 	display: inline-flex;
 	align-items: center;
@@ -190,13 +172,13 @@ misskeyApiGet('federation/instances', {
 	margin: 0 10px 0 0;
 	background: var(--MI_THEME-panel);
 	border-radius: 999px;
+}
 
-	> :global(.icon) {
+.federationInstanceIcon {
 	display: inline-block;
 	width: 20px;
 	height: 20px;
 	margin-right: 5px;
 	border-radius: 999px;
 }
-}
 </style>

packages/frontend/src/preferences/def.ts

@@ -367,4 +367,8 @@ export const PREF_DEF = {
 			sfxVolume: 1,
 		},
 	},
+
+	'experimental.stackingRouterView': {
+		default: false,
+	},
 } satisfies PreferencesDefinition;

packages/frontend/src/style.scss

@@ -170,6 +170,20 @@ rt {
 	text-align: center;
 }
 
+._pageContainer {
+	container-type: size;
+	contain: strict;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+._pageScrollable {
+	height: 100%;
+	overflow: auto;
+	overflow-y: scroll;
+	overscroll-behavior: contain;
+}
+
 ._indicatorCircle {
 	display: inline-block;
 	width: 1em;

packages/frontend/src/ui/deck/column.vue

@@ -358,7 +358,6 @@ function onDrop(ev) {
 
 		> .body {
 			background: var(--MI_THEME-bg) !important;
-			overflow-y: scroll !important;
 			scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
 
 			&::-webkit-scrollbar-track {

packages/frontend/src/ui/deck/main-column.vue

@@ -12,15 +12,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div ref="contents">
-		<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>
 
 <script lang="ts" setup>
 import { provide, shallowRef, ref } from 'vue';
-import { getScrollContainer } from '@@/js/scroll.js';
 import { isLink } from '@@/js/is-link.js';
 import XColumn from './column.vue';
 import type { Column } from '@/deck.js';
@@ -28,7 +28,6 @@ import type { PageMetadata } from '@/page.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
-import { useScrollPositionManager } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
@@ -38,7 +37,6 @@ defineProps<{
 	isStacked: boolean;
 }>();
 
-const contents = shallowRef<HTMLElement>();
 const pageMetadata = ref<null | PageMetadata>(null);
 
 provide(DI.router, mainRouter);
@@ -71,6 +69,4 @@ function onContextmenu(ev: MouseEvent) {
 		},
 	}], ev);
 }
-
-useScrollPositionManager(() => getScrollContainer(contents.value), mainRouter);
 </script>

packages/frontend/src/ui/minimum.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div style="container-type: inline-size;">
+	<div style="height: 100%;">
 		<RouterView/>
 	</div>
 
@@ -46,6 +46,5 @@ document.documentElement.style.overflowY = 'scroll';
 <style lang="scss" module>
 .root {
 	min-height: 100dvh;
-	box-sizing: border-box;
 }
 </style>

packages/frontend/src/ui/universal.vue

@@ -7,27 +7,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
 
-	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
-		<template #header>
+	<div :class="$style.contents" @contextmenu.stop="onContextmenu">
 		<div>
 			<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
 			<XAnnouncements v-if="$i"/>
 			<XStatusBars :class="$style.statusbars"/>
 		</div>
-		</template>
-		<RouterView/>
-		<div :class="$style.spacer"></div>
-	</MkStickyContainer>
-
-	<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
-		<XWidgets/>
+		<div :class="$style.content">
+			<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']"/>
+			<RouterView v-else/>
 		</div>
-
-	<button v-if="!isDesktop && !pageMetadata?.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>
-		<button :class="$style.navButton" class="_button" @click="isRoot ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
+			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
 			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
 				<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
 				<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
@@ -37,6 +29,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
 			<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 		</div>
+	</div>
+
+	<div v-if="isDesktop && !pageMetadata?.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>
 
 	<Transition
 		:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
@@ -102,7 +101,6 @@ import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js';
 import { isLink } from '@@/js/is-link.js';
 import XCommon from './_common_/common.vue';
 import type { Ref } from 'vue';
-import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 import type { PageMetadata } from '@/page.js';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import * as os from '@/os.js';
@@ -112,7 +110,6 @@ import { $i } from '@/i.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
 import { deviceKind } from '@/utility/device-kind.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { useScrollPositionManager } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
 import { prefer } from '@/preferences.js';
 import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
@@ -139,7 +136,6 @@ window.addEventListener('resize', () => {
 const pageMetadata = ref<null | PageMetadata>(null);
 const widgetsShowing = ref(false);
 const navFooter = shallowRef<HTMLElement>();
-const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
 
 provide(DI.router, mainRouter);
 provideMetadataReceiver((metadataGetter) => {
@@ -203,13 +199,6 @@ const onContextmenu = (ev) => {
 	}], ev);
 };
 
-function top() {
-	contents.value.rootEl.scrollTo({
-		top: 0,
-		behavior: 'smooth',
-	});
-}
-
 const navFooterHeight = ref(0);
 provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
 
@@ -226,8 +215,6 @@ watch(navFooter, () => {
 }, {
 	immediate: true,
 });
-
-useScrollPositionManager(() => contents.value.rootEl, mainRouter);
 </script>
 
 <style>
@@ -313,15 +300,104 @@ $widgets-hide-threshold: 1090px;
 }
 
 .contents {
+	display: flex;
+	flex-direction: column;
 	flex: 1;
 	height: 100%;
 	min-width: 0;
-	overflow: auto;
-	overflow-y: scroll;
-	overscroll-behavior: contain;
 	background: var(--MI_THEME-bg);
-	scroll-padding-top: 60px; // TODO: ちゃんと計算する
-	scroll-padding-bottom: 60px; // TODO: ちゃんと計算する
+}
+
+.content {
+	flex: 1;
+	min-height: 0;
+}
+
+.nav {
+	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	grid-gap: 8px;
+	width: 100%;
+	box-sizing: border-box;
+	background: var(--MI_THEME-bg);
+	border-top: solid 0.5px var(--MI_THEME-divider);
+}
+
+.navButton {
+	position: relative;
+	padding: 0;
+	aspect-ratio: 1;
+	width: 100%;
+	max-width: 60px;
+	margin: auto;
+	border-radius: 100%;
+	background: var(--MI_THEME-panel);
+	color: var(--MI_THEME-fg);
+
+	&:hover {
+		background: var(--MI_THEME-panelHighlight);
+	}
+
+	&:active {
+		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+	}
+}
+
+.postButton {
+	composes: navButton;
+	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
+	color: var(--MI_THEME-fgOnAccent);
+
+	&:hover {
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+	}
+
+	&:active {
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+	}
+}
+
+.navButtonIcon {
+	font-size: 16px;
+	vertical-align: middle;
+}
+
+.navButtonIndicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--MI_THEME-indicator);
+	font-size: 16px;
+
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
+	}
+}
+
+.menuDrawerBg {
+	z-index: 1001;
+}
+
+.menuDrawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	height: 100dvh;
+	width: 240px;
+	box-sizing: border-box;
+	contain: strict;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--MI_THEME-navBg);
+}
+
+.statusbars {
+	position: sticky;
+	top: 0;
+	left: 0;
 }
 
 .widgets {
@@ -381,101 +457,4 @@ $widgets-hide-threshold: 1090px;
 		display: none;
 	}
 }
-
-.nav {
-	position: fixed;
-	z-index: 1000;
-	bottom: 0;
-	left: 0;
-	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-gap: 8px;
-	width: 100%;
-	box-sizing: border-box;
-	-webkit-backdrop-filter: var(--MI-blur, blur(24px));
-	backdrop-filter: var(--MI-blur, blur(24px));
-	background-color: var(--MI_THEME-header);
-	border-top: solid 0.5px var(--MI_THEME-divider);
-}
-
-.navButton {
-	position: relative;
-	padding: 0;
-	aspect-ratio: 1;
-	width: 100%;
-	max-width: 60px;
-	margin: auto;
-	border-radius: 100%;
-	background: var(--MI_THEME-panel);
-	color: var(--MI_THEME-fg);
-
-	&:hover {
-		background: var(--MI_THEME-panelHighlight);
-	}
-
-	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
-	}
-}
-
-.postButton {
-	composes: navButton;
-	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
-	color: var(--MI_THEME-fgOnAccent);
-
-	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-	}
-
-	&:active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-	}
-}
-
-.navButtonIcon {
-	font-size: 18px;
-	vertical-align: middle;
-}
-
-.navButtonIndicator {
-	position: absolute;
-	top: 0;
-	left: 0;
-	color: var(--MI_THEME-indicator);
-	font-size: 16px;
-
-	&:has(.itemIndicateValueIcon) {
-		animation: none;
-		font-size: 12px;
-	}
-}
-
-.menuDrawerBg {
-	z-index: 1001;
-}
-
-.menuDrawer {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1001;
-	height: 100dvh;
-	width: 240px;
-	box-sizing: border-box;
-	contain: strict;
-	overflow: auto;
-	overscroll-behavior: contain;
-	background: var(--MI_THEME-navBg);
-}
-
-.statusbars {
-	position: sticky;
-	top: 0;
-	left: 0;
-}
-
-.spacer {
-	height: calc(var(--MI-minBottomSpacing));
-}
 </style>

packages/frontend/src/ui/visitor.vue

@@ -4,66 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="mk-app">
+<div :class="$style.root">
 	<a v-if="isRoot" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--MI_THEME-panel); color:var(--MI_THEME-fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 
-	<div v-if="!narrow && !isRoot" class="side">
-		<div class="banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
-		<div class="dashboard">
+	<div v-if="!narrow && !isRoot" :class="$style.side">
+		<div :class="$style.banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
+		<div :class="$style.dashboard">
 			<MkVisitorDashboard/>
 		</div>
 	</div>
 
-	<div class="main">
-		<div v-if="!isRoot" class="header">
-			<div v-if="narrow === false" class="wide">
-				<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
-				<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i> {{ i18n.ts.timeline }}</MkA>
-				<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i> {{ i18n.ts.explore }}</MkA>
-				<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i> {{ i18n.ts.channel }}</MkA>
-			</div>
-			<div v-else-if="narrow === true" class="narrow">
-				<button class="menu _button" @click="showMenu = true">
-					<i class="ti ti-menu-2 icon"></i>
+	<div :class="$style.main">
+		<button v-if="!isRoot" :class="$style.homeButton" class="_button" @click="goHome">
+			<i class="ti ti-home"></i>
 		</button>
-			</div>
-		</div>
-		<div class="contents">
-			<main v-if="!isRoot" style="container-type: inline-size;">
+		<div :class="$style.content">
 			<RouterView/>
-			</main>
-			<main v-else>
-				<RouterView/>
-			</main>
 		</div>
 	</div>
-
-	<Transition :name="'tray-back'">
-		<div
-			v-if="showMenu"
-			class="menu-back _modalBg"
-			@click="showMenu = false"
-			@touchstart.passive="showMenu = false"
-		></div>
-	</Transition>
-
-	<Transition :name="'tray'">
-		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i>{{ i18n.ts.home }}</MkA>
-			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i>{{ i18n.ts.timeline }}</MkA>
-			<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i>{{ i18n.ts.explore }}</MkA>
-			<MkA to="/announcements" class="link" activeClass="active"><i class="ti ti-speakerphone icon"></i>{{ i18n.ts.announcements }}</MkA>
-			<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
-			<div class="divider"></div>
-			<MkA to="/pages" class="link" activeClass="active"><i class="ti ti-news icon"></i>{{ i18n.ts.pages }}</MkA>
-			<MkA to="/play" class="link" activeClass="active"><i class="ti ti-player-play icon"></i>Play</MkA>
-			<MkA to="/gallery" class="link" activeClass="active"><i class="ti ti-icons icon"></i>{{ i18n.ts.gallery }}</MkA>
-			<div class="action">
-				<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
-			</div>
-		</div>
-	</Transition>
 </div>
 <XCommon/>
 </template>
@@ -75,8 +33,6 @@ import XCommon from './_common_/common.vue';
 import type { PageMetadata } from '@/page.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
@@ -103,39 +59,11 @@ provideMetadataReceiver((metadataGetter) => {
 });
 provideReactiveMetadata(pageMetadata);
 
-const announcements = {
-	endpoint: 'announcements',
-	limit: 10,
-};
-
-const isTimelineAvailable = ref(instance.policies.ltlAvailable || instance.policies.gtlAvailable);
-
-const showMenu = ref(false);
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 const narrow = ref(window.innerWidth < 1280);
 
-const keymap = computed(() => {
-	return {
-		's': () => {
-			mainRouter.push('/search');
-		},
-	};
-});
-
-function signin() {
-	const { dispose } = os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {
-		closed: () => dispose(),
-	});
-}
-
-function signup() {
-	const { dispose } = os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {
-		closed: () => dispose(),
-	});
+function goHome() {
+	mainRouter.push('/');
 }
 
 onMounted(() => {
@@ -145,52 +73,46 @@ onMounted(() => {
 		}, { passive: true });
 	}
 });
-
-defineExpose({
-	showMenu: showMenu,
-});
 </script>
 
 <style>
 .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
 </style>
 
-<style lang="scss" scoped>
-.tray-enter-active,
-.tray-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-enter-from,
-.tray-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.tray-back-enter-active,
-.tray-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-back-enter-from,
-.tray-back-leave-active {
-	opacity: 0;
-}
-
-.mk-app {
+<style lang="scss" module>
+.root {
 	display: flex;
-	min-height: 100vh;
+	height: 100dvh;
+	overflow: clip;
+}
 
-	> .side {
-		position: sticky;
-		top: 0;
-		left: 0;
+.main {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+}
+
+.homeButton {
+	position: fixed;
+	z-index: 1000;
+	bottom: 16px;
+	right: 16px;
+	width: 60px;
+	height: 60px;
+	background: var(--MI_THEME-panel);
+	border-radius: 999px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.side {
+	position: relative;
 	width: 500px;
-		height: 100vh;
+	overflow-y: scroll;
 	background: var(--MI_THEME-accent);
+}
 
-		> .banner {
+.banner {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -202,92 +124,13 @@ defineExpose({
 	mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
 }
 
-		> .dashboard {
-			position: relative;
+.dashboard {
 	padding: 32px;
-			box-sizing: border-box;
-			max-height: 100%;
-			overflow: auto;
-		}
 }
 
-	> .main {
-		flex: 1;
-		min-width: 0;
-
-		> .header {
-			background: var(--MI_THEME-panel);
-
-			> .wide {
-				line-height: 50px;
-				padding: 0 16px;
-
-				> .link {
-					padding: 0 16px;
-				}
-			}
-
-			> .narrow {
-				> .menu {
-					padding: 16px;
-				}
-			}
-		}
-	}
-
-	> .menu-back {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-	}
-
-	> .menu {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 240px;
-		height: 100vh;
-		background: var(--MI_THEME-panel);
-
-		> .link {
-			display: block;
-			padding: 16px;
-
-			> .icon {
-				margin-right: 1em;
-			}
-		}
-
-		> .divider {
-			margin: 8px auto;
-			width: calc(100% - 32px);
-			border-top: solid 0.5px var(--MI_THEME-divider);
-		}
-
-		> .action {
-			padding: 16px;
-
-			> button {
-				display: block;
-				width: 100%;
-				padding: 10px;
-				box-sizing: border-box;
-				text-align: center;
-				border-radius: 999px;
-
-				&._button {
-					background: var(--MI_THEME-panel);
-				}
-
-				&:first-child {
-					margin-bottom: 16px;
-				}
-			}
-		}
-	}
+.content {
+	display: flex;
+	flex-direction: column;
+	height: 100dvh;
 }
 </style>

packages/frontend/src/ui/zen.vue

@@ -4,14 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="showBottom ? $style.rootWithBottom : $style.root">
-	<div style="container-type: inline-size;">
+<div :class="$style.root">
+	<div :class="$style.contents">
+		<div style="flex: 1; min-height: 0;">
 			<RouterView/>
 		</div>
 
-	<XCommon/>
-</div>
-
 		<!--
 			デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
 			See https://github.com/misskey-dev/misskey/issues/10905
@@ -19,6 +17,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="showBottom" :class="$style.bottom">
 			<button v-tooltip="i18n.ts.goToMisskey" :class="['_button', '_shadow', $style.button]" @click="goToMisskey"><i class="ti ti-home"></i></button>
 		</div>
+	</div>
+
+	<XCommon/>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -54,19 +56,16 @@ provideReactiveMetadata(pageMetadata);
 function goToMisskey() {
 	window.location.href = '/';
 }
-
-document.documentElement.style.overflowY = 'scroll';
 </script>
 
 <style lang="scss" module>
 .root {
-	min-height: 100dvh;
-	box-sizing: border-box;
 }
 
-.rootWithBottom {
-	min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
-	box-sizing: border-box;
+.contents {
+	display: flex;
+	flex-direction: column;
+	height: 100dvh;
 }
 
 .bottom {
@@ -76,7 +75,6 @@ document.documentElement.style.overflowY = 'scroll';
 }
 
 .button {
-	position: fixed !important;
 	padding: 0;
 	aspect-ratio: 1;
 	width: 100%;

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'],
 			},