Make thread button always visible (#6903)

Fix https://github.com/vector-im/element-web/issues/18956

src/components/structures/FilePanel.tsx

@@ -37,6 +37,7 @@ import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
 import { TileShape } from '../views/rooms/EventTile';
 import { Layout } from "../../settings/Layout";
+import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
 
 interface IProps {
     roomId: string;
@@ -57,6 +58,7 @@ class FilePanel extends React.Component<IProps, IState> {
     // added to the timeline.
     private decryptingEvents = new Set<string>();
     public noRoom: boolean;
+    static contextType = RoomContext;
 
     state = {
         timelineSet: null,
@@ -249,38 +251,46 @@ class FilePanel extends React.Component<IProps, IState> {
         const isRoomEncrypted = this.noRoom ? false : MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
 
         if (this.state.timelineSet) {
-            // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
-            //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
             return (
-                <BaseCard
-                    className="mx_FilePanel"
-                    onClose={this.props.onClose}
-                    previousPhase={RightPanelPhases.RoomSummary}
-                    withoutScrollContainer
-                >
-                    <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
-                    <TimelinePanel
-                        manageReadReceipts={false}
-                        manageReadMarkers={false}
-                        timelineSet={this.state.timelineSet}
-                        showUrlPreview={false}
-                        onPaginationRequest={this.onPaginationRequest}
-                        tileShape={TileShape.FileGrid}
-                        resizeNotifier={this.props.resizeNotifier}
-                        empty={emptyState}
-                        layout={Layout.Group}
-                    />
-                </BaseCard>
+                <RoomContext.Provider value={{
+                    ...this.context,
+                    timelineRenderingType: TimelineRenderingType.File,
+                }}>
+                    <BaseCard
+                        className="mx_FilePanel"
+                        onClose={this.props.onClose}
+                        previousPhase={RightPanelPhases.RoomSummary}
+                        withoutScrollContainer
+                    >
+                        <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
+                        <TimelinePanel
+                            manageReadReceipts={false}
+                            manageReadMarkers={false}
+                            timelineSet={this.state.timelineSet}
+                            showUrlPreview={false}
+                            onPaginationRequest={this.onPaginationRequest}
+                            tileShape={TileShape.FileGrid}
+                            resizeNotifier={this.props.resizeNotifier}
+                            empty={emptyState}
+                            layout={Layout.Group}
+                        />
+                    </BaseCard>
+                </RoomContext.Provider>
             );
         } else {
             return (
-                <BaseCard
-                    className="mx_FilePanel"
-                    onClose={this.props.onClose}
-                    previousPhase={RightPanelPhases.RoomSummary}
-                >
-                    <Spinner />
-                </BaseCard>
+                <RoomContext.Provider value={{
+                    ...this.context,
+                    timelineRenderingType: TimelineRenderingType.File,
+                }}>
+                    <BaseCard
+                        className="mx_FilePanel"
+                        onClose={this.props.onClose}
+                        previousPhase={RightPanelPhases.RoomSummary}
+                    >
+                        <Spinner />
+                    </BaseCard>
+                </RoomContext.Provider>
             );
         }
     }

src/components/structures/NotificationPanel.tsx

@@ -24,6 +24,7 @@ import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
 import { TileShape } from "../views/rooms/EventTile";
 import { Layout } from "../../settings/Layout";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 
 interface IProps {
     onClose(): void;
@@ -34,6 +35,7 @@ interface IProps {
  */
 @replaceableComponent("structures.NotificationPanel")
 export default class NotificationPanel extends React.PureComponent<IProps> {
+    static contextType = RoomContext;
     render() {
         const emptyState = (<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
             <h2>{ _t('You’re all caught up') }</h2>
@@ -61,8 +63,13 @@ export default class NotificationPanel extends React.PureComponent<IProps> {
             content = <Spinner />;
         }
 
-        return <BaseCard className="mx_NotificationPanel" onClose={this.props.onClose} withoutScrollContainer>
-            { content }
-        </BaseCard>;
+        return <RoomContext.Provider value={{
+            ...this.context,
+            timelineRenderingType: TimelineRenderingType.Notification,
+        }}>
+            <BaseCard className="mx_NotificationPanel" onClose={this.props.onClose} withoutScrollContainer>
+                { content }
+            </BaseCard>;
+        </RoomContext.Provider>;
     }
 }

src/components/views/messages/MessageActionBar.tsx

@@ -289,7 +289,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 // Like the resend button, the react and reply buttons need to appear before the edit.
                 // The only catch is we do the reply button first so that we can make sure the react
                 // button is the very first button without having to do length checks for `splice()`.
-                if (this.context.canReply && this.context.timelineRenderingType === TimelineRenderingType.Room) {
+                if (this.context.canReply && this.context.timelineRenderingType !== TimelineRenderingType.Thread) {
                     toolbarOpts.splice(0, 0, <>
                         <RovingAccessibleTooltipButton
                             className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
@@ -325,6 +325,19 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     />);
                 }
             }
+            // Show thread icon even for deleted messages, but only within main timeline
+            if (this.context.timelineRenderingType === TimelineRenderingType.Room &&
+                SettingsStore.getValue("feature_thread") &&
+                this.props.mxEvent.getThread() &&
+                !isContentActionable(this.props.mxEvent)
+            ) {
+                toolbarOpts.unshift(<RovingAccessibleTooltipButton
+                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
+                    title={_t("Thread")}
+                    onClick={this.onThreadClick}
+                    key="thread"
+                />);
+            }
 
             if (allowCancel) {
                 toolbarOpts.push(cancelSendingButton);

src/contexts/RoomContext.ts

@@ -21,6 +21,8 @@ import { Layout } from "../settings/Layout";
 
 export enum TimelineRenderingType {
     Room,
+    File,
+    Notification,
     Thread
 }