From c7c17c2e760d9e6c6e03f94f4cdbb2f1b1db8bf8 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Mon, 20 Jan 2025 09:37:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Content/index.tsx              |  5 +-
 src/components/ImageGallery/index.tsx         | 17 +++-
 src/components/NoteStats/RepostButton.tsx     | 20 +---
 .../PostEditor/PicturePostContent.tsx         | 92 ++++++-------------
 src/components/PostEditor/Preview.tsx         |  1 +
 src/components/PostEditor/index.tsx           |  6 +-
 src/components/ui/dialog.tsx                  |  3 +-
 7 files changed, 55 insertions(+), 89 deletions(-)

diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index 2ae76003..97661053 100644
--- a/src/components/Content/index.tsx
+++ b/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}
         />
       )
     }
diff --git a/src/components/ImageGallery/index.tsx b/src/components/ImageGallery/index.tsx
index d84b4ba4..7d66174b 100644
--- a/src/components/ImageGallery/index.tsx
+++ b/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
diff --git a/src/components/NoteStats/RepostButton.tsx b/src/components/NoteStats/RepostButton.tsx
index c0b511cd..2bf85e4d 100644
--- a/src/components/NoteStats/RepostButton.tsx
+++ b/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
-          onClick={(e) => {
-            e.stopPropagation()
-            e.preventDefault()
-          }}
-        >
-          <DropdownMenuItem onClick={repost}>
+        <DropdownMenuContent>
+          <DropdownMenuItem onClick={repost} disabled={!canRepost}>
             <Repeat /> {t('Repost')}
           </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={(e) => {
-              e.stopPropagation()
-              setIsPostDialogOpen(true)
-            }}
-          >
+          <DropdownMenuItem onClick={() => setIsPostDialogOpen(true)}>
             <PencilLine /> {t('Quote')}
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/src/components/PostEditor/PicturePostContent.tsx b/src/components/PostEditor/PicturePostContent.tsx
index 6a8463c1..9dff1a5c 100644
--- a/src/components/PostEditor/PicturePostContent.tsx
+++ b/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,68 +174,39 @@ 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={{ 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"
-              onClick={() => {
-                setPictureInfos((prev) => prev.filter((_, i) => i !== index))
-              }}
-            >
-              <X />
-            </Button>
-          </div>
-        ))}
-        <Uploader
-          onUploadSuccess={({ url, tags }) => {
-            setPictureInfos((prev) => [...prev, { url, tags }])
-          }}
-          onUploadingChange={setUploading}
-        >
-          <div
-            className={cn(
-              'flex flex-col gap-2 items-center justify-center aspect-square w-full rounded-lg border border-dashed',
-              uploading ? 'cursor-not-allowed text-muted-foreground' : 'clickable'
-            )}
+    <div className="grid grid-cols-3 gap-4">
+      {pictureInfos.map(({ url }, index) => (
+        <div className="relative" key={`${index}-${url}`}>
+          <Image image={{ url }} className="aspect-square w-full rounded-lg" />
+          <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"
+            onClick={() => {
+              setPictureInfos((prev) => prev.filter((_, i) => i !== index))
+            }}
           >
-            {uploading ? <Loader size={36} className="animate-spin" /> : <Plus size={36} />}
-          </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
-        )}
-    </>
+            <X />
+          </Button>
+        </div>
+      ))}
+      <Uploader
+        onUploadSuccess={({ url, tags }) => {
+          setPictureInfos((prev) => [...prev, { url, tags }])
+        }}
+        onUploadingChange={setUploading}
+      >
+        <div
+          className={cn(
+            'flex flex-col gap-2 items-center justify-center aspect-square w-full rounded-lg border border-dashed',
+            uploading ? 'cursor-not-allowed text-muted-foreground' : 'clickable'
+          )}
+        >
+          {uploading ? <Loader size={36} className="animate-spin" /> : <Plus size={36} />}
+        </div>
+      </Uploader>
+    </div>
   )
 }
diff --git a/src/components/PostEditor/Preview.tsx b/src/components/PostEditor/Preview.tsx
index b421ff2e..4cb0e2e9 100644
--- a/src/components/PostEditor/Preview.tsx
+++ b/src/components/PostEditor/Preview.tsx
@@ -15,6 +15,7 @@ export default function Preview({ content }: { content: string }) {
           pubkey: '',
           sig: ''
         }}
+        disableLightbox
       />
     </Card>
   )
diff --git a/src/components/PostEditor/index.tsx b/src/components/PostEditor/index.tsx
index 888767aa..49c66c5f 100644
--- a/src/components/PostEditor/index.tsx
+++ b/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">
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index db188d71..353b5463 100644
--- a/src/components/ui/dialog.tsx
+++ b/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 /> */}
-    <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" />
+    <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(