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/FilePreview.tsx

@@ -23,6 +23,7 @@ import Modal from "./ui/Modal";
 import { MoreButton } from "./ui/MoreButton";
 import { LoadingState, StateMessage } from "./ui/QueryState";
 import { useContextMenu } from "./ui/useContextMenu";
+import RemoteImage from "./ui/RemoteImage";
 
 // The Files viewer (DESIGN.md "Files preview"): the library's files that are not media, one at a time,
 // in the shared dialog shell. What a file shows is the server's call (`asset.preview`,
@@ -187,19 +188,17 @@ function Stage({
   title: string;
 }) {
   const { t } = useTranslation();
-  const [failed, setFailed] = useState(false);
   if (kind === "image")
-    return failed ? (
-      <StateMessage tone="error" className={`${STAGE} justify-center`}>
-        {t("common.loadError")}
-      </StateMessage>
-    ) : (
+    return (
       <div className={`${STAGE} flex items-center justify-center`}>
-        <img
+        {/* A preview that fails is an answer (the file is not an image after all), not a hiccup:
+            said at once, no retries. */}
+        <RemoteImage
           src={api.previewUrl(file.id)}
           alt={title}
-          onError={() => setFailed(true)}
           className="max-h-full max-w-full rounded-md object-contain"
+          retries={0}
+          fallback={<StateMessage tone="error">{t("common.loadError")}</StateMessage>}
         />
       </div>
     );