Threading exploration work

res/css/views/messages/_MessageActionBar.scss

@@ -92,6 +92,10 @@ limitations under the License.
  mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
 }
 
+.mx_MessageActionBar_threadButton::after {
+ mask-image: url('$(res)/img/element-icons/message/thread.svg');
+}
+
 .mx_MessageActionBar_editButton::after {
  mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
 }

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -232,6 +232,10 @@ limitations under the License.
  mask-image: url('$(res)/img/element-icons/room/files.svg');
 }
 
+.mx_RoomSummaryCard_icon_threads::before {
+ mask-image: url('$(res)/img/element-icons/message/thread.svg');
+}
+
 .mx_RoomSummaryCard_icon_share::before {
  mask-image: url('$(res)/img/element-icons/room/share.svg');
 }

res/css/views/rooms/_EventTile.scss

@@ -674,3 +674,60 @@ $hover-select-border: 4px;
  margin-right: 0;
  }
 }
+
+
+.mx_ThreadInfo:hover {
+ cursor: pointer;
+}
+
+.mx_ThreadView {
+
+ display: flex;
+ flex-direction: column;
+
+ .mx_ScrollPanel {
+ margin-top: 20px;
+ .mx_RoomView_MessageList {
+ padding: 0;
+ }
+ }
+
+ .mx_EventTile_senderDetails {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin-bottom: 6px;
+ a {
+ flex: 1;
+ min-width: none;
+ max-width: 100%;
+ display: flex;
+ align-items: center;
+ .mx_SenderProfile {
+ flex: 1;
+ }
+ }
+ }
+
+ .mx_ThreadView_List {
+ flex: 1;
+ overflow: scroll;
+ }
+
+ .mx_EventTile_roomName {
+ display: none;
+ }
+
+ .mx_EventTile_line {
+ padding-left: 0 !important;
+ order: 10 !important;
+ }
+ .mx_EventTile {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: 0;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
+ }
+}

res/css/views/rooms/_MessageComposer.scss

@@ -340,3 +340,17 @@ limitations under the License.
  height: 50px;
  }
 }
+
+/**
+ * Unstable compact mode
+ */
+
+.mx_MessageComposer.mx_MessageComposer--compact {
+ margin-right: 0;
+ .mx_MessageComposer_wrapper {
+ padding: 0;
+ }
+ .mx_MessageComposer_button:last-child {
+ margin-right: 0;
+ }
+}

src/MatrixClientPeg.ts

@@ -213,6 +213,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
  opts.pendingEventOrdering = PendingEventOrdering.Detached;
  opts.lazyLoadMembers = true;
  opts.clientWellKnownPollPeriod = 2 * 60 * 60; // 2 hours
+ opts.experimentalThreadSupport = SettingsStore.getValue("experimentalThreadSupport");
 
  // Connect the matrix client to the dispatcher and setting handlers
  MatrixActionCreators.start(this.matrixClient);

src/components/structures/MessagePanel.tsx

