feat(ui): show website favicon in entry list for webpage entries

frontend/src/components/EntryRow.jsx

@@ -1,6 +1,28 @@
+import { useState } from 'react';
 import { formatTimestamp, formatBytes, valueText, sourceIconSvg } from '../utils';
 
-export default function EntryRow({ entry, isSelected, onSelect }) {
+export default function EntryRow({ entry, archiveId, isSelected, onSelect }) {
+  const [favFailed, setFavFailed] = useState(false);
+  const showFavicon =
+    entry.source_kind === 'web' &&
+    entry.entity_kind === 'page' &&
+    entry.has_favicon &&
+    archiveId &&
+    !favFailed;
+
+  const icon = showFavicon ? (
+    <img
+      src={`/api/archives/${archiveId}/entries/${entry.entry_uid}/favicon`}
+      width="16"
+      height="16"
+      alt=""
+      onError={() => setFavFailed(true)}
+      style={{ objectFit: 'contain' }}
+    />
+  ) : (
+    <span dangerouslySetInnerHTML={{ __html: sourceIconSvg(entry.source_kind) }} />
+  );
+
   return (
     <div
       className={isSelected ? 'is-selected' : undefined}
@@ -11,7 +33,7 @@ export default function EntryRow({ entry, isSelected, onSelect }) {
     >
       <div className="col-added">{formatTimestamp(entry.archived_at)}</div>
       <div className="col-title">
-        <span className="source-icon" dangerouslySetInnerHTML={{ __html: sourceIconSvg(entry.source_kind) }} />
+        <span className="source-icon">{icon}</span>
         <span className="entry-title">{valueText(entry.title) || valueText(entry.entry_uid)}</span>
       </div>
       <div className="col-type">