Apply tweaks to Thread list as per design spec (#8149)

Co-authored-by: Germain Souquet <germains@element.io>

src/components/structures/ThreadPanel.tsx

@@ -101,7 +101,7 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: {
         isSelected={opt === value}
     />);
     const contextMenu = menuDisplayed ? <ContextMenu
-        top={100}
+        top={108}
         right={33}
         onFinished={closeMenu}
         chevronFace={ChevronFace.Top}
@@ -129,25 +129,44 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: {
 };
 
 interface EmptyThreadIProps {
+    hasThreads: boolean;
     filterOption: ThreadFilterType;
     showAllThreadsCallback: () => void;
 }
 
-const EmptyThread: React.FC<EmptyThreadIProps> = ({ filterOption, showAllThreadsCallback }) => {
+const EmptyThread: React.FC<EmptyThreadIProps> = ({ hasThreads, filterOption, showAllThreadsCallback }) => {
+    let body: JSX.Element;
+    if (hasThreads) {
+        body = <>
+            <p>
+                { _t("Reply to an ongoing thread or use “%(replyInThread)s” "
+                    + "when hovering over a message to start a new one.", {
+                    replyInThread: _t("Reply in thread"),
+                }) }
+            </p>
+            <p>
+                { /* Always display that paragraph to prevent layout shift when hiding the button */ }
+                { (filterOption === ThreadFilterType.My)
+                    ? <button onClick={showAllThreadsCallback}>{ _t("Show all threads") }</button>
+                    : <>&nbsp;</>
+                }
+            </p>
+        </>;
+    } else {
+        body = <>
+            <p>{ _t("Threads help keep your conversations on-topic and easy to track.") }</p>
+            <p className="mx_ThreadPanel_empty_tip">
+                { _t('<b>Tip:</b> Use "Reply in thread" when hovering over a message.', {}, {
+                    b: sub => <b>{ sub }</b>,
+                }) }
+            </p>
+        </>;
+    }
+
     return <aside className="mx_ThreadPanel_empty">
         <div className="mx_ThreadPanel_largeIcon" />
         <h2>{ _t("Keep discussions organised with threads") }</h2>
-        <p>{ _t("Reply to an ongoing thread or use “%(replyInThread)s” "
-              + "when hovering over a message to start a new one.", { replyInThread: _t("Reply in thread") }) }
-        </p>
-        <p>
-            { /* Always display that paragraph to prevent layout shift
-                When hiding the button */ }
-            { filterOption === ThreadFilterType.My
-                ? <button onClick={showAllThreadsCallback}>{ _t("Show all threads") }</button>
-                : <>&nbsp;</>
-            }
-        </p>
+        { body }
     </aside>;
 };
 
@@ -247,6 +266,7 @@ const ThreadPanel: React.FC<IProps> = ({
                         timelineSet={timelineSet}
                         showUrlPreview={false} // No URL previews at the threads list level
                         empty={<EmptyThread
+                            hasThreads={room.threadsTimelineSets?.[0]?.getLiveTimeline().getEvents().length > 0}
                             filterOption={filterOption}
                             showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
                         />}

src/components/views/context_menus/MessageContextMenu.tsx

@@ -44,7 +44,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { ChevronFace, IPosition } from '../../structures/ContextMenu';
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
-import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
 import EndPollDialog from '../dialogs/EndPollDialog';
 import { isPollEnded } from '../messages/MPollBody';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
@@ -472,14 +471,11 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             timelineRenderingType === TimelineRenderingType.Thread ||
             timelineRenderingType === TimelineRenderingType.ThreadsList
         );
-        const isThreadRootEvent = isThread && this.props.mxEvent?.getThread()?.rootEvent === this.props.mxEvent;
+        const isThreadRootEvent = isThread && this.props.mxEvent.isThreadRoot;
 
-        const isMainSplitTimelineShown = !WidgetLayoutStore.instance.hasMaximisedWidget(
-            MatrixClientPeg.get().getRoom(mxEvent.getRoomId()),
-        );
         const commonItemsList = (
             <IconizedContextMenuOptionList>
-                { (isThreadRootEvent && isMainSplitTimelineShown) && <IconizedContextMenuOption
+                { isThreadRootEvent && <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconViewInRoom"
                     label={_t("View in room")}
                     onClick={this.viewInRoom}

src/components/views/messages/TextualBody.tsx

@@ -607,9 +607,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         if (this.props.highlightLink) {
             body = <a href={this.props.highlightLink}>{ body }</a>;
         } else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") {
-            body = <AccessibleButton kind="link_inline"
-                onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}
-            >{ body }</AccessibleButton>;
+            body = (
+                <AccessibleButton
+                    kind="link_inline"
+                    onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}
+                >
+                    { body }
+                </AccessibleButton>
+            );
         }
 
         let widgets;
@@ -651,9 +656,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             );
         }
         return (
-            <div className="mx_MTextBody mx_EventTile_content"
-                onClick={this.onBodyLinkClick}
-            >
+            <div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
                 { body }
                 { widgets }
             </div>

src/components/views/rooms/EventTile.tsx

@@ -631,12 +631,22 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
     }
 
     private renderThreadInfo(): React.ReactNode {
+        if (this.state.thread?.id === this.props.mxEvent.getId()) {
+            return <ThreadSummary mxEvent={this.props.mxEvent} thread={this.state.thread} />;
+        }
+
         if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
+            if (this.props.highlightLink) {
+                return (
+                    <a className="mx_ThreadSummaryIcon" href={this.props.highlightLink}>
+                        { _t("From a thread") }
+                    </a>
+                );
+            }
+
             return (
                 <p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p>
             );
-        } else if (this.state.thread?.id === this.props.mxEvent.getId()) {
-            return <ThreadSummary mxEvent={this.props.mxEvent} thread={this.state.thread} />;
         }
     }
 