@@ -173,6 +173,8 @@ interface IProps {
  onUnfillRequest?(backwards: boolean, scrollToken: string): void;
 
  getRelationsForEvent?(eventId: string, relationType: string, eventType: string): Relations;
+
+ hideThreadedMessages?: boolean;
 }
 
 interface IState {
@@ -265,6 +267,9 @@ export default class MessagePanel extends React.Component<IProps, IState> {
  componentDidMount() {
  this.calculateRoomMembersCount();
  this.props.room?.on("RoomState.members", this.calculateRoomMembersCount);
+ if (SettingsStore.getValue("experimentalThreadSupport")) {
+ this.props.room?.getThreads().forEach(thread => thread.fetchReplyChain());
+ }
  this.isMounted = true;
  }
 
@@ -443,6 +448,11 @@ export default class MessagePanel extends React.Component<IProps, IState> {
  // Always show highlighted event
  if (this.props.highlightedEventId === mxEv.getId()) return true;
 
+ const threadingEnabled = SettingsStore.getValue("experimentalThreadSupport");
+ if (threadingEnabled && mxEv.replyEventId && this.props.hideThreadedMessages === true) {
+ return false;
+ }
+
  return !shouldHideEvent(mxEv, this.context);
  }
 

src/components/structures/RightPanel.tsx

@@ -45,17 +45,21 @@ import GroupRoomInfo from "../views/groups/GroupRoomInfo";
 import UserInfo from "../views/right_panel/UserInfo";
 import ThirdPartyMemberInfo from "../views/rooms/ThirdPartyMemberInfo";
 import FilePanel from "./FilePanel";
+import ThreadView from "./ThreadView";
+import ThreadPanel from "./ThreadPanel";
 import NotificationPanel from "./NotificationPanel";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
 import { throttle } from 'lodash';
 import SpaceStore from "../../stores/SpaceStore";
+import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 
 interface IProps {
  room?: Room; // if showing panels for a given room, this is set
  groupId?: string; // if showing panels for a given group, this is set
  user?: User; // used if we know the user ahead of opening the panel
  resizeNotifier: ResizeNotifier;
+ permalinkCreator?: RoomPermalinkCreator;
 }
 
 interface IState {
@@ -309,6 +313,22 @@ export default class RightPanel extends React.Component<IProps, IState> {
  panel = <FilePanel roomId={roomId} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} />;
  break;
 
+ case RightPanelPhases.ThreadView:
+ panel = <ThreadView
+ roomId={roomId}
+ resizeNotifier={this.props.resizeNotifier}
+ onClose={this.onClose}
+ mxEvent={this.state.event}
+ permalinkCreator={this.props.permalinkCreator} />;
+ break;
+
+ case RightPanelPhases.ThreadPanel:
+ panel = <ThreadPanel
+ roomId={roomId}
+ resizeNotifier={this.props.resizeNotifier}
+ onClose={this.onClose} />;
+ break;
+
  case RightPanelPhases.RoomSummary:
  panel = <RoomSummaryCard room={this.props.room} onClose={this.onClose} />;
  break;

src/components/structures/RoomView.tsx

@@ -2052,7 +2052,10 @@ export default class RoomView extends React.Component<IProps, IState> {
 
  const showRightPanel = this.state.room && this.state.showRightPanel;
  const rightPanel = showRightPanel
- ? <RightPanel room={this.state.room} resizeNotifier={this.props.resizeNotifier} />
+ ? <RightPanel
+ room={this.state.room}
+ resizeNotifier={this.props.resizeNotifier}
+ permalinkCreator={this.getPermalinkCreatorForRoom(this.state.room)} />
  : null;
 
  const timelineClasses = classNames("mx_RoomView_timeline", {

src/components/structures/ThreadPanel.tsx

@@ -0,0 +1,99 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { MatrixEvent, Room } from 'matrix-js-sdk/src';
+
+import BaseCard from "../views/right_panel/BaseCard";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../MatrixClientPeg';
+
+import ResizeNotifier from '../../utils/ResizeNotifier';
+import EventTile from '../views/rooms/EventTile';
+import { Thread } from '../../../../matrix-js-sdk/src/models/thread';
+
+interface IProps {
+ roomId: string;
+ onClose: () => void;
+ resizeNotifier: ResizeNotifier;
+}
+
+interface IState {
+ threads?: Thread[];
+}
+
+/*
+ * Component which shows the filtered file using a TimelinePanel
+ */
+@replaceableComponent("structures.ThreadView")
+class ThreadView extends React.Component<IProps, IState> {
+ private room: Room;
+
+ constructor(props: IProps) {
+ super(props);
+ this.room = MatrixClientPeg.get().getRoom(this.props.roomId);
+ }
+
+ public componentDidMount(): void {
+ this.room.on("Thread.update", this.onThreadEventReceived);
+ this.room.on("Thread.ready", this.onThreadEventReceived);
+ }
+
+ public componentWillUnmount(): void {
+ this.room.removeListener("Thread.update", this.onThreadEventReceived);
+ this.room.removeListener("Thread.ready", this.onThreadEventReceived);
+ }
+
+ public onThreadEventReceived = () => this.updateThreads();
+
+ public updateThreads = (callback?: () => void): void => {
+ this.setState({
+ threads: this.room.getThreads(),
+ }, callback);
+ };
+
+ public renderEventTile(event: MatrixEvent): JSX.Element {
+ return <EventTile
+ key={event.getId()}
+ mxEvent={event}
+ enableFlair={false}
+ showReadReceipts={false}
+ as="div"
+ />;
+ }
+
+ public render() {
+ return (
+ <BaseCard
+ className="mx_ThreadPanel"
+ onClose={this.props.onClose}
+ previousPhase={RightPanelPhases.RoomSummary}
+ >
+ {
+ this.state?.threads.map((thread: Thread) => {
+ if (thread.ready) {
+ return this.renderEventTile(thread.rootEvent);
+ }
+ })
+ }
+ </BaseCard>
+ );
+ }
+}
+
+export default ThreadView;