From a8b66d0b3a5de4e5ea0576c486dce6923a788e41 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 13 Jan 2025 10:40:50 +0530
Subject: [PATCH 1/2] Move threads header below base card header

---
 res/css/views/right_panel/_ThreadPanel.pcss | 71 +++++++++++----------
 src/components/structures/ThreadPanel.tsx   | 11 ++--
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index b21eb17f033..2fe1a869087 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/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_BaseCard_header_title {
-            .mx_AccessibleButton {
-                font-size: 12px;
-                color: $secondary-content;
-            }
+    .mx_ThreadPanelHeader {
+        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;
-                margin-left: var(--cpd-space-3x);
-                margin-right: var(--cpd-space-1x);
-                border-left: 1px solid var(--cpd-color-gray-400);
+        .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_dropdown {
-                padding: 3px $spacing-4 3px $spacing-8;
-                border-radius: 4px;
-                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;
-                }
+            &::before {
+                margin-left: 2px;
+                content: "";
+                width: 20px;
+                height: 20px;
+                background: currentColor;
+                mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
+                mask-size: 100%;
+                mask-repeat: no-repeat;
+                float: right;
             }
         }
     }
diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
index 7aee8554b1d..42fc8ee2825 100644
--- a/src/components/structures/ThreadPanel.tsx
+++ b/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">
-                    <MarkAllThreadsReadIcon />
+                <IconButton onClick={onMarkAllThreadsReadClick} size="28px">
+                    <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={
-                    hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
-                }
+                header={_t("common|threads")}
                 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} />}
                 {card.current && <Measured sensor={card.current} onMeasurement={setNarrow} />}
                 {timelineSet ? (
                     <TimelinePanel

From 835f31a35e4574dd5d8945ff29ca1661ec27da11 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 13 Jan 2025 10:55:48 +0530
Subject: [PATCH 2/2] Fix jest tests

---
 .../__snapshots__/ThreadPanel-test.tsx.snap    | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
index 0ea46210025..20887eee036 100644
--- a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
+++ b/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