Apply tweaks to Thread list as per design spec

res/css/views/right_panel/_ThreadPanel.scss

@@ -99,11 +99,10 @@ limitations under the License.
     }
 
     .mx_AutoHideScrollbar {
-        background: #fff;
         background-color: $background;
         border-radius: 8px;
-        width: calc(100% - 16px);
-        padding-right: 16px;
+        width: calc(100% - 24px);
+        padding-right: 24px;
     }
 
     &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
@@ -157,6 +156,10 @@ limitations under the License.
         .mx_EventTile_e2eIcon {
             left: 8px;
         }
+
+        &:hover .mx_EventTile_line {
+            box-shadow: unset !important; // don't show the verification left stroke in the thread list
+        }
     }
 
     .mx_MessageComposer {
@@ -190,10 +193,6 @@ limitations under the License.
         float: right;
     }
 
-    .mx_ThreadPanel_dropdown[aria-expanded=true]::before {
-        transform: rotate(180deg);
-    }
-
     .mx_MessageTimestamp {
         font-size: $font-12px;
         color: $secondary-content;
@@ -272,26 +271,39 @@ limitations under the License.
 
     h2 {
         color: $primary-content;
-        font-weight: 600;
+        font-weight: $font-semi-bold;
         font-size: $font-18px;
+        margin-top: 24px;
+        margin-bottom: 10px;
     }
 
     p {
         font-size: $font-15px;
         color: $secondary-content;
+        margin: 10px 0;
     }
 
     button {
         border: none;
         background: none;
         color: $accent;
+        font-size: $font-15px;
 
         &:hover,
         &:active {
             text-decoration: underline;
             cursor: pointer;
         }
     }
+
+    .mx_ThreadPanel_empty_tip {
+        font-size: $font-12px;
+        line-height: $font-15px;
+
+        > b {
+            font-weight: $font-semi-bold;
+        }
+    }
 }
 
 .mx_ThreadPanel_largeIcon {

res/css/views/rooms/_EventTile.scss

@@ -61,11 +61,11 @@ $left-gutter: 64px;
     &[data-shape=ThreadsList][data-notification]::before {
         content: "";
         position: absolute;
-        width: 8px;
-        height: 8px;
+        width: 10px;
+        height: 10px;
         border-radius: 50%;
-        right: -16px;
-        top: 6px;
+        right: -25px; // center it in the gutter (16px margin + 4px padding + half 10px width)
+        top: 4px;
         left: auto;
     }
 
@@ -79,7 +79,6 @@ $left-gutter: 64px;
 
     .mx_ThreadInfo,
     .mx_ThreadSummaryIcon {
-        margin-right: 110px;
         margin-left: 64px;
     }
 
@@ -308,10 +307,16 @@ $left-gutter: 64px;
 
 .mx_RoomView_timeline_rr_enabled {
     .mx_EventTile[data-layout=group] {
+        .mx_ThreadInfo,
+        .mx_ThreadSummaryIcon,
         .mx_EventTile_line {
             /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
             margin-right: 110px;
         }
+
+        .mx_ThreadInfo {
+            max-width: min(calc(100% - $left-gutter - 110px), 600px); // leave space on both left & right gutters
+        }
     }
     // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 }
@@ -700,15 +705,18 @@ $left-gutter: 64px;
 .mx_ThreadSummaryIcon {
     font-size: $font-12px;
     color: $secondary-content;
+    margin-top: 8px;
+    margin-bottom: 8px;
+
     &::before {
         vertical-align: middle;
-        margin-left: 8px;
+        margin-right: 8px;
     }
 }
 
 .mx_ThreadInfo {
     min-width: 267px;
-    max-width: min(calc(100% - $left-gutter - 64px), 600px); // leave space on both left & right gutters
+    max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters
     width: fit-content;
     height: 40px;
     position: relative;
@@ -782,6 +790,9 @@ $threadInfoLineHeight: calc(2 * $font-12px);
 .mx_ThreadInfo_sender {
     font-weight: $font-semi-bold;
     line-height: $threadInfoLineHeight;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 .mx_ThreadInfo_content {
@@ -810,9 +821,10 @@ $threadInfoLineHeight: calc(2 * $font-12px);
 .mx_EventTile[data-shape=ThreadsList] {
     --topOffset: 20px;
     --leftOffset: 46px;
+    $borderRadius: 8px;
 
     margin: var(--topOffset) 16px var(--topOffset) 0;
-    border-radius: 8px;
+    border-radius: $borderRadius;
 
     display: flex;
     flex-flow: wrap;
@@ -857,7 +869,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
     padding-top: 0;
 
     .mx_EventTile_avatar {
-        top: -4px;
+        top: 0;
         left: 0;
     }
 
@@ -892,7 +904,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
         width: 100%;
         box-sizing: border-box;
         padding-left: var(--leftOffset) !important;
-        padding-bottom: 0;
+        border-radius: $borderRadius !important; // override 4px
     }
 
     .mx_MessageTimestamp {
@@ -918,7 +930,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
     .mx_EventTile {
         display: flex;
         flex-direction: column;
-        padding-top: 0;
+        padding-top: 11px; // due to layout differences, this odd number matches the 18px padding-top of main tl events
 
         .mx_EventTile_line {
             padding-left: 0;
@@ -972,7 +984,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
         .mx_RedactedBody,
         .mx_MPollBody,
         .mx_ReplyChain_wrapper {
-            margin-left: 36px;
+            margin-left: 40px;
             margin-right: 8px;
 
             .mx_EventTile_content,
@@ -1000,12 +1012,13 @@ $threadInfoLineHeight: calc(2 * $font-12px);
 
             a {
                 flex: 1;
-                min-width: none;
+                min-width: unset;
                 max-width: 100%;
                 display: flex;
                 align-items: center;
 
                 .mx_DisambiguatedProfile {
+                    margin-left: 8px;
                     flex: 1;
                 }
             }
@@ -1025,4 +1038,13 @@ $threadInfoLineHeight: calc(2 * $font-12px);
     .mx_MessageComposer_sendMessage {
         margin-right: 0;
     }
+
+    .mx_EditMessageComposer {
+        margin-left: 30px !important; // align start of first letter with that of the event body
+    }
+
+    .mx_EditMessageComposer_buttons {
+        padding-right: 11px; // align with right edge of input
+        margin-right: 0; // align with right edge of background
+    }
 }

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={110}
         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>;
 };
 
@@ -246,6 +265,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 { createMapSiteLink } from "../messages/MLocationBody";
@@ -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>