open grid images in gallery modal on desktop

src/js/components/events/NoteImage.tsx

@@ -1,16 +1,13 @@
 import { memo, useState } from 'react';
-import { route } from 'preact-router';
 import styled, { css, keyframes } from 'styled-components';
 
 import Icons from '../../Icons';
 import { Event } from '../../lib/nostr-tools';
 import Events from '../../nostr/Events';
 import Key from '../../nostr/Key';
-import { translate as t } from '../../translations/Translation';
-import Modal from '../modal/Modal';
-import SafeImg from '../SafeImg';
 
 import EventComponent from './EventComponent';
+import NoteImageModal from './NoteImageModal';
 
 const fadeIn = keyframes`
   from {
@@ -106,38 +103,35 @@ function NoteImage(props: { event: Event; fadeIn?: boolean }) {
       }
     });
   }
+
+  const onClick = (e, i) => {
+    if (window.innerWidth > 625) {
+      e.preventDefault();
+      e.stopPropagation();
+      setShowImageModal(i);
+    }
+  };
+
   // return all images from post
   return (
     <>
       {attachments.map((attachment, i) => (
         <>
           <GalleryImage
+            href={`/${Key.toNostrBech32Address(props.event.id, 'note')}`}
             key={props.event.id + i}
-            onClick={() => setShowImageModal(i)}
+            onClick={(e) => onClick(e, i)}
             attachment={attachment}
             fadeIn={props.fadeIn}
           >
             <VideoIcon attachment={attachment} />
           </GalleryImage>
           {showImageModal === i && (
-            <Modal centerVertically={true} onClose={() => setShowImageModal(-1)}>
-              {attachment.type === 'image' ? (
-                <SafeImg src={attachment.url} />
-              ) : (
-                <video loop autoPlay src={attachment.url} controls />
-              )}
-              <p>
-                <a
-                  href=""
-                  onClick={(e) => {
-                    e.preventDefault();
-                    route('/' + Key.toNostrBech32Address(props.event.id, 'note'));
-                  }}
-                >
-                  {t('show_post')}
-                </a>
-              </p>
-            </Modal>
+            <NoteImageModal
+              attachment={attachment}
+              onClose={() => setShowImageModal(-1)}
+              event={props.event}
+            />
           )}
         </>
       ))}

src/js/components/events/NoteImageModal.tsx

@@ -0,0 +1,75 @@
+import { route } from 'preact-router';
+import styled from 'styled-components';
+
+import Helpers from '../../Helpers';
+import Key from '../../nostr/Key';
+import { translate as t } from '../../translations/Translation';
+import Modal from '../modal/Modal';
+import Name from '../Name';
+import SafeImg from '../SafeImg';
+
+const ContentContainer = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+`;
+
+const MediaContainer = styled.div`
+  flex: 1;
+  max-width: 70%;
+  display: flex;
+  background: var(--body-bg);
+  justify-content: center;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+`;
+
+const InfoContainer = styled.div`
+  flex: 1;
+  max-width: 30%;
+  padding: 0 20px;
+  overflow-y: auto;
+  background: var(--msg-content-background);
+`;
+
+const NoteImageModal = ({ event, onClose, attachment }) => {
+  return (
+    <Modal width="90%" height="90%" centerVertically={true} onClose={onClose}>
+      <ContentContainer>
+        <MediaContainer>
+          {attachment.type === 'image' ? (
+            <SafeImg src={attachment.url} />
+          ) : (
+            <video loop autoPlay src={attachment.url} controls />
+          )}
+        </MediaContainer>
+        <InfoContainer>
+          {/* Add your note text and replies here */}
+          <p>
+            <a href={'/' + Key.toNostrBech32Address(event.pubkey, 'npub')}>
+              <Name pub={event.pubkey} />
+            </a>
+          </p>
+          <p style={{ whiteSpace: 'pre-wrap' }}>{Helpers.highlightText(event.content, event)}</p>
+          <p>
+            <a
+              href=""
+              onClick={(e) => {
+                e.preventDefault();
+                route('/' + Key.toNostrBech32Address(event.id, 'note'));
+              }}
+            >
+              {t('show_post')}
+            </a>
+          </p>
+        </InfoContainer>
+      </ContentContainer>
+    </Modal>
+  );
+};
+
+export default NoteImageModal;

src/js/components/modal/Modal.tsx

@@ -6,6 +6,8 @@ type Props = {
   justifyContent?: string;
   showContainer?: boolean;
   centerVertically?: boolean;
+  width?: string;
+  height?: string;
 };
 
 const Overlay = styled.div`
@@ -26,7 +28,9 @@ const Overlay = styled.div`
   padding: 20px 0;
 `;
 
-const ModalContentContainer = styled.div`
+const ModalContentContainer = styled.div<{ width?: string; height?: string }>`
+  width: ${(props) => props.width || 'auto'};
+  height: ${(props) => props.height || 'auto'};
   max-height: calc(100% - 40px);
   overflow-y: auto;
   display: flex;
@@ -34,7 +38,14 @@ const ModalContentContainer = styled.div`
   align-items: center;
 `;
 
-const Modal: FC<Props> = ({ centerVertically, showContainer, children, onClose }) => {
+const Modal: FC<Props> = ({
+  width,
+  height,
+  centerVertically,
+  showContainer,
+  children,
+  onClose,
+}) => {
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       onClose?.();
@@ -73,7 +84,9 @@ const Modal: FC<Props> = ({ centerVertically, showContainer, children, onClose }
 
   return (
     <Overlay centerVertically={centerVertically} onClick={handleOverlayClick}>
-      <ModalContentContainer>{content}</ModalContentContainer>
+      <ModalContentContainer width={width} height={height}>
+        {content}
+      </ModalContentContainer>
     </Overlay>
   );
 };