From c00d856e1aa8b8050741a2f87f4d39bf61aee83a Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Tue, 26 Mar 2024 22:55:43 +0100
Subject: [PATCH] refactor: improve user table design (#279)

---
 .../users/_components/user-list.component.tsx | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
index 79446ddd5..6cb9beadc 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
@@ -10,6 +10,7 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 import {
   ActionIcon,
+  Avatar,
   Button,
   Flex,
   Group,
@@ -41,6 +42,15 @@ export const UserListComponent = ({
       {
         accessorKey: "name",
         header: "Name",
+        grow: 100,
+        Cell: ({ renderedCellValue, row }) => (
+          <Link href={`/manage/users/${row.original.id}`}>
+            <Group>
+              <Avatar size="sm"></Avatar>
+              {renderedCellValue}
+            </Group>
+          </Link>
+        ),
       },
       {
         accessorKey: "email",
@@ -66,27 +76,11 @@ export const UserListComponent = ({
     enableRowSelection: true,
     enableColumnOrdering: true,
     enableGlobalFilter: false,
-    enableRowActions: true,
+    enableRowActions: false,
     enableDensityToggle: false,
     enableFullScreenToggle: false,
+    layoutMode: "grid-no-grow",
     getRowId: (row) => row.id,
-    renderRowActions: ({ row }) => (
-      <Flex gap="md">
-        <Tooltip label="Edit">
-          <ActionIcon
-            component={Link}
-            href={`/manage/users/${row.original.id}`}
-          >
-            <IconEdit size="1rem" />
-          </ActionIcon>
-        </Tooltip>
-        <Tooltip label="Delete">
-          <ActionIcon color="red">
-            <IconTrash size="1rem" />
-          </ActionIcon>
-        </Tooltip>
-      </Flex>
-    ),
     renderTopToolbarCustomActions: () => (
       <Button component={Link} href="/manage/users/create">
         Create New User