fix: 🐛

2025-01-20 09:37:01 +08:00
parent 09b25d262c
commit c7c17c2e76
7 changed files with 55 additions and 89 deletions
--- 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}
        />
      )
    }
--- 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
--- 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>
--- 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>
  )
 }
--- 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>
  )
--- 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">
--- 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(