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

<!--
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">
				<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 :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 {
	margin-left: auto;
	padding: 0 4px;
	background: var(--MI_THEME-bg);
}

.tabMenuButton {
	padding: 8px;
	font-size: 13px;
}
</style>