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>
  )
 }