From 276e0e09b309d1250666f38cd57b9bf5a1d23823 Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Thu, 12 Mar 2026 20:23:38 -0700
Subject: [PATCH] Show dismiss 'X' on the Jump to Unread

---
 frontend/src/components/MessageList.tsx | 36 +++++++++++++++++--------
 frontend/src/test/messageList.test.tsx  | 23 ++++++++++++++++
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/MessageList.tsx b/frontend/src/components/MessageList.tsx
index 3290cd5..3b5ddca 100644
--- a/frontend/src/components/MessageList.tsx
+++ b/frontend/src/components/MessageList.tsx
@@ -880,17 +880,31 @@ export function MessageList({
       {/* Scroll to bottom button */}
       {showJumpToUnread && (
         <div className="pointer-events-none absolute bottom-4 left-1/2 -translate-x-1/2">
-          <button
-            type="button"
-            onClick={() => {
-              unreadMarkerRef.current?.scrollIntoView?.({ block: 'center' });
-              setJumpToUnreadDismissed(true);
-              setShowJumpToUnread(false);
-            }}
-            className="pointer-events-auto h-9 rounded-full bg-card hover:bg-accent border border-border px-3 text-sm font-medium shadow-lg transition-all hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            Jump to unread
-          </button>
+          <div className="pointer-events-auto flex h-9 items-center overflow-hidden rounded-full border border-border bg-card shadow-lg transition-all hover:scale-105">
+            <button
+              type="button"
+              onClick={() => {
+                unreadMarkerRef.current?.scrollIntoView?.({ block: 'center' });
+                setJumpToUnreadDismissed(true);
+                setShowJumpToUnread(false);
+              }}
+              className="h-full px-3 text-sm font-medium hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              Jump to unread
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setJumpToUnreadDismissed(true);
+                setShowJumpToUnread(false);
+              }}
+              className="flex h-full w-9 items-center justify-center border-l border-border text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label="Dismiss jump to unread"
+              title="Dismiss jump to unread"
+            >
+              ×
+            </button>
+          </div>
         </div>
       )}
       {showScrollToBottom && (
diff --git a/frontend/src/test/messageList.test.tsx b/frontend/src/test/messageList.test.tsx
index d887747..669336b 100644
--- a/frontend/src/test/messageList.test.tsx
+++ b/frontend/src/test/messageList.test.tsx
@@ -162,6 +162,29 @@ describe('MessageList channel sender rendering', () => {
     expect(scrollIntoViewMock).toHaveBeenCalled();
   });
 
+  it('lets the user dismiss the jump-to-unread button without scrolling or hiding the marker', async () => {
+    const user = userEvent.setup();
+    const messages = [
+      createMessage({ id: 1, received_at: 1700000001, text: 'Alice: older' }),
+      createMessage({ id: 2, received_at: 1700000010, text: 'Alice: newer' }),
+    ];
+
+    render(
+      <MessageList
+        messages={messages}
+        contacts={[]}
+        loading={false}
+        unreadMarkerLastReadAt={1700000005}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Dismiss jump to unread' }));
+
+    expect(screen.queryByRole('button', { name: 'Jump to unread' })).not.toBeInTheDocument();
+    expect(screen.getByText('Unread messages')).toBeInTheDocument();
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+  });
+
   it('hides the jump-to-unread button when the unread marker is already visible', () => {
     Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
       configurable: true,