mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: scroll to top when jumping to the current page

Browse Source
This commit is contained in:
codytseng
2025-01-26 16:28:47 +08:00
parent 82537f192b
commit 23bf7fd005
23 changed files with 235 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/primary/MePage/index.tsx
View File

@@ -13,10 +13,10 @@ import { cn } from '@/lib/utils'
import { useSecondaryPage } from '@/PageManager'
import { useNostr } from '@/providers/NostrProvider'
import { ArrowDownUp, ChevronRight, LogOut, Settings, UserRound } from 'lucide-react'
import { HTMLProps, useState } from 'react'
import { forwardRef, HTMLProps, useState } from 'react'
import { useTranslation } from 'react-i18next'
export default function MePage() {
const MePage = forwardRef((_, ref) => {
const { t } = useTranslation()
const { push } = useSecondaryPage()
const { pubkey } = useNostr()
@@ -25,7 +25,7 @@ export default function MePage() {
if (!pubkey) {
return (
<PrimaryPageLayout pageName="home" titlebar={<MePageTitlebar />}>
<PrimaryPageLayout ref={ref} pageName="home" titlebar={<MePageTitlebar />}>
<div className="flex flex-col p-4 gap-4 overflow-auto">
<AccountManager />
</div>
@@ -34,7 +34,7 @@ export default function MePage() {
}
return (
<PrimaryPageLayout pageName="home" titlebar={<MePageTitlebar />}>
<PrimaryPageLayout ref={ref} pageName="home" titlebar={<MePageTitlebar />}>
<div className="flex gap-4 items-center p-4">
<SimpleUserAvatar userId={pubkey} size="big" />
<div className="space-y-1">
@@ -71,7 +71,9 @@ export default function MePage() {
<LogoutDialog open={logoutDialogOpen} setOpen={setLogoutDialogOpen} />
</PrimaryPageLayout>
)
}
})
MePage.displayName = 'MePage'
export default MePage
function MePageTitlebar() {
const { push } = useSecondaryPage()

12
src/pages/primary/NoteListPage/index.tsx
View File

@@ -4,16 +4,18 @@ import { Button } from '@/components/ui/button'
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
import { useFeed } from '@/providers/FeedProvider'
import { useNostr } from '@/providers/NostrProvider'
import { useEffect, useRef } from 'react'
import { TPageRef } from '@/types'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import FeedButton from './FeedButton'
import SearchButton from './SearchButton'
export default function NoteListPage() {
const NoteListPage = forwardRef((_, ref) => {
const { t } = useTranslation()
const layoutRef = useRef<{ scrollToTop: () => void }>(null)
const layoutRef = useRef<TPageRef>(null)
const { pubkey, checkLogin } = useNostr()
const { feedType, relayUrls, isReady, filter } = useFeed()
useImperativeHandle(ref, () => layoutRef.current)
useEffect(() => {
if (layoutRef.current) {
@@ -46,7 +48,9 @@ export default function NoteListPage() {
{content}
</PrimaryPageLayout>
)
}
})
NoteListPage.displayName = 'NoteListPage'
export default NoteListPage
function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?: string[] }) {
return (

8
src/pages/primary/NotificationListPage/index.tsx
View File

@@ -1,11 +1,13 @@
import NotificationList from '@/components/NotificationList'
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
import { Bell } from 'lucide-react'
import { forwardRef } from 'react'
import { useTranslation } from 'react-i18next'
export default function NotificationListPage() {
const NotificationListPage = forwardRef((_, ref) => {
return (
<PrimaryPageLayout
ref={ref}
pageName="notifications"
titlebar={<NotificationListPageTitlebar />}
displayScrollToTopButton
@@ -15,7 +17,9 @@ export default function NotificationListPage() {
</div>
</PrimaryPageLayout>
)
}
})
NotificationListPage.displayName = 'NotificationListPage'
export default NotificationListPage
function NotificationListPageTitlebar() {
const { t } = useTranslation()

9
src/pages/secondary/FollowingListPage/index.tsx
View File

@@ -1,10 +1,10 @@
import UserItem from '@/components/UserItem'
import { useFetchFollowings, useFetchProfile } from '@/hooks'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { useEffect, useRef, useState } from 'react'
import { forwardRef, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
export default function FollowingListPage({ id, index }: { id?: string; index?: number }) {
const FollowingListPage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
const { t } = useTranslation()
const { profile } = useFetchProfile(id)
const { followings } = useFetchFollowings(profile?.pubkey)
@@ -45,6 +45,7 @@ export default function FollowingListPage({ id, index }: { id?: string; index?:
return (
<SecondaryPageLayout
ref={ref}
index={index}
title={
profile?.username
@@ -61,4 +62,6 @@ export default function FollowingListPage({ id, index }: { id?: string; index?:
</div>
</SecondaryPageLayout>
)
}
})
FollowingListPage.displayName = 'FollowingListPage'
export default FollowingListPage

9
src/pages/secondary/HomePage/index.tsx
View File

@@ -1,13 +1,16 @@
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { forwardRef } from 'react'
import { useTranslation } from 'react-i18next'
export default function HomePage({ index }: { index?: number }) {
const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
const { t } = useTranslation()
return (
<SecondaryPageLayout index={index} hideBackButton>
<SecondaryPageLayout ref={ref} index={index} hideBackButton>
<div className="text-muted-foreground w-full h-screen flex items-center justify-center">
{t('Welcome! 🥳')}
</div>
</SecondaryPageLayout>
)
}
})
HomePage.displayName = 'HomePage'
export default HomePage

9
src/pages/secondary/LoadingPage/index.tsx
View File

@@ -1,11 +1,14 @@
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { forwardRef } from 'react'
export default function LoadingPage({ title, index }: { title?: string; index?: number }) {
const LoadingPage = forwardRef(({ title, index }: { title?: string; index?: number }, ref) => {
return (
<SecondaryPageLayout index={index} title={title}>
<SecondaryPageLayout ref={ref} index={index} title={title}>
<div className="text-muted-foreground text-center">
<div>Loading...</div>
</div>
</SecondaryPageLayout>
)
}
})
LoadingPage.displayName = 'LoadingPage'
export default LoadingPage

9
src/pages/secondary/MuteListPage/index.tsx
View File

@@ -6,11 +6,11 @@ import { useFetchProfile } from '@/hooks'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { useMuteList } from '@/providers/MuteListProvider'
import { useNostr } from '@/providers/NostrProvider'
import { useEffect, useRef, useState } from 'react'
import { forwardRef, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import NotFoundPage from '../NotFoundPage'
export default function MuteListPage({ index }: { index?: number }) {
const MuteListPage = forwardRef(({ index }: { index?: number }, ref) => {
const { t } = useTranslation()
const { profile } = useNostr()
const { mutePubkeys } = useMuteList()
@@ -55,6 +55,7 @@ export default function MuteListPage({ index }: { index?: number }) {
return (
<SecondaryPageLayout
ref={ref}
index={index}
title={t("username's muted", { username: profile.username })}
displayScrollToTopButton
@@ -67,7 +68,9 @@ export default function MuteListPage({ index }: { index?: number }) {
</div>
</SecondaryPageLayout>
)
}
})
MuteListPage.displayName = 'MuteListPage'
export default MuteListPage
function UserItem({ pubkey }: { pubkey: string }) {
const { profile } = useFetchProfile(pubkey)

9
src/pages/secondary/NotFoundPage/index.tsx
View File

@@ -1,15 +1,18 @@
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { forwardRef } from 'react'
import { useTranslation } from 'react-i18next'
export default function NotFoundPage({ index }: { index?: number }) {
const NotFoundPage = forwardRef(({ index }: { index?: number }, ref) => {
const { t } = useTranslation()
return (
<SecondaryPageLayout index={index} hideBackButton>
<SecondaryPageLayout ref={ref} index={index} hideBackButton>
<div className="text-muted-foreground w-full h-full flex flex-col items-center justify-center gap-2">
<div>{t('Lost in the void')} 🌌</div>
<div>(404)</div>
</div>
</SecondaryPageLayout>
)
}
})
NotFoundPage.displayName = 'NotFoundPage'
export default NotFoundPage

10
src/pages/secondary/NoteListPage/index.tsx
View File

@@ -4,10 +4,10 @@ import { useFetchRelayInfos, useSearchParams } from '@/hooks'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { useFeed } from '@/providers/FeedProvider'
import { Filter } from 'nostr-tools'
import { useMemo } from 'react'
import { forwardRef, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
export default function NoteListPage({ index }: { index?: number }) {
const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
const { t } = useTranslation()
const { relayUrls } = useFeed()
const { searchableRelayUrls } = useFetchRelayInfos(relayUrls)
@@ -43,8 +43,10 @@ export default function NoteListPage({ index }: { index?: number }) {
}, [searchParams, JSON.stringify(relayUrls)])
return (
<SecondaryPageLayout index={index} title={title} displayScrollToTopButton>
<SecondaryPageLayout ref={ref} index={index} title={title} displayScrollToTopButton>
<NoteList key={title} filter={filter} relayUrls={urls} />
</SecondaryPageLayout>
)
}
})
NoteListPage.displayName = 'NoteListPage'
export default NoteListPage

14
src/pages/secondary/NotePage/index.tsx
View File

@@ -12,11 +12,11 @@ import { useFetchEvent } from '@/hooks'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { getParentEventId, getRootEventId, isPictureEvent } from '@/lib/event'
import { toNote } from '@/lib/link'
import { useMemo } from 'react'
import { forwardRef, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import NotFoundPage from '../NotFoundPage'
export default function NotePage({ id, index }: { id?: string; index?: number }) {
const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
const { t } = useTranslation()
const { event, isFetching } = useFetchEvent(id)
const parentEventId = useMemo(() => getParentEventId(event), [event])
@@ -24,7 +24,7 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
if (!event && isFetching) {
return (
<SecondaryPageLayout index={index} title={t('Note')}>
<SecondaryPageLayout ref={ref} index={index} title={t('Note')}>
<div className="px-4">
<Skeleton className="w-10 h-10 rounded-full" />
</div>
@@ -35,7 +35,7 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
if (isPictureEvent(event)) {
return (
<SecondaryPageLayout index={index} title={t('Note')} displayScrollToTopButton>
<SecondaryPageLayout ref={ref} index={index} title={t('Note')} displayScrollToTopButton>
<PictureNote key={`note-${event.id}`} event={event} fetchNoteStats />
<Separator className="mb-2 mt-4" />
<Nip22ReplyNoteList
@@ -48,7 +48,7 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
}
return (
<SecondaryPageLayout index={index} title={t('Note')} displayScrollToTopButton>
<SecondaryPageLayout ref={ref} index={index} title={t('Note')} displayScrollToTopButton>
<div className="px-4">
{rootEventId !== parentEventId && (
<ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
@@ -68,7 +68,9 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
)}
</SecondaryPageLayout>
)
}
})
NotePage.displayName = 'NotePage'
export default NotePage
function ParentNote({ eventId }: { eventId?: string }) {
const { push } = useSecondaryPage()

8
src/pages/secondary/OthersRelaySettingsPage/index.tsx
View File

@@ -1,9 +1,10 @@
import OthersRelayList from '@/components/OthersRelayList'
import { useFetchProfile } from '@/hooks'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { forwardRef } from 'react'
import { useTranslation } from 'react-i18next'
export default function RelaySettingsPage({ id, index }: { id?: string; index?: number }) {
const RelaySettingsPage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
const { t } = useTranslation()
const { profile } = useFetchProfile(id)
@@ -13,6 +14,7 @@ export default function RelaySettingsPage({ id, index }: { id?: string; index?:
return (
<SecondaryPageLayout
ref={ref}
index={index}
title={t("username's used relays", { username: profile.username })}
>
@@ -21,4 +23,6 @@ export default function RelaySettingsPage({ id, index }: { id?: string; index?:
</div>
</SecondaryPageLayout>
)
}
})
RelaySettingsPage.displayName = 'RelaySettingsPage'
export default RelaySettingsPage

10
src/pages/secondary/ProfileEditorPage/index.tsx
View File

@@ -11,10 +11,10 @@ import { generateImageByPubkey } from '@/lib/pubkey'
import { useSecondaryPage } from '@/PageManager'
import { useNostr } from '@/providers/NostrProvider'
import { Loader, Upload } from 'lucide-react'
import { useEffect, useMemo, useState } from 'react'
import { forwardRef, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
export default function ProfileEditorPage({ index }: { index?: number }) {
const ProfileEditorPage = forwardRef(({ index }: { index?: number }, ref) => {
const { t } = useTranslation()
const { pop } = useSecondaryPage()
const { account, profile, profileEvent, publish, updateProfileEvent } = useNostr()
@@ -98,7 +98,7 @@ export default function ProfileEditorPage({ index }: { index?: number }) {
)
return (
<SecondaryPageLayout index={index} title={profile.username} controls={controls}>
<SecondaryPageLayout ref={ref} index={index} title={profile.username} controls={controls}>
<div className="px-4">
<div className="relative bg-cover bg-center w-full aspect-[21/9] rounded-lg mb-2">
<Uploader
@@ -174,7 +174,9 @@ export default function ProfileEditorPage({ index }: { index?: number }) {
</div>
</SecondaryPageLayout>
)
}
})
ProfileEditorPage.displayName = 'ProfileEditorPage'
export default ProfileEditorPage
function ItemTitle({ children }: { children: React.ReactNode }) {
return <div className="text-sm font-semibold text-muted-foreground pl-3">{children}</div>

10
src/pages/secondary/ProfileListPage/index.tsx
View File

@@ -6,12 +6,12 @@ import { useFeed } from '@/providers/FeedProvider'
import client from '@/services/client.service'
import dayjs from 'dayjs'
import { Filter } from 'nostr-tools'
import { useEffect, useMemo, useRef, useState } from 'react'
import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
const LIMIT = 50
export default function ProfileListPage({ index }: { index?: number }) {
const ProfileListPage = forwardRef(({ index }: { index?: number }, ref) => {
const { t } = useTranslation()
const { searchParams } = useSearchParams()
const { relayUrls } = useFeed()
@@ -80,7 +80,7 @@ export default function ProfileListPage({ index }: { index?: number }) {
}
return (
<SecondaryPageLayout index={index} title={title} displayScrollToTopButton>
<SecondaryPageLayout ref={ref} index={index} title={title} displayScrollToTopButton>
<div className="space-y-2 px-4">
{Array.from(pubkeySet).map((pubkey, index) => (
<UserItem key={`${index}-${pubkey}`} pubkey={pubkey} />
@@ -89,4 +89,6 @@ export default function ProfileListPage({ index }: { index?: number }) {
</div>
</SecondaryPageLayout>
)
}
})
ProfileListPage.displayName = 'ProfileListPage'
export default ProfileListPage

12
src/pages/secondary/ProfilePage/index.tsx
View File

@@ -25,11 +25,11 @@ import { useFeed } from '@/providers/FeedProvider'
import { useFollowList } from '@/providers/FollowListProvider'
import { useMuteList } from '@/providers/MuteListProvider'
import { useNostr } from '@/providers/NostrProvider'
import { useMemo } from 'react'
import { forwardRef, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import NotFoundPage from '../NotFoundPage'
export default function ProfilePage({ id, index }: { id?: string; index?: number }) {
const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
const { t } = useTranslation()
const { push } = useSecondaryPage()
const { profile, isFetching } = useFetchProfile(id)
@@ -59,7 +59,7 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
if (!profile && isFetching) {
return (
<SecondaryPageLayout index={index}>
<SecondaryPageLayout index={index} ref={ref}>
<div className="px-4">
<div className="relative bg-cover bg-center w-full aspect-[21/9] rounded-lg mb-2">
<Skeleton className="w-full h-full object-cover rounded-lg" />
@@ -75,7 +75,7 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
const { banner, username, about, avatar, pubkey } = profile
return (
<SecondaryPageLayout index={index} title={username} displayScrollToTopButton>
<SecondaryPageLayout index={index} title={username} displayScrollToTopButton ref={ref}>
<div className="px-4">
<div className="relative bg-cover bg-center w-full aspect-[21/9] rounded-lg mb-2">
<ProfileBanner
@@ -151,4 +151,6 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
)}
</SecondaryPageLayout>
)
}
})
ProfilePage.displayName = 'ProfilePage'
export default ProfilePage

11
src/pages/secondary/RelayPage/index.tsx
View File

@@ -5,19 +5,20 @@ import { Button } from '@/components/ui/button'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { normalizeUrl, simplifyUrl } from '@/lib/url'
import { Check, Copy } from 'lucide-react'
import { useMemo, useState } from 'react'
import { forwardRef, useMemo, useState } from 'react'
import NotFoundPage from '../NotFoundPage'
export default function RelayPage({ url, index }: { url?: string; index?: number }) {
const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number }, ref) => {
const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
const title = useMemo(() => (url ? simplifyUrl(url) : undefined), [url])
if (!normalizedUrl) {
return <NotFoundPage />
return <NotFoundPage ref={ref} />
}
return (
<SecondaryPageLayout
ref={ref}
index={index}
title={title}
controls={<RelayPageControls url={normalizedUrl} />}
@@ -27,7 +28,9 @@ export default function RelayPage({ url, index }: { url?: string; index?: number
<NoteList relayUrls={[normalizedUrl]} />
</SecondaryPageLayout>
)
}
})
RelayPage.displayName = 'RelayPage'
export default RelayPage
function RelayPageControls({ url }: { url: string }) {
const [copied, setCopied] = useState(false)

10
src/pages/secondary/RelaySettingsPage/index.tsx
View File

@@ -2,10 +2,10 @@ import MailboxSetting from '@/components/MailboxSetting'
import RelaySetsSetting from '@/components/RelaySetsSetting'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { useEffect, useState } from 'react'
import { forwardRef, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
export default function RelaySettingsPage({ index }: { index?: number }) {
const RelaySettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
const { t } = useTranslation()
const [tabValue, setTabValue] = useState('relay-sets')
@@ -21,7 +21,7 @@ export default function RelaySettingsPage({ index }: { index?: number }) {
}, [])
return (
<SecondaryPageLayout index={index} title={t('Relay settings')}>
<SecondaryPageLayout ref={ref} index={index} title={t('Relay settings')}>
<Tabs value={tabValue} onValueChange={setTabValue} className="px-4 space-y-4">
<TabsList>
<TabsTrigger value="relay-sets">{t('Relay Sets')}</TabsTrigger>
@@ -36,4 +36,6 @@ export default function RelaySettingsPage({ index }: { index?: number }) {
</Tabs>
</SecondaryPageLayout>
)
}
})
RelaySettingsPage.displayName = 'RelaySettingsPage'
export default RelaySettingsPage

8
src/pages/secondary/SettingsPage/index.tsx
View File

@@ -12,7 +12,7 @@ import { Check, ChevronRight, Copy, Info, KeyRound, Languages, Server, SunMoon }
import { forwardRef, HTMLProps, useState } from 'react'
import { useTranslation } from 'react-i18next'
export default function SettingsPage({ index }: { index?: number }) {
const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
const { t, i18n } = useTranslation()
const { nsec, ncryptsec } = useNostr()
const { push } = useSecondaryPage()
@@ -27,7 +27,7 @@ export default function SettingsPage({ index }: { index?: number }) {
}
return (
<SecondaryPageLayout index={index} title={t('Settings')}>
<SecondaryPageLayout ref={ref} index={index} title={t('Settings')}>
<SettingItem>
<div className="flex items-center gap-4">
<Languages />
@@ -112,7 +112,9 @@ export default function SettingsPage({ index }: { index?: number }) {
</AboutInfoDialog>
</SecondaryPageLayout>
)
}
})
SettingsPage.displayName = 'SettingsPage'
export default SettingsPage
const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
({ children, className, ...props }, ref) => {