feat: 💨

src/components/NormalFeed/index.tsx

@@ -35,6 +35,7 @@ export default function NormalFeed({
   const showKindsFilter = useMemo(() => {
     return subRequests.every((req) => !req.filter.kinds?.length)
   }, [subRequests])
+  const [trustFilterOpen, setTrustFilterOpen] = useState(false)
 
   const handleListModeChange = (mode: TNoteListMode) => {
     setListMode(mode)
@@ -49,6 +50,10 @@ export default function NormalFeed({
     noteListRef.current?.scrollToTop()
   }
 
+  const handleTrustFilterOpenChange = (open: boolean) => {
+    setTrustFilterOpen(open)
+  }
+
   return (
     <>
       <Tabs
@@ -78,7 +83,7 @@ export default function NormalFeed({
                 }}
               />
             )}
-            <TrustScoreFilter />
+            <TrustScoreFilter onOpenChange={handleTrustFilterOpenChange} />
             {showKindsFilter && (
               <KindFilter
                 showKinds={temporaryShowKinds}
@@ -87,6 +92,7 @@ export default function NormalFeed({
             )}
           </>
         }
+        active={trustFilterOpen}
       />
       <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
       {listMode === '24h' && !disable24hMode ? (

src/components/Tabs/index.tsx

@@ -14,13 +14,15 @@ export default function Tabs({
   value,
   onTabChange,
   threshold = 800,
-  options = null
+  options = null,
+  active = false
 }: {
   tabs: TabDefinition[]
   value: string
   onTabChange?: (tab: string) => void
   threshold?: number
   options?: ReactNode
+  active?: boolean
 }) {
   const { t } = useTranslation()
   const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
@@ -88,7 +90,9 @@ export default function Tabs({
       ref={containerRef}
       className={cn(
         'sticky flex justify-between top-12 bg-background z-30 px-1 w-full transition-all duration-300 border-b',
-        deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : ''
+        deepBrowsing && lastScrollTop > threshold && !active
+          ? '-translate-y-[calc(100%+12rem)]'
+          : ''
       )}
     >
       <ScrollArea className="flex-1 w-0">

src/components/TrustScoreFilter/index.tsx

@@ -27,7 +27,11 @@ function getDescription(score: number, t: (key: string, options?: any) => string
   }
 }
 
-export default function TrustScoreFilter() {
+export default function TrustScoreFilter({
+  onOpenChange
+}: {
+  onOpenChange?: (open: boolean) => void
+}) {
   const { t } = useTranslation()
   const { isSmallScreen } = useScreenSize()
   const { minTrustScore, updateMinTrustScore } = useUserTrust()
@@ -63,6 +67,12 @@ export default function TrustScoreFilter() {
     }
   }, [])
 
+  useEffect(() => {
+    if (onOpenChange) {
+      onOpenChange(open)
+    }
+  }, [open, onOpenChange])
+
   const description = getDescription(temporaryScore, t)
 
   const trigger = (
@@ -76,9 +86,7 @@ export default function TrustScoreFilter() {
           : 'text-primary hover:text-primary-hover'
       )}
       onClick={() => {
-        if (isSmallScreen) {
-          setOpen(true)
-        }
+        setOpen(true)
       }}
     >
       {minTrustScore < 100 ? <Shield size={16} /> : <ShieldCheck size={16} />}