Create room threads list view

res/css/_components.scss

@@ -202,6 +202,7 @@
 @import "./views/right_panel/_UserInfo.scss";
 @import "./views/right_panel/_VerificationPanel.scss";
 @import "./views/right_panel/_WidgetCard.scss";
+@import "./views/right_panel/_ThreadPanel.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";

res/css/structures/_RightPanel.scss

@@ -79,6 +79,10 @@ limitations under the License.
     }
 }
 
+.mx_RightPanel_threadsButton::before {
+    mask-image: url('$(res)/img/element-icons/room/thread.svg');
+}
+
 .mx_RightPanel_notifsButton::before {
     mask-image: url('$(res)/img/element-icons/notifications.svg');
     mask-position: center;

res/css/views/right_panel/_ThreadPanel.scss

@@ -0,0 +1,152 @@
+/*
+Copyright 2021 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.
+*/
+
+
+.mx_ThreadPanel {
+    display: flex;
+    flex-direction: column;
+
+    .mx_BaseCard_header {
+        padding: 6px 0;
+
+        .mx_BaseCard_close {
+            margin-top: 15px;
+        }
+    }
+
+    .mx_AccessibleButton.mx_BaseCard_back {
+        display: none;
+    }
+
+    &__header {
+        width: calc(100% - 40px);
+        display: flex;
+        flex: 1;
+        justify-content: space-between;
+
+        span:first-of-type {
+            font-weight: 600;
+            font-size: 15px;
+            line-height: 18px;
+            color: $secondary-content;
+        }
+
+        .mx_AccessibleButton {
+            font-size: 12px;
+            color: $secondary-content;
+        }
+
+        .mx_ContextualMenu_wrapper {
+            // It's added here due to some weird error if I pass it directly in the style, even though it's a numeric value, so it's being passed 0 instead.
+            // The error: react_devtools_backend.js:2526 Warning: `NaN` is an invalid value for the `top` css style property.
+            top: 43px;
+        }
+
+        .mx_ContextualMenu {
+            position: initial;
+            span:first-of-type {
+                font-weight: 600;
+                font-size: 12px;
+                color: $primary-content;
+            }
+
+            font-size: 12px;
+            color: $secondary-content;
+        }
+
+        .mx_ThreadPanel_Header_FilterOptionItem {
+            display: flex;
+            flex-grow: 1;
+            justify-content: space-between;
+            flex-direction: column;
+            overflow: visible;
+            width: 100%;
+            padding: 20px;
+            padding-left: 30px;
+            position: relative;
+
+            &:hover {
+                background-color: $event-selected-color;
+            }
+            &[aria-selected="true"] {
+                &::before {
+                    content: "";
+                    width: 12px;
+                    height: 12px;
+                    grid-column: 1;
+                    grid-row: 1;
+                    mask-image: url("$(res)/img/feather-customised/check.svg");
+                    mask-size: 100%;
+                    mask-repeat: no-repeat;
+                    position: absolute;
+                    top: 22px;
+                    left: 10px;
+                    background-color: $primary-content;
+                }
+            }
+        }
+    }
+
+    .mx_RoomView_messageListWrapper {
+        background-color: $background;
+        border-radius: 8px;
+        padding-top: 8px;
+        padding-bottom: 12px;
+    }
+
+    .mx_ScrollPanel {
+        .mx_RoomView_MessageList {
+            padding: 0;
+        }
+    }
+
+    .mx_EventTile, .mx_EventListSummary {
+        // Account for scrollbar when hovering
+        width: calc(100% - 3px);
+        margin: 0 2px;
+
+        .mx_MessageTimestamp {
+            // We need to add !important here due to some enormous selectors overriding it anyways
+            // See: _EventTile.scss:241
+            left: unset !important;
+            right: 0 !important;
+            top: 16px;
+        }
+
+        .mx_EventTile_line.mx_EventTile_line {
+            position: unset;
+        }
+
+        .mx_ThreadInfo {
+            position: relative;
+            padding-right: 11px;
+            &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                left: 0;
+                bottom: -16px;
+                height: 1px;
+                width: 100%;
+                border-bottom: 1px solid $message-action-bar-border-color;
+            }
+        }
+
+        .mx_DateSeparator {
+            display: none;
+        }
+    }
+}

src/components/structures/MessagePanel.tsx

@@ -26,7 +26,7 @@ import shouldHideEvent from '../../shouldHideEvent';
 import { wantsDateSeparator } from '../../DateUtils';
 import { MatrixClientPeg } from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
-import RoomContext from "../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import { Layout } from "../../settings/Layout";
 import { _t } from "../../languageHandler";
 import EventTile, { haveTileForEvent, IReadReceiptProps, TileShape } from "../views/rooms/EventTile";
@@ -66,7 +66,9 @@ export function shouldFormContinuation(
     prevEvent: MatrixEvent,
     mxEvent: MatrixEvent,
     showHiddenEvents: boolean,
+    timelineRenderingType?: TimelineRenderingType,
 ): boolean {
+    if (timelineRenderingType === TimelineRenderingType.ThreadsList) return false;
     // sanity check inputs
     if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false;
     // check if within the max continuation period
@@ -722,7 +724,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         // is this a continuation of the previous message?
         const continuation = !wantsDateSeparator &&
-            shouldFormContinuation(prevEvent, mxEv, this.showHiddenEvents);
+            shouldFormContinuation(prevEvent, mxEv, this.showHiddenEvents, this.context.timelineRenderingType);
 
         const eventId = mxEv.getId();
         const highlight = (eventId === this.props.highlightedEventId);
@@ -794,6 +796,9 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     }
 
     public wantsDateSeparator(prevEvent: MatrixEvent, nextEventDate: Date): boolean {
+        if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
+            return false;
+        }
         if (prevEvent == null) {
             // first event in the panel: depends if we could back-paginate from
             // here.

src/components/structures/RightPanel.tsx

@@ -53,7 +53,7 @@ import { throttle } from 'lodash';
 import SpaceStore from "../../stores/SpaceStore";
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import { E2EStatus } from '../../utils/ShieldUtils';
-import { SetRightPanelPhasePayload } from '../../dispatcher/payloads/SetRightPanelPhasePayload';
+import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads';
 
 interface IProps {
     room?: Room; // if showing panels for a given room, this is set
@@ -199,10 +199,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
         const isChangingRoom = payload.action === 'view_room' && payload.room_id !== this.props.room.roomId;
         const isViewingThread = this.state.phase === RightPanelPhases.ThreadView;
         if (isChangingRoom && isViewingThread) {
-            dis.dispatch<SetRightPanelPhasePayload>({
-                action: Action.SetRightPanelPhase,
-                phase: RightPanelPhases.ThreadPanel,
-            });
+            dispatchShowThreadsPanelEvent();
         }
 
         if (payload.action === Action.AfterRightPanelPhaseChange) {