Merge branch 'misskey-develop' into merge/2025-03-24

# Conflicts:
#	.github/workflows/api-misskey-js.yml
#	.github/workflows/changelog-check.yml
#	.github/workflows/check-misskey-js-autogen.yml
#	.github/workflows/get-api-diff.yml
#	.github/workflows/lint.yml
#	.github/workflows/locale.yml
#	.github/workflows/on-release-created.yml
#	.github/workflows/storybook.yml
#	.github/workflows/test-backend.yml
#	.github/workflows/test-federation.yml
#	.github/workflows/test-frontend.yml
#	.github/workflows/test-misskey-js.yml
#	.github/workflows/test-production.yml
#	.github/workflows/validate-api-json.yml
#	package.json
#	packages/backend/package.json
#	packages/backend/src/server/api/ApiCallService.ts
#	packages/backend/src/server/api/endpoints/drive/files/create.ts
#	packages/frontend-shared/js/url.ts
#	packages/frontend/package.json
#	packages/frontend/src/components/MkFileCaptionEditWindow.vue
#	packages/frontend/src/components/MkInfo.vue
#	packages/frontend/src/components/MkLink.vue
#	packages/frontend/src/components/MkNote.vue
#	packages/frontend/src/components/MkNotes.vue
#	packages/frontend/src/components/MkPageWindow.vue
#	packages/frontend/src/components/MkReactionsViewer.vue
#	packages/frontend/src/components/MkTimeline.vue
#	packages/frontend/src/components/MkUrlPreview.vue
#	packages/frontend/src/components/MkUserPopup.vue
#	packages/frontend/src/components/global/MkPageHeader.vue
#	packages/frontend/src/components/global/MkUrl.vue
#	packages/frontend/src/components/global/PageWithHeader.vue
#	packages/frontend/src/pages/about-misskey.vue
#	packages/frontend/src/pages/announcements.vue
#	packages/frontend/src/pages/antenna-timeline.vue
#	packages/frontend/src/pages/channel.vue
#	packages/frontend/src/pages/instance-info.vue
#	packages/frontend/src/pages/note.vue
#	packages/frontend/src/pages/page.vue
#	packages/frontend/src/pages/role.vue
#	packages/frontend/src/pages/tag.vue
#	packages/frontend/src/pages/timeline.vue
#	packages/frontend/src/pages/user-list-timeline.vue
#	packages/frontend/src/pages/user/followers.vue
#	packages/frontend/src/pages/user/following.vue
#	packages/frontend/src/pages/user/home.vue
#	packages/frontend/src/pages/user/index.vue
#	packages/frontend/src/ui/deck.vue
#	packages/misskey-js/generator/package.json
#	pnpm-lock.yaml
#	scripts/changelog-checker/package-lock.json
#	scripts/changelog-checker/package.json

5 files changed, 105 insertions, 22 deletions

diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index fd7a89dc22..14c4424e67 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -421,7 +421,7 @@ function getPointerEvents() {
 
 #devTicker {
 	position: fixed;
-	top: 0;
+	bottom: 0;
 	left: 0;
 	z-index: 2147483647;
 	color: #ff0;
diff --git a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
index 7c2de12221..88c6191e5a 100644
--- a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
+++ b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
@@ -79,10 +79,9 @@ watch(rootEl, () => {
 .root {
 	position: relative;
 	z-index: 1;
-	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
+	padding-bottom: env(safe-area-inset-bottom, 0px);
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-gap: 8px;
 	width: 100%;
 	box-sizing: border-box;
 	background: var(--MI_THEME-navBg);
@@ -91,6 +90,16 @@ watch(rootEl, () => {
 }
 
 .item {
+	padding: 12px 0;
+
+	&:first-child {
+		padding-left: 12px;
+	}
+
+	&:last-child {
+		padding-right: 12px;
+	}
+
 	&.post {
 		.itemInner {
 			background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
@@ -112,7 +121,7 @@ watch(rootEl, () => {
 	padding: 0;
 	aspect-ratio: 1;
 	width: 100%;
-	max-width: 45px;
+	max-width: 42px;
 	margin: auto;
 	align-content: center;
 	border-radius: 100%;
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 94f333da41..f61e178bce 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -121,6 +121,7 @@ function more() {
 	display: inline-block;
 	width: 38px;
 	aspect-ratio: 1;
+	border-radius: 8px;
 }
 
 .wideInstanceIcon {
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 2708683acb..6bf0dfc17c 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
 	<div :class="$style.body">
 		<div :class="$style.top">
-			<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
 				<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || '/favicon.ico'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/>
 			</button>
@@ -183,12 +182,9 @@ function menuEdit() {
 }
 
 .body {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1001;
+	position: relative;
 	width: var(--nav-icon-only-width);
-	height: 100dvh;
+	height: 100%;
 	box-sizing: border-box;
 	overflow: auto;
 	overflow-x: clip;
@@ -303,18 +299,6 @@ function menuEdit() {
 		backdrop-filter: var(--MI-blur, blur(8px));
 	}
 
-	.banner {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-size: cover;
-		background-position: center center;
-		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-	}
-
 	.instance {
 		position: relative;
 		display: block;
@@ -335,6 +319,7 @@ function menuEdit() {
 		display: inline-block;
 		width: 38px;
 		aspect-ratio: 1;
+		border-radius: 8px;
 	}
 
 	.wideInstanceIcon {
@@ -566,6 +551,7 @@ function menuEdit() {
 		display: inline-block;
 		width: 30px;
 		aspect-ratio: 1;
+		border-radius: 8px;
 	}
 
 	.bottom {
diff --git a/packages/frontend/src/ui/_common_/titlebar.vue b/packages/frontend/src/ui/_common_/titlebar.vue
new file mode 100644
index 0000000000..c62b13b73a
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/titlebar.vue
@@ -0,0 +1,87 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<div :class="$style.title">
+		<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
+		<span :class="$style.instanceTitle">{{ instance.name ?? host }}</span>
+	</div>
+	<div :class="$style.controls">
+		<span :class="$style.left">
+			<button v-if="canBack" class="_button" :class="$style.button" @click="goBack"><i class="ti ti-arrow-left"></i></button>
+		</span>
+		<span :class="$style.right">
+		</span>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { host } from '@@/js/config.js';
+import { ref } from 'vue';
+import { instance } from '@/instance.js';
+import { prefer } from '@/preferences.js';
+
+const canBack = ref(true);
+
+function goBack() {
+	window.history.back();
+}
+</script>
+
+<style lang="scss" module>
+.root {
+	--height: 36px;
+
+	background: var(--MI_THEME-navBg);
+	height: var(--height);
+	font-size: 90%;
+}
+
+.title {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	height: var(--height);
+}
+
+.controls {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: var(--height);
+}
+
+.instanceIcon {
+	display: inline-block;
+	width: 20px;
+	aspect-ratio: 1;
+	border-radius: 5px;
+	margin-right: 8px;
+}
+
+.instanceTitle {
+	display: inline-block;
+}
+
+.left {
+	margin-right: auto;
+}
+
+.right {
+	margin-left: auto;
+}
+
+.button {
+	display: inline-block;
+	height: var(--height);
+	aspect-ratio: 1;
+}
+</style>