From dbddaae05c399c6df3c9efb7070d216878f331ce Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Thu, 31 Oct 2024 00:00:07 +0800
Subject: [PATCH] Profile: sticky filter bar

---
 src/profiles/Profile.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx
index 55b37c6..ca8324a 100644
--- a/src/profiles/Profile.tsx
+++ b/src/profiles/Profile.tsx
@@ -177,6 +177,22 @@ const Profile: Component = () => {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    .toot-list-toolbar {
+      position: sticky;
+      top: var(--scaffold-topbar-height);
+      z-index: calc(var(--tutu-zidx-nav, 1) - 1);
+      background: var(--tutu-color-surface);
+      border-bottom: 1px solid var(--tutu-color-surface-d);
+      contain: content;
+      /* TODO: box-shadow is needed here (same as app bar, e6).
+      There is no good way to detect if the sticky is "sticked" -
+      so let's leave it for future.
+
+      For now we use a trick to make it looks better.
+      */
+      box-shadow: 0px -2px 4px 0px var(--tutu-color-shadow);
+    }
   `;
 
   return (
@@ -356,7 +372,7 @@ const Profile: Component = () => {
         </table>
       </div>
 
-      <div>
+      <div class="toot-list-toolbar">
         <TootFilterButton
           options={{
             boost: "Boosts",