Merge pull request #347 from SableClient/fix/thread-indicator

fix: hide ThreadIndicator badge inside ThreadDrawer compose box

Author: 7w1

.changeset/fix-thread-indicator-badge.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Hide the redundant "Thread" indicator badge in the compose box when inside the Thread Drawer.

src/app/components/message/ThreadIndicator.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * Tests for the ThreadIndicator visibility condition in the compose strip.
+ *
+ * The indicator renders when a user is replying to a thread message from the
+ * main timeline (no threadRootId). It must NOT appear when composing inside
+ * the ThreadDrawer (threadRootId is set), because the drawer already makes the
+ * thread context obvious.
+ *
+ * Mirrors the exact render guard in RoomInput.tsx:
+ *   {replyDraft.relation?.rel_type === RelationType.Thread && !threadRootId && (
+ *     <ThreadIndicator />
+ *   )}
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { RelationType } from '$types/matrix-sdk';
+import { ThreadIndicator } from './Reply';
+
+function Subject({ relType, threadRootId }: { relType?: string; threadRootId?: string }) {
+  return <>{relType === RelationType.Thread && !threadRootId && <ThreadIndicator />}</>;
+}
+
+describe('ThreadIndicator visibility in compose strip', () => {
+  it('renders in the main timeline compose box when a thread relation is active', () => {
+    render(<Subject relType={RelationType.Thread} />);
+    expect(screen.getByText('Thread')).toBeInTheDocument();
+  });
+
+  it('is hidden inside the ThreadDrawer when threadRootId is set', () => {
+    render(<Subject relType={RelationType.Thread} threadRootId="$root:example.com" />);
+    expect(screen.queryByText('Thread')).not.toBeInTheDocument();
+  });
+
+  it('is hidden when the draft has no relation', () => {
+    render(<Subject relType={undefined} />);
+    expect(screen.queryByText('Thread')).not.toBeInTheDocument();
+  });
+
+  it('is hidden for a non-thread relation type', () => {
+    render(<Subject relType="m.in_reply_to" />);
+    expect(screen.queryByText('Thread')).not.toBeInTheDocument();
+  });
+});

src/app/features/room/RoomInput.tsx

@@ -1154,7 +1154,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                         grow="Yes"
                         style={{ minWidth: 0 }}
                       >
-                        {replyDraft.relation?.rel_type === RelationType.Thread && (
+                        {replyDraft.relation?.rel_type === RelationType.Thread && !threadRootId && (
                           <ThreadIndicator />
                         )}
                         <ReplyLayout