feat: peek link

Signed-off-by: Innei <i@innei.in>

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