feat: ui improve

Signed-off-by: Innei <[email protected]>

next.config.mjs

@@ -46,7 +46,7 @@ let nextConfig = {
         sentryWebpackPlugin({
           org: 'inneis-site',
 
-          project: 'Shiro',
+          project: 'springtide',
           authToken: process.env.SENTRY_AUTH_TOKEN,
         }),
       )

src/app/(note-topic)/notes/(topic-detail)/topics/[slug]/page.tsx

@@ -8,6 +8,7 @@ import { TimelineList } from '~/components/ui/list/TimelineList'
 import { Loading } from '~/components/ui/loading'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { LoadMoreIndicator } from '~/components/widgets/shared/LoadMoreIndicator'
 import { routeBuilder, Routes } from '~/lib/route-builder'
 import { apiClient } from '~/utils/request'
 
@@ -23,6 +24,7 @@ export default function Page() {
   const {
     data: notes,
     isLoading,
+    hasNextPage,
     fetchNextPage,
   } = useInfiniteQuery({
     queryKey: ['topicId', data?.id],
@@ -64,7 +66,6 @@ export default function Page() {
                 >
                   <Link
                     prefetch={false}
-                    target="_blank"
                     href={routeBuilder(Routes.Note, {
                       id: child.nid,
                     })}
@@ -81,6 +82,8 @@ export default function Page() {
               )
             }),
           )}
+
+          {hasNextPage && <LoadMoreIndicator onClick={fetchNextPage} />}
         </TimelineList>
       </main>
     </BottomToUpSoftScaleTransitionView>

src/app/(note-topic)/notes/topics/page.tsx

@@ -37,7 +37,6 @@ export default function Page() {
               >
                 <Link
                   prefetch={false}
-                  target="_blank"
                   href={routeBuilder(Routes.NoteTopic, {
                     slug: item.slug,
                   })}

src/components/layout/header/Header.tsx

@@ -16,7 +16,6 @@ import { HeaderDataConfigureProvider } from './internal/HeaderDataConfigureProvi
 import { HeaderDrawerButton } from './internal/HeaderDrawerButton'
 import { HeaderMeta } from './internal/HeaderMeta'
 import { HeaderWithShadow } from './internal/HeaderWithShadow'
-import { SiteOwnerAvatar } from './internal/SiteOwnerAvatar'
 import { UserAuth } from './internal/UserAuth'
 
 export const Header = () => {
@@ -42,7 +41,7 @@ const MemoedHeader = memo(() => {
 
         <HeaderLogoArea>
           <AnimatedLogo />
-          <SiteOwnerAvatar className="absolute bottom-[10px] right-[2px] hidden lg:inline-block" />
+          {/* <SiteOwnerAvatar className="absolute bottom-[10px] right-[2px] hidden lg:inline-block" /> */}
           <OnlyMobile>
             <HeaderMeta />
           </OnlyMobile>

src/components/layout/header/internal/AnimatedLogo.tsx

@@ -9,7 +9,7 @@ import { Routes } from '~/lib/route-builder'
 import { toast } from '~/lib/toast'
 
 import { useHeaderMetaShouldShow } from './hooks'
-import { Logo } from './Logo'
+import { SiteOwnerAvatar } from './SiteOwnerAvatar'
 
 const TapableLogo = () => {
   const router = useRouter()
@@ -31,7 +31,12 @@ const TapableLogo = () => {
       )
     },
   )
-  return <Logo onClick={fn} className="cursor-pointer" />
+  // return <Logo onClick={fn} className="cursor-pointer" />
+  return (
+    <button onClick={fn}>
+      <SiteOwnerAvatar className="cursor-pointer" />
+    </button>
+  )
 }
 export const AnimatedLogo = () => {
   const shouldShowMeta = useHeaderMetaShouldShow()
@@ -47,7 +52,7 @@ export const AnimatedLogo = () => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className="scale-75"
+          // className="scale-75"
         >
           <TapableLogo />
         </m.div>

src/components/layout/header/internal/HeaderArea.tsx

@@ -8,7 +8,11 @@ import styles from './grid.module.css'
 export const HeaderLogoArea: Component = ({ children }) => {
   return (
     <div className={clsxm('relative', styles['header--grid__logo'])}>
-      <div className={clsxm('relative flex h-full w-full justify-center')}>
+      <div
+        className={clsxm(
+          'relative flex h-full w-full items-center justify-center',
+        )}
+      >
         {children}
       </div>
     </div>

src/components/widgets/comment/Comments.tsx

@@ -2,14 +2,13 @@
 
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { memo, useMemo } from 'react'
-import { useInView } from 'react-intersection-observer'
 import type { FC } from 'react'
 import type { CommentBaseProps } from './types'
 
-import { Loading } from '~/components/ui/loading'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { apiClient } from '~/utils/request'
 
+import { LoadMoreIndicator } from '../shared/LoadMoreIndicator'
 import { Comment } from './Comment'
 import { CommentBoxProvider } from './CommentBox/providers'
 import { CommentSkeleton } from './CommentSkeleton'
@@ -76,19 +75,3 @@ const CommentListItem: FC<{ comment: any; refId: string; index: number }> =
       </BottomToUpSoftScaleTransitionView>
     )
   })
-
-const LoadMoreIndicator: FC<{
-  onClick: () => void
-}> = ({ onClick }) => {
-  const { ref } = useInView({
-    rootMargin: '1px',
-    onChange(inView) {
-      if (inView) onClick()
-    },
-  })
-  return (
-    <div ref={ref}>
-      <Loading />
-    </div>
-  )
-}

src/components/widgets/shared/LoadMoreIndicator.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useInView } from 'react-intersection-observer'
+import type { FC } from 'react'
+
+import { Loading } from '~/components/ui/loading'
+
+export const LoadMoreIndicator: FC<{
+  onClick: () => void
+}> = ({ onClick }) => {
+  const { ref } = useInView({
+    rootMargin: '1px',
+    onChange(inView) {
+      if (inView) onClick()
+    },
+  })
+  return (
+    <div ref={ref}>
+      <Loading />
+    </div>
+  )
+}