From 23bf7fd00500c3e5db860427ef3383d90532a61c Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 26 Jan 2025 16:28:47 +0800
Subject: [PATCH] feat: scroll to top when jumping to the current page

---
 src/PageManager.tsx                           |  64 +++++++---
 .../BottomNavigationBarItem.tsx               |   3 +-
 src/components/Sidebar/SidebarItem.tsx        |   3 +-
 src/layouts/PrimaryPageLayout/index.tsx       |   7 +-
 src/layouts/SecondaryPageLayout/index.tsx     | 118 +++++++++++-------
 src/pages/primary/MePage/index.tsx            |  12 +-
 src/pages/primary/NoteListPage/index.tsx      |  12 +-
 .../primary/NotificationListPage/index.tsx    |   8 +-
 .../secondary/FollowingListPage/index.tsx     |   9 +-
 src/pages/secondary/HomePage/index.tsx        |   9 +-
 src/pages/secondary/LoadingPage/index.tsx     |   9 +-
 src/pages/secondary/MuteListPage/index.tsx    |   9 +-
 src/pages/secondary/NotFoundPage/index.tsx    |   9 +-
 src/pages/secondary/NoteListPage/index.tsx    |  10 +-
 src/pages/secondary/NotePage/index.tsx        |  14 ++-
 .../OthersRelaySettingsPage/index.tsx         |   8 +-
 .../secondary/ProfileEditorPage/index.tsx     |  10 +-
 src/pages/secondary/ProfileListPage/index.tsx |  10 +-
 src/pages/secondary/ProfilePage/index.tsx     |  12 +-
 src/pages/secondary/RelayPage/index.tsx       |  11 +-
 .../secondary/RelaySettingsPage/index.tsx     |  10 +-
 src/pages/secondary/SettingsPage/index.tsx    |   8 +-
 src/types.ts                                  |   2 +
 23 files changed, 235 insertions(+), 132 deletions(-)

diff --git a/src/PageManager.tsx b/src/PageManager.tsx
index 5922cdec..b8b5af9a 100644
--- a/src/PageManager.tsx
+++ b/src/PageManager.tsx
@@ -4,7 +4,17 @@ import { Separator } from '@/components/ui/separator'
 import { cn } from '@/lib/utils'
 import NoteListPage from '@/pages/primary/NoteListPage'
 import HomePage from '@/pages/secondary/HomePage'
