From 34506b6339945d3ee8d6afc84b7f1da8ff9153b0 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Sun, 3 Nov 2024 00:33:49 +0100
Subject: [PATCH] feat: #1254 display group owner (#1406)

* feat: #1254 display group owner

* fix: format

* fix: format issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
---
 .../users/groups/[id]/_delete-group.tsx       | 10 +++++--
 .../groups/[id]/_transfer-group-ownership.tsx | 10 +++++--
 .../manage/users/groups/[id]/page.tsx         | 27 ++++++++++++++++++-
 .../src/components/manage/danger-zone.tsx     |  6 ++---
 packages/api/src/router/group.ts              |  8 ++++++
 packages/translation/src/lang/en.json         |  5 +++-
 6 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx
index 2ee946944..aecc50007 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { Button } from "@mantine/core";
+import { Button, useMatches } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -61,8 +61,14 @@ export const DeleteGroup = ({ group }: DeleteGroupProps) => {
     });
   }, [tDelete, tRoot, openConfirmModal, group.id, group.name, mutateAsync, router]);
 
+  const fullWidth = useMatches({
+    xs: true,
+    sm: true,
+    md: false,
+  });
+
   return (
-    <Button variant="subtle" color="red" onClick={handleDeletion}>
+    <Button variant="subtle" color="red" onClick={handleDeletion} fullWidth={fullWidth}>
       {tDelete("label")}
     </Button>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
index 28563fbc9..a3a860d2b 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { Button } from "@mantine/core";
+import { Button, useMatches } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
@@ -74,8 +74,14 @@ export const TransferGroupOwnership = ({ group }: TransferGroupOwnershipProps) =
     );
   }, [group.id, group.name, innerOwnerId, mutateAsync, openConfirmModal, openModal, tRoot, tTransfer]);
 
+  const fullWidth = useMatches({
+    xs: true,
+    sm: true,
+    md: false,
+  });
+
   return (
-    <Button variant="subtle" color="red" onClick={handleTransfer}>
+    <Button variant="subtle" color="red" onClick={handleTransfer} fullWidth={fullWidth}>
       {tTransfer("label")}
     </Button>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx
index 455a835e0..e3d8c6a5f 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx
@@ -1,8 +1,9 @@
-import { Stack, Title } from "@mantine/core";
+import { Card, Group, Stack, Text, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { everyoneGroup } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
+import { UserAvatar } from "@homarr/ui";
 
 import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 import { DeleteGroup } from "./_delete-group";
@@ -30,6 +31,30 @@ export default async function GroupsDetailPage({ params }: GroupsDetailPageProps
 
       <RenameGroupForm group={group} disabled={isReserved} />
 
+      <Title order={2}>{tGeneral("owner")}</Title>
+      <Card>
+        {group.owner ? (
+          <Group>
+            <UserAvatar user={{ name: group.owner.name, image: group.owner.image }} size={"lg"} />
+            <Stack align={"start"} gap={3}>
+              <Text fw={"bold"}>{group.owner.name}</Text>
+              <Text>{group.owner.email}</Text>
+              <Text c={"dimmed"} size={"sm"}>
+                {tGeneral("ownerOfGroup")}
+              </Text>
+            </Stack>
+          </Group>
+        ) : (
+          <Group>
+            <Stack align={"start"} gap={3}>
+              <Text c={"dimmed"} size={"sm"}>
+                {tGeneral("ownerOfGroupDeleted")}
+              </Text>
+            </Stack>
+          </Group>
+        )}
+      </Card>
+
       {!isReserved && (
         <DangerZoneRoot>
           <DangerZoneItem
diff --git a/apps/nextjs/src/components/manage/danger-zone.tsx b/apps/nextjs/src/components/manage/danger-zone.tsx
index 5c515b4a0..30bfb3e37 100644
--- a/apps/nextjs/src/components/manage/danger-zone.tsx
+++ b/apps/nextjs/src/components/manage/danger-zone.tsx
@@ -15,7 +15,7 @@ export const DangerZoneRoot = async ({ children }: DangerZoneRootProps) => {
       <Title c="red.8" order={2}>
         {t("common.dangerZone")}
       </Title>
-      <Card withBorder style={{ borderColor: "var(--mantine-color-red-8)" }}>
+      <Card withBorder style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
         <Stack gap="sm">
           {Array.isArray(children)
             ? children.map((child, index) => (
@@ -43,14 +43,14 @@ interface DangerZoneItemProps {
 
 export const DangerZoneItem = ({ label, description, action }: DangerZoneItemProps) => {
   return (
-    <Group justify="space-between" px="md">
+    <Group justify="space-between" px="md" w={"100%"}>
       <Stack gap={0}>
         <Text fw="bold" size="sm">
           {label}
         </Text>
         <Text size="sm">{description}</Text>
       </Stack>
-      <Group justify="end" w={{ base: "100%", xs: "auto" }}>
+      <Group justify="end" w={{ xs: "100%", sm: "100%", md: "auto" }}>
         {action}
       </Group>
     </Group>
diff --git a/packages/api/src/router/group.ts b/packages/api/src/router/group.ts
index 8726d9fd7..366c8d590 100644
--- a/packages/api/src/router/group.ts
+++ b/packages/api/src/router/group.ts
@@ -75,6 +75,14 @@ export const groupRouter = createTRPCRouter({
               permission: true,
             },
           },
+          owner: {
+            columns: {
+              id: true,
+              name: true,
+              image: true,
+              email: true,
+            },
+          },
         },
       });
 
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 5c4cc7103..5811f712c 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1932,7 +1932,10 @@
         "back": "Back to groups",
         "setting": {
           "general": {
-            "title": "General"
+            "title": "General",
+            "owner": "Owner",
+            "ownerOfGroup": "Owner of this group",
+            "ownerOfGroupDeleted": "The owner of this group was deleted. It currently has no owner."
           },
           "members": {
             "title": "Members",