void
+ threshold?: number
}) {
const { t } = useTranslation()
const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
@@ -27,7 +29,7 @@ export default function TabSwitcher({
800 ? '-translate-y-[calc(100%+12rem)]' : '',
+ deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : '',
className
)}
>
diff --git a/src/pages/secondary/ProfilePage/index.tsx b/src/pages/secondary/ProfilePage/index.tsx
index 5e1a95ca..903b7dce 100644
--- a/src/pages/secondary/ProfilePage/index.tsx
+++ b/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
(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,90 +92,97 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
const { banner, username, about, avatar, pubkey, website, lightningAddress } = profile
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- {isSelf ? (
-
- ) : (
- <>
- {!!lightningAddress &&
}
-
- >
- )}
-
-
-
-
{username}
- {isFollowingYou && (
-
- {t('Follows you')}
+
+
+
+ {isSelf ? (
+
+ ) : (
+ <>
+ {!!lightningAddress &&
}
+
+ >
+ )}
+
+
+
+
{username}
+ {isFollowingYou && (
+
+ {t('Follows you')}
+
+ )}
+
+
+ {lightningAddress && (
+
)}
-
-
- {lightningAddress && (
-
-
-
{lightningAddress}
+
- )}
-
-
-
-
- {website && (
-
- )}
-
-
-
- {isSelf && (
-
- {mutePubkeys.length}
- {t('Muted')}
-
+
+
+
+ {website && (
+
)}
+
+
+
+ {isSelf && (
+
+ {mutePubkeys.length}
+ {t('Muted')}
+
+ )}
+
-
+
)
})