From 70172440900d60907308d7b45bff6371a8e203e5 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Sat, 17 Jun 2023 19:13:13 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=82=B0=E3=83=AB=E3=83=BC?=
 =?UTF-8?q?=E3=83=97=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E3=83=87=E3=82=B6?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 .../src/components/MkNotification.vue         |  7 +--
 .../frontend/src/pages/my-groups/group.vue    | 43 +++++++++++++------
 .../frontend/src/pages/my-groups/index.vue    | 31 ++++++++++---
 4 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 97b5646a26..1f17c3ff69 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -75,6 +75,7 @@
 - 노트를 게시했을 때 토스트 알림 표시
 - 노트 액션 버튼 추가 및 편의성 향상
 - 데이터 세이버를 활성화하면 설정을 반영하기 위해 페이지를 새로 고치도록
+- 그룹 페이지의 전반적인 디자인 개선
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index e377447353..048fedefb9 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -89,8 +89,9 @@
 			</template>
 			<template v-else-if="notification.type === 'groupInvited'">
 				<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}:<span style="font-weight: bold; margin-left: 5px;">{{ notification.invitation.group.name }}</span></span>
-				<div v-if="full && !groupInviteDone">
-					<button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button>
+				<div v-if="full && !groupInviteDone" :class="$style.followRequestCommands">
+					<MkButton :class="$style.followRequestCommandButton" rounded primary @click="acceptGroupInvitation()"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
+					<MkButton :class="$style.followRequestCommandButton" rounded danger @click="rejectGroupInvitation()"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
 				</div>
 			</template>
 			<span v-else-if="notification.type === 'app'" :class="$style.text">
@@ -149,7 +150,7 @@ const acceptGroupInvitation = () => {
 
 const rejectGroupInvitation = () => {
 	groupInviteDone.value = true;
-	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
+	os.apiWithDialog('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
 };
 
 useTooltip(reactionRef, (showing) => {
diff --git a/packages/frontend/src/pages/my-groups/group.vue b/packages/frontend/src/pages/my-groups/group.vue
index cc622f9ba1..0cbaed4f04 100644
--- a/packages/frontend/src/pages/my-groups/group.vue
+++ b/packages/frontend/src/pages/my-groups/group.vue
@@ -1,19 +1,11 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header>
+		<MkPageHeader v-if="group && $i.id === group.ownerId" :actions="headerActions" :tabs="headerTabs"/>
+		<MkPageHeader v-else :tabs="headerTabs"/>
+	</template>
 	<MkSpacer :contentMax="700">
 		<div>
-			<transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="group && $i.id === group.ownerId">
-					<div :class="$style.content" style="">
-						<MkButton inline @click="invite()">{{ i18n.ts.invite }}</MkButton>
-						<MkButton inline @click="renameGroup()">{{ i18n.ts.rename }}</MkButton>
-						<MkButton inline @click="transfer()">{{ i18n.ts.transfer }}</MkButton>
-						<MkButton inline danger @click="deleteGroup()">{{ i18n.ts.delete }}</MkButton>
-					</div>
-				</div>
-			</transition>
-
 			<transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in">
 				<div v-if="group" class="_gaps_s">
 					<div style="margin-top: var(--margin);">{{ i18n.ts.members }}</div>
@@ -43,7 +35,6 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { mainRouter } from '@/router';
@@ -135,7 +126,31 @@ async function deleteGroup() {
 
 watch(() => props.listId, fetchGroup, { immediate: true });
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.invite,
+	handler: () => {
+		invite();
+	},
+}, {
+	icon: 'ti ti-edit',
+	text: i18n.ts.rename,
+	handler: () => {
+		renameGroup();
+	},
+}, {
+	icon: 'ti ti-arrows-exchange',
+	text: i18n.ts.transfer,
+	handler: () => {
+		transfer();
+	},
+}, {
+	icon: 'ti ti-trash',
+	text: i18n.ts.delete,
+	handler: () => {
+		deleteGroup();
+	},
+}]);
 
 const headerTabs = $computed(() => []);
 
diff --git a/packages/frontend/src/pages/my-groups/index.vue b/packages/frontend/src/pages/my-groups/index.vue
index e296112b27..e3dd8a9d3f 100644
--- a/packages/frontend/src/pages/my-groups/index.vue
+++ b/packages/frontend/src/pages/my-groups/index.vue
@@ -6,20 +6,22 @@
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination">
 				<MkA v-for="group in items" :key="group.id" :class="$style.group" class="_panel" :to="`/my/groups/${ group.id }`">
 					<div :class="$style.name">{{ group.name }}</div>
-					<MkAvatars :userIds="group.userIds"/>
+					<MkAvatars :class="$style.avatars" :userIds="group.userIds"/>
 				</MkA>
 			</MkPagination>
 		</div>
 
 		<div v-else-if="tab === 'joined'">
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="joinedPagination">
-				<MkA v-for="group in items" :key="group.id" :class="$style.group" class="_panel" :to="`/my/groups/${ group.id }`">
-					<div :class="$style.name">{{ group.name }}</div>
-					<MkAvatars :userIds="group.userIds"/>
+				<div v-for="group in items" :class="$style.group" class="_panel">
+					<MkA :key="group.id" :class="$style.groupTop" :to="`/my/groups/${ group.id }`">
+						<div :class="$style.name">{{ group.name }}</div>
+						<MkAvatars :class="$style.avatars" :userIds="group.userIds"/>
+					</MkA>
 					<div :class="$style.actions">
 						<MkButton rounded danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton>
 					</div>
-				</MkA>
+				</div>
 			</MkPagination>
 		</div>
 
@@ -27,7 +29,7 @@
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="invitationPagination">
 				<MkA v-for="invitation in items" :key="invitation.id" :class="$style.group" class="_panel">
 					<div :class="$style.name">{{ invitation.group.name }}</div>
-					<MkAvatars :userIds="invitation.group.userIds"/>
+					<MkAvatars :class="$style.avatars" :userIds="invitation.group.userIds"/>
 					<div :class="$style.actions">
 						<MkButton primary rounded inline :class="$style.invitesButton" @click="acceptInvite(invitation)"><i class="ti ti-check"></i> {{ i18n.ts.accept }}</MkButton>
 						<MkButton rounded inline :class="$style.invitesButton" @click="rejectInvite(invitation)"><i class="ti ti-x"></i> {{ i18n.ts.reject }}</MkButton>
@@ -140,7 +142,10 @@ definePageMetadata({
 
 <style lang="scss" module>
 .actions {
+	display: flex;
+	justify-content: flex-end;
 	margin-top: 10px;
+	padding: 0 24px 16px;
 }
 
 .add {
@@ -149,7 +154,6 @@ definePageMetadata({
 
 .group {
 	display: block;
-	padding: 16px;
 	border: solid 1px var(--divider);
 	border-radius: 6px;
 
@@ -159,8 +163,21 @@ definePageMetadata({
 	}
 }
 
+.groupTop {
+	&:hover {
+		text-decoration: none;
+	}
+}
+
 .name {
 	margin-bottom: 12px;
+	border-bottom: solid 1px var(--divider);
+	padding: 16px 24px;
+	font-weight: bold;
+}
+
+.avatars {
+	padding: 8px 24px 16px;
 }
 
 .invitesButton {