feat(desktop): show favicon beside preview hostname

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>

desktop/src/shared/ui/link-preview-attachment.tsx

@@ -183,10 +183,21 @@ export function LinkPreviewAttachment({
         )}
         <AttachmentContent className={reserveImage ? "px-3 py-2.5" : undefined}>
           <div
-            className="truncate text-xs font-normal leading-4 text-muted-foreground"
+            className="flex min-w-0 items-center gap-1.5 text-xs font-normal leading-4 text-muted-foreground"
             data-link-preview-hostname=""
           >
-            {reserveImage ? hostname : preview.provider}
+            {reserveImage && preview.faviconDataUrl ? (
+              <img
+                alt=""
+                aria-hidden="true"
+                className="size-3 shrink-0 rounded-sm object-contain"
+                data-link-preview-hostname-favicon=""
+                src={preview.faviconDataUrl}
+              />
+            ) : null}
+            <span className="truncate">
+              {reserveImage ? hostname : preview.provider}
+            </span>
           </div>
           <AttachmentTitle
             className={

desktop/tests/e2e/messaging.spec.ts

@@ -353,6 +353,9 @@ test("link preview image geometry stays stable while loading", async ({
     }));
 
     await expect(card).toHaveAttribute("data-image-state", "image");
+    await expect(
+      card.locator("[data-link-preview-hostname-favicon]"),
+    ).toHaveAttribute("src", /data:image\/png;base64/);
     if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
       await waitForAnimations(page);
       await card.screenshot({