Popover for image list in gallery

Author: slinjhu

smoosense-gui/src/components/common/ImageBlock.tsx

@@ -1,21 +1,24 @@
 'use client'
 
 import { useAppSelector } from '@/lib/hooks'
+import CellPopover from '@/components/ui/CellPopover'
 
 interface ImageBlockProps {
   src: string
   alt?: string
   className?: string
   style?: React.CSSProperties
   neverFitCover?: boolean
+  showPopover?: boolean
 }
 
 export default function ImageBlock({
   src,
   alt = 'Image',
   className = '',
   style,
-  neverFitCover = false
+  neverFitCover = false,
+  showPopover = false
 }: ImageBlockProps) {
   const cropMediaToFitCover = useAppSelector((state) => state.ui.cropMediaToFitCover)
 
@@ -27,7 +30,7 @@ export default function ImageBlock({
     target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDIwIDAgTCAwIDAgMCAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzk5OSI+SW52YWxpZCBJbWFnZTwvdGV4dD48L3N2Zz4='
   }
 
-  return (
+  const imageContent = (
     <img
       src={src}
       alt={alt}
@@ -36,4 +39,29 @@ export default function ImageBlock({
       onError={handleError}
     />
   )
+
+  if (!showPopover) {
+    return imageContent
+  }
+
+  return (
+    <CellPopover
+      cellContent={imageContent}
+      popoverContent={
+        <div className="p-2">
+          <img
+            src={src}
+            alt={alt}
+            className="max-w-full max-h-full object-contain"
+            onError={handleError}
+          />
+        </div>
+      }
+      url={src}
+      popoverClassName="w-[500px] h-[500px]"
+      cellContentClassName="items-center justify-center"
+      copyValue={src}
+      side="right"
+    />
+  )
 }

smoosense-gui/src/components/gallery/ComplexDataGalleryItemVisual.tsx

@@ -6,6 +6,7 @@ import { FileType } from '@/lib/utils/fileTypes'
 import { mayResolveUrl } from '@/lib/utils/mediaUrlUtils'
 import { useAppSelector } from '@/lib/hooks'
 import AudioPage from '@/lib/utils/mediaList/AudioPage'
+import ImageBlock from '@/components/common/ImageBlock'
 import _ from 'lodash'
 
 interface ComplexDataGalleryItemVisualProps {
@@ -53,13 +54,14 @@ const ComplexDataGalleryItemVisual = memo(function ComplexDataGalleryItemVisual(
   // Check for image list
   if (isAllUrlType(strings, FileType.Image)) {
     return (
-      <div className="grid grid-cols-2 gap-1 p-1 h-full overflow-auto">
+      <div className="grid grid-cols-2 gap-1 p-1 h-full overflow-auto content-start">
         {resolvedUrls.map((url, index) => (
-          <img
+          <ImageBlock
             key={index}
             src={url}
             alt={validUrls[index]}
-            className="w-full h-auto object-cover rounded"
+            showPopover={true}
+            className="w-full h-auto rounded"
           />
         ))}
       </div>