From c917a5e639d525edd98a76145174922086567291 Mon Sep 17 00:00:00 2001
From: Crimekillz <crimekillz@161.sh>
Date: Mon, 29 Apr 2024 18:29:26 +0200
Subject: [PATCH] Unified Messaging: Add info header to chats and groups,
 Display name of group in group management dialog, Take User to management of
 group within the group by pressing on the info button/To the user profile for
 chats

---
 .../src/pages/messaging/messaging-room.vue    | 47 ++++++++++++++++++-
 packages/client/src/pages/my-groups/group.vue | 14 ++++--
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 56e681ab9..41f961b85 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -1,4 +1,13 @@
 <template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900">
+			<div :class="$style.root">
 	<div
 		ref="rootEl"
 		class="_section"
@@ -94,6 +103,9 @@
 			</MkSpacer>
 		</div>
 	</div>
+	</div>
+</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -339,7 +351,7 @@ onMounted(() => {
 	definePageMetadata(
 		computed(() => ({
 			title: group != null ? group.name : user?.name ?? 'Chat',
-			icon: "ph-chats-teardrop-bold ph-lg",
+			icon: "ph-chats-teardrop ph-bold ph-lg",
 		})),
 	);
 });
@@ -349,8 +361,41 @@ onBeforeUnmount(() => {
 	document.removeEventListener("visibilitychange", onVisibilitychange);
 	if (scrollRemove) scrollRemove();
 });
+
+function info() {
+	if (group) {
+		window.open(`/my/groups/${group.id}`);
+	} else if (user) {
+		window.open(`/@${user.id}`);
+	}
+}
+
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-info ph-bold ph-lg",
+		text: i18n.ts.manageGroups,
+		handler: info,
+	},
+]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(
+	computed(() => ({
+		title: group != null ? group.name : user?.name ?? 'Chat',
+		icon: "ph-chats-teardrop ph-bold ph-lg",
+	})),
+);
+
 </script>
 
+<style lang="scss" module>
+.root {
+	margin: var(--margin);
+}
+</style>
+
 <style lang="scss" scoped>
 XMessage:last-of-type {
 	margin-bottom: 4rem;
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index d77751e8d..f6e98e3a6 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, onMounted } from "vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { useRouter } from "@/router";
@@ -75,7 +75,15 @@ async function fetch() {
 	});
 }
 
-fetch();
+onMounted(() => {
+	fetch();
+	definePageMetadata(
+		computed(() => ({
+			title: (group.value != null ? group.value.name + ': ' : '') + i18n.ts.members,
+			icon: "ph-users-three ph-bold ph-lg",
+		})),
+	);
+});
 
 function invite() {
 	os.selectLocalUser().then((user) => {
@@ -134,7 +142,7 @@ async function deleteGroup() {
 
 definePageMetadata(
 	computed(() => ({
-		title: i18n.ts.members,
+		title: (group.value != null ? group.value.name + ': ' : '') + i18n.ts.members,
 		icon: "ph-users-three ph-bold ph-lg",
 	})),
 );