@@ -1100,6 +1110,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         let isContinuation = this.props.continuation;
         if (this.context.timelineRenderingType !== TimelineRenderingType.Room &&
             this.context.timelineRenderingType !== TimelineRenderingType.Search &&
+            this.context.timelineRenderingType !== TimelineRenderingType.Thread &&
             this.props.layout !== Layout.Bubble
         ) {
             isContinuation = false;
@@ -1146,16 +1157,17 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
             ? undefined
             : this.props.mxEvent.getId();
 
-        let avatar;
-        let sender;
-        let avatarSize;
-        let needsSenderProfile;
+        let avatar: JSX.Element;
+        let sender: JSX.Element;
+        let avatarSize: number;
+        let needsSenderProfile: boolean;
 
-        if (this.context.timelineRenderingType === TimelineRenderingType.Notification ||
-            this.context.timelineRenderingType === TimelineRenderingType.ThreadsList
-        ) {
+        if (this.context.timelineRenderingType === TimelineRenderingType.Notification) {
             avatarSize = 24;
             needsSenderProfile = true;
+        } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
+            avatarSize = 36;
+            needsSenderProfile = true;
         } else if (tileHandler === 'messages.RoomCreate' || isBubbleMessage) {
             avatarSize = 0;
             needsSenderProfile = false;
@@ -1364,7 +1376,8 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                         </a>
                     </div>,
                     <div className={lineClasses} key="mx_EventTile_line">
-                        <EventTileType ref={this.tile}
+                        <EventTileType
+                            ref={this.tile}
                             mxEvent={this.props.mxEvent}
                             highlights={this.props.highlights}
                             highlightLink={this.props.highlightLink}
@@ -1399,9 +1412,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                     </div>,
                     <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
                         { avatar }
-                        <a href={permalink} onClick={this.onPermalinkClicked}>
-                            { sender }
-                        </a>
+                        { sender }
                     </div>,
                     <div className={lineClasses} key="mx_EventTile_line">
                         { replyChain }
@@ -1417,7 +1428,9 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                             isSeeingThroughMessageHiddenForModeration={isSeeingThroughMessageHiddenForModeration}
                         />
                         { actionBar }
-                        { timestamp }
+                        <a href={permalink} onClick={this.onPermalinkClicked}>
+                            { timestamp }
+                        </a>
                     </div>,
                     reactionsRow,
                 ]);