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;">
+	<div :class="$style.root">
-		<RouterView :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>
@@ -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;
+	height: 100%;
-
-	min-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,18 +4,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<KeepAlive
+<div class="_pageContainer" style="height: 100%;">
-	:max="prefer.s.numberOfPageCache"
+	<KeepAlive
-	:exclude="pageCacheController"
+		:max="prefer.s.numberOfPageCache"
->
+		:exclude="pageCacheController"
-	<Suspense :timeout="0">
+	>
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+		<Suspense :timeout="0">
+			<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
 
-		<template #fallback>
+			<template #fallback>
-			<MkLoading/>
+				<MkLoading/>
-		</template>
+			</template>
-	</Suspense>
+		</Suspense>
-</KeepAlive>
+	</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 {
+const current = router.current!;
-	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 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 (resolved == null || 'redirect' in resolved.route) return;
-	if (current == null || 'redirect' in current.route) return;
+	currentPageComponent.value = resolved.route.component;
-	currentPageComponent.value = current.route.component;
+	currentPageProps.value = resolved.props;
-	currentPageProps.value = current.props;
+	key.value = newKey + JSON.stringify(Object.fromEntries(resolved.props));
-	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
 
 	nextTick(() => {
 		// ページ遷移完了後に再びキャッシュを有効化
@@ -79,11 +65,11 @@ router.addListener('change', onChange);
 // #region キャッシュ制御
 
 /**
- * キャッシュクリアが有効になったら、全キャッシュをクリアする
+	 * キャッシュクリアが有効になったら、全キャッシュをクリアする
- *
+	 *
- * keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
+	 * keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
- * キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
+	 * キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
- */
+	 */
 const pageCacheController = computed(() => clearCacheRequested.value ? /.*/ : undefined);
 const clearCacheRequested = ref(false);
 

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,73 +4,71 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
+<MkStickyContainer>
-	<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-		<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="900">
-		<MkSpacer :contentMax="900">
+		<div class="ogwlenmc">
-			<div class="ogwlenmc">
+			<div v-if="tab === 'local'" class="local">
-				<div v-if="tab === 'local'" class="local">
+				<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
-					<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
+					<template #prefix><i class="ti ti-search"></i></template>
+					<template #label>{{ i18n.ts.search }}</template>
+				</MkInput>
+				<MkSwitch v-model="selectMode" style="margin: 8px 0;">
+					<template #label>Select mode</template>
+				</MkSwitch>
+				<div v-if="selectMode" class="_buttons">
+					<MkButton inline @click="selectAll">Select all</MkButton>
+					<MkButton inline @click="setCategoryBulk">Set category</MkButton>
+					<MkButton inline @click="setTagBulk">Set tag</MkButton>
+					<MkButton inline @click="addTagBulk">Add tag</MkButton>
+					<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
+					<MkButton inline @click="setLicenseBulk">Set License</MkButton>
+					<MkButton inline danger @click="delBulk">Delete</MkButton>
+				</div>
+				<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
+					<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+					<template #default="{items}">
+						<div class="ldhfsamy">
+							<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
+								<img :src="emoji.url" class="img" :alt="emoji.name"/>
+								<div class="body">
+									<div class="name _monospace">{{ emoji.name }}</div>
+									<div class="info">{{ emoji.category }}</div>
+								</div>
+							</button>
+						</div>
+					</template>
+				</MkPagination>
+			</div>
+
+			<div v-else-if="tab === 'remote'" class="remote">
+				<FormSplit>
+					<MkInput v-model="queryRemote" :debounce="true" type="search" autocapitalize="off">
 						<template #prefix><i class="ti ti-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</MkInput>
-					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
+					<MkInput v-model="host" :debounce="true">
-						<template #label>Select mode</template>
+						<template #label>{{ i18n.ts.host }}</template>
-					</MkSwitch>
+					</MkInput>
-					<div v-if="selectMode" class="_buttons">
+				</FormSplit>
-						<MkButton inline @click="selectAll">Select all</MkButton>
+				<MkPagination :pagination="remotePagination">
-						<MkButton inline @click="setCategoryBulk">Set category</MkButton>
+					<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<MkButton inline @click="setTagBulk">Set tag</MkButton>
+					<template #default="{items}">
-						<MkButton inline @click="addTagBulk">Add tag</MkButton>
+						<div class="ldhfsamy">
-						<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
+							<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
-						<MkButton inline @click="setLicenseBulk">Set License</MkButton>
+								<img :src="getProxiedImageUrl(emoji.url, 'emoji')" class="img" :alt="emoji.name"/>
-						<MkButton inline danger @click="delBulk">Delete</MkButton>
+								<div class="body">
-					</div>
+									<div class="name _monospace">{{ emoji.name }}</div>
-					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
+									<div class="info">{{ emoji.host }}</div>
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.category }}</div>
-									</div>
-								</button>
-							</div>
-						</template>
-					</MkPagination>
-				</div>
-
-				<div v-else-if="tab === 'remote'" class="remote">
-					<FormSplit>
-						<MkInput v-model="queryRemote" :debounce="true" type="search" autocapitalize="off">
-							<template #prefix><i class="ti ti-search"></i></template>
-							<template #label>{{ i18n.ts.search }}</template>
-						</MkInput>
-						<MkInput v-model="host" :debounce="true">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</FormSplit>
-					<MkPagination :pagination="remotePagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
-									<img :src="getProxiedImageUrl(emoji.url, 'emoji')" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.host }}</div>
-									</div>
 								</div>
 							</div>
