enhance(frontend): improve and refactor mobile nav footer

4 files changed, 224 insertions, 179 deletions

diff --git a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
new file mode 100644
index 0000000000..37b70847ca
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
@@ -0,0 +1,144 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div ref="rootEl" :class="$style.root">
+	<button :class="$style.item" class="_button" @click="drawerMenuShowing = true">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.itemIndicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</button>
+
+	<button :class="$style.item" class="_button" @click="mainRouter.push('/')">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-home"></i>
+		</div>
+	</button>
+
+	<button :class="$style.item" class="_button" @click="mainRouter.push('/my/notifications')">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-bell"></i>
+			<span v-if="$i?.hasUnreadNotification" :class="$style.itemIndicator" class="_blink">
+				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+			</span>
+		</div>
+	</button>
+
+	<button :class="$style.item" class="_button" @click="widgetsShowing = true">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-apps"></i>
+		</div>
+	</button>
+
+	<button :class="[$style.item, $style.post]" class="_button" @click="os.post()">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-pencil"></i>
+		</div>
+	</button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { $i } from '@/i.js';
+import * as os from '@/os.js';
+import { mainRouter } from '@/router.js';
+import { navbarItemDef } from '@/navbar.js';
+
+const drawerMenuShowing = defineModel<boolean>('drawerMenuShowing');
+const widgetsShowing = defineModel<boolean>('widgetsShowing');
+
+const rootEl = useTemplateRef('rootEl');
+
+const menuIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const rootElHeight = ref(0);
+
+watch(rootEl, () => {
+	if (rootEl.value) {
+		rootElHeight.value = rootEl.value.offsetHeight;
+		window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
+	} else {
+		rootElHeight.value = 0;
+		window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
+	}
+}, {
+	immediate: true,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	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);
+}
+
+.item {
+	&.post {
+		.itemInner {
+			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)));
+			}
+		}
+	}
+}
+
+.itemInner {
+	position: relative;
+	padding: 0;
+	aspect-ratio: 1;
+	width: 100%;
+	max-width: 50px;
+	margin: auto;
+	align-content: center;
+	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));
+	}
+}
+
+.itemIcon {
+	font-size: 14px;
+}
+
+.itemIndicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--MI_THEME-indicator);
+	font-size: 16px;
+
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/_common_/widgets.vue
index 1a6d62e19b..1a6d62e19b 100644
--- a/packages/frontend/src/ui/universal.widgets.vue
+++ b/packages/frontend/src/ui/_common_/widgets.vue
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 422b00e9c2..91da178a44 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -68,17 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'bottom'"/>
 
-		<div v-if="isMobile" :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.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
-		</div>
+		<XMobileFooterMenu v-if="isMobile" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
 	</div>
 
 	<Transition
@@ -107,19 +97,46 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</Transition>
 
+	<Transition
+		:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterActive : ''"
+		:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''"
+		:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''"
+		:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''"
+	>
+		<div
+			v-if="widgetsShowing"
+			:class="$style.widgetsDrawerBg"
+			class="_modalBg"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</Transition>
+
+	<Transition
+		:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterActive : ''"
+		:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
+		:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
+		:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
+	>
+		<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
+			<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i class="ti ti-x"></i></button>
+			<XWidgets/>
+		</div>
+	</Transition>
+
 	<XCommon/>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, useTemplateRef } from 'vue';
+import { defineAsyncComponent, ref, useTemplateRef } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import XNavbarH from '@/ui/_common_/navbar-h.vue';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
+import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
 import * as os from '@/os.js';
