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

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>

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,
+            },
+          },
         },
       });
 

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",