External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(desktop): refine compact link preview cards

Browse Source 
- Remove compact card borders and background surfaces while preserving transparent hover behavior.
- Round thumbnail images on every corner and expand cards to the 24rem image-upload width.
- Shorten the preview settings submenu label from Link display to Display.
- Update compact preview geometry coverage for the wider borderless layout and await screenshot animations.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
Taylor Ho
2026-07-30 23:21:07 -07:00
committed by npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
parent 984eb693be
commit 9f39435fc3
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/shared/ui/compact-link-preview-attachment.tsx
+3 -3
View File
@@ -148,10 +148,10 @@ export function CompactLinkPreviewAttachment({
const hostname = getHostname(preview);
return (
<div className={cn("relative w-[22.5rem] max-w-full shrink-0", className)}>
<div className={cn("relative w-96 max-w-full shrink-0", className)}>
<Attachment
className={cn(
"w-full no-underline shadow-none",
"w-full border-0 bg-transparent no-underline shadow-none hover:border-transparent hover:bg-transparent",
reserveImage && "h-20 min-h-20 max-h-20 gap-0 p-0",
)}
data-image-state={preview.imageState}
@@ -161,7 +161,7 @@ export function CompactLinkPreviewAttachment({
{reserveImage ? (
<AttachmentMedia
aria-hidden={showImage ? undefined : "true"}
className="aspect-auto h-full min-h-0 w-28 min-w-28 max-w-28 self-stretch rounded-none bg-muted sm:w-32 sm:min-w-32 sm:max-w-32"
className="aspect-auto h-full min-h-0 w-28 min-w-28 max-w-28 self-stretch rounded-xl bg-muted sm:w-32 sm:min-w-32 sm:max-w-32"
data-link-preview-thumbnail=""
variant="image"
>
desktop/src/shared/ui/link-preview-controls.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export function LinkPreviewControls({
</DropdownMenuTrigger>
<DropdownMenuContent align="start" side="right">
<DropdownMenuSub>
<DropdownMenuSubTrigger>Link display</DropdownMenuSubTrigger>
<DropdownMenuSubTrigger>Display</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuRadioGroup
onValueChange={handleStyleChange}
desktop/tests/e2e/messaging.spec.ts
+4 -2
View File
@@ -1,5 +1,6 @@
import { expect, test, type Locator } from "@playwright/test";
import { waitForAnimations } from "../helpers/animations";
import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge";
import { expectCornerRadiusPx, expectSmoothCorners } from "../helpers/css";
import { openSettings } from "../helpers/settings";
@@ -369,6 +370,7 @@ test("link preview image geometry stays stable while loading", async ({
await expect(card).toBeVisible();
await expect(card.locator("[data-link-preview-thumbnail]")).toBeVisible();
if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
await waitForAnimations(page);
await card.screenshot({
animations: "disabled",
path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-pending.png`,
@@ -425,10 +427,10 @@ test("link preview image geometry stays stable while loading", async ({
?.getBoundingClientRect().width,
}));
expect(pending.width).toBe(width < 640 ? 325 : 360);
expect(pending.width).toBe(width < 640 ? 325 : 384);
expect(pending.height).toBe(80);
expect(pending.textInset).toBe(12);
expect(pending.thumbnailHeight).toBe(78);
expect(pending.thumbnailHeight).toBe(80);
expect(loaded.height).toBe(pending.height);
expect(loaded.textLeft).toBe(pending.textLeft);
expect(loaded.thumbnailHeight).toBe(pending.thumbnailHeight);