feat(frontend): ページのタブバーを下部に表示できるように

5 files changed, 56 insertions, 5 deletions

diff --git a/packages/frontend/src/components/MkTabs.vue b/packages/frontend/src/components/MkTabs.vue
index 5c4a67b026..75cf84e918 100644
--- a/packages/frontend/src/components/MkTabs.vue
+++ b/packages/frontend/src/components/MkTabs.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.tabs">
+<div :class="[$style.tabs, { [$style.centered]: props.centered }]">
 	<div :class="$style.tabsInner">
 		<button
 			v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div
 		ref="tabHighlightEl"
-		:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]"
+		:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation, [$style.tabHighlightUpper]: tabHighlightUpper }]"
 	></div>
 </div>
 </template>
@@ -59,6 +59,8 @@ import { prefer } from '@/preferences.js';
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
 	tab?: string;
+	centered?: boolean;
+	tabHighlightUpper?: boolean;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });
@@ -169,6 +171,16 @@ onUnmounted(() => {
 	overflow-x: auto;
 	overflow-y: hidden;
 	scrollbar-width: none;
+
+	&.centered {
+		text-align: center;
+	}
+}
+
+@container (max-width: 450px) {
+	.tabs {
+		font-size: 80%;
+	}
 }
 
 .tabsInner {
@@ -227,5 +239,10 @@ onUnmounted(() => {
 	&.animate {
 		transition: width 0.15s ease, left 0.15s ease;
 	}
+
+	&.tabHighlightUpper {
+		top: 0;
+		bottom: auto;
+	}
 }
 </style>
diff --git a/packages/frontend/src/components/global/PageWithHeader.vue b/packages/frontend/src/components/global/PageWithHeader.vue
index d90afb652e..d368dee88a 100644
--- a/packages/frontend/src/components/global/PageWithHeader.vue
+++ b/packages/frontend/src/components/global/PageWithHeader.vue
@@ -6,14 +6,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
 	<MkStickyContainer>
-		<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template>
+		<template #header>
+			<MkPageHeader v-if="prefer.s.showPageTabBarBottom && (props.tabs?.length ?? 0) > 0" v-bind="pageHeaderPropsWithoutTabs"/>
+			<MkPageHeader v-else v-model:tab="tab" v-bind="pageHeaderProps"/>
+		</template>
 		<div :class="$style.body">
 			<MkSwiper v-if="prefer.s.enableHorizontalSwipe && swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs">
 				<slot></slot>
 			</MkSwiper>
 			<slot v-else></slot>
 		</div>
-		<template #footer><slot name="footer"></slot></template>
+		<template #footer>
+			<slot name="footer"></slot>
+			<div v-if="prefer.s.showPageTabBarBottom && (props.tabs?.length ?? 0) > 0" :class="$style.footerTabs">
+				<MkTabs v-model:tab="tab" :tabs="props.tabs" :centered="true" :tabHighlightUpper="true"/>
+			</div>
+		</template>
 	</MkStickyContainer>
 </div>
 </template>
@@ -26,6 +34,7 @@ import { useScrollPositionKeeper } from '@/composables/use-scroll-position-keepe
 import MkSwiper from '@/components/MkSwiper.vue';
 import { useRouter } from '@/router.js';
 import { prefer } from '@/preferences.js';
+import MkTabs from '@/components/MkTabs.vue';
 
 const props = withDefaults(defineProps<PageHeaderProps & {
 	reversed?: boolean;
@@ -40,6 +49,11 @@ const pageHeaderProps = computed(() => {
 	return rest;
 });
 
+const pageHeaderPropsWithoutTabs = computed(() => {
+	const { reversed, tabs, ...rest } = props;
+	return rest;
+});
+
 const tab = defineModel<string>('tab');
 const rootEl = useTemplateRef('rootEl');
 
@@ -68,4 +82,11 @@ defineExpose({
 .body, .swiper {
 	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
 }
+
+.footerTabs {
+	background: color(from var(--MI_THEME-pageHeaderBg) srgb r g b / 0.75);
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
+	border-top: solid 0.5px var(--MI_THEME-divider);
+}
 </style>
diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue
index 7ee5f151fa..ed4f36c0e5 100644
--- a/packages/frontend/src/pages/settings/preferences.vue
+++ b/packages/frontend/src/pages/settings/preferences.vue
@@ -477,6 +477,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</MkPreferenceContainer>
 							</SearchMarker>
 
+							<SearchMarker :keywords="['tabs', 'tabbar', 'bottom', 'under']">
+								<MkPreferenceContainer k="showPageTabBarBottom">
+									<MkSwitch v-model="showPageTabBarBottom">
+										<template #label><SearchLabel>{{ i18n.ts._settings.showPageTabBarBottom }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
+							</SearchMarker>
+
 							<SearchMarker :keywords="['swipe', 'horizontal', 'tab']">
 								<MkPreferenceContainer k="enableHorizontalSwipe">
 									<MkSwitch v-model="enableHorizontalSwipe">
@@ -866,6 +874,7 @@ const animatedMfm = prefer.model('animatedMfm');
 const disableShowingAnimatedImages = prefer.model('disableShowingAnimatedImages');
 const keepScreenOn = prefer.model('keepScreenOn');
 const enableHorizontalSwipe = prefer.model('enableHorizontalSwipe');
+const showPageTabBarBottom = prefer.model('showPageTabBarBottom');
 const enablePullToRefresh = prefer.model('enablePullToRefresh');
 const useNativeUiForVideoAudioPlayer = prefer.model('useNativeUiForVideoAudioPlayer');
 const contextMenu = prefer.model('contextMenu');
@@ -925,6 +934,7 @@ watch([
 	useSystemFont,
 	makeEveryTextElementsSelectable,
 	enableHorizontalSwipe,
+	showPageTabBarBottom,
 	enablePullToRefresh,
 	reduceAnimation,
 	showAvailableReactionsFirstInNote,
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index a83a3153d0..f6370c8c78 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -381,6 +381,9 @@ export const PREF_DEF = definePreferences({
 	showAvailableReactionsFirstInNote: {
 		default: false,
 	},
+	showPageTabBarBottom: {
+		default: false,
+	},
 	plugins: {
 		default: [] as Plugin[],
 		mergeStrategy: (a, b) => {
diff --git a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
index e2993230be..7ab8a45f51 100644
--- a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
+++ b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
@@ -86,7 +86,7 @@ watch(rootEl, () => {
 	box-sizing: border-box;
 	background: var(--MI_THEME-navBg);
 	color: var(--MI_THEME-navFg);
-	box-shadow: 0px 0px 6px 6px #0000000f;
+	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 
 .item {