Show displayname in non-narrow thread summeries (#8036)

* Show displayname in non-narrow thread summeries

* Iterate PR

* Iterate PR to use line-height based approach

* Fix hover/focus chevron on thread summary relying on font character

res/css/views/rooms/_EventTile.scss

@@ -723,7 +723,7 @@ $left-gutter: 64px;
 
 .mx_ThreadInfo {
     min-width: 267px;
-    max-width: min(calc(100% - 64px), 600px);
+    max-width: min(calc(100% - $left-gutter - 64px), 600px); // leave space on both left & right gutters
     width: fit-content;
     height: 40px;
     position: relative;
@@ -740,41 +740,49 @@ $left-gutter: 64px;
     justify-content: flex-start;
     clear: both;
     overflow: hidden;
+    border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
 
-    &:hover {
+    .mx_ThreadInfo_chevron {
-        cursor: pointer;
-        border: 1px solid $quinary-content;
-        padding-top: 7px;
-        padding-bottom: 7px;
-        padding-left: 11px;
-        padding-right: 15px;
-    }
-
-    &::after {
-        content: "›";
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         width: 60px;
-        padding: 0 10px;
-        font-size: 15px;
-        line-height: 39px;
         box-sizing: border-box;
-
-        text-align: right;
-        font-weight: 600;
-
         background: linear-gradient(270deg, $system 52.6%, transparent 100%);
 
         opacity: 0;
-        transform: translateX(20px);
+        transform: translateX(60px);
         transition: all .1s ease-in-out;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 12px;
+            transform: translateY(-50%);
+            width: 12px;
+            height: 12px;
+            mask-image: url('$(res)/img/compound/chevron-right-12px.svg');
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background-color: $secondary-content;
+        }
     }
 
-    &:hover::after {
+    &:hover, &:focus {
-        opacity: 1;
+        cursor: pointer;
-        transform: translateX(0);
+        border-color: $quinary-content;
+
+        .mx_ThreadInfo_chevron {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    &::before {
+        align-self: center; // v-align the threads icon
     }
 }
 
@@ -784,25 +792,34 @@ $left-gutter: 64px;
     width: initial;
 }
 
+$threadInfoLineHeight: calc(2 * $font-12px);
+
+.mx_ThreadInfo_sender {
+    font-weight: $font-semi-bold;
+    line-height: $threadInfoLineHeight;
+}
+
 .mx_ThreadInfo_content {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    padding-left: 8px;
+    margin-left: 4px;
     font-size: $font-12px;
-    line-height: calc(2 * $font-12px);
+    line-height: $threadInfoLineHeight;
     color: $secondary-content;
 }
 
 .mx_ThreadInfo_avatar {
     float: left;
+    margin-right: 8px;
 }
 
 .mx_ThreadInfo_threads-amount {
-    font-weight: 600;
+    font-weight: $font-semi-bold;
     position: relative;
     padding: 0 12px 0 8px;
     white-space: nowrap;
+    line-height: $threadInfoLineHeight;
 }
 
 .mx_EventTile[data-shape=ThreadsList] {

res/img/compound/chevron-right-12px.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1692_80)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96967 10.7197C3.67678 10.4268 3.67601 9.95114 3.96795 9.6573L7.66823 5.933L3.95592 2.22069C3.66303 1.92779 3.66226 1.45215 3.9542 1.15831C4.24615 0.864473 4.72025 0.863706 5.01315 1.1566L9.25579 5.39924C9.54868 5.69213 9.54945 6.16777 9.2575 6.46161L5.02861 10.718C4.73667 11.0118 4.26256 11.0126 3.96967 10.7197Z" fill="#737D8C"/>
+</g>
+<defs>
+<clipPath id="clip0_1692_80">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/views/rooms/ThreadSummary.tsx

@@ -61,12 +61,18 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
             <span className="mx_ThreadInfo_threads-amount">
                 { countSection }
             </span>
-            <ThreadMessagePreview thread={thread} />
+            <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
+            <div className="mx_ThreadInfo_chevron" />
         </AccessibleButton>
     );
 };
 
-export const ThreadMessagePreview = ({ thread }: Pick<IProps, "thread">) => {
+interface IPreviewProps {
+    thread: Thread;
+    showDisplayname?: boolean;
+}
+
+export const ThreadMessagePreview = ({ thread, showDisplayname = false }: IPreviewProps) => {
     const cli = useContext(MatrixClientContext);
     const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.replyToEvent);
     const preview = useAsyncMemo(async () => {
@@ -85,6 +91,9 @@ export const ThreadMessagePreview = ({ thread }: Pick<IProps, "thread">) => {
             height={24}
             className="mx_ThreadInfo_avatar"
         />
+        { showDisplayname && <div className="mx_ThreadInfo_sender">
+            { sender?.name ?? lastReply.getSender() }
+        </div> }
         <div className="mx_ThreadInfo_content">
             <span className="mx_ThreadInfo_message-preview">
                 { preview }