feat(client): ヘッダーに戻るボタンを追加

CHANGELOG_CHERRYPICK.md

@@ -38,6 +38,7 @@
 - 글꼴 크기를 보다 쉽게 변경할 수 있도록
 - 볼드체 텍스트 설정 추가
 - 노트 작성 폼의 디자인 개선
+- 헤더에 뒤로 가기 버튼 추가
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제
 - Fix: 위젯 편집 종료 버튼이 여러 개 있는 문제

packages/frontend/src/components/global/MkPageHeader.vue

@@ -1,13 +1,16 @@
 <template>
 <div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }">
-	<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_, [$style.slim]: isFriendly }]">
+	<div :class="[$style.upper, { [$style.slim]: narrow || isFriendly, [$style.thin]: thin_ }]">
+		<div v-if="!thin_ && !canBack" :class="$style.buttonsLeft">
+			<button class="_button" :class="[$style.button, $style.goBack]" @click.stop="goBack" @touchstart="preventDrag"><i class="ti ti-chevron-left"></i></button>
+		</div>
 		<div v-if="!thin_ && narrow && props.displayMyAvatar && $i && !isFriendly" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
 			<MkAvatar :class="$style.avatar" :user="$i"/>
 		</div>
-		<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft"/>
+		<div v-else-if="!thin_ && narrow && !hideTitle && canBack" :class="$style.buttonsLeft"/>
 
 		<template v-if="metadata">
-			<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
+			<div v-if="!hideTitle" :class="[$style.titleContainer, { [$style.titleContainer_canBack]: !canBack }]" @click="top">
 				<div v-if="metadata.avatar" :class="$style.titleAvatarContainer">
 					<MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
 				</div>
@@ -21,18 +24,16 @@
 					</div>
 				</div>
 			</div>
-			<XTabs v-if="(!narrow || hideTitle) && !isFriendly" :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
+			<XTabs v-if="(!narrow || hideTitle) && !isFriendly" :class="[$style.tabs, { [$style.tabs_canBack]: !canBack }]" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
 		</template>
 		<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
 			<template v-for="action in actions">
 				<button v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
 			</template>
 		</div>
+		<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
 	</div>
-	<div v-if="(narrow && !hideTitle) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
-		<XTabs :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
-	</div>
-	<div v-else-if="(!narrow && !hideTitle) && hasTabs && isFriendly" :class="[$style.lower, { [$style.thin]: thin_ }]">
+	<div v-if="((narrow && !hideTitle) || (!narrow && !hideTitle && isFriendly)) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow && !isFriendly, [$style.thin]: thin_ }]">
 		<XTabs :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
 	</div>
 </div>
@@ -47,8 +48,10 @@ import { globalEvents } from '@/events';
 import { injectPageMetadata } from '@/scripts/page-metadata';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { miLocalStorage } from '@/local-storage';
+import { mainRouter } from "@/router";
 
 const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
+const canBack = ref(mainRouter.currentRoute.value.name === 'index' || mainRouter.currentRoute.value.name === 'explore' || mainRouter.currentRoute.value.name === 'my-notifications' || mainRouter.currentRoute.value.name === 'messaging');
 
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
@@ -103,6 +106,10 @@ function onTabClick(): void {
 	top();
 }
 
+function goBack() {
+	history.back();
+}
+
 const calcBg = () => {
 	const rawBg = 'var(--bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
@@ -167,6 +174,11 @@ onUnmounted(() => {
 		margin-right: auto;
 	}
 
+	.tabs_canBack {
+		margin-left: auto;
+		padding: 0 12px;
+	}
+
 	&.thin {
 		--height: 40px;
 
@@ -217,6 +229,12 @@ onUnmounted(() => {
 	margin: 0 0 0 var(--margin);
 }
 
+.goBack {
+	> i {
+		margin: auto;
+	}
+}
+
 .avatar {
 	$size: 32px;
 	display: inline-block;
@@ -263,6 +281,10 @@ onUnmounted(() => {
 	margin-left: 24px;
 }
 
+.titleContainer_canBack {
+	margin-left: -32px;
+}
+
 .titleAvatarContainer {
 	$size: 32px;
 	contain: strict;

packages/frontend/src/pages/admin/_header_.vue

@@ -1,5 +1,8 @@
 <template>
 <div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
+	<div class="buttons left">
+		<button class="_button button goBack" @click.stop="goBack" @touchstart="preventDrag"><i class="ti ti-chevron-left"></i></button>
+	</div>
 	<template v-if="metadata">
 		<div class="titleContainer" @click="showTabsPopup">
 			<i v-if="metadata.icon" class="icon" :class="metadata.icon"></i>
@@ -112,6 +115,10 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 	}
 }
 
+function goBack() {
+	history.back();
+}
+
 const calcBg = () => {
 	const rawBg = metadata?.bg ?? 'var(--bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
@@ -160,6 +167,10 @@ onUnmounted(() => {
 		height: var(--height);
 		margin: 0 var(--margin);
 
+		&.left {
+			margin-right: auto;
+		}
+
 		&.right {
 			margin-left: auto;
 		}
@@ -192,6 +203,12 @@ onUnmounted(() => {
 				margin-left: 12px;
 			}
 		}
+
+		> .goBack {
+			> i {
+				margin: auto;
+			}
+		}
 	}
 
 	> .titleContainer {