Fix pending message feedback (#3543)

## Summary

- Keep `Sending…` beside message timestamps, including grouped pending
messages.
- Match the profile-card hover surface to inactive channel rows.

## Snapshots

### Pending message

![Pending message
status](https://raw.githubusercontent.com/block/buzz/655189aec0904677a68651f8aabf0e17d69734cd/pr-3543--pending-message-inline.png)

### Profile hover

![Profile
hover](https://raw.githubusercontent.com/block/buzz/655189aec0904677a68651f8aabf0e17d69734cd/pr-3543--profile-hover.png)

## Validation

- `pnpm -C desktop typecheck`
- `pnpm -C desktop check:file-sizes`
- `pnpm -C desktop build:e2e`
- `pnpm -C desktop exec playwright test
tests/e2e/message-feedback-snapshots.spec.ts --project=smoke`

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>

desktop/playwright.config.ts

@@ -34,6 +34,7 @@ export default defineConfig({
         "**/hosted-communities-settings-screenshots.spec.ts",
         "**/invites-settings-screenshots.spec.ts",
         "**/messaging.spec.ts",
+        "**/message-feedback-snapshots.spec.ts",
         "**/custom-emoji.spec.ts",
         "**/profile-custom-emoji-status.spec.ts",
         "**/custom-emoji-ui.spec.ts",

desktop/src/features/messages/lib/timelineItems.test.mjs

@@ -245,6 +245,36 @@ test("buildTimelineItems: consecutive same-author messages within the window are
   );
 });
 
+test("buildTimelineItems: pending messages remain standalone until acknowledged", () => {
+  const entries = [
+    entry({ id: "a", pubkey: "author-a", createdAt: dayAt(2026, 6, 14) }),
+    entry({
+      id: "b",
+      pubkey: "author-a",
+      createdAt: dayAt(2026, 6, 14, 12, 2),
+      pending: true,
+    }),
+    entry({
+      id: "c",
+      pubkey: "author-a",
+      createdAt: dayAt(2026, 6, 14, 12, 3),
+    }),
+  ];
+
+  const messageItems = buildTimelineItems(entries, null).items.filter(
+    (item) => item.kind === "message",
+  );
+
+  assert.deepEqual(
+    messageItems.map((item) => item.isContinuation),
+    [false, false, false],
+  );
+  assert.deepEqual(
+    messageItems.map((item) => item.isFollowedByContinuation),
+    [false, false, false],
+  );
+});
+
 test("buildTimelineItems: same-author messages past the window start a new group", () => {
   const author = "author-a";
   const entries = [

desktop/src/features/messages/lib/timelineItems.ts

@@ -232,8 +232,13 @@ export function buildTimelineItems(
       continue;
     }
 
+    // Pending rows render with their own header so the send status can sit
+    // beside the timestamp. Keep the timeline spacing and row estimate in
+    // that same standalone state until the send acknowledgement arrives.
     const isContinuation =
+      !message.pending &&
       previousGroupEntry !== null &&
+      !previousGroupEntry.message.pending &&
       hasSameMessageAuthor(previousGroupEntry.message, message) &&
       isWithinGroupingWindow(
         previousGroupEntry.message.createdAt,

desktop/src/features/messages/ui/MessageRow.tsx

@@ -143,6 +143,9 @@ export const MessageRow = React.memo(
     showDepthGuides?: boolean;
     videoReviewContext?: VideoReviewContext;
   }) {
+    // Keep the transient send state with its timestamp rather than collapsing
+    // it into a grouped message row with no header.
+    const isDisplayedAsContinuation = isContinuation && !message.pending;
     const [expandedDiffId, setExpandedDiffId] = React.useState<string | null>(
       null,
     );
@@ -443,7 +446,7 @@ export const MessageRow = React.memo(
       </div>
     );
 
-    const avatarGutterNode = isContinuation ? (
+    const avatarGutterNode = isDisplayedAsContinuation ? (
       continuationTimestampGutter
     ) : message.pubkey ? (
       <UserProfilePopover
@@ -515,7 +518,12 @@ export const MessageRow = React.memo(
       message.pending || message.edited ? (
         <>
           {message.pending ? (
-            <p className="font-medium text-primary/80">Sending</p>
+            <p
+              className="font-normal text-muted-foreground/70"
+              data-testid="message-send-status"
+            >
+              Sending…
+            </p>
           ) : null}
           {message.edited ? (
             <Tooltip>
@@ -536,13 +544,13 @@ export const MessageRow = React.memo(
     );
 
     const continuationMetadataNode =
-      isContinuation && statusMetadataNode ? (
+      isDisplayedAsContinuation && statusMetadataNode ? (
         <div className="mt-0.5 flex items-baseline gap-2 text-xs">
           {statusMetadataNode}
         </div>
       ) : null;
 
-    const headerNode = isContinuation ? null : (
+    const headerNode = isDisplayedAsContinuation ? null : (
       <MessageHeaderRow>
         {message.pubkey ? (
           <UserProfilePopover
@@ -570,7 +578,9 @@ export const MessageRow = React.memo(
         ) : null}
       </MessageHeaderRow>
     );
-    const bodyContainerClass = isContinuation ? "mt-0" : bodyOffsetClass;
+    const bodyContainerClass = isDisplayedAsContinuation
+      ? "mt-0"
+      : bodyOffsetClass;
 
     const messageBodyNode = (
       <>
@@ -788,7 +798,7 @@ export const MessageRow = React.memo(
                 ? "mx-1 px-2"
                 : "px-2",
             "flex gap-2.5",
-            isContinuation ? "items-center" : "items-start",
+            isDisplayedAsContinuation ? "items-center" : "items-start",
             hasActiveReminder ? "bg-blue-500/10" : "",
             highlighted
               ? "-mx-4 rounded-none px-6 before:absolute before:-inset-y-1.5 before:inset-x-0 before:animate-[route-target-highlight-fade_2s_ease-out_forwards] before:bg-primary/10 before:content-[''] motion-reduce:before:animate-none sm:-mx-6 sm:px-8"

desktop/src/features/sidebar/ui/SidebarProfileCard.tsx

@@ -100,7 +100,7 @@ export function SidebarProfileCard({
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: child buttons provide keyboard access; wrapper fills pointer gaps between them.
     <div
-      className="group/profile-card cursor-pointer rounded-xl px-2 py-2 transition-colors hover:bg-sidebar-border/35 dark:hover:bg-sidebar-border/30"
+      className="group/profile-card cursor-pointer rounded-xl px-2 py-2 transition-colors hover:bg-sidebar-border/35"
       data-testid="sidebar-profile-card"
       onClick={handleCardClick}
       ref={profileCardRef}

desktop/src/shared/styles/globals/theme.css

@@ -481,6 +481,13 @@
   color: var(--buzz-muted-foreground);
 }
 
+/* Match the hover treatment used by inactive channel rows. */
+:root[data-buzz-sidebar]
+  [data-testid="app-sidebar"]
+  [data-testid="sidebar-profile-card"]:hover {
+  background-color: var(--buzz-hover-surface);
+}
+
 /*
  * App and settings sidebar section headings plus secondary footer text use the
  * same tint. Navigation rows keep their normal foreground in both sidebars.

desktop/src/testing/e2eBridge.ts

@@ -1018,6 +1018,8 @@ declare global {
       mentionPubkeys?: string[];
       extraTags?: string[][];
       createdAt?: number;
+      /** Marks this test-only message as locally pending. */
+      pending?: boolean;
       /** 64-hex id required for the event to be a valid reaction target. */
       id?: string;
     }) => RelayEvent;
@@ -4014,6 +4016,7 @@ function emitMockChannelMessage(
   mentionPubkeys?: string[],
   extraTags?: string[][],
   createdAt?: number,
+  pending?: boolean,
   id?: string,
 ) {
   const eventKind = kind ?? 9;
@@ -4032,6 +4035,7 @@ function emitMockChannelMessage(
       createdAt,
       id,
     );
+    if (pending) event.pending = true;
     recordMockMessage(channelId, event);
     emitMockLiveEvent(channelId, event);
     return event;
@@ -4064,6 +4068,7 @@ function emitMockChannelMessage(
     createdAt,
     id,
   );
+  if (pending) event.pending = true;
   recordMockMessage(channelId, event);
   emitMockLiveEvent(channelId, event);
   return event;
@@ -9416,6 +9421,7 @@ export function maybeInstallE2eTauriMocks() {
     mentionPubkeys,
     extraTags,
     createdAt,
+    pending,
     id,
   }) => {
     const channel = mockChannels.find(
@@ -9434,6 +9440,7 @@ export function maybeInstallE2eTauriMocks() {
       mentionPubkeys,
       extraTags,
       createdAt,
+      pending,
       id,
     );
   };

desktop/tests/e2e/message-feedback-snapshots.spec.ts

@@ -0,0 +1,114 @@
+import { expect, test } from "@playwright/test";
+
+import { waitForAnimations } from "../helpers/animations";
+import { installMockBridge } from "../helpers/bridge";
+
+const SHOTS = "test-results/message-feedback";
+
+async function waitForMockLiveSubscription(
+  page: import("@playwright/test").Page,
+  channelName: string,
+) {
+  await expect
+    .poll(async () => {
+      return page.evaluate(
+        ({ ch }) =>
+          (
+            window as Window & {
+              __BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?: (input: {
+                channelName: string;
+              }) => boolean;
+            }
+          ).__BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?.({ channelName: ch }) ??
+          false,
+        { ch: channelName },
+      );
+    })
+    .toBe(true);
+}
+
+test("pending continuation keeps Sending next to its timestamp", async ({
+  page,
+}) => {
+  await installMockBridge(page);
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+  await waitForMockLiveSubscription(page, "general");
+
+  const sentMessage = `Message before pending state ${Date.now()}`;
+  const pendingMessage = `Pending message status ${Date.now()}`;
+  const createdAt = Math.floor(Date.now() / 1_000);
+  await page.evaluate(
+    ({ firstMessage, secondMessage, timestamp }) => {
+      const emit = (
+        window as Window & {
+          __BUZZ_E2E_EMIT_MOCK_MESSAGE__?: (input: {
+            channelName: string;
+            content: string;
+            createdAt: number;
+            pending?: boolean;
+          }) => unknown;
+        }
+      ).__BUZZ_E2E_EMIT_MOCK_MESSAGE__;
+      emit?.({
+        channelName: "general",
+        content: firstMessage,
+        createdAt: timestamp - 1,
+      });
+      emit?.({
+        channelName: "general",
+        content: secondMessage,
+        createdAt: timestamp,
+        pending: true,
+      });
+    },
+    {
+      firstMessage: sentMessage,
+      secondMessage: pendingMessage,
+      timestamp: createdAt,
+    },
+  );
+
+  const pendingRow = page
+    .getByTestId("message-row")
+    .filter({ hasText: pendingMessage });
+  const status = pendingRow.getByTestId("message-send-status");
+  await expect(status).toHaveText("Sending…");
+  await expect(pendingRow.getByTestId("message-author")).toHaveCount(1);
+
+  const timestamp = status.locator("xpath=../p[1]");
+  const [timestampBox, statusBox] = await Promise.all([
+    timestamp.boundingBox(),
+    status.boundingBox(),
+  ]);
+  expect(timestampBox).not.toBeNull();
+  expect(statusBox).not.toBeNull();
+  if (!timestampBox || !statusBox) {
+    throw new Error("Pending message metadata is missing its inline layout.");
+  }
+  expect(statusBox.x).toBeGreaterThan(timestampBox.x);
+  expect(Math.abs(statusBox.y - timestampBox.y)).toBeLessThanOrEqual(1);
+
+  await waitForAnimations(page);
+  await pendingRow.screenshot({ path: `${SHOTS}/pending-message-inline.png` });
+});
+
+test("profile hover uses the channel hover surface", async ({ page }) => {
+  await installMockBridge(page);
+  await page.goto("/");
+
+  const profile = page.getByTestId("sidebar-profile-card");
+  const channel = page.getByTestId("channel-random");
+  await channel.hover();
+  const channelHoverColor = await channel.evaluate(
+    (element) => getComputedStyle(element).backgroundColor,
+  );
+  await profile.hover();
+  await expect(profile).toHaveCSS("background-color", channelHoverColor);
+
+  await waitForAnimations(page);
+  await page
+    .getByTestId("app-sidebar")
+    .screenshot({ path: `${SHOTS}/profile-hover.png` });
+});