fix: 🐛

src/components/NoteList/index.tsx

@@ -31,7 +31,8 @@ export default function NoteList({
   className,
   filterMutedNotes = true,
   needCheckAlgoRelay = false,
-  isMainFeed = false
+  isMainFeed = false,
+  topSpace = 0
 }: {
   relayUrls?: string[]
   filter?: Filter
@@ -40,6 +41,7 @@ export default function NoteList({
   filterMutedNotes?: boolean
   needCheckAlgoRelay?: boolean
   isMainFeed?: boolean
+  topSpace?: number
 }) {
   const { t } = useTranslation()
   const { isLargeScreen } = useScreenSize()
@@ -315,6 +317,7 @@ export default function NoteList({
             topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
           }, 0)
         }}
+        threshold={Math.max(800, topSpace)}
       />
       {filteredNewEvents.length > 0 && (
         <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />

src/components/ScrollToTopButton/index.tsx

@@ -26,7 +26,7 @@ export default function ScrollToTopButton({
   return (
     <div
       className={cn(
-        `fixed sm:sticky z-20 flex justify-end w-full pr-3 pointer-events-none transition-opacity duration-700 ${visible ? '' : 'opacity-0'}`,
+        `fixed sm:sticky z-30 flex justify-end w-full pr-3 pointer-events-none transition-opacity duration-700 ${visible ? '' : 'opacity-0'}`,
         className
       )}
       style={{

src/components/TabSwitch/index.tsx

@@ -12,12 +12,14 @@ export default function TabSwitcher({
   tabs,
   value,
   className,
-  onTabChange
+  onTabChange,
+  threshold = 800
 }: {
   tabs: TabDefinition[]
   value: string
   className?: string
   onTabChange?: (tab: string) => void
+  threshold?: number
 }) {
   const { t } = useTranslation()
   const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
@@ -27,7 +29,7 @@ export default function TabSwitcher({
     <div
       className={cn(
         'sticky top-12 bg-background z-30 w-full transition-transform',
-        deepBrowsing && lastScrollTop > 800 ? '-translate-y-[calc(100%+12rem)]' : '',
+        deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : '',
         className
       )}
     >

src/pages/secondary/ProfilePage/index.tsx

@@ -1,3 +1,4 @@
+import Collapsible from '@/components/Collapsible'
 import FollowButton from '@/components/FollowButton'
 import Nip05 from '@/components/Nip05'
 import NoteList from '@/components/NoteList'
@@ -18,12 +19,11 @@ import { SecondaryPageLink, useSecondaryPage } from '@/PageManager'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { Link, Zap } from 'lucide-react'
-import { forwardRef, useMemo } from 'react'
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
 import Followings from './Followings'
 import Relays from './Relays'
-import Collapsible from '@/components/Collapsible'
 
 const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
   const { t } = useTranslation()
@@ -41,7 +41,35 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
     () => (profile?.pubkey ? generateImageByPubkey(profile?.pubkey) : ''),
     [profile]
   )
+  const [topContainerHeight, setTopContainerHeight] = useState(0)
   const isSelf = accountPubkey === profile?.pubkey
+  const [topContainer, setTopContainer] = useState<HTMLDivElement | null>(null)
+  const topContainerRef = useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      setTopContainer(node)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!topContainer) return
+
+    const checkHeight = () => {
+      console.log('checkHeight', topContainer.scrollHeight)
+      setTopContainerHeight(topContainer.scrollHeight)
+    }
+
+    checkHeight()
+
+    const observer = new ResizeObserver(() => {
+      checkHeight()
+    })
+
+    observer.observe(topContainer)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [topContainer])
 
   if (!profile && isFetching) {
     return (
@@ -64,6 +92,7 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
   const { banner, username, about, avatar, pubkey, website, lightningAddress } = profile
   return (
     <SecondaryPageLayout index={index} title={username} displayScrollToTopButton ref={ref}>
+      <div ref={topContainerRef}>
         <div className="sm:px-4">
           <div className="relative bg-cover bg-center mb-2">
             <ProfileBanner
@@ -147,7 +176,13 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
             </div>
           </div>
         </div>
-      <NoteList author={pubkey} className="mt-2" filterMutedNotes={false} />
+      </div>
+      <NoteList
+        author={pubkey}
+        className="mt-2"
+        filterMutedNotes={false}
+        topSpace={topContainerHeight + 100}
+      />
     </SecondaryPageLayout>
   )
 })