-						</template>
+						</div>
-					</MkPagination>
+					</template>
-				</div>
+				</MkPagination>
 			</div>
-		</MkSpacer>
+		</div>
-	</MkStickyContainer>
+	</MkSpacer>
-</div>
+</MkStickyContainer>
 </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;">
+					<div style="container-type: inline-size;">
-						<RouterView nested/>
+						<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">
+<div v-if="meta" :class="$style.root">
-	<MkFeaturedPhotos class="bg"/>
+	<MkFeaturedPhotos :class="$style.bg"/>
-	<XTimeline class="tl"/>
+	<XTimeline :class="$style.tl"/>
-	<div class="shape1"></div>
+	<div :class="$style.shape1"></div>
-	<div class="shape2"></div>
+	<div :class="$style.shape2"></div>
-	<div class="logo-wrapper">
+	<div :class="$style.logoWrapper">
-		<div class="powered-by">Powered by</div>
+		<div :class="$style.poweredBy">Powered by</div>
-		<img :src="misskeysvg" class="misskey"/>
+		<img :src="misskeysvg" :class="$style.misskey"/>
 	</div>
-	<div class="emojis">
+	<div :class="$style.contents">
-		<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">
 		<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=""/>
+				<img v-if="instance.iconUrl" :class="$style.federationInstanceIcon" :src="getInstanceIcon(instance)" alt=""/>
-				<span class="name _monospace">{{ instance.host }}</span>
+				<span class="_monospace">{{ instance.host }}</span>
 			</MkA>
 		</MarqueeText>
 	</div>
