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/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}