refactor: improve user table design (#279)

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