fix: peek modal shake

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

Author: Innei

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