feat: Threads UI drawer by smokku · Pull Request #2787 · cinnyapp/cinny

smokku · 2026-03-16T07:21:36Z

This PR introduces dedicated side panel UI for conversation threads.

This is a direct port of SableClient/Sable#123
It was fixed/updated/modified for Cinny integration.

One significant difference to original is joining of MembersDrawer and ThreadDrawer in the same place instead of two separate drawers side-by-side. This change is isolated in separate commit and can be easily reverted.

Type of change

New feature (non-breaking change which adds functionality)

cp: SableClient/Sable#123

Copilot

Pull request overview

Introduces a dedicated Threads side panel (browser + thread view) integrated into the room UI, enabling users to browse, open, and reply within Matrix threads while keeping the main timeline and notifications thread-aware.

Changes:

Enable thread support in the Matrix client and update notification/read-receipt logic to ignore thread reply relation events.
Add new Threads UI: ThreadBrowser for listing/searching threads and ThreadDrawer for viewing a thread and replying inside it.
Integrate thread state into room header/timeline/input (open thread per-room, thread chips in timeline, thread-aware input drafts).

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/client/initMatrix.ts	Enables SDK thread support on client start.
src/app/utils/room.ts	Excludes thread-relation events from notification-event detection.
src/app/utils/notifications.ts	Avoids marking thread replies as the latest “read” event.
src/app/utils/matrix.ts	Adds shared `toggleReaction` helper (now used by timeline/thread UI).
src/app/state/room/roomToThreadBrowser.ts	Adds per-room atom family for “thread browser open” state.
src/app/state/room/roomToOpenThread.ts	Adds per-room atom family for currently open thread root event id.
src/app/features/room/message/Message.tsx	Adds `hideThreadButton` support and minor layout tweak for message content container.
src/app/features/room/ThreadDrawer.tsx	New: thread view drawer with root message, replies list, reply input, and read receipt behavior.
src/app/features/room/ThreadDrawer.css.ts	New: styles for thread drawer and thread browser items.
src/app/features/room/ThreadBrowser.tsx	New: thread list/search UI and thread preview cards.
src/app/features/room/RoomViewHeader.tsx	Adds Threads button + unread badge; initializes/fetches threads and updates unread thread counts.
src/app/features/room/RoomViewFollowing.tsx	Supports showing readers for a specific thread event + filtering by participants.
src/app/features/room/RoomTimeline.tsx	Adds thread reply chips, hides thread reply relation events from main timeline, and updates reply/thread interactions.
src/app/features/room/RoomInput.tsx	Adds thread-aware draft keying and thread reply relation construction for sends/uploads.
src/app/features/room/Room.tsx	Wires thread browser/drawer rendering (desktop side panel vs mobile overlay).
src/app/components/editor/Editor.tsx	Makes Slate initial value stable via state initializer.

src/app/features/room/ThreadDrawer.tsx

src/app/utils/matrix.ts

src/app/features/room/RoomTimeline.tsx

src/app/features/room/RoomInput.tsx

Copilot

Pull request overview

Adds a dedicated Threads side panel UI (thread browser + per-thread drawer) to the room view, wiring it into timeline interactions and message composition so threads behave as first-class navigation targets in Cinny.

Changes:

Enable Matrix thread support and suppress thread-reply events from main notifications/read markers.
Introduce new thread UI components (ThreadBrowser, ThreadDrawer) and per-room Jotai state for “threads panel open” / “open thread id”.
Update timeline, message, and composer flows to open threads, show a thread reply chip, and send thread replies (including uploads) correctly.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/client/initMatrix.ts	Enables `threadSupport` on client start.
src/app/utils/room.ts	Excludes thread-relation events from notification eligibility.
src/app/utils/notifications.ts	Skips thread-relation events when choosing the latest read marker.
src/app/utils/matrix.ts	Extracts reaction toggling into a reusable helper (supports thread timeline sets).
src/app/state/room/roomToThreadBrowser.ts	Adds per-room atom family for thread browser open state.
src/app/state/room/roomToOpenThread.ts	Adds per-room atom family for currently open thread root event id.
src/app/features/room/message/Message.tsx	Adds `hideThreadButton` prop and adjusts message content layout width.
src/app/features/room/ThreadDrawer.tsx	New thread drawer UI for viewing a thread and replying inside it.
src/app/features/room/ThreadDrawer.css.ts	Styles for the drawer, overlay mode, and thread browser items.
src/app/features/room/ThreadBrowser.tsx	New thread list/search UI and thread preview items.
src/app/features/room/RoomViewHeader.tsx	Adds Threads button, unread thread badge, and initializes/fetches threads.
src/app/features/room/RoomViewFollowing.tsx	Supports “following” indicator for a specific thread event + participant filtering.
src/app/features/room/RoomTimeline.tsx	Hides thread replies from main timeline, adds thread chip + open-thread behavior.
src/app/features/room/RoomInput.tsx	Adds thread-aware drafting/sending and constructs thread reply relations.
src/app/features/room/Room.tsx	Integrates thread browser/drawer into the overall room layout (desktop + overlay mobile).
src/app/components/editor/Editor.tsx	Makes Slate initial value stable via lazy `useState` initialization.

