Threading exploration work

.stylelintrc.js

@@ -17,6 +17,7 @@ module.exports = {
         "selector-list-comma-newline-after": null,
         "at-rule-no-unknown": null,
         "no-descending-specificity": null,
+        "no-empty-first-line": true,
         "scss/at-rule-no-unknown": [true, {
             // https://github.com/vector-im/element-web/issues/10544
             "ignoreAtRules": ["define-mixin"],

res/css/views/rooms/_EventTile.scss

@@ -643,6 +643,7 @@ $hover-select-border: 4px;
 
     // Remove some of the default tile padding so that the error is centered
     margin-right: 0;
+
     .mx_EventTile_line {
         padding-left: 0;
         margin-right: 0;
@@ -675,18 +676,17 @@ $hover-select-border: 4px;
     }
 }
 
-
 .mx_ThreadInfo:hover {
     cursor: pointer;
 }
 
 .mx_ThreadView {
-
     display: flex;
     flex-direction: column;
 
     .mx_ScrollPanel {
         margin-top: 20px;
+
         .mx_RoomView_MessageList {
             padding: 0;
         }
@@ -703,6 +703,7 @@ $hover-select-border: 4px;
             max-width: 100%;
             display: flex;
             align-items: center;
+
             .mx_SenderProfile {
                 flex: 1;
             }
@@ -722,6 +723,7 @@ $hover-select-border: 4px;
         padding-left: 0 !important;
         order: 10 !important;
     }
+
     .mx_EventTile {
         width: 100%;
         display: flex;

res/css/views/rooms/_MessageComposer.scss

@@ -347,9 +347,11 @@ limitations under the License.
 
 .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,7 +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");
+        opts.experimentalThreadSupport = SettingsStore.getValue("feature_thread");
 
         // Connect the matrix client to the dispatcher and setting handlers
         MatrixActionCreators.start(this.matrixClient);

src/components/structures/MessagePanel.tsx

@@ -267,7 +267,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     componentDidMount() {
         this.calculateRoomMembersCount();
         this.props.room?.on("RoomState.members", this.calculateRoomMembersCount);
-        if (SettingsStore.getValue("experimentalThreadSupport")) {
+        if (SettingsStore.getValue("feature_thread")) {
             this.props.room?.getThreads().forEach(thread => thread.fetchReplyChain());
         }
         this.isMounted = true;
@@ -448,8 +448,9 @@ 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) {
+        if (mxEv.replyEventId
+                && this.props.hideThreadedMessages
+                && SettingsStore.getValue("feature_thread")) {
             return false;
         }
 

src/components/structures/ThreadPanel.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2021 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -37,11 +36,8 @@ interface IState {
     threads?: Thread[];
 }
 
-/*
- * Component which shows the filtered file using a TimelinePanel
- */
 @replaceableComponent("structures.ThreadView")
-class ThreadView extends React.Component<IProps, IState> {
+export default class ThreadPanel extends React.Component<IProps, IState> {
     private room: Room;
 
     constructor(props: IProps) {
@@ -59,15 +55,15 @@ class ThreadView extends React.Component<IProps, IState> {
         this.room.removeListener("Thread.ready", this.onThreadEventReceived);
     }
 
-    public onThreadEventReceived = () => this.updateThreads();
+    private onThreadEventReceived = () => this.updateThreads();
 
-    public updateThreads = (callback?: () => void): void => {
+    private updateThreads = (callback?: () => void): void => {
         this.setState({
             threads: this.room.getThreads(),
         }, callback);
     };
 
-    public renderEventTile(event: MatrixEvent): JSX.Element {
+    private renderEventTile(event: MatrixEvent): JSX.Element {
         return <EventTile
             key={event.getId()}
             mxEvent={event}
@@ -77,7 +73,7 @@ class ThreadView extends React.Component<IProps, IState> {
         />;
     }
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseCard
                 className="mx_ThreadPanel"
@@ -95,5 +91,3 @@ class ThreadView extends React.Component<IProps, IState> {
         );
     }
 }
-
-export default ThreadView;

src/components/structures/ThreadView.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2021 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,7 +21,6 @@ import { Thread } from 'matrix-js-sdk/src/models/thread';
 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, { TileShape } from '../views/rooms/EventTile';
@@ -48,11 +46,8 @@ interface IState {
     thread?: Thread;
 }
 
-/*
- * Component which shows the filtered file using a TimelinePanel
- */
 @replaceableComponent("structures.ThreadView")
-class ThreadView extends React.Component<IProps, IState> {
+export default class ThreadView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
 
     constructor(props: IProps) {
@@ -93,7 +88,7 @@ class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    setupThread = (mxEv: MatrixEvent) => {
+    private setupThread = (mxEv: MatrixEvent) => {
         const thread = mxEv.getThread();
         if (thread) {
             thread.on("Thread.update", this.updateThread);
@@ -102,14 +97,14 @@ class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    teardownThread = () => {
+    private teardownThread = () => {
         if (this.state.thread) {
             this.state.thread.removeListener("Thread.update", this.updateThread);
             this.state.thread.removeListener("Thread.ready", this.updateThread);
         }
     };
 
-    updateThread = (thread?: Thread) => {
+    private updateThread = (thread?: Thread) => {
         if (thread) {
             this.setState({ thread });
         } else {
@@ -128,7 +123,7 @@ class ThreadView extends React.Component<IProps, IState> {
         />;
     }
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseCard
                 className="mx_ThreadView"
@@ -161,5 +156,3 @@ class ThreadView extends React.Component<IProps, IState> {
         );
     }
 }
-
-export default ThreadView;

src/components/views/messages/MessageActionBar.js

@@ -275,7 +275,7 @@ export default class MessageActionBar extends React.PureComponent {
                             onClick={this.onReplyClick}
                             key="reply"
                         />
-                        { SettingsStore.getValue("experimentalThreadSupport") && (
+                        { SettingsStore.getValue("feature_thread") && (
                             <RovingAccessibleTooltipButton
                                 className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
                                 title={_t("Thread")}

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -280,7 +280,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
                 { _t("Show files") }
             </Button>
-            { SettingsStore.getValue("experimentalThreadSupport") && (
+            { SettingsStore.getValue("feature_thread") && (
                 <Button className="mx_RoomSummaryCard_icon_threads" onClick={onRoomThreadsClick}>
                     { _t("Show threads") }
                 </Button>

src/components/views/rooms/EventTile.tsx

@@ -462,7 +462,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             this.isListeningForReceipts = true;
         }
 
-        if (SettingsStore.getValue("experimentalThreadSupport")) {
+        if (SettingsStore.getValue("feature_thread")) {
             this.props.mxEvent.once("Thread.ready", this.updateThread);
             this.props.mxEvent.on("Thread.update", this.updateThread);
         }
@@ -514,7 +514,7 @@ export default class EventTile extends React.Component<IProps, IState> {
     }
 
     private renderThreadInfo(): React.ReactNode {
-        if (!SettingsStore.getValue("experimentalThreadSupport")) {
+        if (!SettingsStore.getValue("feature_thread")) {
             return null;
         }
 

src/settings/Settings.tsx

@@ -211,7 +211,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
-    "experimentalThreadSupport": {
+    "feature_thread": {
         isFeature: true,
         // Requires a reload as we change an option flag on the `js-sdk`
         // And the entire sync history needs to be parsed again