Refine conversation visual affordances (#615)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: thomaspblock

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

@@ -16,6 +16,7 @@ export type TimelineThreadSummaryParticipant = {
 export type TimelineThreadSummary = {
   threadHeadId: string;
   replyCount: number;
+  lastReplyAt: number | null;
   participants: TimelineThreadSummaryParticipant[];
 };
 
@@ -26,6 +27,7 @@ export type MainTimelineEntry = {
 
 type ThreadDescendantStats = {
   descendantCount: number;
+  lastReplyAt: number | null;
   recentParticipantsNewestFirst: TimelineThreadSummaryParticipant[];
 };
 
@@ -80,6 +82,7 @@ function buildDescendantStatsByMessageId(
       message.id,
       {
         descendantCount: 0,
+        lastReplyAt: null,
         recentParticipantsNewestFirst: [],
       },
     ]),
@@ -115,6 +118,10 @@ function buildDescendantStatsByMessageId(
       }
 
       ancestorStats.descendantCount += 1;
+      ancestorStats.lastReplyAt = Math.max(
+        ancestorStats.lastReplyAt ?? 0,
+        message.createdAt,
+      );
 
       if (
         ancestorStats.recentParticipantsNewestFirst.length <
@@ -146,6 +153,7 @@ function buildSummaryForDirectReplies(
   return {
     threadHeadId: messageId,
     replyCount: descendantStats.descendantCount,
+    lastReplyAt: descendantStats.lastReplyAt,
     participants: [...descendantStats.recentParticipantsNewestFirst].reverse(),
   };
 }

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

@@ -10,7 +10,10 @@ import { cn } from "@/shared/lib/cn";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
 import { useChannelNavigation } from "@/shared/context/ChannelNavigationContext";
 import { parseImetaTags } from "@/features/messages/lib/parseImeta";
-import { resolveMentionNames } from "@/shared/lib/resolveMentionNames";
+import {
+  resolveMentionNames,
+  resolveMentionPubkeysByName,
+} from "@/shared/lib/resolveMentionNames";
 import { Markdown } from "@/shared/ui/markdown";
 import { MessageActionBar } from "./MessageActionBar";
 import { MessageTimestamp } from "./MessageTimestamp";
@@ -64,6 +67,10 @@ export const MessageRow = React.memo(
       () => resolveMentionNames(message.tags, profiles),
       [profiles, message.tags],
     );
+    const mentionPubkeysByName = React.useMemo(
+      () => resolveMentionPubkeysByName(message.tags, profiles),
+      [profiles, message.tags],
+    );
 
     const imetaByUrl = React.useMemo(
       () => (message.tags ? parseImetaTags(message.tags) : undefined),
@@ -119,6 +126,7 @@ export const MessageRow = React.memo(
               content={message.body}
               imetaByUrl={imetaByUrl}
               mentionNames={mentionNames}
+              mentionPubkeysByName={mentionPubkeysByName}
               searchQuery={searchQuery}
               tight
             />

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

@@ -5,6 +5,21 @@ import type {
 import type { TimelineMessage } from "@/features/messages/types";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
 
+function formatRelativeTime(unixSeconds: number): string {
+  const now = Date.now() / 1_000;
+  const diff = now - unixSeconds;
+
+  if (diff < 60) return "just now";
+  if (diff < 3_600) return `${Math.floor(diff / 60)}m`;
+  if (diff < 86_400) return `${Math.floor(diff / 3_600)}h`;
+  if (diff < 604_800) return `${Math.floor(diff / 86_400)}d`;
+
+  return new Date(unixSeconds * 1_000).toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}
+
 function ParticipantAvatar({
   participant,
   index,
@@ -71,7 +86,7 @@ export function MessageThreadSummaryRow({
       ) : null}
 
       <button
-        className="inline-flex w-fit max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/70 py-0.5 pl-0.5 pr-2 text-left text-xs font-medium text-foreground/90 transition-colors hover:bg-accent hover:text-accent-foreground"
+        className="group inline-flex w-fit max-w-full items-center gap-1 text-left text-xs font-medium text-muted-foreground"
         data-thread-head-id={message.id}
         data-testid="message-thread-summary"
         onClick={() => onOpenThread(message)}
@@ -89,10 +104,15 @@ export function MessageThreadSummaryRow({
         </div>
         <div className="min-w-0">
           <div className="font-medium">
-            <span>
+            <span className="transition-colors group-hover:text-foreground">
               {summary.replyCount}{" "}
               {summary.replyCount === 1 ? "reply" : "replies"}
             </span>
+            {summary.lastReplyAt ? (
+              <span className="ml-1 text-muted-foreground/70">
+                last {formatRelativeTime(summary.lastReplyAt)}
+              </span>
+            ) : null}
           </div>
         </div>
       </button>

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

@@ -135,7 +135,7 @@ export const MessageTimeline = React.memo(function MessageTimeline({
           ref={scrollContainerRef}
         >
           <div
-            className="flex w-full flex-col gap-2 pb-10 pt-16"
+            className="flex w-full flex-col gap-2 pb-10 pt-12"
             ref={contentRef}
           >
             <div ref={topSentinelRef} aria-hidden className="h-px" />
@@ -152,7 +152,7 @@ export const MessageTimeline = React.memo(function MessageTimeline({
                 data-testid="message-timeline-beginning"
               >
                 <Separator className="flex-1" />
-                <p className="text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground/75">
                   Beginning of conversation
                 </p>
                 <Separator className="flex-1" />