From 8511c6472cc86fd025c6dc4519705c0df8072e38 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Thu, 1 Jan 2026 07:10:15 +0000
Subject: [PATCH] improved avatar displays site-wide

---
 packages/frontend/src/components/avatar.tsx    | 18 +++++++++++++++---
 .../frontend/src/components/issues-table.tsx   |  4 ++--
 .../src/components/small-user-display.tsx      |  3 ++-
 todo.md                                        |  1 -
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/avatar.tsx b/packages/frontend/src/components/avatar.tsx
index 2204534..d7ccb0f 100644
--- a/packages/frontend/src/components/avatar.tsx
+++ b/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}`}>
-            <UserRound size={size ? size * 2 + 2 : 16} />
+        <div
+            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>
     );
 }
diff --git a/packages/frontend/src/components/issues-table.tsx b/packages/frontend/src/components/issues-table.tsx
index ed87eae..990859b 100644
--- a/packages/frontend/src/components/issues-table.tsx
+++ b/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"}>
-                                {issueData.User ? <Avatar user={issueData.User} size={6} /> : "?"}
+                            <TableCell className={"flex items-center justify-end px-1 py-1"}>
+                                <Avatar user={issueData.User} />
                             </TableCell>
                         )}
                     </TableRow>
diff --git a/packages/frontend/src/components/small-user-display.tsx b/packages/frontend/src/components/small-user-display.tsx
index 77adb78..01fe430 100644
--- a/packages/frontend/src/components/small-user-display.tsx
+++ b/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>
     );
 }
diff --git a/todo.md b/todo.md
index 613efbe..520237b 100644
--- a/todo.md
+++ b/todo.md
@@ -5,4 +5,3 @@
   - issue assignee
   - deadline
 - time tracking (linked to issues or standalone)
-- user avatars