Merge pull request #4 from Johnpii1/codex/add-fallback-avatar-color-hashing

Add deterministic fallback avatar colors by creator id

Author: Johnpii1

src/components/common/CreatorCard.tsx

@@ -108,6 +108,7 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 			<div className="relative mb-4 aspect-square overflow-hidden rounded-xl">
 				<CreatorInitialsAvatar
 					name={creator.title}
+					creatorId={creator.id}
 					imageSrc={creator.thumbnail}
 					imageClassName="transition-transform duration-500 md:group-hover:scale-[1.03]"
 				/>

src/components/common/CreatorInitialsAvatar.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
+import { getFallbackAvatarColors } from '@/utils/avatarColor.util';
 
 interface CreatorInitialsAvatarProps {
 	name: string;
+	creatorId?: string | number | null;
 	imageSrc?: string;
 	className?: string;
 	imageClassName?: string;
@@ -24,20 +26,26 @@ const getInitials = (name: string) => {
 
 const CreatorInitialsAvatar: React.FC<CreatorInitialsAvatarProps> = ({
 	name,
+	creatorId,
 	imageSrc,
 	className,
 	imageClassName,
 }) => {
 	const [hasError, setHasError] = useState(false);
 	const initials = getInitials(name);
+	const fallbackColors = getFallbackAvatarColors(creatorId);
 
 	if (!imageSrc || hasError) {
 		return (
 			<div
 				className={cn(
-					'flex size-full items-center justify-center bg-gradient-to-br from-slate-800 via-slate-700 to-amber-700 text-3xl font-black tracking-wide text-white/95',
+					'flex size-full items-center justify-center text-3xl font-black tracking-wide',
 					className
 				)}
+				style={{
+					background: fallbackColors.background,
+					color: fallbackColors.textColor,
+				}}
 			>
 				<span aria-label={`${name} initials avatar`}>{initials}</span>
 			</div>

src/components/common/CreatorProfileHeader.tsx

@@ -9,6 +9,7 @@ import CreatorInitialsAvatar from '@/components/common/CreatorInitialsAvatar';
 interface CreatorProfileHeaderProps {
 	name: string;
 	handle: string;
+	creatorId?: string | number | null;
 	avatarUrl?: string;
 	isVerified?: boolean;
 	className?: string;
@@ -17,6 +18,7 @@ interface CreatorProfileHeaderProps {
 const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 	name,
 	handle,
+	creatorId,
 	avatarUrl,
 	isVerified,
 	className,
@@ -44,7 +46,7 @@ const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 		>
 			<div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-6">
 				<div className="size-24 overflow-hidden rounded-2xl border-4 border-white/10 shadow-xl md:size-32">
-					<CreatorInitialsAvatar name={name} imageSrc={avatarUrl} />
+					<CreatorInitialsAvatar name={name} creatorId={creatorId} imageSrc={avatarUrl} />
 				</div>
 				<div className="space-y-1">
 					<div className="flex items-center gap-2">

src/components/common/__tests__/CreatorInitialsAvatar.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import CreatorInitialsAvatar from '@/components/common/CreatorInitialsAvatar';
+import { getFallbackAvatarColors } from '@/utils/avatarColor.util';
+
+describe('CreatorInitialsAvatar', () => {
+	it('uses deterministic fallback colors for the same creator id', () => {
+		const first = getFallbackAvatarColors('creator-123');
+		const second = getFallbackAvatarColors('creator-123');
+		const third = getFallbackAvatarColors('creator-456');
+
+		expect(first).toEqual(second);
+		expect(first.background).not.toBe(third.background);
+		expect(first.textColor).toBe('rgba(255, 255, 255, 0.95)');
+	});
+
+	it('renders initials fallback with hashed background when image is missing', () => {
+		render(<CreatorInitialsAvatar name="Alex Rivers" creatorId="creator-123" />);
+
+		const initials = screen.getByLabelText('Alex Rivers initials avatar');
+		const avatar = initials.parentElement;
+		const colors = getFallbackAvatarColors('creator-123');
+
+		expect(initials).toHaveTextContent('AR');
+		expect(avatar).toHaveStyle({
+			background: colors.background,
+			color: colors.textColor,
+		});
+	});
+});

src/pages/LandingPage.tsx

@@ -479,6 +479,7 @@ function LandingPage() {
 					<CreatorProfileHeader
 						name="Alex Rivers"
 						handle="arivers"
+						creatorId="arivers"
 						isVerified={true}
 						avatarUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop"
 					/>

src/utils/avatarColor.util.ts

@@ -0,0 +1,19 @@
+const stringHash = (value: string) => {
+	let hash = 0;
+	for (let i = 0; i < value.length; i += 1) {
+		hash = (hash * 31 + value.charCodeAt(i)) >>> 0;
+	}
+	return hash;
+};
+
+export const getFallbackAvatarColors = (creatorId?: string | number | null) => {
+	const normalizedId = String(creatorId ?? '').trim();
+	const hash = stringHash(normalizedId || 'fallback-avatar');
+	const baseHue = hash % 360;
+	const accentHue = (baseHue + 28) % 360;
+
+	return {
+		background: `linear-gradient(135deg, hsl(${baseHue} 65% 28%), hsl(${accentHue} 72% 36%))`,
+		textColor: 'rgba(255, 255, 255, 0.95)',
+	};
+};