feat: adjust image gallery display style

src/renderer/src/components/ImageGallery/index.tsx

@@ -1,9 +1,9 @@
-import { ScrollArea, ScrollBar } from '@renderer/components/ui/scroll-area'
+import { Image } from '@nextui-org/image'
+import { cn } from '@renderer/lib/utils'
 import { useState } from 'react'
 import Lightbox from 'yet-another-react-lightbox'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
 import NsfwOverlay from '../NsfwOverlay'
-import { cn } from '@renderer/lib/utils'
 
 export default function ImageGallery({
   className,
@@ -23,32 +23,56 @@ export default function ImageGallery({
     setIndex(current)
   }
 
+  const maxHight = size === 'small' ? 'h-[15vh]' : images.length < 3 ? 'h-[30vh]' : 'h-[20vh]'
+
   return (
-    <div className={cn('relative', className)} onClick={(e) => e.stopPropagation()}>
-      <ScrollArea className="w-full">
-        <div className="flex space-x-2">
-          {images.map((src, index) => {
-            return (
-              <img
-                className={`rounded-lg object-cover h-fit cursor-pointer ${size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]'}`}
-                key={index}
-                src={src}
-                onClick={(e) => handlePhotoClick(e, index)}
-              />
-            )
-          })}
-        </div>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
+    <div className={className} onClick={(e) => e.stopPropagation()}>
+      <div className="flex flex-wrap gap-2">
+        {images.map((src, index) => (
+          <ImageWithNsfwOverlay
+            key={index}
+            src={src}
+            isNsfw={isNsfw}
+            className={maxHight}
+            onClick={(e) => handlePhotoClick(e, index)}
+          />
+        ))}
+      </div>
       <Lightbox
         index={index}
         slides={images.map((src) => ({ src }))}
         plugins={[Zoom]}
         open={index >= 0}
         close={() => setIndex(-1)}
-        controller={{ closeOnBackdropClick: true, closeOnPullUp: true, closeOnPullDown: true }}
+        controller={{
+          closeOnBackdropClick: true,
+          closeOnPullUp: true,
+          closeOnPullDown: true
+        }}
         styles={{ toolbar: { paddingTop: '2.25rem' } }}
       />
+    </div>
+  )
+}
+
+function ImageWithNsfwOverlay({
+  src,
+  isNsfw = false,
+  className,
+  onClick
+}: {
+  src: string
+  isNsfw: boolean
+  className?: string
+  onClick?: (e: React.MouseEvent) => void
+}) {
+  return (
+    <div className="relative" onClick={onClick}>
+      <Image
+        className={cn('rounded-lg object-cover aspect-square', className)}
+        src={src}
+        removeWrapper
+      />
       {isNsfw && <NsfwOverlay className="rounded-lg" />}
     </div>
   )

src/renderer/src/components/NoteCard/RepostNoteCard.tsx

@@ -6,7 +6,11 @@ import ShortTextNoteCard from './ShortTextNoteCard'
 
 export default function RepostNoteCard({ event, className }: { event: Event; className?: string }) {
   const targetEvent = event.content ? (JSON.parse(event.content) as Event) : null
-  if (!targetEvent || !verifyEvent(targetEvent) || targetEvent.kind !== kinds.ShortTextNote) {
+  try {
+    if (!targetEvent || !verifyEvent(targetEvent) || targetEvent.kind !== kinds.ShortTextNote) {
+      return null
+    }
+  } catch {
     return null
   }