add multi-image carousel to the media modal

packages/pl-fe/src/modals/media-modal.tsx

@@ -399,6 +399,37 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
             )}
           </div>
 
+          {hasMultipleImages && (
+            <div className={clsx('flex-none overflow-x-auto py-2 transition-opacity', navigationHiddenClassName)}>
+              <HStack
+                justifyContent='center'
+                space={2}
+                className='min-w-min px-4'
+              >
+                {media.map((attachment, i) => (
+                  <button
+                    key={attachment.id || i}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIndex(i);
+                    }}
+                    className={clsx(
+                      'size-12 flex-none overflow-hidden rounded-lg border-2 transition-all hover:scale-105',
+                      i === index ? 'border-white' : 'border-transparent opacity-60 hover:opacity-100',
+                    )}
+                    aria-label={`View image ${i + 1}`}
+                  >
+                    <img
+                      src={attachment.preview_url || attachment.url}
+                      alt={attachment.description || `Image ${i + 1}`}
+                      className='size-full object-cover'
+                    />
+                  </button>
+                ))}
+              </HStack>
+            </div>
+          )}
+
           {status && (
             <HStack
               justifyContent='center'