From 7abc94d07a8eba039e5b8a0729c4456177ab5d27 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 13 Sep 2022 19:14:28 -0700
Subject: [PATCH] refactor: :sparkles: Move group actions to header bar

---
 package.json                                  |  2 +-
 packages/client/src/pages/my-groups/group.vue | 45 +++++++++----------
 packages/client/src/pages/my-groups/index.vue |  2 +-
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index b86c9e858..997eb9c57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc-rc.2.3",
+	"version": "12.119.0-calc-rc.2.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index df7a3f2f2..ca9f545c3 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -1,23 +1,7 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader/></template>
+	<template #header><MkPageHeader :actions="headerActions"/></template>
 	<div class="mk-group-page">
-		<div class="_section">
-			<div
-				class="_content"
-				style="display: flex; gap: var(--margin); flex-wrap: wrap"
-			>
-				<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 @click="deleteGroup()">{{
-					i18n.ts.delete
-				}}
-				</MkButton>
-			</div>
-		</div>
 		<div class="_section members _gap">
 			<div class="_content">
 				<div class="users">
@@ -143,16 +127,31 @@ definePageMetadata(
 		icon: "fas fa-users",
 	})),
 );
+
+const headerActions = $computed(() => [
+	{
+		icon: 'fas fa-plus',
+		text: i18n.ts.invite,
+		handler: invite,
+	}, {
+		icon: 'fas fa-i-cursor',
+		text: i18n.ts.rename,
+		handler: renameGroup,
+	}, {
+		icon: 'fas fa-right-left',
+		text: i18n.ts.transfer,
+		handler: transfer,
+	}, {
+		icon: 'fas fa-trash-alt',
+		text: i18n.ts.delete,
+		handler: deleteGroup,
+	},
+]);
+
 </script>
 
 <style lang="scss" scoped>
 .mk-group-page {
-	> ._section {
-		> ._content {
-			padding-top: 1rem;
-			justify-content: center;
-		}
-	}
 	> .members {
 		> ._content {
 			> .users {
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index f657f6a09..4909765ae 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -90,7 +90,7 @@ const headerActions = $computed(() => [
 		icon: 'fas fa-plus',
 		text: i18n.ts.createGroup,
 		handler: create,
-	}
+	},
 ]);
 
 const headerTabs = $computed(() => [{