-import { navbarItemDef } from '@/navbar.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { deviceKind } from '@/utility/device-kind.js';
@@ -139,6 +156,7 @@ import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumn
 
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
+const XWidgets = defineAsyncComponent(() => import('./_common_/widgets.vue'));
 
 const columnComponents = {
 	main: XMainColumn,
@@ -172,6 +190,7 @@ window.addEventListener('resize', () => {
 const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet');
 const withWallpaper = prefer.s['deck.wallpaper'] != null;
 const drawerMenuShowing = ref(false);
+const widgetsShowing = ref(false);
 const gap = prefer.r['deck.columnGap'];
 
 /*
@@ -181,14 +200,6 @@ watch(route, () => {
 });
 */
 
-const menuIndicated = computed(() => {
-	if ($i == null) return false;
-	for (const def in navbarItemDef) {
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
 function showSettings() {
 	os.pageWindow('/settings/deck');
 }
@@ -280,6 +291,28 @@ if (prefer.s['deck.wallpaper'] != null) {
 	transform: translateX(-240px);
 }
 
+.transition_widgetsDrawerBg_enterActive,
+.transition_widgetsDrawerBg_leaveActive {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_widgetsDrawerBg_enterFrom,
+.transition_widgetsDrawerBg_leaveTo {
+	opacity: 0;
+}
+
+.transition_widgetsDrawer_enterActive,
+.transition_widgetsDrawer_leaveActive {
+	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);
+}
+.transition_widgetsDrawer_enterFrom,
+.transition_widgetsDrawer_leaveTo {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
 .root {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
@@ -427,68 +460,33 @@ if (prefer.s['deck.wallpaper'] != null) {
 	background: var(--MI_THEME-navBg);
 }
 
-.nav {
-	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr;
-	grid-gap: 8px;
-	width: 100%;
-	box-sizing: border-box;
-	-webkit-backdrop-filter: var(--MI-blur, blur(32px));
-	backdrop-filter: var(--MI-blur, blur(32px));
-	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: 50px;
-	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));
-	}
+.widgetsDrawerBg {
+	z-index: 1001;
 }
 
-.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)));
-	}
+.widgetsDrawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	width: 310px;
+	height: 100dvh;
+	padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
+	box-sizing: border-box;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--MI_THEME-bg);
 }
 
-.navButtonIcon {
-	font-size: 18px;
-	vertical-align: middle;
+.widgetsCloseButton {
+	padding: 8px;
+	display: block;
+	margin: 0 auto;
 }
 
-.navButtonIndicator {
-	position: absolute;
-	top: 0;
-	left: 0;
-	color: var(--MI_THEME-indicator);
-	font-size: 16px;
-
-	&:has(.itemIndicateValueIcon) {
-		animation: none;
-		font-size: 12px;
+@media (min-width: 370px) {
+	.widgetsCloseButton {
+		display: none;
 	}
 }
 </style>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index f43aa43f39..0b4cddf938 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -15,18 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :class="$style.content"/>
 		<RouterView v-else :class="$style.content"/>
-		<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>
+		<XMobileFooterMenu v-if="isMobile" ref="navFooter" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
 	</div>
 
 	<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
@@ -91,14 +80,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, computed, ref, watch, useTemplateRef } from 'vue';
+import { defineAsyncComponent, provide, onMounted, computed, ref } from 'vue';
 import { instanceName } from '@@/js/config.js';
 import { isLink } from '@@/js/is-link.js';
 import XCommon from './_common_/common.vue';
 import type { PageMetadata } from '@/page.js';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
+import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
+import XPreferenceRestore from '@/ui/_common_/PreferenceRestore.vue';
 import * as os from '@/os.js';
-import { navbarItemDef } from '@/navbar.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
@@ -109,11 +99,10 @@ import { prefer } from '@/preferences.js';
 import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
 import { DI } from '@/di.js';
 
-const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
+const XWidgets = defineAsyncComponent(() => import('./_common_/widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
-const XPreferenceRestore = defineAsyncComponent(() => import('@/ui/_common_/PreferenceRestore.vue'));
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -129,7 +118,6 @@ window.addEventListener('resize', () => {
 
 const pageMetadata = ref<null | PageMetadata>(null);
 const widgetsShowing = ref(false);
-const navFooter = useTemplateRef('navFooter');
 
 provide(DI.router, mainRouter);
 provideMetadataReceiver((metadataGetter) => {
@@ -145,14 +133,6 @@ provideMetadataReceiver((metadataGetter) => {
 });
 provideReactiveMetadata(pageMetadata);
 
-const menuIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
 const drawerMenuShowing = ref(false);
 
 mainRouter.on('change', () => {
@@ -192,20 +172,6 @@ const onContextmenu = (ev) => {
 		},
 	}], ev);
 };
-
-const navFooterHeight = ref(0);
-
-watch(navFooter, () => {
-	if (navFooter.value) {
-		navFooterHeight.value = navFooter.value.offsetHeight;
-		window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
-	} else {
-		navFooterHeight.value = 0;
-		window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
-	}
-}, {
-	immediate: true,
-});
 </script>
 
 <style lang="scss" module>
@@ -282,69 +248,6 @@ $widgets-hide-threshold: 1090px;
 	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: 50px;
-	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;
 }