From 198da31aed161356e32224da9761216ba19f5cd9 Mon Sep 17 00:00:00 2001
From: Mario Mohar <iam@themo.at>
Date: Sat, 29 Aug 2026 20:38:15 +0200
Subject: [PATCH] fix: give each assignee avatar its own color

Every avatar circle was hardcoded to bg-purple-700, so a board with
several assignees showed identical badges and the colour carried no
information.

Derive the colour from a small hash over the whole name rather than just
its first character, so that names sharing a first letter still get
different colours, and pick from a fixed palette in the same style as
the existing tag colours. Frontend only.

Closes #109
---
 .../client/src/components/Board/TaskCard.jsx   | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/devboard/client/src/components/Board/TaskCard.jsx b/devboard/client/src/components/Board/TaskCard.jsx
index 82f472f..0a086dd 100644
--- a/devboard/client/src/components/Board/TaskCard.jsx
+++ b/devboard/client/src/components/Board/TaskCard.jsx
@@ -29,6 +29,22 @@ const TAG_COLORS = [
 const getTagColor = (tag) =>
   TAG_COLORS[tag.charCodeAt(0) % TAG_COLORS.length];
 
+const AVATAR_COLORS = [
+  "bg-purple-700",
+  "bg-blue-600",
+  "bg-green-600",
+  "bg-rose-600",
+  "bg-amber-600",
+  "bg-teal-600",
+];
+
+// Sum every character so that names sharing a first letter still differ.
+const getAvatarColor = (name) => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash += name.charCodeAt(i);
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length];
+};
+
 // Search terms are raw user input, so they have to be escaped before they can
 // be used as a pattern — searching for "(" would otherwise throw.
 const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -385,7 +401,7 @@ const TaskCard = ({ task, index, onSelect, pinned, onPin }) => {
               </button>
 
               {task.assignee?.name && (
-                <div title={task.assignee.name} className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center text-[9px] font-bold text-white">
+                <div title={task.assignee.name} className={`w-5 h-5 rounded-full ${getAvatarColor(task.assignee.name)} flex items-center justify-center text-[9px] font-bold text-white`}>
                   {task.assignee.name[0].toUpperCase()}
                 </div>
               )}