src/app/features/room/ThreadDrawer.tsx

src/app/features/room/RoomViewHeader.tsx

src/app/features/room/RoomTimeline.tsx

src/app/features/room/RoomInput.tsx

kfiven · 2026-03-16T08:04:50Z

Duplicate of #2492 ?

Copilot

Pull request overview

Adds a dedicated Threads side-panel UI to the room view, integrating Matrix threads (browse threads, open a thread, and reply within a thread) into Cinny’s existing drawers and timeline behavior.

Changes:

Enable Matrix client thread support and update notification/read-receipt logic to ignore thread reply relation events in the main timeline flow.
Add new thread browser + thread drawer UI, plus per-room Jotai state for “threads panel open” and “currently open thread”.
Update the room timeline, message actions, and composer logic to start/open threads, render a thread reply chip, and send messages with thread/reply relations.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/client/initMatrix.ts	Enables `threadSupport` when starting the Matrix client.
src/app/utils/room.ts	Excludes thread-relation events from notification-event detection.
src/app/utils/notifications.ts	Avoids using thread-relation events as the “latest valid event” for room read receipts.
src/app/utils/matrix.ts	Introduces reusable `toggleReaction` helper (supports thread timeline sets).
src/app/state/room/roomToThreadBrowser.ts	Adds per-room atom family for thread browser open state.
src/app/state/room/roomToOpenThread.ts	Adds per-room atom family for currently open thread root ID.
src/app/features/room/message/Message.tsx	Adds `hideThreadButton` and adjusts message layout width.
src/app/features/room/ThreadDrawer.tsx	New side panel to view a thread root + replies and compose within the thread.
src/app/features/room/ThreadDrawer.css.ts	Styles for thread drawer/browser UI.
src/app/features/room/ThreadBrowser.tsx	New side panel to list/search threads and open a thread.
src/app/features/room/RoomViewHeader.tsx	Adds Threads button with unread badge + initializes/fetches thread data and counts.
src/app/features/room/RoomViewFollowing.tsx	Supports “following” indicator scoped to a thread event + participant filtering.
src/app/features/room/RoomTimeline.tsx	Hides thread replies from main timeline, renders thread reply chip, opens thread drawer, and refreshes on thread updates.
src/app/features/room/RoomInput.tsx	Adds thread-root-aware draft keying and sends messages/uploads in thread context with correct relations.
src/app/features/room/Room.tsx	Hosts thread drawer/browser alongside members drawer; opens thread drawer when navigating to a thread reply event.
src/app/components/editor/Editor.tsx	Stabilizes Slate `initialValue` via component state to avoid re-init churn.

src/app/utils/notifications.ts

src/app/utils/room.ts

src/app/features/room/RoomTimeline.tsx

src/app/features/room/ThreadDrawer.tsx

src/app/features/room/RoomInput.tsx

src/app/features/room/ThreadDrawer.tsx

src/app/features/room/ThreadBrowser.tsx

Copilot

Pull request overview

Adds a dedicated threads side panel UI (thread browser + thread drawer) to the room view, integrating Matrix thread support into timeline rendering, notifications/read receipts, and the composer.

Changes:

