From ec634f4fa1c52dd6940b6e5a4250f094e958365f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Feb 2023 13:54:36 -0600
Subject: [PATCH] ChatUpload: allow clicking upload to view in modal

---
 .../features/chats/components/chat-upload.tsx | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-upload.tsx b/app/soapbox/features/chats/components/chat-upload.tsx
index 4b0272fc9..f3736b210 100644
--- a/app/soapbox/features/chats/components/chat-upload.tsx
+++ b/app/soapbox/features/chats/components/chat-upload.tsx
@@ -1,7 +1,11 @@
+import clsx from 'clsx';
+import { List as ImmutableList } from 'immutable';
 import React from 'react';
 
+import { openModal } from 'soapbox/actions/modals';
 import Blurhash from 'soapbox/components/blurhash';
 import { Icon } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Attachment } from 'soapbox/types/entities';
 
@@ -12,20 +16,32 @@ interface IChatUpload {
 
 /** An attachment uploaded to the chat composer, before sending. */
 const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
+  const dispatch = useAppDispatch();
+  const clickable = attachment.type !== 'unknown';
+
+  const handleOpenModal = () => {
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(attachment), index: 0 }));
+  };
+
   return (
-    <div className='relative inline-block rounded-lg overflow-hidden isolate'>
+    <div className='relative inline-block w-24 h-24 rounded-lg overflow-hidden isolate'>
       <Blurhash hash={attachment.blurhash} className='absolute inset-0 w-full h-full -z-10' />
 
       <div className='absolute right-[6px] top-[6px]'>
         <RemoveButton onClick={onDelete} />
       </div>
 
-      <img
-        className='w-24 h-24'
-        key={attachment.id}
-        src={attachment.url}
-        alt=''
-      />
+      <button
+        onClick={clickable ? handleOpenModal : undefined}
+        className={clsx('w-full h-full', { 'cursor-zoom-in': clickable, 'cursor-default': !clickable })}
+      >
+        <img
+          className='w-full h-full object-cover'
+          key={attachment.id}
+          src={attachment.url}
+          alt=''
+        />
+      </button>
     </div>
   );
 };