From 97ccff4acdf028f3a76982f5444d1a485d2e126f Mon Sep 17 00:00:00 2001
From: Promansis <damon.kyle.walling@gmail.com>
Date: Sat, 30 May 2026 13:18:26 +0800
Subject: [PATCH] Fall back when recent chat avatar fails

---
 .../modes/router/components/RecentChats.tsx   | 49 +++++++++++++------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/features/modes/router/components/RecentChats.tsx b/src/features/modes/router/components/RecentChats.tsx
index d6161c0dd..435a49596 100644
--- a/src/features/modes/router/components/RecentChats.tsx
+++ b/src/features/modes/router/components/RecentChats.tsx
@@ -2,7 +2,7 @@
 // Chat: Recent Chats — shows 3 most recently
 // interacted chats on the homepage (compact row)
 // ──────────────────────────────────────────────
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { MessageSquare, BookOpen } from "lucide-react";
 import { useRecentChatSummaries, type ChatListItem } from "../../../catalog/chats/index";
 import { characterAvatarUrl, useCharacterSummariesByIds } from "../../../catalog/characters/index";
@@ -105,19 +105,8 @@ function RecentChatChip({
     >
       {/* Small avatar with mode dot */}
       <div className="relative flex-shrink-0">
-        {firstAvatar?.avatarUrl ? (
-          <span className="relative block h-5 w-5 overflow-hidden rounded-md">
-            <img
-              src={firstAvatar.avatarUrl}
-              alt={firstAvatar.name}
-              className="h-full w-full object-cover"
-              style={getAvatarCropStyle(firstAvatar.avatarCrop)}
-            />
-          </span>
-        ) : firstAvatar ? (
-          <div className="flex h-5 w-5 items-center justify-center rounded-md bg-[var(--secondary)] text-[0.5rem] font-bold text-[var(--muted-foreground)]">
-            {firstAvatar.name[0]}
-          </div>
+        {firstAvatar ? (
+          <RecentChatAvatar avatar={firstAvatar} />
         ) : (
           <div
             className="flex h-5 w-5 items-center justify-center rounded-md text-white"
@@ -142,3 +131,35 @@ function RecentChatChip({
     </button>
   );
 }
+
+function RecentChatAvatar({
+  avatar,
+}: {
+  avatar: { name: string; avatarUrl: string | null; avatarCrop?: AvatarCropValue | null };
+}) {
+  const [imageFailed, setImageFailed] = useState(false);
+
+  useEffect(() => {
+    setImageFailed(false);
+  }, [avatar.avatarUrl]);
+
+  if (!avatar.avatarUrl || imageFailed) {
+    return (
+      <div className="flex h-5 w-5 items-center justify-center rounded-md bg-[var(--secondary)] text-[0.5rem] font-bold text-[var(--muted-foreground)]">
+        {avatar.name[0]}
+      </div>
+    );
+  }
+
+  return (
+    <span className="relative block h-5 w-5 overflow-hidden rounded-md">
+      <img
+        src={avatar.avatarUrl}
+        alt={avatar.name}
+        className="h-full w-full object-cover"
+        style={getAvatarCropStyle(avatar.avatarCrop)}
+        onError={() => setImageFailed(true)}
+      />
+    </span>
+  );
+}