Move threads header below base card header (#28969)

* Move threads header below base card header

* Fix jest tests

res/css/views/right_panel/_ThreadPanel.pcss

@@ -15,41 +15,48 @@ Please see LICENSE files in the repository root for full details.
         flex: unset;
     }
 
-    .mx_BaseCard_header {
+    .mx_ThreadPanelHeader {
-        .mx_BaseCard_header_title {
+        height: 60px;
-            .mx_AccessibleButton {
+        display: flex;
-                font-size: 12px;
+        box-sizing: border-box;
-                color: $secondary-content;
+        padding: 16px;
+        align-items: center;
+        border-bottom: 1px solid var(--cpd-color-gray-400);
+
+        .mx_AccessibleButton {
+            font-size: 12px;
+            color: $secondary-content;
+        }
+
+        .mx_ThreadPanel_vertical_separator {
+            height: 28px;
+            margin-left: var(--cpd-space-3x);
+            margin-right: var(--cpd-space-2x);
+            border-left: 1px solid var(--cpd-color-gray-400);
+        }
+
+        .mx_ThreadPanel_dropdown {
+            font: var(--cpd-font-body-sm-regular);
+            padding: 3px $spacing-4 3px $spacing-8;
+            border-radius: 4px;
+            line-height: 1.5;
+            user-select: none;
+
+            &:hover,
+            &[aria-expanded="true"] {
+                background: $quinary-content;
             }
 
-            .mx_ThreadPanel_vertical_separator {
+            &::before {
-                height: 16px;
+                margin-left: 2px;
-                margin-left: var(--cpd-space-3x);
+                content: "";
-                margin-right: var(--cpd-space-1x);
+                width: 20px;
-                border-left: 1px solid var(--cpd-color-gray-400);
+                height: 20px;
-            }
+                background: currentColor;
-
+                mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-            .mx_ThreadPanel_dropdown {
+                mask-size: 100%;
-                padding: 3px $spacing-4 3px $spacing-8;
+                mask-repeat: no-repeat;
-                border-radius: 4px;
+                float: right;
-                line-height: 1.5;
-                user-select: none;
-
-                &:hover,
-                &[aria-expanded="true"] {
-                    background: $quinary-content;
-                }
-
-                &::before {
-                    content: "";
-                    width: 18px;
-                    height: 18px;
-                    background: currentColor;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-                    mask-size: 100%;
-                    mask-repeat: no-repeat;
-                    float: right;
-                }
             }
         }
     }

src/components/structures/ThreadPanel.tsx

@@ -129,10 +129,10 @@ export const ThreadPanelHeader: React.FC<{
     );
 
     return (
-        <div className="mx_BaseCard_header_title">
+        <div className="mx_ThreadPanelHeader">
             <Tooltip label={_t("threads|mark_all_read")}>
-                <IconButton onClick={onMarkAllThreadsReadClick} size="24px">
+                <IconButton onClick={onMarkAllThreadsReadClick} size="28px">
-                    <MarkAllThreadsReadIcon />
+                    <MarkAllThreadsReadIcon height={20} width={20} />
                 </IconButton>
             </Tooltip>
             <div className="mx_ThreadPanel_vertical_separator" />
@@ -192,9 +192,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
             narrow={narrow}
         >
             <BaseCard
-                header={
+                header={_t("common|threads")}
-                    hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
-                }
                 id="thread-panel"
                 className="mx_ThreadPanel"
                 ariaLabelledBy="thread-panel-tab"
@@ -204,6 +202,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                 ref={card}
                 closeButtonRef={closeButonRef}
             >
+                {hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />}
                 <Measured sensor={card} onMeasurement={setNarrow} />
                 {timelineSet ? (
                     <TimelinePanel

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

@@ -3,20 +3,23 @@
 exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properly renders Show: All threads 1`] = `
 <DocumentFragment>
   <div
-    class="mx_BaseCard_header_title"
+    class="mx_ThreadPanelHeader"
   >
     <button
       aria-labelledby=":r0:"
       class="_icon-button_bh2qc_17"
       role="button"
-      style="--cpd-icon-button-size: 24px;"
+      style="--cpd-icon-button-size: 28px;"
       tabindex="0"
     >
       <div
         class="_indicator-icon_133tf_26"
         style="--cpd-icon-button-size: 100%;"
       >
-        <div />
+        <div
+          height="20"
+          width="20"
+        />
       </div>
     </button>
     <div
@@ -38,20 +41,23 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
 exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly renders Show: My threads 1`] = `
 <DocumentFragment>
   <div
-    class="mx_BaseCard_header_title"
+    class="mx_ThreadPanelHeader"
   >
     <button
       aria-labelledby=":r6:"
       class="_icon-button_bh2qc_17"
       role="button"
-      style="--cpd-icon-button-size: 24px;"
+      style="--cpd-icon-button-size: 28px;"
       tabindex="0"
     >
       <div
         class="_indicator-icon_133tf_26"
         style="--cpd-icon-button-size: 100%;"
       >
-        <div />
+        <div
+          height="20"
+          width="20"
+        />
       </div>
     </button>
     <div