fix: scroll to top when route change

src/app/(home)/page.tsx

@@ -1,13 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
-import React, {
-  createElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react'
+import React, { createElement, forwardRef, useCallback, useRef } from 'react'
 import clsx from 'clsx'
 import { m, useInView } from 'framer-motion'
 import Link from 'next/link'
@@ -34,7 +28,6 @@ import { clsxm } from '~/lib/helper'
 import { noopObj } from '~/lib/noop'
 import { apiClient } from '~/lib/request'
 import { routeBuilder, Routes } from '~/lib/route-builder'
-import { springScrollToTop } from '~/lib/scroller'
 import {
   useAggregationSelector,
   useAppConfigSelector,
@@ -71,10 +64,6 @@ const Screen = forwardRef<
 Screen.displayName = 'Screen'
 
 export default function Home() {
-  useEffect(() => {
-    if (isDev) return
-    springScrollToTop()
-  }, [])
   return (
     <div>
       <Welcome />

src/app/layout.tsx

@@ -9,6 +9,7 @@ import { ClerkProvider } from '@clerk/nextjs'
 
 import PKG from '~/../package.json'
 import { HydrationEndDetector } from '~/components/common/HydrationEndDetector'
+import { ScrollTop } from '~/components/common/ScrollTop'
 import { Root } from '~/components/layout/root/Root'
 import { SearchPanelWithHotKey } from '~/components/widgets/shared/SearchFAB'
 import { TocAutoScroll } from '~/components/widgets/toc/TocAutoScroll'
@@ -141,6 +142,7 @@ export default async function RootLayout(props: Props) {
             <Analyze />
           </Providers>
           <ToastContainer />
+          <ScrollTop />
         </body>
       </html>
       <Analytics />

src/app/notes/[id]/pageImpl.tsx

@@ -4,7 +4,6 @@
 import type { NoteModel } from '@mx-space/api-client'
 
 import { ClientOnly } from '~/components/common/ClientOnly'
-import { ScrollTop } from '~/components/common/ScrollTop'
 import {
   NoteActionAside,
   NoteFooterNavigationBarForMobile,
@@ -38,8 +37,6 @@ import {
 const NotePage = function (props: NoteModel) {
   return (
     <>
-      <ScrollTop key={props.id} />
-
       <NoteHeaderMetaInfoSetting />
       <IndentArticleContainer>
         <header>

src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx

@@ -1,7 +1,6 @@
 import type { PostModel } from '@mx-space/api-client'
 
 import { ClientOnly } from '~/components/common/ClientOnly'
-import { ScrollTop } from '~/components/common/ScrollTop'
 import {
   PostActionAside,
   PostCopyright,
@@ -36,7 +35,7 @@ const PostPage = (props: PostModel) => {
 
   return (
     <div className="relative w-full min-w-0">
-      <ScrollTop key={id} /> <HeaderMetaInfoSetting />
+      <HeaderMetaInfoSetting />
       <article className="prose">
         <header className="mb-8">
           <PostTitle />

src/app/thinking/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import clsx from 'clsx'
 import { stagger, useAnimate } from 'framer-motion'
 import { produce } from 'immer'
@@ -29,7 +29,6 @@ import { usePrevious } from '~/hooks/common/use-previous'
 import { sample } from '~/lib/_'
 import { preventDefault } from '~/lib/dom'
 import { apiClient } from '~/lib/request'
-import { springScrollToTop } from '~/lib/scroller'
 import { toast } from '~/lib/toast'
 import { urlBuilder } from '~/lib/url-builder'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
@@ -38,9 +37,6 @@ import { useModalStack } from '~/providers/root/modal-stack-provider'
 import { FETCH_SIZE, QUERY_KEY } from './constants'
 
 export default function Page() {
-  useLayoutEffect(() => {
-    springScrollToTop()
-  }, [])
   return (
     <div>
       <header className="prose">

src/components/common/ScrollTop.tsx

@@ -1,12 +1,16 @@
 'use client'
 
-import { useEffect } from 'react'
+import { memo, useEffect } from 'react'
+import { usePathname } from 'next/navigation'
 
 import { springScrollToTop } from '~/lib/scroller'
 
-export const ScrollTop = () => {
+export const ScrollTop = memo(() => {
+  const pathname = usePathname()
   useEffect(() => {
     springScrollToTop()
-  }, [])
+  }, [pathname])
   return null
-}
+})
+
+ScrollTop.displayName = 'ScrollTop'

src/components/layout/container/Paper.tsx

@@ -15,6 +15,73 @@ export const Paper: Component<{
       )}
     >
       {children}
+
+      {/* <svg
+        className="paper absolute bottom-0 right-0 rotate-180 text-zinc-200/80 dark:text-neutral-800"
+        xmlns="http://www.w3.org/2000/svg"
+        width="70"
+        height="70"
+        viewBox="0 0 70 70"
+      >
+        <g mask="url(#mask-0.12140810982892192)">
+          <path
+            fill="black"
+            fillOpacity="0.3"
+            filter="url(#blur-0.12140810982892192)"
+            d="M0,0L0,70L70,0Z"
+            className="__web-inspector-hide-shortcut__"
+          />
+          <path
+            fill="currentColor"
+            d="M35,30.333333333333332C35,30.333333333333332,9.666666666666666,33,-2,44.666666666666664L46.666666666666664,0C33,9.666666666666666,35,30.333333333333332,35,30.333333333333332Z"
+            className="__web-inspector-hide-shortcut__"
+          />
+          <path
+            fill="url(#gradient-0.12140810982892192)"
+            d="M35,30.333333333333332C35,30.333333333333332,9.666666666666666,33,-2,44.666666666666664L46.666666666666664,0C33,9.666666666666666,35,30.333333333333332,35,30.333333333333332Z"
+            className="__web-inspector-hide-shortcut__"
+          />
+        </g>
+        <mask id="mask-0.12140810982892192">
+          <path
+            fill="white"
+            d="M0,60.666666666666664C0,46.666666666666664,0,46.666666666666664,23.333333333333332,23.333333333333332C46.666666666666664,0,46.666666666666664,0,60.666666666666664,0L140,0L140,140L0,140L0,60.666666666666664"
+          />
+        </mask>
+        <defs>
+          <linearGradient
+            id="gradient-0.12140810982892192"
+            x1="0.48"
+            x2="0.6"
+            y1="0.45"
+            y2="0.6"
+          >
+            <stop offset="0%" stopColor="#ffffff60" />
+            <stop offset="100%" stopColor="currentColor" />
+          </linearGradient>
+          <filter
+            id="blur-0.12140810982892192"
+            x="-58"
+            y="-45.9995"
+            width="140"
+            height="140"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="14"
+              result="effect1_foregroundBlur_221_5067"
+            />
+          </filter>
+        </defs>
+      </svg> */}
     </As>
   )
 }