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,9 +251,11 @@ 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 (
+                <RoomContext.Provider value={{
+                    ...this.context,
+                    timelineRenderingType: TimelineRenderingType.File,
+                }}>
                     <BaseCard
                         className="mx_FilePanel"
                         onClose={this.props.onClose}
@@ -271,9 +275,14 @@ class FilePanel extends React.Component<IProps, IState> {
                             layout={Layout.Group}
                         />
                     </BaseCard>
+                </RoomContext.Provider>
             );
         } else {
             return (
+                <RoomContext.Provider value={{
+                    ...this.context,
+                    timelineRenderingType: TimelineRenderingType.File,
+                }}>
                     <BaseCard
                         className="mx_FilePanel"
                         onClose={this.props.onClose}
@@ -281,6 +290,7 @@ class FilePanel extends React.Component<IProps, IState> {
                     >
                         <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>
+        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
 }