Improve Thread View UI (#7063)

src/components/structures/ThreadView.tsx

@@ -37,6 +37,15 @@ import { MatrixClientPeg } from '../../MatrixClientPeg';
 import { E2EStatus } from '../../utils/ShieldUtils';
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
 import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
+import { ChevronFace, ContextMenuTooltipButton } from './ContextMenu';
+import { _t } from '../../languageHandler';
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList,
+} from '../views/context_menus/IconizedContextMenu';
+import { ButtonEvent } from '../views/elements/AccessibleButton';
+import { copyPlaintext } from '../../utils/strings';
+import { sleep } from 'matrix-js-sdk/src/utils';
 
 interface IProps {
     room: Room;
@@ -48,13 +57,28 @@ interface IProps {
     initialEvent?: MatrixEvent;
     initialEventHighlighted?: boolean;
 }
-
 interface IState {
     thread?: Thread;
     editState?: EditorStateTransfer;
     replyToEvent?: MatrixEvent;
+    threadOptionsPosition: DOMRect | null;
+    copyingPhase: CopyingPhase;
 }
 
+enum CopyingPhase {
+    Idle,
+    Copying,
+    Failed,
+}
+
+const contextMenuBelow = (elementRect: DOMRect) => {
+    // align the context menu's icons with the icon which opened the context menu
+    const left = elementRect.left + window.pageXOffset + elementRect.width;
+    const top = elementRect.bottom + window.pageYOffset + 17;
+    const chevronFace = ChevronFace.None;
+    return { left, top, chevronFace };
+};
+
 @replaceableComponent("structures.ThreadView")
 export default class ThreadView extends React.Component<IProps, IState> {
     static contextType = RoomContext;
@@ -64,7 +88,10 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
     constructor(props: IProps) {
         super(props);
-        this.state = {};
+        this.state = {
+            threadOptionsPosition: null,
+            copyingPhase: CopyingPhase.Idle,
+        };
     }
 
     public componentDidMount(): void {
@@ -181,6 +208,98 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
+    private onThreadOptionsClick = (ev: ButtonEvent): void => {
+        if (this.isThreadOptionsVisible) {
+            this.closeThreadOptions();
+        } else {
+            const position = ev.currentTarget.getBoundingClientRect();
+            this.setState({
+                threadOptionsPosition: position,
+            });
+        }
+    };
+
+    private closeThreadOptions = (): void => {
+        this.setState({
+            threadOptionsPosition: null,
+        });
+    };
+
+    private get isThreadOptionsVisible(): boolean {
+        return !!this.state.threadOptionsPosition;
+    }
+
+    private viewInRoom = (evt: ButtonEvent): void => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        dis.dispatch({
+            action: 'view_room',
+            event_id: this.props.mxEvent.getId(),
+            highlighted: true,
+            room_id: this.props.mxEvent.getRoomId(),
+        });
+        this.closeThreadOptions();
+    };
+
+    private copyLinkToThread = async (evt: ButtonEvent): Promise<void> => {
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        const matrixToUrl = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+
+        this.setState({
+            copyingPhase: CopyingPhase.Copying,
+        });
+
+        const hasSuccessfullyCopied = await copyPlaintext(matrixToUrl);
+
+        if (hasSuccessfullyCopied) {
+            await sleep(500);
+        } else {
+            this.setState({ copyingPhase: CopyingPhase.Failed });
+            await sleep(2500);
+        }
+
+        this.setState({ copyingPhase: CopyingPhase.Idle });
+
+        if (hasSuccessfullyCopied) {
+            this.closeThreadOptions();
+        }
+    };
+
+    private renderThreadViewHeader = (): JSX.Element => {
+        return <div className="mx_ThreadPanel__header">
+            <span>{ _t("Thread") }</span>
+            <ContextMenuTooltipButton
+                className="mx_ThreadPanel_button mx_ThreadPanel_OptionsButton"
+                onClick={this.onThreadOptionsClick}
+                title={_t("Thread options")}
+                isExpanded={this.isThreadOptionsVisible}
+            />
+            { this.isThreadOptionsVisible && (<IconizedContextMenu
+                onFinished={this.closeThreadOptions}
+                className="mx_RoomTile_contextMenu"
+                compact
+                rightAligned
+                {...contextMenuBelow(this.state.threadOptionsPosition)}
+            >
+                <IconizedContextMenuOptionList>
+                    <IconizedContextMenuOption
+                        onClick={(e) => this.viewInRoom(e)}
+                        label={_t("View in room")}
+                        iconClassName="mx_ThreadPanel_viewInRoom"
+                    />
+                    <IconizedContextMenuOption
+                        onClick={(e) => this.copyLinkToThread(e)}
+                        label={_t("Copy link to thread")}
+                        iconClassName="mx_ThreadPanel_copyLinkToThread"
+                    />
+                </IconizedContextMenuOptionList>
+            </IconizedContextMenu>) }
+
+        </div>;
+    };
+
     public render(): JSX.Element {
         const highlightedEventId = this.props.initialEventHighlighted
             ? this.props.initialEvent?.getId()
@@ -193,10 +312,11 @@ export default class ThreadView extends React.Component<IProps, IState> {
             }}>
 
                 <BaseCard
-                    className="mx_ThreadView"
+                    className="mx_ThreadView mx_ThreadPanel"
                     onClose={this.props.onClose}
                     previousPhase={RightPanelPhases.ThreadPanel}
                     withoutScrollContainer={true}
+                    header={this.renderThreadViewHeader()}
                 >
                     { this.state.thread && (
                         <TimelinePanel
@@ -209,7 +329,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
                             showUrlPreview={true}
                             tileShape={TileShape.Thread}
                             empty={<div>empty</div>}
-                            alwaysShowTimestamps={true}
                             layout={Layout.Group}
                             hideThreadedMessages={false}
                             hidden={false}