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,21 +15,28 @@ Please see LICENSE files in the repository root for full details.
         flex: unset;
     }
 
-    .mx_BaseCard_header {
+    .mx_ThreadPanelHeader {
-        .mx_BaseCard_header_title {
+        height: 60px;
+        display: flex;
+        box-sizing: border-box;
+        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: 16px;
+            height: 28px;
             margin-left: var(--cpd-space-3x);
-                margin-right: var(--cpd-space-1x);
+            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;
@@ -41,9 +48,10 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &::before {
+                margin-left: 2px;
                 content: "";
-                    width: 18px;
+                width: 20px;
-                    height: 18px;
+                height: 20px;
                 background: currentColor;
                 mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
                 mask-size: 100%;
@@ -52,7 +60,6 @@ Please see LICENSE files in the repository root for full details.
             }
         }
     }
-    }
 
     .mx_AutoHideScrollbar,
     .mx_RoomView_messagePanelSpinner {

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