From de76a66c030b5ce6984767a3bef7d76913ec870a Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 25 Mar 2025 18:15:54 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=BF=E3=83=96?=
 =?UTF-8?q?=E3=83=AC=E3=83=83=E3=83=88=E3=81=A7=E3=81=AE=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E6=99=82=E3=81=AB=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=88=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A7=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E4=B8=8B=E9=83=A8=E3=81=8C=E9=9A=A0=E3=82=8C=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/ui/universal.vue | 48 +++++++++++++++++---------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index c7dcf746c4..acd188ac0c 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -29,14 +29,15 @@ 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 v-else-if="!isDesktop" ref="navFooter" :class="$style.navForTablet">
+			<button :class="$style.navForTabletWidgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></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 : ''"
 		:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
@@ -309,6 +310,35 @@ $widgets-hide-threshold: 1090px;
 	min-height: 0;
 }
 
+.navForTablet {
+	display: flex;
+	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
+	width: 100%;
+	box-sizing: border-box;
+	background: var(--MI_THEME-bg);
+	border-top: solid 0.5px var(--MI_THEME-divider);
+}
+
+.navForTabletWidgetButton {
+	position: relative;
+	padding: 0;
+	aspect-ratio: 1;
+	width: 100%;
+	max-width: 60px;
+	margin-left: 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));
+	}
+}
+
 .nav {
 	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
 	display: grid;
@@ -410,20 +440,6 @@ $widgets-hide-threshold: 1090px;
 	}
 }
 
-.widgetButton {
-	display: block;
-	position: fixed;
-	z-index: 1000;
-	bottom: 32px;
-	right: 32px;
-	width: 64px;
-	height: 64px;
-	border-radius: 100%;
-	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-	font-size: 22px;
-	background: var(--MI_THEME-panel);
-}
-
 .widgetsDrawerBg {
 	z-index: 1001;
 }