improved avatar displays site-wide

packages/frontend/src/components/avatar.tsx

@@ -1,10 +1,22 @@
 import type { UserRecord } from "@issue/shared";
 import { UserRound } from "lucide-react";
 
-export default function Avatar({ user, size }: { user: UserRecord; size?: number }) {
+export default function Avatar({ user, size }: { user?: UserRecord; size?: number }) {
+    if (user?.avatarURL) {
+        return (
+            <img
+                src={user.avatarURL}
+                alt="Avatar"
+                className={`rounded-full object-cover w-${size || 6} h-${size || 6}`}
+            />
+        );
+    }
+
     return (
-        <div className={`flex items-center justify-center rounded-full border w-${size || 7} h-${size || 7}`}>
+        <div
-            <UserRound size={size ? size * 2 + 2 : 16} />
+            className={`flex items-center justify-center rounded-full ${user && "border"} w-${size || 6} h-${size || 6}`}
+        >
+            {user && <UserRound size={size ? size * 2 + 2 : 14} />}
         </div>
     );
 }

packages/frontend/src/components/issues-table.tsx

@@ -50,8 +50,8 @@ export function IssuesTable({
                             <TableCell className="overflow-hide">{issueData.Issue.description}</TableCell>
                         )}
                         {(columns.assignee == null || columns.assignee === true) && (
-                            <TableCell className={"w-[1px] text-center px-1 py-0"}>
+                            <TableCell className={"flex items-center justify-end px-1 py-1"}>
-                                {issueData.User ? <Avatar user={issueData.User} size={6} /> : "?"}
+                                <Avatar user={issueData.User} />
                             </TableCell>
                         )}
                     </TableRow>

packages/frontend/src/components/small-user-display.tsx

@@ -4,7 +4,8 @@ import Avatar from "@/components/avatar";
 export default function SmallUserDisplay({ user }: { user: UserRecord }) {
     return (
         <div className="flex gap-2 items-center">
-            {user.name} <Avatar user={user} size={6} />
+            <Avatar user={user} size={6} />
+            {user.name}
         </div>
     );
 }

todo.md

@@ -5,4 +5,3 @@
   - issue assignee
   - deadline
 - time tracking (linked to issues or standalone)
-- user avatars