From a2ffdf8f80f48fee287163c2ad8b66067e8b5d34 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 30 Jul 2026 23:14:06 -0700
Subject: [PATCH] feat(desktop): unify compact preview hover treatment

- Underline compact preview hostnames and titles together whenever the card is hovered.
- Remove independent hostname hover styling so the interaction consistently represents the full destination URL.
- Restore stronger description colors for standard rich previews and tweet content while keeping hostnames secondary.
- Add E2E coverage confirming both compact identity elements receive the shared hover affordance.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/shared/ui/compact-link-preview-attachment.tsx | 4 ++--
 desktop/src/shared/ui/rich-link-preview-attachment.tsx    | 4 ++--
 desktop/tests/e2e/messaging.spec.ts                       | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/desktop/src/shared/ui/compact-link-preview-attachment.tsx b/desktop/src/shared/ui/compact-link-preview-attachment.tsx
index 73ec277699..b108048091 100644
--- a/desktop/src/shared/ui/compact-link-preview-attachment.tsx
+++ b/desktop/src/shared/ui/compact-link-preview-attachment.tsx
@@ -69,7 +69,7 @@ export function CompactLinkPreviewAttachment({
         ) : null}
         <AttachmentContent className={reserveImage ? "px-2 py-2" : undefined}>
           <a
-            className="relative z-20 flex w-fit max-w-full min-w-0 items-center gap-1.5 text-xs font-normal leading-4 text-muted-foreground/70 hover:underline"
+            className="relative z-20 flex w-fit max-w-full min-w-0 items-center gap-1.5 text-xs font-normal leading-4 text-muted-foreground/70 group-hover/attachment:underline"
             data-link-preview-hostname=""
             href={preview.href}
             rel="noreferrer"
@@ -86,7 +86,7 @@ export function CompactLinkPreviewAttachment({
             ) : null}
             <span className="truncate">{hostname}</span>
           </a>
-          <AttachmentTitle className="line-clamp-2 whitespace-normal">
+          <AttachmentTitle className="line-clamp-2 whitespace-normal group-hover/attachment:underline">
             {preview.title}
           </AttachmentTitle>
           {preview.description ? (
diff --git a/desktop/src/shared/ui/rich-link-preview-attachment.tsx b/desktop/src/shared/ui/rich-link-preview-attachment.tsx
index 83094db458..39f99dc13e 100644
--- a/desktop/src/shared/ui/rich-link-preview-attachment.tsx
+++ b/desktop/src/shared/ui/rich-link-preview-attachment.tsx
@@ -171,7 +171,7 @@ function TweetPreview({
       </a>
       {contentExpanded && preview.description ? (
         <LinkPreviewDescription
-          className="text-muted-foreground/70"
+          className="text-foreground"
           description={preview.description}
         />
       ) : null}
@@ -271,7 +271,7 @@ export function RichLinkPreviewAttachment({
         </a>
         {contentExpanded && preview.description ? (
           <LinkPreviewDescription
-            className="text-muted-foreground/70"
+            className="text-muted-foreground"
             description={preview.description}
           />
         ) : null}
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts
index 9e14e2f19c..5b4573eab5 100644
--- a/desktop/tests/e2e/messaging.spec.ts
+++ b/desktop/tests/e2e/messaging.spec.ts
@@ -500,6 +500,10 @@ test("link preview no-image layout keeps compact height", async ({ page }) => {
       card.locator('[data-slot="attachment-description"]'),
     ).toHaveText("Open-source collaboration for the Buzz app.");
     await expect(card).toHaveCSS("border-left-width", "3px");
+    const title = card.locator('[data-slot="attachment-title"]');
+    await card.hover();
+    await expect(hostnameLink).toHaveCSS("text-decoration-line", "underline");
+    await expect(title).toHaveCSS("text-decoration-line", "underline");
     const resolved = await card.evaluate((element) => ({
       height: element.getBoundingClientRect().height,
       textLeft: element