fix(ui): a picture that fails to load shows the card's own frame, then retries

A bare <img> sent a Referer that Google's image CDNs refuse and had no retry and no fallback, so a
Home shelf card showed the browser's broken-image mark. ui/RemoteImage gathers what Avatar, the
channel banner and the download rows had each hand-rolled: no Referer, up to three retries past the
browser's negative cache, the caller's fallback (by default the card's empty frame) instead of the
broken mark, the failure remembered by URL. Every picture now goes through it; a lint rule refuses
a bare <img>.

frontend/src/components/PlexBrowse.tsx

@@ -55,6 +55,7 @@ import { Chip } from "./ui/Chip";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
 import { SURFACE } from "./ui/surfaces";
+import RemoteImage from "./ui/RemoteImage";
 
 // Lazy: the rich player (pulls in hls.js) loads only when something is first played.
 const PlexPlayer = lazy(() => import("./PlexPlayer"));
@@ -672,18 +673,17 @@ export default function PlexBrowse() {
                 title={t("plex.info.viewPerson", { name: p.name })}
                 className="group/person flex min-w-0 items-center gap-2.5 rounded-lg"
               >
-                {p.photo ? (
-                  <img
-                    src={p.photo}
-                    alt=""
-                    loading="lazy"
-                    className="w-10 h-10 rounded-full object-cover shrink-0"
-                  />
-                ) : (
-                  <div className="w-10 h-10 rounded-full grid place-items-center bg-surface text-muted shrink-0">
-                    <User className="w-5 h-5" />
-                  </div>
-                )}
+                <RemoteImage
+                  src={p.photo}
+                  alt=""
+                  loading="lazy"
+                  className="w-10 h-10 rounded-full object-cover shrink-0"
+                  fallback={
+                    <div className="w-10 h-10 rounded-full grid place-items-center bg-surface text-muted shrink-0">
+                      <User className="w-5 h-5" />
+                    </div>
+                  }
+                />
                 <div className="min-w-0">
                   <div className="text-sm font-medium truncate max-w-37.5 group-hover/person:text-accent">
                     {p.name}