Update Thread Panel to match latest designs (#12797)

* Add reusable empty state for the right panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Thread Panel to match latest Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use --cpd-space var

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_common.pcss

@@ -851,7 +851,7 @@ legend {
 @define-mixin ThreadSummaryIcon {
     content: "";
     display: inline-block;
-    mask-image: url("$(res)/img/element-icons/thread-summary.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
     mask-position: center;
     mask-repeat: no-repeat;
     mask-size: contain;

res/css/views/right_panel/_ThreadPanel.pcss

@@ -18,12 +18,13 @@ limitations under the License.
     height: 100px;
     overflow: visible;
 
-    .mx_BaseCard_header {
+    /* Unset flex on the thread list, but not the thread view */
-        .mx_BaseCard_header_title {
+    &:not(.mx_ThreadView) .mx_BaseCard_header .mx_BaseCard_header_title {
-            .mx_BaseCard_header_title_heading {
+        flex: unset;
-                margin-right: auto;
     }
 
+    .mx_BaseCard_header {
+        .mx_BaseCard_header_title {
             .mx_AccessibleButton {
                 font-size: 12px;
                 color: $secondary-content;

res/css/views/rooms/_EventTile.pcss

@@ -1024,7 +1024,7 @@ $left-gutter: 64px;
     $notification-dot-size: 8px; /* notification dot next to the timestamp */
 
     margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */
-    padding: $padding $spacing-24 $padding $padding;
+    padding: $padding;
     border-radius: $borderRadius;
 
     display: flex;
@@ -1039,7 +1039,7 @@ $left-gutter: 64px;
 
     &::after {
         $inset-block-start: auto;
-        $inset-inline-end: calc(32px - $padding);
+        $inset-inline-end: calc(-1 * var(--cpd-space-2x));
         $inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */
         $inset-inline-start: calc(var(--leftOffset) + $padding);
         inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start;

res/img/element-icons/thread-summary.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#17191C" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM4.25 6A.75.75 0 0 1 5 5.25h8a.75.75 0 0 1 0 1.5H5A.75.75 0 0 1 4.25 6ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z" clip-rule="evenodd"/></svg>

src/components/structures/ThreadPanel.tsx

@@ -36,7 +36,6 @@ import Measured from "../views/elements/Measured";
 import PosthogTrackers from "../../PosthogTrackers";
 import { ButtonEvent } from "../views/elements/AccessibleButton";
 import Spinner from "../views/elements/Spinner";
-import Heading from "../views/typography/Heading";
 import { clearRoomNotification } from "../../utils/notifications";
 import EmptyState from "../views/right_panel/EmptyState";
 
@@ -138,9 +137,6 @@ export const ThreadPanelHeader: React.FC<{
 
     return (
         <div className="mx_BaseCard_header_title">
-            <Heading size="4" className="mx_BaseCard_header_title_heading">
-                {_t("common|threads")}
-            </Heading>
             <Tooltip label={_t("threads|mark_all_read")}>
                 <IconButton onClick={onMarkAllThreadsReadClick} aria-label={_t("threads|mark_all_read")} size="24px">
                     <MarkAllThreadsReadIcon />

test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap

@@ -5,11 +5,6 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
   <div
     class="mx_BaseCard_header_title"
   >
-    <h4
-      class="mx_Heading_h4 mx_BaseCard_header_title_heading"
-    >
-      Threads
-    </h4>
     <button
       aria-label="Mark all as read"
       class="_icon-button_bh2qc_17"
@@ -45,11 +40,6 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
   <div
     class="mx_BaseCard_header_title"
   >
-    <h4
-      class="mx_Heading_h4 mx_BaseCard_header_title_heading"
-    >
-      Threads
-    </h4>
     <button
       aria-label="Mark all as read"
       class="_icon-button_bh2qc_17"