@@ -66,122 +59,111 @@ misskeyApiGet('federation/instances', {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.rsqzvsbo {
+.root {
-	> .bg {
+	height: 100cqh;
-		position: fixed;
+	overflow: auto;
-		top: 0;
+	overscroll-behavior: contain;
-		right: 0;
+}
-		width: 80vw; // 100%からshapeの幅を引いている
-		height: 100vh;
-	}
 
-	> .tl {
+.bg {
-		position: fixed;
+	position: fixed;
-		top: 0;
+	top: 0;
-		bottom: 0;
+	right: 0;
-		right: 64px;
+	width: 80vw; // 100%からshapeの幅を引いている
-		margin: auto;
+	height: 100vh;
-		padding: 128px 0;
+}
-		width: 500px;
-		height: calc(100% - 256px);
-		overflow: hidden;
-		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 
-		@media (max-width: 1200px) {
+.tl {
-			display: none;
+	position: fixed;
-		}
+	top: 0;
-	}
+	bottom: 0;
+	right: 64px;
+	margin: auto;
+	padding: 128px 0;
+	width: 500px;
+	height: calc(100% - 256px);
+	overflow: hidden;
+	-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+	mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 
-	> .shape1 {
+	@media (max-width: 1200px) {
-		position: fixed;
+		display: none;
-		top: 0;
+	}
-		left: 0;
+}
-		width: 100vw;
+
-		height: 100vh;
+.shape1 {
-		background: var(--MI_THEME-accent);
+	position: fixed;
-		clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
+	top: 0;
-	}
+	left: 0;
-	> .shape2 {
+	width: 100vw;
-		position: fixed;
+	height: 100vh;
-		top: 0;
+	background: var(--MI_THEME-accent);
-		left: 0;
+	clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
-		width: 100vw;
+}
-		height: 100vh;
+.shape2 {
-		background: var(--MI_THEME-accent);
+	position: fixed;
-		clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
+	top: 0;
-		opacity: 0.5;
+	left: 0;
-	}
+	width: 100vw;
-
+	height: 100vh;
-	> .logo-wrapper {
+	background: var(--MI_THEME-accent);
-		position: fixed;
+	clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
-		top: 36px;
+	opacity: 0.5;
-		left: 36px;
+}
-		flex: auto;
+
-		color: #fff;
+.logoWrapper {
-		user-select: none;
+	position: fixed;
-		pointer-events: none;
+	top: 36px;
-
+	left: 36px;
-		> .powered-by {
+	flex: auto;
-			margin-bottom: 2px;
+	color: #fff;
-		}
+	user-select: none;
-
+	pointer-events: none;
-		> .misskey {
+}
-			width: 140px;
+
-			@media (max-width: 450px) {
+.poweredBy {
-				width: 130px;
+	margin-bottom: 2px;
-			}
+}
-		}
+
-	}
+.misskey {
-
+	width: 120px;
-	> .emojis {
+
-		position: fixed;
+	@media (max-width: 450px) {
-		bottom: 32px;
+		width: 100px;
-		left: 35px;
+	}
-
+}
-		> * {
+
-			margin-right: 8px;
+.contents {
-		}
+	position: relative;
-
+	width: min(430px, calc(100% - 32px));
-		@media (max-width: 1200px) {
+	margin-left: 128px;
-			display: none;
+	padding: 100px 0 100px 0;
-		}
+
-	}
+	@media (max-width: 1200px) {
-
+		margin: auto;
-	> .contents {
+	}
-		position: relative;
+}
-		width: min(430px, calc(100% - 32px));
+
-		margin-left: 128px;
+.federation {
-		padding: 100px 0 100px 0;
+	position: fixed;
-
+	bottom: 16px;
-		@media (max-width: 1200px) {
+	left: 0;
-			margin: auto;
+	right: 0;
-		}
+	margin: auto;
-	}
+	background: var(--MI_THEME-acrylicPanel);
-
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	> .federation {
+	backdrop-filter: var(--MI-blur, blur(15px));
-		position: fixed;
+	border-radius: 999px;
-		bottom: 16px;
+	overflow: clip;
-		left: 0;
+	width: 800px;
-		right: 0;
+	padding: 8px 0;
-		margin: auto;
+
-		background: var(--MI_THEME-acrylicPanel);
+	@media (max-width: 900px) {
-		-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+		display: none;
-		backdrop-filter: var(--MI-blur, blur(15px));
-		border-radius: 999px;
-		overflow: clip;
-		width: 800px;
-		padding: 8px 0;
-
-		@media (max-width: 900px) {
-			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;
+	display: inline-block;
-		width: 20px;
+	width: 20px;
-		height: 20px;
+	height: 20px;
-		margin-right: 5px;
+	margin-right: 5px;
-		border-radius: 999px;
+	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">
+	<div style="height: 100%;">
-		<RouterView @contextmenu.stop="onContextmenu"/>
+		<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,17 +7,29 @@ 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">
+	<div :class="$style.contents" @contextmenu.stop="onContextmenu">
-		<template #header>
+		<div>
-			<div>
+			<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
-				<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
+			<XAnnouncements v-if="$i"/>
-				<XAnnouncements v-if="$i"/>
+			<XStatusBars :class="$style.statusbars"/>
-				<XStatusBars :class="$style.statusbars"/>
+		</div>
-			</div>
+		<div :class="$style.content">
-		</template>
+			<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']"/>
-		<RouterView/>
+			<RouterView v-else/>
-		<div :class="$style.spacer"></div>
+		</div>
-	</MkStickyContainer>
+		<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="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">
+					<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+				</span>
+			</button>
+			<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/>
@@ -25,19 +37,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<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('/my/notifications')">
-			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
-			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
-				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
-			</span>
-		</button>
-		<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>
-
 	<Transition
 		:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
 		:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
@@ -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 v-if="!narrow && !isRoot" :class="$style.side">
-		<div class="banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
+		<div :class="$style.banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
-		<div class="dashboard">
+		<div :class="$style.dashboard">
 			<MkVisitorDashboard/>
 		</div>
 	</div>
 
-	<div class="main">
+	<div :class="$style.main">
-		<div v-if="!isRoot" class="header">
+		<button v-if="!isRoot" :class="$style.homeButton" class="_button" @click="goHome">
-			<div v-if="narrow === false" class="wide">
+			<i class="ti ti-home"></i>
-				<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
+		</button>
-				<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i> {{ i18n.ts.timeline }}</MkA>
+		<div :class="$style.content">
-				<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i> {{ i18n.ts.explore }}</MkA>
+			<RouterView/>
-				<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>
-				</button>
-			</div>
-		</div>
-		<div class="contents">
-			<main v-if="!isRoot" style="container-type: inline-size;">
-				<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(() => {
+function goHome() {
-	return {
+	mainRouter.push('/');
-		'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(),
-	});
 }
 
 onMounted(() => {
@@ -145,149 +73,64 @@ 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>
+<style lang="scss" module>
-.tray-enter-active,
+.root {
-.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 {
 	display: flex;
-	min-height: 100vh;
+	height: 100dvh;
+	overflow: clip;
+}
 
-	> .side {
+.main {
-		position: sticky;
+	display: flex;
-		top: 0;
+	flex-direction: column;
-		left: 0;
+	flex: 1;
-		width: 500px;
+	min-width: 0;
-		height: 100vh;
+}
-		background: var(--MI_THEME-accent);
 
-		> .banner {
+.homeButton {
-			position: absolute;
+	position: fixed;
-			top: 0;
+	z-index: 1000;
-			left: 0;
+	bottom: 16px;
-			width: 100%;
+	right: 16px;
-			aspect-ratio: 1.5;
+	width: 60px;
-			background-position: center;
+	height: 60px;
-			background-size: cover;
+	background: var(--MI_THEME-panel);
-			-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+	border-radius: 999px;
-			mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-		}
+}
 
-		> .dashboard {
+.side {
-			position: relative;
+	position: relative;
-			padding: 32px;
+	width: 500px;
-			box-sizing: border-box;
+	overflow-y: scroll;
-			max-height: 100%;
+	background: var(--MI_THEME-accent);
-			overflow: auto;
+}
-		}
-	}
 
-	> .main {
+.banner {
-		flex: 1;
+	position: absolute;
-		min-width: 0;
+	top: 0;
+	left: 0;
+	width: 100%;
+	aspect-ratio: 1.5;
+	background-position: center;
+	background-size: cover;
+	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+	mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+}
 
-		> .header {
+.dashboard {
-			background: var(--MI_THEME-panel);
+	padding: 32px;
+}
 
-			> .wide {
+.content {
-				line-height: 50px;
+	display: flex;
-				padding: 0 16px;
+	flex-direction: column;
-
+	height: 100dvh;
-				> .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;
-				}
-			}
-		}
-	}
 }
 </style>

packages/frontend/src/ui/zen.vue

@@ -4,21 +4,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="showBottom ? $style.rootWithBottom : $style.root">
+<div :class="$style.root">
-	<div style="container-type: inline-size;">
+	<div :class="$style.contents">
-		<RouterView/>
+		<div style="flex: 1; min-height: 0;">
+			<RouterView/>
+		</div>
+
+		<!--
+			デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
+			See https://github.com/misskey-dev/misskey/issues/10905
+		-->
+		<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>
-
-<!--
-	デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
-	See https://github.com/misskey-dev/misskey/issues/10905
--->
-<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>
 </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 {
+.contents {
-	min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
+	display: flex;
-	box-sizing: border-box;
+	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'],
 			},