diff --git a/src/components/NoteList/index.tsx b/src/components/NoteList/index.tsx index f96e315c..b1847230 100644 --- a/src/components/NoteList/index.tsx +++ b/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 && ( diff --git a/src/components/ScrollToTopButton/index.tsx b/src/components/ScrollToTopButton/index.tsx index d3108af6..b66a70f0 100644 --- a/src/components/ScrollToTopButton/index.tsx +++ b/src/components/ScrollToTopButton/index.tsx @@ -26,7 +26,7 @@ export default function ScrollToTopButton({ return (
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 && ( -
- -
{lightningAddress}
+
+ +
- )} -
- - -
- - - - {website && ( - - )} -
- - - {isSelf && ( - - {mutePubkeys.length} -
{t('Muted')}
-
+ + + + {website && ( + )} +
+ + + {isSelf && ( + + {mutePubkeys.length} +
{t('Muted')}
+
+ )} +
- + ) })