fix: 🐛

src/components/Content/index.tsx

@@ -23,11 +23,13 @@ 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)
@@ -48,6 +50,7 @@ const Content = memo(
           images={images}
           isNsfw={isNsfw}
           size={size}
+          disableLightbox={disableLightbox}
         />
       )
     }

src/components/ImageGallery/index.tsx

@@ -12,12 +12,14 @@ 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)
@@ -33,7 +35,11 @@ export default function ImageGallery({
     imageContent = (
       <Image
         key={0}
-        className={cn('rounded-lg cursor-pointer', size === 'small' ? 'h-[15vh]' : 'h-[30vh]')}
+        className={cn(
+          'rounded-lg',
+          !disableLightbox ? 'cursor-auto' : '',
+          size === 'small' ? 'h-[15vh]' : 'h-[30vh]'
+        )}
         image={images[0]}
         onClick={(e) => handlePhotoClick(e, 0)}
       />
@@ -44,7 +50,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className="rounded-lg cursor-pointer aspect-square w-full"
+            className={cn('rounded-lg aspect-square w-full', !disableLightbox ? 'cursor-auto' : '')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -57,7 +63,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className="rounded-lg cursor-pointer aspect-square w-full"
+            className={cn('rounded-lg aspect-square w-full', !disableLightbox ? 'cursor-auto' : '')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -70,7 +76,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className="rounded-lg cursor-pointer aspect-square w-full"
+            className={cn('rounded-lg aspect-square w-full', !disableLightbox ? 'cursor-auto' : '')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -83,6 +89,7 @@ export default function ImageGallery({
     <div className={cn('relative w-fit max-w-full', className)}>
       {imageContent}
       {index >= 0 &&
+        !disableLightbox &&
         createPortal(
           <div onClick={(e) => e.stopPropagation()}>
             <Lightbox

src/components/NoteStats/RepostButton.tsx

@@ -13,9 +13,9 @@ import client from '@/services/client.service'
 import { Loader, PencilLine, Repeat } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import PostEditor from '../PostEditor'
 import { formatCount } from './utils'
-import { useTranslation } from 'react-i18next'
 
 export default function RepostButton({
   event,
@@ -84,29 +84,17 @@ export default function RepostButton({
               'flex gap-1 items-center enabled:hover:text-lime-500',
               hasReposted ? 'text-lime-500' : 'text-muted-foreground'
             )}
-            onClick={(e) => e.stopPropagation()}
-            disabled={!canRepost}
             title={t('Repost')}
           >
             {reposting ? <Loader className="animate-spin" size={16} /> : <Repeat size={16} />}
             {!!repostCount && <div className="text-sm">{formatCount(repostCount)}</div>}
           </button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent
+        <DropdownMenuContent>
-          onClick={(e) => {
+          <DropdownMenuItem onClick={repost} disabled={!canRepost}>
-            e.stopPropagation()
-            e.preventDefault()
-          }}
-        >
-          <DropdownMenuItem onClick={repost}>
             <Repeat /> {t('Repost')}
           </DropdownMenuItem>
-          <DropdownMenuItem
+          <DropdownMenuItem onClick={() => setIsPostDialogOpen(true)}>
-            onClick={(e) => {
-              e.stopPropagation()
-              setIsPostDialogOpen(true)
-            }}
-          >
             <PencilLine /> {t('Quote')}
           </DropdownMenuItem>
         </DropdownMenuContent>

src/components/PostEditor/PicturePostContent.tsx

@@ -9,10 +9,7 @@ import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
 import { ChevronDown, Loader, LoaderCircle, Plus, X } from 'lucide-react'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
-import Lightbox from 'yet-another-react-lightbox'
-import Zoom from 'yet-another-react-lightbox/plugins/zoom'
 import Image from '../Image'
 import Mentions from './Mentions'
 import Uploader from './Uploader'
@@ -177,22 +174,13 @@ function PictureUploader({
     >
   >
 }) {
-  const [index, setIndex] = useState(-1)
   const [uploading, setUploading] = useState(false)
 
   return (
-    <>
     <div className="grid grid-cols-3 gap-4">
       {pictureInfos.map(({ url }, index) => (
         <div className="relative" key={`${index}-${url}`}>
-            <Image
+          <Image image={{ url }} className="aspect-square w-full rounded-lg" />
-              image={{ url }}
-              className="aspect-square w-full rounded-lg"
-              onClick={(e) => {
-                e.stopPropagation()
-                setIndex(index)
-              }}
-            />
           <Button
             variant="destructive"
             className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 rounded-full w-6 h-6 p-0"
@@ -220,25 +208,5 @@ function PictureUploader({
         </div>
       </Uploader>
     </div>
-      {index >= 0 &&
-        createPortal(
-          <div onClick={(e) => e.stopPropagation()}>
-            <Lightbox
-              index={index}
-              slides={pictureInfos.map(({ url }) => ({ src: url }))}
-              plugins={[Zoom]}
-              open={index >= 0}
-              close={() => setIndex(-1)}
-              controller={{
-                closeOnBackdropClick: true,
-                closeOnPullUp: true,
-                closeOnPullDown: true
-              }}
-              styles={{ toolbar: { paddingTop: '2.25rem' } }}
-            />
-          </div>,
-          document.body
-        )}
-    </>
   )
 }

src/components/PostEditor/Preview.tsx

@@ -15,6 +15,7 @@ export default function Preview({ content }: { content: string }) {
           pubkey: '',
           sig: ''
         }}
+        disableLightbox
       />
     </Card>
   )

src/components/PostEditor/index.tsx

@@ -31,7 +31,7 @@ export default function PostEditor({
   const { isSmallScreen } = useScreenSize()
 
   const content = useMemo(() => {
-    return parentEvent ? (
+    return parentEvent || defaultContent ? (
       <NormalPostContent
         defaultContent={defaultContent}
         parentEvent={parentEvent}
@@ -59,7 +59,7 @@ export default function PostEditor({
 
   if (isSmallScreen) {
     return (
-      <Sheet open={open} onOpenChange={setOpen} modal={false}>
+      <Sheet open={open} onOpenChange={setOpen}>
         <SheetContent className="h-full w-full p-0 border-none" side="bottom" hideClose>
           <ScrollArea className="px-4 h-full max-h-screen">
             <div className="space-y-4 px-2 py-6">
@@ -78,7 +78,7 @@ export default function PostEditor({
   }
 
   return (
-    <Dialog open={open} onOpenChange={setOpen} modal={false}>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent className="p-0" withoutClose>
         <ScrollArea className="px-4 h-full max-h-screen">
           <div className="space-y-4 px-2 py-6">

src/components/ui/dialog.tsx

@@ -32,8 +32,7 @@ const DialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { withoutClose?: boolean }
 >(({ className, children, withoutClose, ...props }, ref) => (
   <DialogPortal>
-    {/* <DialogOverlay /> */}
+    <DialogOverlay />
-    <div className="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(