feat: peek link

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

Author: Innei

src/app/timeline/page.tsx

@@ -1,13 +1,11 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
-import { memo, useCallback, useEffect } from 'react'
+import { memo, useEffect } from 'react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
-import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import type { TimelineData } from '@mx-space/api-client'
-import type { SyntheticEvent } from 'react'
 
 import { TimelineType } from '@mx-space/api-client'
 
@@ -17,13 +15,10 @@ import { NormalContainer } from '~/components/layout/container/Normal'
 import { Divider } from '~/components/ui/divider'
 import { TimelineList } from '~/components/ui/list/TimelineList'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
-import { NotePreview } from '~/components/widgets/peek/NotePreview'
-import { PeekModal } from '~/components/widgets/peek/PeekModal'
-import { PostPreview } from '~/components/widgets/peek/PostPreview'
+import { PeekLink } from '~/components/widgets/peek/PeekLink'
 import { TimelinProgress } from '~/components/widgets/timeline/TimelineProgress'
 import { apiClient } from '~/lib/request'
 import { springScrollToElement } from '~/lib/scroller'
-import { useModalStack } from '~/providers/root/modal-stack-provider'
 
 enum ArticleType {
   Post,
@@ -221,48 +216,7 @@ const Item = memo<{
 }>(({ item }) => {
   const router = useRouter()
   const isMobile = useIsMobile()
-  const { present } = useModalStack()
-
-  const handlePeek = useCallback(
-    (e: SyntheticEvent) => {
-      if (isMobile) return
-      if (item.type === ArticleType.Note) {
-        {
-          e.preventDefault()
-          present({
-            clickOutsideToDismiss: true,
-            title: 'Preview',
-            modalClassName: 'flex justify-center',
-            modalContainerClassName: 'flex justify-center',
-            CustomModalComponent: () => (
-              <PeekModal to={item.href}>
-                <NotePreview noteId={parseInt(item.href.split('/').pop()!)} />
-              </PeekModal>
-            ),
-            content: () => null,
-          })
-        }
-      } else if (item.type === ArticleType.Post) {
-        e.preventDefault()
-        const splitpath = item.href.split('/')
-        const slug = splitpath.pop()!
-        const category = splitpath.pop()!
-        present({
-          clickOutsideToDismiss: true,
-          title: 'Preview',
-          modalClassName: 'flex justify-center',
-          modalContainerClassName: 'flex justify-center',
-          CustomModalComponent: () => (
-            <PeekModal to={item.href}>
-              <PostPreview category={category} slug={slug} />
-            </PeekModal>
-          ),
-          content: () => null,
-        })
-      }
-    },
-    [isMobile],
-  )
+
   return (
     <li
       key={item.id}
@@ -276,14 +230,13 @@ const Item = memo<{
             day: '2-digit',
           }).format(item.date)}
         </span>
-        <Link
+        <PeekLink
           prefetch={false}
           href={item.href}
           className="min-w-0 truncate leading-6"
-          onClick={handlePeek}
         >
           <span className="min-w-0 truncate">{item.title}</span>
-        </Link>
+        </PeekLink>
         {item.important && (
           <SolidBookmark
             className="ml-2 cursor-pointer text-red-500"

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

@@ -76,6 +76,9 @@ export function Activity() {
       refetchInterval: 5000,
       retry: false,
       enabled: isEnabled,
+      meta: {
+        persist: false,
+      },
     },
   )
   const ownerName = useAggregationSelector((data) => data.user.name)

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

@@ -21,6 +21,9 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
       return !!data
     }, []),
     refetchInterval: 1000 * 60,
+    meta: {
+      persist: false,
+    },
   })
 
   const handleGoLive = useCallback((e: React.MouseEvent<HTMLDivElement>) => {

src/components/widgets/peek/PeekLink.tsx

@@ -0,0 +1,70 @@
+import { useCallback } from 'react'
+import Link from 'next/link'
+import type { LinkProps } from 'next/link'
+import type { FC, PropsWithChildren, SyntheticEvent } from 'react'
+
+import { useIsMobile } from '~/atoms'
+import { useModalStack } from '~/providers/root/modal-stack-provider'
+
+import { NotePreview } from './NotePreview'
+import { PeekModal } from './PeekModal'
+import { PostPreview } from './PostPreview'
+
+export const PeekLink: FC<
+  {
+    href: string
+  } & LinkProps &
+    PropsWithChildren &
+    React.AnchorHTMLAttributes<HTMLAnchorElement>
+> = (props) => {
+  const { href, children, ...rest } = props
+  const isMobile = useIsMobile()
+  const { present } = useModalStack()
+  const handlePeek = useCallback(
+    (e: SyntheticEvent) => {
+      if (isMobile) return
+
+      if (href.startsWith('/notes/')) {
+        {
+          e.preventDefault()
+          present({
+            clickOutsideToDismiss: true,
+            title: 'Preview',
+            modalClassName: 'flex justify-center',
+            modalContainerClassName: 'flex justify-center',
+            CustomModalComponent: () => (
+              <PeekModal to={href}>
+                <NotePreview noteId={parseInt(href.split('/').pop()!)} />
+              </PeekModal>
+            ),
+            content: () => null,
+          })
+        }
+      } else if (href.startsWith('/posts/')) {
+        e.preventDefault()
+        const splitpath = href.split('/')
+        const slug = splitpath.pop()!
+        const category = splitpath.pop()!
+        present({
+          clickOutsideToDismiss: true,
+          title: 'Preview',
+          modalClassName: 'flex justify-center',
+          modalContainerClassName: 'flex justify-center',
+          CustomModalComponent: () => (
+            <PeekModal to={href}>
+              <PostPreview category={category} slug={slug} />
+            </PeekModal>
+          ),
+          content: () => null,
+        })
+      }
+    },
+    [href, isMobile, present],
+  )
+
+  return (
+    <Link href={href} onClick={handlePeek} {...rest}>
+      {children}
+    </Link>
+  )
+}

src/components/widgets/post/PostRelated.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import Link from 'next/link'
-
 import { Divider } from '~/components/ui/divider'
 import { useCurrentPostDataSelector } from '~/providers/post/CurrentPostDataProvider'
 
+import { PeekLink } from '../peek/PeekLink'
+
 export const PostRelated = () => {
   const related = useCurrentPostDataSelector((s) => s?.related)
   if (!related) {
@@ -24,12 +24,12 @@ export const PostRelated = () => {
         {related.map((post) => {
           return (
             <li key={post.id}>
-              <Link
+              <PeekLink
                 href={`/posts/${post.category.slug}/${post.slug}`}
                 className="underline-current underline-dashed leading-10 underline"
               >
                 {post.title}
-              </Link>
+              </PeekLink>
             </li>
           )
         })}