fix: peek modal shake

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

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

@@ -3,7 +3,6 @@
 'use client'
 
 import { useEffect } from 'react'
-import Balancer from 'react-wrap-balancer'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import type { Image } from '@mx-space/api-client'
@@ -25,9 +24,7 @@ export const NoteTitle = () => {
  const title = useCurrentNoteDataSelector((data) => data?.data.title)
  if (!title) return null
  return (
- <h1 className="mt-8 text-left font-bold text-base-content/95">
- <Balancer>{title}</Balancer>
- </h1>
+ <h1 className="mt-8 text-left font-bold text-base-content/95">{title}</h1>
  )
 }
 

src/components/ui/image/ZoomedImage.tsx

@@ -98,13 +98,24 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
  }, [zoom, zoomer_, imageLoadStatus])
 
  return (
- <LazyLoad placeholder={placeholder} offset={30}>
- <figure>
- <span className="relative flex justify-center">
+ <figure>
+ <span className="relative flex justify-center">
+ <LazyLoad placeholder={placeholder} offset={30}>
  <span>
  {imageLoadStatus !== ImageLoadStatus.Loaded && placeholder}
  </span>
 
+ {imageLoadStatus === ImageLoadStatus.Error && (
+ <div className="absolute inset-0 z-[1] flex flex-col gap-8 center">
+ <i className="icon-[mingcute--close-line] text-4xl text-red-500" />
+ <span>图片加载失败</span>
+
+ <Divider className="w-[80px] opacity-80" />
+ <a href={src} target="_blank" rel="noreferrer">
+ <span>查看原图</span>
+ </a>
+ </div>
+ )}
  <img
  src={src}
  title={title}
@@ -126,16 +137,16 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
  }
  }}
  />
- </span>
-
- {!!figcaption && (
-  <figcaption className="mt-1 flex flex-col items-center justify-center">
-  <Divider className="w-[80px] opacity-80" />
-  <span>{figcaption}</span>
- </figcaption>
- )}
- </figure>
- </LazyLoad>
+ </LazyLoad>
+ </span>
+
+ {!!figcaption && (
+ <figcaption className="mt-1 flex flex-col items-center justify-center">
+ <Divider className="w-[80px] opacity-80" />
+ <span>{figcaption}</span>
+ </figcaption>
+ )}
+ </figure>
  )
 }
 

src/components/widgets/peek/PeekLink.tsx

@@ -15,17 +15,20 @@ export const usePeek = () => {
  return useCallback(
  (href: string) => {
  if (isMobile) return
+ const basePresentProps = {
+ clickOutsideToDismiss: true,
+ title: 'Preview',
+ modalClassName:
+ 'relative mx-auto mt-[10vh] scrollbar-none max-w-full overflow-auto px-2 lg:max-w-[65rem] lg:p-0',
+ }
 
  if (href.startsWith('/notes/')) {
  requestAnimationFrame(async () => {
  const NotePreview = await import('./NotePreview').then(
  (module) => module.NotePreview,
  )
  present({
- clickOutsideToDismiss: true,
- title: 'Preview',
- modalClassName: 'flex justify-center',
- modalContainerClassName: 'flex justify-center',
+ ...basePresentProps,
  CustomModalComponent: () => (
  <PeekModal to={href}>
  <NotePreview noteId={parseInt(href.split('/').pop()!)} />
@@ -45,10 +48,7 @@ export const usePeek = () => {
  const slug = splitpath.pop()!
  const category = splitpath.pop()!
  present({
- clickOutsideToDismiss: true,
- title: 'Preview',
- modalClassName: 'flex justify-center',
- modalContainerClassName: 'flex justify-center',
+ ...basePresentProps,
  CustomModalComponent: () => (
  <PeekModal to={href}>
  <PostPreview category={category} slug={slug} />

src/components/widgets/peek/PeekModal.tsx

@@ -10,25 +10,44 @@ export const PeekModal = (
  to: string
  }>,
 ) => {
- const { dismissAll } = useModalStack()
+ const { dismissAll, dismissTop } = useModalStack()
+
  return (
- <m.div
- initial={{ y: 100, opacity: 0.5 }}
- animate={{ y: 0, opacity: 1 }}
- exit={{ y: 100, opacity: 0 }}
- transition={microReboundPreset}
- className="relative mt-[10vh] max-w-full overflow-auto px-2 lg:max-w-[65rem] lg:p-0"
- >
- {props.children}
+ <div>
+ <m.div
+ initial={{ opacity: 0.5, y: 50 }}
+ animate={{ opacity: 1, y: 0 }}
+ exit={{ opacity: 0, y: 50 }}
+ transition={microReboundPreset}
+ className="scrollbar-none"
+ >
+ {props.children}
+ </m.div>
 
- <Link
- className="absolute right-2 top-2 flex h-8 w-8 rounded-full p-1 shadow-sm ring-1 ring-zinc-200 center dark:ring-neutral-800"
- href={props.to}
- onClick={dismissAll}
+ <m.div
+ initial={true}
+ exit={{
+ opacity: 0,
+ }}
+ className="fixed right-2 top-2 flex items-center gap-4"
  >
- <i className="icon-[mingcute--fullscreen-2-line] text-lg" />
- <span className="sr-only">Go to this link</span>
- </Link>
- </m.div>
+ <Link
+ className="flex h-8 w-8 rounded-full p-1 shadow-sm ring-1 ring-zinc-200 center dark:ring-neutral-800"
+ href={props.to}
+ onClick={dismissAll}
+ >
+ <i className="icon-[mingcute--fullscreen-2-line] text-lg" />
+ <span className="sr-only">Go to this link</span>
+ </Link>
+
+ <button
+ className="flex h-8 w-8 rounded-full p-1 shadow-sm ring-1 ring-zinc-200 center dark:ring-neutral-800"
+ onClick={dismissTop}
+ >
+ <i className="icon-[mingcute--close-line] text-lg" />
+ <span className="sr-only">Dimiss</span>
+ </button>
+ </m.div>
+ </div>
  )
 }