feat: make preview non-clickable

src/components/Content/index.tsx

@@ -23,13 +23,11 @@ const Content = memo(
   ({
     event,
     className,
-    size = 'normal',
+    size = 'normal'
-    disableLightbox = false
   }: {
     event: Event
     className?: string
     size?: 'normal' | 'small'
-    disableLightbox?: boolean
   }) => {
     const { content, images, videos, embeddedNotes, lastNonMediaUrl } = preprocess(event)
     const isNsfw = isNsfwEvent(event)
@@ -50,7 +48,6 @@ const Content = memo(
           images={images}
           isNsfw={isNsfw}
           size={size}
-          disableLightbox={disableLightbox}
         />
       )
     }

src/components/ImageGallery/index.tsx

@@ -12,14 +12,12 @@ export default function ImageGallery({
   className,
   images,
   isNsfw = false,
-  size = 'normal',
+  size = 'normal'
-  disableLightbox = false
 }: {
   className?: string
   images: TImageInfo[]
   isNsfw?: boolean
   size?: 'normal' | 'small'
-  disableLightbox?: boolean
 }) {
   const { isSmallScreen } = useScreenSize()
   const [index, setIndex] = useState(-1)
@@ -35,11 +33,7 @@ export default function ImageGallery({
     imageContent = (
       <Image
         key={0}
-        className={cn(
+        className={cn('rounded-lg', size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]')}
-          'rounded-lg',
-          !disableLightbox ? 'cursor-auto' : '',
-          size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]'
-        )}
         classNames={{
           errorPlaceholder: cn('aspect-square', size === 'small' ? 'h-[15vh]' : 'h-[30vh]')
         }}
@@ -53,7 +47,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className={cn('aspect-square w-full rounded-lg', !disableLightbox ? 'cursor-auto' : '')}
+            className={cn('aspect-square w-full rounded-lg')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -66,7 +60,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className={cn('aspect-square w-full rounded-lg', !disableLightbox ? 'cursor-auto' : '')}
+            className={cn('aspect-square w-full rounded-lg')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -79,7 +73,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className={cn('aspect-square w-full rounded-lg', !disableLightbox ? 'cursor-auto' : '')}
+            className={cn('aspect-square w-full rounded-lg')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -92,7 +86,6 @@ export default function ImageGallery({
     <div className={cn('relative', images.length === 1 ? 'w-fit max-w-full' : 'w-full', className)}>
       {imageContent}
       {index >= 0 &&
-        !disableLightbox &&
         createPortal(
           <div onClick={(e) => e.stopPropagation()}>
             <Lightbox

src/components/PostEditor/Preview.tsx

@@ -15,7 +15,7 @@ export default function Preview({ content }: { content: string }) {
           pubkey: '',
           sig: ''
         }}
-        disableLightbox
+        className="pointer-events-none"
       />
     </Card>
   )