From c964660edab108cf323a5523b26aa3b7e7d3f621 Mon Sep 17 00:00:00 2001
From: Nikita <github@nikiv.dev>
Date: Thu, 25 Dec 2025 08:21:40 -0800
Subject: [PATCH] Update ProfileSidebar to conditionally display avatar or live
 indicator

- Remove default avatar URL fallback
- Show user image if available
- Display animated red dot when user image is absent and user is live
---
 .../web/src/components/ProfileSidebar.tsx     | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/components/ProfileSidebar.tsx b/packages/web/src/components/ProfileSidebar.tsx
index f03d6d1c..9f6efeee 100644
--- a/packages/web/src/components/ProfileSidebar.tsx
+++ b/packages/web/src/components/ProfileSidebar.tsx
@@ -18,7 +18,6 @@ interface ProfileSidebarProps {
 
 export function ProfileSidebar({ user, isLive, viewerCount, children }: ProfileSidebarProps) {
   const displayName = user.name || user.username
-  const avatarUrl = user.image || `https://api.dicebear.com/7.x/initials/svg?seed=${user.username}`
 
   return (
     <div className="h-full flex flex-col bg-black border-l border-white/10">
@@ -26,18 +25,24 @@ export function ProfileSidebar({ user, isLive, viewerCount, children }: ProfileS
       <div className="p-4 border-b border-white/10">
         {/* Avatar and Live Badge */}
         <div className="flex items-start gap-3">
-          <div className="relative">
-            <img
-              src={avatarUrl}
-              alt={displayName}
-              className="w-16 h-16 rounded-full bg-white/10"
-            />
-            {isLive && (
-              <span className="absolute -bottom-1 -right-1 px-1.5 py-0.5 text-[10px] font-bold uppercase bg-red-500 text-white rounded">
-                Live
-              </span>
-            )}
-          </div>
+          {user.image ? (
+            <div className="relative">
+              <img
+                src={user.image}
+                alt={displayName}
+                className="w-16 h-16 rounded-full bg-white/10"
+              />
+              {isLive && (
+                <span className="absolute -bottom-1 -right-1 px-1.5 py-0.5 text-[10px] font-bold uppercase bg-red-500 text-white rounded">
+                  Live
+                </span>
+              )}
+            </div>
+          ) : isLive ? (
+            <div className="relative">
+              <div className="w-3 h-3 rounded-full bg-red-500 animate-pulse" />
+            </div>
+          ) : null}
           <div className="flex-1 min-w-0">
             <h2 className="text-lg font-bold text-white truncate">{displayName}</h2>
             <p className="text-sm text-white/60">@{user.username}</p>