refactor: add color initials to avatar, improve usage of user avatar (#753)

apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from "react";
 import Link from "next/link";
-import { Avatar, Button, Group, Text, ThemeIcon, Title } from "@mantine/core";
+import { Anchor, Button, Group, Text, ThemeIcon, Title } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
@@ -10,6 +10,7 @@ import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { UserAvatar } from "@homarr/ui";
 
 interface UserListComponentProps {
   initialUserList: RouterOutputs["user"]["getAll"];
@@ -29,12 +30,12 @@ export const UserListComponent = ({ initialUserList }: UserListComponentProps) =
         header: t("user.field.username.label"),
         grow: 100,
         Cell: ({ renderedCellValue, row }) => (
-          <Link href={`/manage/users/${row.original.id}/general`}>
-            <Group>
-              <Avatar size="sm"></Avatar>
+          <Group>
+            <UserAvatar size="sm" user={row.original} />
+            <Anchor component={Link} href={`/manage/users/${row.original.id}/general`}>
               {renderedCellValue}
-            </Group>
-          </Link>
+            </Anchor>
+          </Group>
         ),
       },
       {

apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx

@@ -1,17 +1,18 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import { Avatar, Card, PasswordInput, Stack, Stepper, Text, TextInput, Title } from "@mantine/core";
+import { Card, PasswordInput, Stack, Stepper, Text, TextInput, Title } from "@mantine/core";
 import { IconUserCheck } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
+import { UserAvatar } from "@homarr/ui";
 import { validation, z } from "@homarr/validation";
 import { createCustomErrorParams } from "@homarr/validation/form";
 
-import { StepperNavigationComponent } from "./stepper-navigation.component";
+import { StepperNavigationComponent } from "./stepper-navigation";
 
 export const UserCreateStepperComponent = () => {
   const t = useScopedI18n("management.page.user.create");
@@ -150,7 +151,7 @@ export const UserCreateStepperComponent = () => {
         <Stepper.Step label={t("step.review.label")} allowStepSelect={false} allowStepClick={false}>
           <Card p="xl">
             <Stack maw={300} align="center" mx="auto">
-              <Avatar size="xl">{generalForm.values.username}</Avatar>
+              <UserAvatar size="xl" user={{ name: generalForm.values.username, image: null }} />
               <Text tt="uppercase" fw="bolder" size="xl">
                 {generalForm.values.username}
               </Text>

apps/nextjs/src/app/[locale]/manage/users/page.tsx

@@ -3,7 +3,7 @@ import { getScopedI18n } from "@homarr/translation/server";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
-import { UserListComponent } from "./_components/user-list.component";
+import { UserListComponent } from "./_components/user-list";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management.page.user.list");