From 9058e7e945cfe385503be5251f22e0d8e1b03111 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 17 Apr 2024 08:25:35 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AE=E8=A1=A8=E7=A4=BA=E9=83=A8=E4=B8=8A=E9=83=A8?=
 =?UTF-8?q?=E3=81=AB=E7=B7=A8=E9=9B=86=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/page.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index ab44533b8103..893c2deebf5c 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:leaveActiveClass="defaultStore.state.animation ? $style.fadeLeaveActive : ''"
 			:enterFromClass="defaultStore.state.animation ? $style.fadeEnterFrom : ''"
 			:leaveToClass="defaultStore.state.animation ? $style.fadeLeaveTo : ''"
+			mode="out-in"
 		>
 			<div v-if="page" :key="page.id" class="_gaps">
 				<div :class="$style.pageMain">
@@ -41,8 +42,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</div>
 						<div :class="$style.pageBannerTitle" class="_gaps_s">
 							<h1>{{ page.title || page.name }}</h1>
-							<div v-if="page.user" :class="$style.pageBannerTitleUser">
-								<MkAvatar :user="page.user" :class="$style.avatar" indicator link preview/> <MkA :to="`/@${username}`"><MkUserName :user="page.user" :nowrap="false"/></MkA>
+							<div :class="$style.pageBannerTitleSub">
+								<div v-if="page.user" :class="$style.pageBannerTitleUser">
+									<MkAvatar :user="page.user" :class="$style.avatar" indicator link preview/> <MkA :to="`/@${username}`"><MkUserName :user="page.user" :nowrap="false"/></MkA>
+								</div>
+								<div :class="$style.pageBannerTitleSubActions">
+									<button v-tooltip="i18n.ts.share" class="_button" :class="$style.generalActionButton" @click="share"><i class="ti ti-share ti-fw"></i></button>
+									<MkA v-if="page.userId === $i?.id" v-tooltip="i18n.ts._pages.editThisPage" :to="`/pages/edit/${page.id}`" class="_button" :class="$style.generalActionButton"><i class="ti ti-pencil ti-fw"></i></MkA>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -355,8 +362,15 @@ definePageMetadata(() => ({
 			margin: 0;
 		}
 
+		.pageBannerTitleSub {
+			display: flex;
+			align-items: center;
+			width: 100%;
+		}
+
 		.pageBannerTitleUser {
 			--height: 32px;
+			flex-shrink: 0;
 
 			.avatar {
 				height: var(--height);
@@ -365,6 +379,14 @@ definePageMetadata(() => ({
 
 			line-height: var(--height);
 		}
+
+		.pageBannerTitleSubActions {
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			gap: var(--marginHalf);
+			margin-left: auto;
+		}
 	}
 }