From 0b48346d026d1ec824c7623ae970c3770bd43e24 Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 8 Sep 2026 02:23:20 +0800 Subject: [PATCH] fix(web): avatar background color was invisible everywhere (transparent) avatarBgClass() built its class name via template-literal interpolation (`bg-avatar-${i + 1}`). Tailwind's build finds utility classes by statically scanning source text for complete class-name strings -- a dynamically assembled name is invisible to that scan, so `.bg-avatar-1` through `.bg-avatar-11` were never generated in the compiled CSS at all. Every avatar in the app (chat list, conversation header, message bubbles, detail panel) rendered with a fully transparent background instead of its color -- the element's className looked correct in the DOM, which is why this shipped across several commits before being caught by checking computed style rather than the class name itself. Fixed by writing the 11 class names out as a literal array Tailwind's scanner can actually see. Co-Authored-By: Claude Sonnet 5 --- web/src/lib/avatar.ts | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/web/src/lib/avatar.ts b/web/src/lib/avatar.ts index 9dabaa7c..38f6553e 100644 --- a/web/src/lib/avatar.ts +++ b/web/src/lib/avatar.ts @@ -20,7 +20,27 @@ export function avatarColorIndex(id: string): number { return (Math.abs(stringToColorHash(id)) % AVATAR_COLOR_COUNT) + 1; } -const AVATAR_BG_CLASSES = Array.from({ length: AVATAR_COLOR_COUNT }, (_, i) => `bg-avatar-${i + 1}`); +/** + * Written out as literal strings, NOT template-generated (`bg-avatar-${i}`) -- Tailwind's build + * finds utility classes by statically scanning source text for complete class-name strings, so a + * dynamically-assembled name is invisible to it and never gets its CSS generated at all. That exact + * bug shipped here once already: every avatar rendered with a fully transparent background instead + * of its color, discovered by checking computed style, not by reading the class name off the DOM + * (which looked correct). + */ +const AVATAR_BG_CLASSES = [ + 'bg-avatar-1', + 'bg-avatar-2', + 'bg-avatar-3', + 'bg-avatar-4', + 'bg-avatar-5', + 'bg-avatar-6', + 'bg-avatar-7', + 'bg-avatar-8', + 'bg-avatar-9', + 'bg-avatar-10', + 'bg-avatar-11', +]; export function avatarBgClass(id: string): string { return AVATAR_BG_CLASSES[avatarColorIndex(id) - 1];