From e455e46852900c6d2b3e77b7a77e1b9da41b2ca8 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 8 Feb 2026 22:45:32 +0000
Subject: feat(mobile): more native screens

---
 apps/mobile/components/ui/Avatar.tsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

(limited to 'apps/mobile/components/ui/Avatar.tsx')

diff --git a/apps/mobile/components/ui/Avatar.tsx b/apps/mobile/components/ui/Avatar.tsx
index ed31df23..239eaba8 100644
--- a/apps/mobile/components/ui/Avatar.tsx
+++ b/apps/mobile/components/ui/Avatar.tsx
@@ -13,6 +13,28 @@ interface AvatarProps {
   fallbackClassName?: string;
 }
 
+const AVATAR_COLORS = [
+  "#f87171", // red-400
+  "#fb923c", // orange-400
+  "#fbbf24", // amber-400
+  "#a3e635", // lime-400
+  "#34d399", // emerald-400
+  "#22d3ee", // cyan-400
+  "#60a5fa", // blue-400
+  "#818cf8", // indigo-400
+  "#a78bfa", // violet-400
+  "#e879f9", // fuchsia-400
+];
+
+function nameToColor(name: string | null | undefined): string {
+  if (!name) return AVATAR_COLORS[0];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
 function isExternalUrl(url: string) {
   return url.startsWith("http://") || url.startsWith("https://");
 }
@@ -46,22 +68,25 @@ export function Avatar({
   }, [name]);
 
   const showFallback = !imageUrl || imageError;
+  const avatarColor = nameToColor(name);
 
   return (
     <View
-      className={cn("overflow-hidden bg-black", className)}
+      className={cn("overflow-hidden", className)}
       style={{
         width: size,
         height: size,
         borderRadius: size / 2,
+        backgroundColor: showFallback ? avatarColor : undefined,
       }}
     >
       {showFallback ? (
         <View
           className={cn(
-            "flex h-full w-full items-center justify-center bg-black",
+            "flex h-full w-full items-center justify-center",
             fallbackClassName,
           )}
+          style={{ backgroundColor: avatarColor }}
         >
           <Text
             className="text-white"
-- 
cgit v1.2.3-70-g09d2