From a640b181eef5ccd649771ef695e21cbbb9e918b5 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 12 Jun 2026 18:01:43 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20robust=20avatars=20=E2=80=94=20no-re?=
 =?UTF-8?q?ferrer=20+=20graceful=20fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Channel/account avatars come from Google's image CDNs (yt3.ggpht.com,
lh3.googleusercontent.com). On a feed page dozens load at once; the CDN
rate-limits the referrer-bearing burst (429), so a random subset rendered the
browser's broken-image icon (the URLs themselves are valid — verified 200).

Add a shared <Avatar> that sets referrerPolicy="no-referrer" (which the CDNs
serve without throttling) and falls back to a neutral initial placeholder on
error instead of the broken-image icon. Use it for video-card, player, channel
manager, header and settings avatars.
---
 frontend/src/components/Avatar.tsx        | 48 +++++++++++++++++++++++
 frontend/src/components/Channels.tsx      | 11 +++---
 frontend/src/components/Header.tsx        | 13 +++---
 frontend/src/components/PlayerModal.tsx   |  7 ++--
 frontend/src/components/SettingsPanel.tsx | 13 +++---
 frontend/src/components/VideoCard.tsx     | 14 +++----
 6 files changed, 77 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/components/Avatar.tsx

diff --git a/frontend/src/components/Avatar.tsx b/frontend/src/components/Avatar.tsx
new file mode 100644
index 0000000..c7477b5
--- /dev/null
+++ b/frontend/src/components/Avatar.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+// Avatar image with a graceful fallback.
+//
+// Uses referrerPolicy="no-referrer" because Google's avatar CDNs
+// (yt3.ggpht.com / lh3.googleusercontent.com) rate-limit bursts of
+// referrer-bearing requests — when a feed page fires dozens of avatar loads at
+// once, a random subset gets throttled (HTTP 429) and the browser shows its
+// broken-image icon. Dropping the referrer makes those CDNs serve the images.
+// If a load still fails we render a neutral placeholder (optionally an initial)
+// instead of the broken-image icon.
+export default function Avatar({
+  src,
+  alt = "",
+  fallback,
+  className = "",
+}: {
+  src?: string | null;
+  alt?: string;
+  fallback?: string; // a name/title; its first letter is shown when there's no image
+  className?: string;
+}) {
+  const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [src]);
+
+  if (src && !failed) {
+    return (
+      <img
+        src={src}
+        alt={alt}
+        loading="lazy"
+        referrerPolicy="no-referrer"
+        onError={() => setFailed(true)}
+        className={className}
+      />
+    );
+  }
+
+  const initial = fallback?.trim()?.[0]?.toUpperCase() ?? "";
+  return (
+    <div
+      className={`bg-card grid place-items-center font-semibold text-muted select-none ${className}`}
+      aria-hidden
+    >
+      {initial}
+    </div>
+  );
+}
diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx
index ea073b6..f36afef 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/components/Channels.tsx
@@ -16,6 +16,7 @@ import { api, type ManagedChannel, type Tag } from "../lib/api";
 import { formatEta } from "../lib/format";
 import { notify } from "../lib/notifications";
 import Tooltip from "./Tooltip";