Enable Matrix thread support at client startup and adjust notification/read logic to ignore thread-relation events in main-room unread calculations.
Introduce ThreadBrowser and ThreadDrawer side panels, with per-room Jotai state to track browser open/active thread.
Update timeline/message rendering to surface thread reply counts and open threads, while filtering thread replies out of the main timeline.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/client/initMatrix.ts	Enables `threadSupport` when starting the Matrix client.
src/app/utils/room.ts	Excludes thread-relation events from notification-event detection.
src/app/utils/notifications.ts	Avoids using thread-relation events as the “latest valid event” for room read markers.
src/app/utils/matrix.ts	Adds `toggleReaction` helper with optional thread timeline support.
src/app/state/room/roomToThreadBrowser.ts	New atom family: thread browser open state per room.
src/app/state/room/roomToOpenThread.ts	New atom family: open thread root ID per room.
src/app/features/room/message/Message.tsx	Adds `hideThreadButton` prop and tweaks content container sizing.
src/app/features/room/ThreadDrawer.tsx	New thread drawer UI: renders root + replies, supports replying/reactions, sends thread read receipts.
src/app/features/room/ThreadDrawer.css.ts	Styles for drawer, overlay mode, and thread browser items.
src/app/features/room/ThreadBrowser.tsx	New thread browser UI with search + thread previews.
src/app/features/room/RoomViewHeader.tsx	Adds Threads button + unread thread badge; initializes/fetches threads and aggregates unread thread counts.
src/app/features/room/RoomViewFollowing.tsx	Supports showing “following/reads” for a specific thread event + filtered participants.
src/app/features/room/RoomTimeline.tsx	Adds thread reply chip, hides thread replies from main timeline, refreshes on thread updates, opens thread drawer on start-thread action.
src/app/features/room/RoomInput.tsx	Adds thread-aware draft keying + reply/thread relation handling for sends/uploads.
src/app/features/room/Room.tsx	Wires thread browser/drawer into layout (desktop side panel + mobile overlay).
src/app/components/editor/Editor.tsx	Makes Slate initial value stable via `useState` initializer.

src/app/features/room/RoomInput.tsx

+const getReplyContent = (replyDraft: IReplyDraft): IContent['m.relates_to'] => {
+  const relation: Record<string, unknown> = {};
+
+  if (replyDraft.relation?.rel_type === RelationType.Thread) {
+    relation.event_id = replyDraft.relation.event_id;
+    relation.rel_type = RelationType.Thread;
+
+    if (replyDraft.eventId !== replyDraft.relation.event_id) {
+      relation['m.in_reply_to'] = {
+        event_id: replyDraft.eventId,
+      };
+      relation.is_falling_back = false;
+    } else {
+      relation.is_falling_back = true;
+    }
+  } else {
+    relation['m.in_reply_to'] = {
+      event_id: replyDraft.eventId,
+    };
+  }


src/app/features/room/RoomInput.tsx

+      const relateTo =
+        contents.length > 0 && plainText.length === 0 && replyDraft
+          ? getReplyContent(replyDraft)
+          : undefined;
+
+      contents
+        .map((content) => (relateTo ? { ...content, 'm.relates_to': relateTo } : content))
+        .forEach((content) => mx.sendMessage(roomId, threadRootId ?? null, content as any));


smokku added 6 commits March 16, 2026 07:58

Merge pull request cinnyapp#123 from Just-Insane/feat/threads

c05a168

cp: SableClient/Sable#123

Join MembersDrawer and ThreadsDrawer into one sidebar

24464be

Fetch room threads on open to populate thread browser

ac11db5

Improve ThreadBrowser rendering

620cd87

Fix the UI code to properly use SDK features for thread handling

e25c56a

Fix phantom unread notifications for thread events

ee9b584

Copilot AI review requested due to automatic review settings March 16, 2026 07:21

Copilot started reviewing on behalf of smokku March 16, 2026 07:22 View session

smokku changed the title ~~Threads UI drawer~~ feat: Threads UI drawer Mar 16, 2026

Copilot AI reviewed Mar 16, 2026

View reviewed changes

smokku requested a review from Copilot March 16, 2026 07:41

Copilot started reviewing on behalf of smokku March 16, 2026 07:41 View session

Copilot AI reviewed Mar 16, 2026

View reviewed changes

Apply Copilot's code-review suggestions

884a13f

smokku force-pushed the threads-ui branch from 763bbc7 to 884a13f Compare March 16, 2026 07:59

smokku requested a review from Copilot March 16, 2026 08:02

Copilot started reviewing on behalf of smokku March 16, 2026 08:03 View session

Copilot AI reviewed Mar 16, 2026

View reviewed changes

Apply more Copilot's code-review suggestions

c2f6ade

smokku requested a review from Copilot March 16, 2026 08:21

Copilot started reviewing on behalf of smokku March 16, 2026 08:22 View session

Copilot AI reviewed Mar 16, 2026

View reviewed changes

Uh oh!

Conversation

smokku commented Mar 16, 2026

Type of change

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kfiven commented Mar 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants