From f9b541dcb5bc8594c23032dbe0e5d6df8643cda0 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Mon, 13 Apr 2026 18:03:55 -0400
Subject: [PATCH] style(desktop): simplify thread panel chrome

Reduce thread panel visual noise so the nested reply column feels lighter and more focused while preserving the existing thread behavior.

Made-with: Cursor
---
 .../features/messages/ui/MessageComposer.tsx  | 10 ++++++-
 .../src/features/messages/ui/MessageRow.tsx   |  3 --
 .../messages/ui/MessageThreadPanel.tsx        | 30 ++++++++-----------
 .../messages/ui/MessageThreadSummaryRow.tsx   |  7 ++---
 4 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index c5c076d2a4..5ea22deea4 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -6,6 +6,7 @@ import { useDrafts } from "@/features/messages/lib/useDrafts";
 import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
 import { useMentions } from "@/features/messages/lib/useMentions";
 import { useTypingBroadcast } from "@/features/messages/useTypingBroadcast";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Textarea } from "@/shared/ui/textarea";
 import { ChannelAutocomplete } from "./ChannelAutocomplete";
@@ -40,6 +41,7 @@ type MessageComposerProps = {
     body: string;
     id: string;
   } | null;
+  showTopBorder?: boolean;
   typingParentEventId?: string | null;
   typingRootEventId?: string | null;
 };
@@ -58,6 +60,7 @@ export function MessageComposer({
   onSend,
   placeholder,
   replyTarget = null,
+  showTopBorder = true,
   typingParentEventId = null,
   typingRootEventId = null,
 }: MessageComposerProps) {
@@ -503,7 +506,12 @@ export function MessageComposer({
   }, [media.handlePaperclip]);
 
   return (
-    <footer className="border-t border-border/80 bg-background p-4">
+    <footer
+      className={cn(
+        "bg-background p-4",
+        showTopBorder ? "border-t border-border/80" : "",
+      )}
+    >
       <div className="mx-auto flex w-full max-w-4xl flex-col gap-3">
         <form
           className="relative rounded-2xl border border-input bg-card px-3 py-4 shadow-sm sm:px-4"
diff --git a/desktop/src/features/messages/ui/MessageRow.tsx b/desktop/src/features/messages/ui/MessageRow.tsx
index 8fff635da5..917c9cdffd 100644
--- a/desktop/src/features/messages/ui/MessageRow.tsx
+++ b/desktop/src/features/messages/ui/MessageRow.tsx
@@ -163,9 +163,6 @@ export const MessageRow = React.memo(
           className={cn(
             "group/message flex items-start gap-2.5 rounded-2xl px-2 py-1 transition-colors",
             highlighted ? "bg-primary/10 ring-1 ring-primary/30" : "",
-            activeReplyTargetId === message.id
-              ? "bg-muted/60 ring-1 ring-border"
-              : "",
           )}
           data-message-id={message.id}
           data-testid="message-row"
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index f3dca3c3eb..6e46ad5609 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeft, MessageSquareText, X } from "lucide-react";
+import { ArrowLeft, X } from "lucide-react";
 
 import type { MainTimelineEntry } from "@/features/messages/lib/threadPanel";
 import type { TimelineMessage } from "@/features/messages/types";
@@ -94,7 +94,7 @@ export function MessageThreadPanel({
       className="hidden h-full w-[380px] shrink-0 flex-col border-l border-border/80 bg-background lg:flex"
       data-testid="message-thread-panel"
     >
-      <div className="flex items-center gap-3 border-b border-border/80 px-4 py-3">
+      <div className="flex items-center gap-3 px-4 py-3">
         {canGoBack ? (
           <Button
             aria-label="Back"
@@ -108,13 +108,7 @@ export function MessageThreadPanel({
           </Button>
         ) : null}
         <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <MessageSquareText className="h-4 w-4 text-muted-foreground" />
-            <h2 className="text-sm font-semibold tracking-tight">Thread</h2>
-          </div>
-          <p className="mt-1 text-xs text-muted-foreground">
-            {totalReplyCount} {totalReplyCount === 1 ? "reply" : "replies"}
-          </p>
+          <h2 className="text-sm font-semibold tracking-tight">Thread</h2>
         </div>
         <Button
           aria-label="Close thread"
@@ -128,15 +122,8 @@ export function MessageThreadPanel({
         </Button>
       </div>
 
-      <TypingIndicatorRow
-        channel={channel}
-        currentPubkey={currentPubkey}
-        profiles={profiles}
-        typingPubkeys={threadTypingPubkeys}
-      />
-
       <div className="min-h-0 flex-1 overflow-y-auto" data-testid="message-thread-body">
-        <div className="border-b border-border/60 px-3 py-3" data-testid="message-thread-head">
+        <div className="px-3 py-3" data-testid="message-thread-head">
           <MessageRow
             activeReplyTargetId={replyTargetId}
             message={threadHead}
@@ -190,7 +177,13 @@ export function MessageThreadPanel({
         </div>
       </div>
 
-      <div className="border-t border-border/80 p-4">
+      <div className="p-4">
+        <TypingIndicatorRow
+          channel={channel}
+          currentPubkey={currentPubkey}
+          profiles={profiles}
+          typingPubkeys={threadTypingPubkeys}
+        />
         <MessageComposer
           channelId={channelId}
           channelName={channelName}
@@ -200,6 +193,7 @@ export function MessageThreadPanel({
           onSend={onSend}
           placeholder={`Reply in thread to ${threadHead.author}`}
           replyTarget={composerReplyTarget}
+          showTopBorder={false}
           typingParentEventId={threadHead.id}
           typingRootEventId={threadHead.rootId}
         />
diff --git a/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx b/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
index 8f6cec4f81..60fb41121a 100644
--- a/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
@@ -1,5 +1,3 @@
-import { MessageSquareText } from "lucide-react";
-
 import type {
   TimelineThreadSummary,
   TimelineThreadSummaryParticipant,
@@ -40,7 +38,7 @@ export function MessageThreadSummaryRow({
 }) {
   return (
     <button
-      className="ml-8 flex w-fit max-w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+      className="ml-8 flex w-fit max-w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
       data-thread-head-id={message.id}
       data-testid="message-thread-summary"
       onClick={() => onOpenThread(message)}
@@ -56,8 +54,7 @@ export function MessageThreadSummaryRow({
         ))}
       </div>
       <div className="min-w-0">
-        <div className="flex items-center gap-1.5 font-medium">
-          <MessageSquareText className="h-3.5 w-3.5" />
+        <div className="font-medium">
           <span>
             {summary.replyCount}{" "}
             {summary.replyCount === 1 ? "reply" : "replies"}