first commit

frontend/src/utils/senderAvatar.js

@@ -0,0 +1,63 @@
+import colorMap from "../data/az_2_letter_color_map.json";
+
+const FALLBACK_COLOR = "#5c5763";
+
+export function addressText(sender) {
+  if (typeof sender === "string") return sender;
+  return sender?.email || sender?.address || "";
+}
+
+export function senderDisplayName(email) {
+  const displayName =
+    email.sender_display_name ||
+    email.sender_name ||
+    email.from_name ||
+    (typeof email.sender === "object" ? email.sender?.name : "");
+  const address = addressText(email.sender || email.from);
+  return displayName?.trim() || address.split("@")[0] || "Unknown sender";
+}
+
+/** Two-letter key for color lookup: first + last word, or first two chars. */
+export function initialsFromName(name) {
+  const cleaned = String(name || "")
+    .trim()
+    .replace(/[^a-zA-Z\s'-]/g, " ");
+  const parts = cleaned.split(/\s+/).filter(Boolean);
+
+  if (parts.length >= 2) {
+    const first = parts[0][0] || "";
+    const last = parts[parts.length - 1][0] || "";
+    return `${first}${last}`.toUpperCase();
+  }
+
+  const word = parts[0] || "?";
+  const letters = word.replace(/[^a-zA-Z]/g, "");
+  if (letters.length >= 2) {
+    return letters.slice(0, 2).toUpperCase();
+  }
+  if (letters.length === 1) {
+    return `${letters[0]}${letters[0]}`.toUpperCase();
+  }
+  return "??";
+}
+
+export function colorForInitials(initials) {
+  const key = String(initials || "").toUpperCase().slice(0, 2);
+  return colorMap[key] || FALLBACK_COLOR;
+}
+
+/** Registered-user avatar URL hook — wire when profile photos exist. */
+export function senderAvatarUrl(email) {
+  return email.sender_avatar_url || email.sender?.avatar_url || null;
+}
+
+export function senderAvatar(email) {
+  const name = senderDisplayName(email);
+  const initials = initialsFromName(name);
+  return {
+    name,
+    initials,
+    color: colorForInitials(initials),
+    imageUrl: senderAvatarUrl(email),
+  };
+}