feat: #1254 display group owner (#1406)

* feat: #1254 display group owner

* fix: format

* fix: format issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

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>
   );

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>
   );

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