-import { cloneElement, createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { TPageRef } from '@/types'
+import {
+  cloneElement,
+  createContext,
+  createRef,
+  ReactNode,
+  RefObject,
+  useContext,
+  useEffect,
+  useState
+} from 'react'
 import MePage from './pages/primary/MePage'
 import NotificationListPage from './pages/primary/NotificationListPage'
 import { useScreenSize } from './providers/ScreenSizeProvider'
@@ -26,13 +36,20 @@ type TSecondaryPageContext = {
 type TStackItem = {
   index: number
   url: string
-  component: React.ReactNode | null
+  component: React.ReactElement | null
+  ref: RefObject<TPageRef> | null
+}
+
+const PRIMARY_PAGE_REF_MAP = {
+  home: createRef<TPageRef>(),
+  notifications: createRef<TPageRef>(),
+  me: createRef<TPageRef>()
 }
 
 const PRIMARY_PAGE_MAP = {
-  home: <NoteListPage />,
-  notifications: <NotificationListPage />,
-  me: <MePage />
+  home: <NoteListPage ref={PRIMARY_PAGE_REF_MAP.home} />,
+  notifications: <NotificationListPage ref={PRIMARY_PAGE_REF_MAP.notifications} />,
+  me: <MePage ref={PRIMARY_PAGE_REF_MAP.me} />
 }
 
 const PrimaryPageContext = createContext<TPrimaryPageContext | undefined>(undefined)
@@ -111,13 +128,22 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
         const topItem = newStack[newStack.length - 1] as TStackItem | undefined
         if (!topItem) {
           // Create a new stack item if it's not exist (e.g. when the user refreshes the page, the stack will be empty)
-          const newComponent = findAndCreateComponent(state.url, state.index)
-          if (newComponent) {
-            newStack.push({ index: state.index, url: state.url, component: newComponent })
+          const { component, ref } = findAndCreateComponent(state.url, state.index)
+          if (component) {
+            newStack.push({
+              index: state.index,
+              url: state.url,
+              component,
+              ref
+            })
           }
         } else if (!topItem.component) {
           // Load the component if it's not cached
-          topItem.component = findAndCreateComponent(topItem.url, state.index)
+          const { component, ref } = findAndCreateComponent(topItem.url, state.index)
+          if (component) {
+            topItem.component = component
+            topItem.ref = ref
+          }
         }
         if (newStack.length === 0) {
           window.history.replaceState(null, '', '/')
@@ -139,6 +165,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
       setPrimaryPages((prev) => [...prev, { name: page, element: PRIMARY_PAGE_MAP[page] }])
     }
     setCurrentPrimaryPage(page)
+    PRIMARY_PAGE_REF_MAP[page].current?.scrollToTop()
     if (isSmallScreen) {
       clearSecondaryPages()
     }
@@ -146,7 +173,13 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
 
   const pushSecondaryPage = (url: string, index?: number) => {
     setSecondaryStack((prevStack) => {
-      if (isCurrentPage(prevStack, url)) return prevStack
+      if (isCurrentPage(prevStack, url)) {
+        const currentItem = prevStack[prevStack.length - 1]
+        if (currentItem?.ref?.current) {
+          currentItem.ref.current.scrollToTop()
+        }
+        return prevStack
+      }
 
       const { newStack, newItem } = pushNewPageToStack(prevStack, url, maxStackSize, index)
       if (newItem) {
@@ -302,10 +335,11 @@ function findAndCreateComponent(url: string, index: number) {
     const match = matcher(path)
     if (!match) continue
 
-    if (!element) return null
-    return cloneElement(element, { ...match.params, index } as any)
+    if (!element) return {}
+    const ref = createRef<TPageRef>()
+    return { component: cloneElement(element, { ...match.params, index, ref } as any), ref }
   }
-  return null
+  return {}
 }
 
 function pushNewPageToStack(
@@ -317,10 +351,10 @@ function pushNewPageToStack(
   const currentItem = stack[stack.length - 1]
   const currentIndex = specificIndex ?? (currentItem ? currentItem.index + 1 : 0)
 
-  const component = findAndCreateComponent(url, currentIndex)
+  const { component, ref } = findAndCreateComponent(url, currentIndex)
   if (!component) return { newStack: stack, newItem: null }
 
-  const newItem = { component, url, index: currentIndex }
+  const newItem = { component, ref, url, index: currentIndex }
   const newStack = [...stack, newItem]
   const lastCachedIndex = newStack.findIndex((stack) => stack.component)
   // Clear the oldest cached component if there are too many cached components
diff --git a/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx b/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx
index dce83d32..1ae8d428 100644
--- a/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx
+++ b/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx
@@ -15,9 +15,8 @@ export default function BottomNavigationBarItem({
     <Button
       className={cn(
         'flex shadow-none items-center bg-transparent w-full h-12 xl:w-full xl:h-auto p-3 m-0 xl:py-2 xl:px-4 rounded-lg xl:justify-start text-lg font-semibold [&_svg]:size-full xl:[&_svg]:size-4',
-        active && 'text-primary disabled:opacity-100'
+        active && 'text-primary hover:text-primary'
       )}
-      disabled={active}
       variant="ghost"
       onClick={onClick}
     >
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index 61e305e3..9aca743c 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -13,10 +13,9 @@ const SidebarItem = forwardRef<
     <Button
       className={cn(
         'flex shadow-none items-center bg-transparent w-12 h-12 xl:w-full xl:h-auto p-3 m-0 xl:py-2 xl:px-4 rounded-lg xl:justify-start gap-4 text-lg font-semibold [&_svg]:size-full xl:[&_svg]:size-4',
-        active && 'text-primary disabled:opacity-100',
+        active && 'text-primary hover:text-primary',
         className
       )}
-      disabled={active}
       variant="ghost"
       title={t(title)}
       ref={ref}
diff --git a/src/layouts/PrimaryPageLayout/index.tsx b/src/layouts/PrimaryPageLayout/index.tsx
index dd1c2703..99c14c4e 100644
--- a/src/layouts/PrimaryPageLayout/index.tsx
+++ b/src/layouts/PrimaryPageLayout/index.tsx
@@ -30,11 +30,10 @@ const PrimaryPageLayout = forwardRef(
       ref,
       () => ({
         scrollToTop: () => {
-          if (isSmallScreen) {
-            window.scrollTo({ top: 0 })
-            return
+          if (scrollAreaRef.current) {
+            return scrollAreaRef.current.scrollTo({ top: 0, behavior: 'smooth' })
           }
-          scrollAreaRef.current?.scrollTo({ top: 0 })
+          window.scrollTo({ top: 0, behavior: 'smooth' })
         }
       }),
       []
diff --git a/src/layouts/SecondaryPageLayout/index.tsx b/src/layouts/SecondaryPageLayout/index.tsx
index eb670a6f..36c6fbe9 100644
--- a/src/layouts/SecondaryPageLayout/index.tsx
+++ b/src/layouts/SecondaryPageLayout/index.tsx
@@ -6,41 +6,78 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { useSecondaryPage } from '@/PageManager'
 import { DeepBrowsingProvider } from '@/providers/DeepBrowsingProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
-import { useEffect, useRef } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 
-export default function SecondaryPageLayout({
-  children,
-  index,
-  title,
-  controls,
-  hideBackButton = false,
-  displayScrollToTopButton = false
-}: {
-  children?: React.ReactNode
-  index?: number
-  title?: React.ReactNode
-  controls?: React.ReactNode
-  hideBackButton?: boolean
-  displayScrollToTopButton?: boolean
-}): JSX.Element {
-  const scrollAreaRef = useRef<HTMLDivElement>(null)
-  const { isSmallScreen } = useScreenSize()
-  const { currentIndex } = useSecondaryPage()
+const SecondaryPageLayout = forwardRef(
+  (
+    {
+      children,
+      index,
+      title,
+      controls,
+      hideBackButton = false,
+      displayScrollToTopButton = false
+    }: {
+      children?: React.ReactNode
+      index?: number
+      title?: React.ReactNode
+      controls?: React.ReactNode
+      hideBackButton?: boolean
+      displayScrollToTopButton?: boolean
+    },
+    ref
+  ) => {
+    const scrollAreaRef = useRef<HTMLDivElement>(null)
+    const { isSmallScreen } = useScreenSize()
+    const { currentIndex } = useSecondaryPage()
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        scrollToTop: () => {
+          if (scrollAreaRef.current) {
+            return scrollAreaRef.current.scrollTo({ top: 0, behavior: 'smooth' })
+          }
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }
+      }),
+      []
+    )
+
+    useEffect(() => {
+      if (isSmallScreen) {
+        window.scrollTo({ top: 0 })
+        return
+      }
+    }, [])
 
-  useEffect(() => {
     if (isSmallScreen) {
-      window.scrollTo({ top: 0 })
-      return
+      return (
+        <DeepBrowsingProvider active={currentIndex === index}>
+          <div
+            style={{
+              paddingBottom: 'calc(env(safe-area-inset-bottom) + 3rem)'
+            }}
+          >
+            <SecondaryPageTitlebar
+              title={title}
+              controls={controls}
+              hideBackButton={hideBackButton}
+            />
+            {children}
+            {displayScrollToTopButton && <ScrollToTopButton />}
+            <BottomNavigationBar />
+          </div>
+        </DeepBrowsingProvider>
+      )
     }
-  }, [])
 
-  if (isSmallScreen) {
     return (
-      <DeepBrowsingProvider active={currentIndex === index}>
-        <div
-          style={{
-            paddingBottom: 'calc(env(safe-area-inset-bottom) + 3rem)'
-          }}
+      <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
+        <ScrollArea
+          className="h-screen overflow-auto"
+          scrollBarClassName="sm:z-50"
+          ref={scrollAreaRef}
         >
           <SecondaryPageTitlebar
             title={title}
@@ -48,27 +85,14 @@ export default function SecondaryPageLayout({
             hideBackButton={hideBackButton}
           />
           {children}
-          {displayScrollToTopButton && <ScrollToTopButton />}
-          <BottomNavigationBar />
-        </div>
+        </ScrollArea>
+        {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
       </DeepBrowsingProvider>
     )
   }
-
-  return (
-    <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
-      <ScrollArea
-        className="h-screen overflow-auto"
-        scrollBarClassName="sm:z-50"
-        ref={scrollAreaRef}
-      >
-        <SecondaryPageTitlebar title={title} controls={controls} hideBackButton={hideBackButton} />
-        {children}
-      </ScrollArea>
-      {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
-    </DeepBrowsingProvider>
-  )
-}
+)
+SecondaryPageLayout.displayName = 'SecondaryPageLayout'
+export default SecondaryPageLayout
 
 export function SecondaryPageTitlebar({
   title,
diff --git a/src/pages/primary/MePage/index.tsx b/src/pages/primary/MePage/index.tsx
index e3ced1e7..98bf0d63 100644
--- a/src/pages/primary/MePage/index.tsx
+++ b/src/pages/primary/MePage/index.tsx
@@ -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()
diff --git a/src/pages/primary/NoteListPage/index.tsx b/src/pages/primary/NoteListPage/index.tsx
index 33e977d2..d92551f5 100644
--- a/src/pages/primary/NoteListPage/index.tsx
+++ b/src/pages/primary/NoteListPage/index.tsx
@@ -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 (
diff --git a/src/pages/primary/NotificationListPage/index.tsx b/src/pages/primary/NotificationListPage/index.tsx
index 83242cbd..e3f0bde7 100644
--- a/src/pages/primary/NotificationListPage/index.tsx
+++ b/src/pages/primary/NotificationListPage/index.tsx
@@ -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()
diff --git a/src/pages/secondary/FollowingListPage/index.tsx b/src/pages/secondary/FollowingListPage/index.tsx
index 185e101c..ef2635dd 100644
--- a/src/pages/secondary/FollowingListPage/index.tsx
+++ b/src/pages/secondary/FollowingListPage/index.tsx
@@ -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
diff --git a/src/pages/secondary/HomePage/index.tsx b/src/pages/secondary/HomePage/index.tsx
index c07acde8..55d4f17c 100644
--- a/src/pages/secondary/HomePage/index.tsx
+++ b/src/pages/secondary/HomePage/index.tsx
@@ -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
diff --git a/src/pages/secondary/LoadingPage/index.tsx b/src/pages/secondary/LoadingPage/index.tsx
index 8151f65c..abc5edba 100644
--- a/src/pages/secondary/LoadingPage/index.tsx
+++ b/src/pages/secondary/LoadingPage/index.tsx
@@ -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
diff --git a/src/pages/secondary/MuteListPage/index.tsx b/src/pages/secondary/MuteListPage/index.tsx
index ce4b392f..a447c29a 100644
--- a/src/pages/secondary/MuteListPage/index.tsx
+++ b/src/pages/secondary/MuteListPage/index.tsx
@@ -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)
diff --git a/src/pages/secondary/NotFoundPage/index.tsx b/src/pages/secondary/NotFoundPage/index.tsx
index 70d645a0..61416e13 100644
--- a/src/pages/secondary/NotFoundPage/index.tsx
+++ b/src/pages/secondary/NotFoundPage/index.tsx
@@ -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
diff --git a/src/pages/secondary/NoteListPage/index.tsx b/src/pages/secondary/NoteListPage/index.tsx
index 8987eeae..12e11b85 100644
--- a/src/pages/secondary/NoteListPage/index.tsx
+++ b/src/pages/secondary/NoteListPage/index.tsx
@@ -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
diff --git a/src/pages/secondary/NotePage/index.tsx b/src/pages/secondary/NotePage/index.tsx
index b9a42301..66cd2a9e 100644
--- a/src/pages/secondary/NotePage/index.tsx
+++ b/src/pages/secondary/NotePage/index.tsx
@@ -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()
diff --git a/src/pages/secondary/OthersRelaySettingsPage/index.tsx b/src/pages/secondary/OthersRelaySettingsPage/index.tsx
index 9f95dc7d..bececd92 100644
--- a/src/pages/secondary/OthersRelaySettingsPage/index.tsx
+++ b/src/pages/secondary/OthersRelaySettingsPage/index.tsx
@@ -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
diff --git a/src/pages/secondary/ProfileEditorPage/index.tsx b/src/pages/secondary/ProfileEditorPage/index.tsx
index a616bcca..acf59e1d 100644
--- a/src/pages/secondary/ProfileEditorPage/index.tsx
+++ b/src/pages/secondary/ProfileEditorPage/index.tsx
@@ -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>
diff --git a/src/pages/secondary/ProfileListPage/index.tsx b/src/pages/secondary/ProfileListPage/index.tsx
index 15a1b9e4..5907c4f7 100644
--- a/src/pages/secondary/ProfileListPage/index.tsx
+++ b/src/pages/secondary/ProfileListPage/index.tsx
@@ -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
diff --git a/src/pages/secondary/ProfilePage/index.tsx b/src/pages/secondary/ProfilePage/index.tsx
index bd59b230..421f0269 100644
--- a/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/pages/secondary/ProfilePage/index.tsx
@@ -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
diff --git a/src/pages/secondary/RelayPage/index.tsx b/src/pages/secondary/RelayPage/index.tsx
index db631728..47704247 100644
--- a/src/pages/secondary/RelayPage/index.tsx
+++ b/src/pages/secondary/RelayPage/index.tsx
@@ -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)
diff --git a/src/pages/secondary/RelaySettingsPage/index.tsx b/src/pages/secondary/RelaySettingsPage/index.tsx
index 2f7a3413..d3c4a95b 100644
--- a/src/pages/secondary/RelaySettingsPage/index.tsx
+++ b/src/pages/secondary/RelaySettingsPage/index.tsx
@@ -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
diff --git a/src/pages/secondary/SettingsPage/index.tsx b/src/pages/secondary/SettingsPage/index.tsx
index 7d3276d9..a7653e9c 100644
--- a/src/pages/secondary/SettingsPage/index.tsx
+++ b/src/pages/secondary/SettingsPage/index.tsx
@@ -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) => {
diff --git a/src/types.ts b/src/types.ts
index e83a9cd0..10bcdffe 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -95,3 +95,5 @@ export type TLanguage = 'en' | 'zh'
 export type TImageInfo = { url: string; blurHash?: string; dim?: { width: number; height: number } }
 
 export type TNoteListMode = 'posts' | 'postsAndReplies' | 'pictures'
+
+export type TPageRef = { scrollToTop: () => void }