From ff4dedfec0364ea4bd52ddb60d7b4ae976cff300 Mon Sep 17 00:00:00 2001
From: Salastil <salastil@cock.li>
Date: Sun, 13 Sep 2026 16:58:10 -0400
Subject: [PATCH] Draw the picture a link preview brought

Capped rather than sized to the card. A preview image is often a 1200px
banner, and a card as wide as the conversation would turn every posted
link into the loudest thing in the room.

Only where the daemon fetched one of its own - a Discord embed's
thumbnail still comes through the message's media sniffing and is paired
with the card below, which is a different mechanism for a different
protocol.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 nobilis                                    |  2 +-
 src/renderer/src/app.css                   | 15 +++++++++++++++
 src/renderer/src/components/MessageRow.tsx | 16 ++++++++++++++--
 src/shared/wire.ts                         | 10 ++++++++++
 4 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/nobilis b/nobilis
index 1f6ce2c..dd450eb 160000
--- a/nobilis
+++ b/nobilis
@@ -1 +1 @@
-Subproject commit 1f6ce2c643b2006726d8e590171375881af6516b
+Subproject commit dd450ebe86ec7c3d42ca724cfcbe20ab4a900603
diff --git a/src/renderer/src/app.css b/src/renderer/src/app.css
index 8aa0ee4..3e9902d 100644
--- a/src/renderer/src/app.css
+++ b/src/renderer/src/app.css
@@ -6676,6 +6676,21 @@ video.lightbox-media {
   color: var(--error);
 }
 
+/* --- Link previews ---------------------------------------------------- */
+
+/* The picture a homeserver found behind a link. Capped rather than sized to
+   the card: a preview image is often a 1200px banner, and a card as wide as
+   the conversation would turn every posted link into the loudest thing in the
+   room. */
+.rich-embed-image {
+  max-width: 100%;
+  max-height: 220px;
+  margin-top: var(--spacing-xs);
+  border-radius: var(--corner-radius-small);
+  object-fit: cover;
+  cursor: pointer;
+}
+
 /* --- Jump to a date --------------------------------------------------- */
 
 /* Under the search box, because it answers the same question by a different
diff --git a/src/renderer/src/components/MessageRow.tsx b/src/renderer/src/components/MessageRow.tsx
index 0f3064a..68b0b48 100644
--- a/src/renderer/src/components/MessageRow.tsx
+++ b/src/renderer/src/components/MessageRow.tsx
@@ -877,8 +877,20 @@ function MessageRowBody({
                   />
                 </div>
               )}
-              {/* The thing the embed is about, inside the card describing it
-                  rather than repeated below it. */}
+              {/* The picture the card is about, where the card brought one
+                  of its own. A Matrix link preview is unfurled by the
+                  homeserver and arrives as a file the daemon has already
+                  fetched - so there is nothing to sniff and nothing to pair
+                  it with, unlike Discord's below. */}
+              {embed.imageUrl && !embedMedia.claimed.has(i) && (
+                <img
+                  className="rich-embed-image"
+                  src={resolveMediaUrl(embed.imageUrl)}
+                  alt=""
+                  loading="lazy"
+                  onClick={() => embed.url && void window.moho.openExternal(embed.url)}
+                />
+              )}
               {embedMedia.claimed.has(i) && (
                 <div className="rich-embed-media">
                   <MediaEmbed
diff --git a/src/shared/wire.ts b/src/shared/wire.ts
index 02f5417..0651dd7 100644
--- a/src/shared/wire.ts
+++ b/src/shared/wire.ts
@@ -400,6 +400,16 @@ export interface Embed {
   color?: number
   timestamp?: string
   url?: string
+  /**
+   * The picture on the card, as a local path.
+   *
+   * A link preview is mostly its picture. Matrix's homeserver-side unfurling
+   * answers with an mxc URI needing a token no window holds, so the daemon
+   * fetches it and what arrives here is the file. Discord's own embeds carry
+   * none of these - their thumbnails come through the message's media
+   * sniffing and are paired with the card separately.
+   */
+  imageUrl?: string
 }
 
 /**