+import Avatar from "./Avatar";
 
 export default function Channels({
   canWrite,
@@ -332,11 +333,11 @@ function ChannelRow({
         </div>
       </Tooltip>
 
-      {c.thumbnail_url ? (
-        <img src={c.thumbnail_url} alt="" className="w-10 h-10 rounded-full shrink-0" />
-      ) : (
-        <div className="w-10 h-10 rounded-full bg-card shrink-0" />
-      )}
+      <Avatar
+        src={c.thumbnail_url}
+        fallback={c.title ?? ""}
+        className="w-10 h-10 rounded-full shrink-0"
+      />
 
       <div className="min-w-0 flex-1">
         <button onClick={onView} className="text-sm font-semibold truncate hover:text-accent block max-w-full text-left">
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 746015e..c450af2 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -4,6 +4,7 @@ import type { FeedFilters, Me } from "../lib/api";
 import type { Page } from "../lib/urlState";
 import SyncStatus from "./SyncStatus";
 import NotificationCenter from "./NotificationCenter";
+import AvatarImg from "./Avatar";
 
 export default function Header({
   me,
@@ -70,12 +71,12 @@ export default function Header({
 }
 
 function Avatar({ me, className = "" }: { me: Me; className?: string }) {
-  return me.avatar_url ? (
-    <img src={me.avatar_url} alt="" className={`rounded-full ${className}`} />
-  ) : (
-    <div className={`rounded-full bg-card grid place-items-center font-semibold ${className}`}>
-      {(me.display_name?.[0] ?? me.email[0] ?? "?").toUpperCase()}
-    </div>
+  return (
+    <AvatarImg
+      src={me.avatar_url}
+      fallback={me.display_name ?? me.email}
+      className={`rounded-full ${className}`}
+    />
   );
 }
 
diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index 05c4083..922b14e 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { useQuery } from "@tanstack/react-query";
 import { ArrowLeft, Check, CheckCheck, X } from "lucide-react";
+import Avatar from "./Avatar";
 import { api, type Video } from "../lib/api";
 import { formatDuration, formatViews, relativeTime } from "../lib/format";
 
@@ -454,10 +455,10 @@ export default function PlayerModal({
               When navigated to a linked video we only have its author (from the player),
               so we show that as plain text and hide feed-video-specific bits. */}
           <div className="flex items-center gap-3 mt-3">
-            {!navigated && video.channel_thumbnail && (
-              <img
+            {!navigated && (
+              <Avatar
                 src={video.channel_thumbnail}
-                alt=""
+                fallback={video.channel_title ?? ""}
                 className="w-9 h-9 rounded-full shrink-0"
               />
             )}
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 73d0531..cb0bdd3 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -4,6 +4,7 @@ import { Bell, Check, History, Monitor, Pause, Play, RefreshCw, User, UserPlus,
 import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
 import { api, type Invite, type Me } from "../lib/api";
 import { formatEta, quotaActionLabel } from "../lib/format";
+import Avatar from "./Avatar";
 import {
   configureNotifications,
   getNotifSettings,
@@ -468,13 +469,11 @@ function Account({ me }: { me: Me }) {
     <>
     <Section title="Account">
       <div className="flex items-center gap-3 mb-3">
-        {me.avatar_url ? (
-          <img src={me.avatar_url} alt="" className="w-12 h-12 rounded-full" />
-        ) : (
-          <div className="w-12 h-12 rounded-full bg-card grid place-items-center font-semibold">
-            {(me.display_name?.[0] ?? me.email[0] ?? "?").toUpperCase()}
-          </div>
-        )}
+        <Avatar
+          src={me.avatar_url}
+          fallback={me.display_name ?? me.email}
+          className="w-12 h-12 rounded-full"
+        />
         <div className="min-w-0">
           <div className="font-semibold truncate">{me.display_name ?? me.email.split("@")[0]}</div>
           <div className="text-xs text-muted truncate">{me.email}</div>
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index c04aae6..9adfdf2 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -1,4 +1,5 @@
 import { Bookmark, Check, CheckCheck, Eye, EyeOff, ListFilter } from "lucide-react";
+import Avatar from "./Avatar";
 import clsx from "clsx";
 import type { Video } from "../lib/api";
 import { formatDuration, formatViews, relativeTime } from "../lib/format";
@@ -203,14 +204,11 @@ export default function VideoCard({
     >
       <Thumb video={video} className="aspect-video" onOpen={onOpen} />
       <div className="flex gap-3 mt-2.5 px-0.5 pb-0.5">
-        {video.channel_thumbnail && (
-          <img
-            src={video.channel_thumbnail}
-            alt=""
-            loading="lazy"
-            className="w-9 h-9 rounded-full shrink-0 mt-0.5"
-          />
-        )}
+        <Avatar
+          src={video.channel_thumbnail}
+          fallback={video.channel_title ?? ""}
+          className="w-9 h-9 rounded-full shrink-0 mt-0.5"
+        />
         <div className="min-w-0 flex-1">
           {title}
           <a