pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): avatar background color was invisible everywhere (transparent)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-09-08 02:23:20 +08:00
co-authored by Claude Sonnet 5
parent 2272b42c6f
commit 0b48346d02
1 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/avatar.ts
+21 -1
View File
@@ -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];