🎨

packages/frontend/src/components/MkPageWindow.vue

@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div ref="contents" :class="$style.root" style="container-type: inline-size;">
+	<div :class="$style.root" class="_pageContainer">
 		<RouterView :key="reloadCount" :router="windowRouter"/>
 	</div>
 </MkWindow>
@@ -31,13 +31,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';
@@ -58,7 +56,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 +174,6 @@ function popout() {
 	windowEl.value?.close();
 }
 
-useScrollPositionManager(() => getScrollContainer(contents.value), windowRouter);
-
 onMounted(() => {
 	analytics.page({
 		path: props.initialPath,
@@ -202,9 +197,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/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/timeline.vue

@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, provide, shallowRef, ref, onMounted, onActivated } from 'vue';
-import { scroll } from '@@/js/scroll.js';
+import { getScrollContainer, scroll } from '@@/js/scroll.js';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import type { MenuItem } from '@/types/menu.js';
 import type { BasicTimelineType } from '@/timelines.js';
@@ -56,9 +56,15 @@ import { deepMerge } from '@/utility/merge.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
 import { prefer } from '@/preferences.js';
+import { useScrollPositionManager } from '@/nirax.js';
+import { useRouter } from '@/router/supplier.js';
 
 provide('shouldOmitHeaderTitle', true);
 
+const router = useRouter();
+
+useScrollPositionManager(() => getScrollContainer(rootEl.value), router);
+
 const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();
 

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,9 +59,14 @@ misskeyApiGet('federation/instances', {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.rsqzvsbo {
+.root {
-	> .bg {
+	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 {
+.misskey {
-			width: 140px;
+	width: 120px;
+
 	@media (max-width: 450px) {
-				width: 130px;
+		width: 100px;
-			}
-		}
-	}
-
-	> .emojis {
-		position: fixed;
-		bottom: 32px;
-		left: 35px;
-
-		> * {
-			margin-right: 8px;
-		}
-
-		@media (max-width: 1200px) {
-			display: none;
 	}
 }
 
-	> .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/style.scss

@@ -170,6 +170,20 @@ rt {
 	text-align: center;
 }
 
+._pageContainer {
+	container-type: size;
+	contain: strict;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+._page {
+	height: 100cqh;
+	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,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div ref="contents">
+	<div class="_pageContainer" style="height: 100%;">
 		<RouterView @contextmenu.stop="onContextmenu"/>
 	</div>
 </XColumn>
@@ -20,7 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <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 +27,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 +36,6 @@ defineProps<{
 	isStacked: boolean;
 }>();
 
-const contents = shallowRef<HTMLElement>();
 const pageMetadata = ref<null | PageMetadata>(null);
 
 provide(DI.router, mainRouter);
@@ -71,6 +68,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 class="_pageContainer" 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,18 @@ 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>
 			<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
 			<XAnnouncements v-if="$i"/>
 			<XStatusBars :class="$style.statusbars"/>
 		</div>
-		</template>
+		<div :class="$style.content" class="_pageContainer">
 			<RouterView/>
-		<div :class="$style.spacer"></div>
-	</MkStickyContainer>
-
-	<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>
-
 		<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 +28,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 +100,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 +109,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 +135,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 +198,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 +214,6 @@ watch(navFooter, () => {
 }, {
 	immediate: true,
 });
-
-useScrollPositionManager(() => contents.value.rootEl, mainRouter);
 </script>
 
 <style>
@@ -313,15 +299,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 +456,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>
-				<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>
 		</button>
-			</div>
+		<div :class="$style.content" class="_pageContainer">
-		</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,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>
+<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;
+	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 {
+.dashboard {
-			position: relative;
 	padding: 32px;
-			box-sizing: border-box;
-			max-height: 100%;
-			overflow: auto;
-		}
 }
 
-	> .main {
+.content {
-		flex: 1;
+	display: flex;
-		min-width: 0;
+	flex-direction: column;
-
+	height: 100dvh;
-		> .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;
-				}
-			}
-		}
-	}
 }
 </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 :class="$style.root">
-	<div style="container-type: inline-size;">
+	<div :class="$style.contents">
+		<div class="_pageContainer" 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 {
+.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%;