feat: scroll to top when switching explore tabs

This commit is contained in:
codytseng 2025-11-04 21:53:15 +08:00
parent 579385ce3d
commit 158d875123

View file

@ -10,7 +10,7 @@ import { useUserTrust } from '@/providers/UserTrustProvider'
import { TPageRef } from '@/types'
import { Compass, Plus } from 'lucide-react'
import { NostrEvent } from 'nostr-tools'
import { forwardRef, useCallback, useMemo, useState } from 'react'
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
type TExploreTabs = 'following' | 'explore' | 'reviews'
@ -18,6 +18,7 @@ type TExploreTabs = 'following' | 'explore' | 'reviews'
const ExplorePage = forwardRef<TPageRef>((_, ref) => {
const { hideUntrustedNotes } = useUserTrust()
const [tab, setTab] = useState<TExploreTabs>('explore')
const topRef = useRef<HTMLDivElement | null>(null)
const relayReviewFilterFn = useCallback((evt: NostrEvent) => {
const d = getReplaceableEventIdentifier(evt)
@ -61,8 +62,12 @@ const ExplorePage = forwardRef<TPageRef>((_, ref) => {
{ value: 'reviews', label: 'Reviews' },
{ value: 'following', label: "Following's Favorites" }
]}
onTabChange={(tab) => setTab(tab as TExploreTabs)}
onTabChange={(tab) => {
setTab(tab as TExploreTabs)
topRef.current?.scrollIntoView({ behavior: 'instant' })
}}
/>
<div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
{content}
</PrimaryPageLayout>
)