feat(post): article view improvements (lightbox, action bar, modal shell)

packages/shared/src/components/Markdown.tsx

@@ -14,17 +14,17 @@ import useDebounceFn from '../hooks/useDebounceFn';
 import { useDomPurify } from '../hooks/useDomPurify';
 import { getUserShortInfo } from '../graphql/users';
 import { generateQueryKey, RequestKey } from '../lib/query';
+import { useLazyModal } from '../hooks/useLazyModal';
+import { LazyModal } from './modals/common/types';
+import { getImageOriginRect } from './modals/ImageModal';
+import { useRequestProtocol } from '../hooks/useRequestProtocol';
 
 function isImageElement(
   element: Element | EventTarget,
 ): element is HTMLImageElement {
   return element instanceof HTMLImageElement;
 }
 
-function openImageInNewTab(src: string): void {
-  window.open(src, '_blank', 'noopener,noreferrer');
-}
-
 const UserEntityCard = dynamic(() => import('./cards/entity/UserEntityCard'), {
   ssr: false,
 });
@@ -65,6 +65,8 @@ export default function Markdown({
   openLinksInNewTab = false,
 }: MarkdownProps): ReactElement {
   const purify = useDomPurify();
+  const { openModal } = useLazyModal();
+  const { isCompanion } = useRequestProtocol();
   const containerRef = useRef<HTMLDivElement>(null);
   const [userId, setUserId] = useState('');
   const [offset, setOffset] = useState<CaretOffset>([0, 0]);
@@ -91,7 +93,7 @@ export default function Markdown({
     images.forEach((img) => {
       img.setAttribute('tabindex', '0');
       img.setAttribute('role', 'button');
-      img.setAttribute('aria-label', 'Open image in new tab');
+      img.setAttribute('aria-label', 'Open image');
     });
   });
 
@@ -136,28 +138,54 @@ export default function Markdown({
     [cancelUserClearing, userId, clearUser],
   );
 
-  const onImageClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
-    const element = e.target;
+  const openImage = useCallback(
+    (element: HTMLImageElement) => {
+      // The lazy-modal renderer isn't mounted in the extension companion, so
+      // fall back to opening the image in a new tab there.
+      if (isCompanion) {
+        window.open(element.src, '_blank', 'noopener,noreferrer');
+        return;
+      }
+      openModal({
+        type: LazyModal.ImageView,
+        props: {
+          src: element.src,
+          alt: element.alt || undefined,
+          originRect: getImageOriginRect(element),
+        },
+      });
+    },
+    [isCompanion, openModal],
+  );
+
+  const onImageClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      const element = e.target;
 
-    if (isImageElement(element) && element.src) {
-      e.stopPropagation();
-      openImageInNewTab(element.src);
-    }
-  }, []);
-
-  const onImageKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
-    const element = e.target;
-
-    if (
-      isImageElement(element) &&
-      element.src &&
-      (e.key === 'Enter' || e.key === ' ')
-    ) {
-      e.preventDefault();
-      e.stopPropagation();
-      openImageInNewTab(element.src);
-    }
-  }, []);
+      if (isImageElement(element) && element.src) {
+        e.stopPropagation();
+        openImage(element);
+      }
+    },
+    [openImage],
+  );
+
+  const onImageKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      const element = e.target;
+
+      if (
+        isImageElement(element) &&
+        element.src &&
+        (e.key === 'Enter' || e.key === ' ')
+      ) {
+        e.preventDefault();
+        e.stopPropagation();
+        openImage(element);
+      }
+    },
+    [openImage],
+  );
 
   return (
     <HoverCard

packages/shared/src/components/markdown.module.css

@@ -84,7 +84,7 @@
     @apply border-border-subtlest-secondary my-10;
   }
   & :where(img) {
-    @apply rounded-16 max-h-img-mobile tablet:max-h-img-desktop cursor-pointer;
+    @apply rounded-16 max-h-img-mobile tablet:max-h-img-desktop cursor-zoom-in;
 
     &:focus-visible {
       @apply outline-none ring-2 ring-accent-cabbage-default ring-offset-2 ring-offset-background-default;

packages/shared/src/components/modals/ArticlePostModal.tsx

@@ -40,6 +40,7 @@ export default function ArticlePostModal({
       onAfterOpen={onLoad}
       size={showRedesign ? Modal.Size.Large : Modal.Size.XLarge}
       className={showRedesign ? 'laptop:!overflow-clip' : undefined}
+      navigationRedesign={showRedesign}
       onRequestClose={onRequestClose}
       postType={PostType.Article}
       source={post.source}

packages/shared/src/components/modals/BasePostModal.module.css

@@ -5,9 +5,28 @@
     left: 0;
     right: 0;
     bottom: 0;
-    min-height: 100vh;
     padding: 0;
     overflow-y: auto;
+    /* Keep the scroll inside the overlay so overscroll doesn't chain to the
+       page behind. */
+    overscroll-behavior: contain;
     z-index: 100;
+    /* Backdrop tint lives on the fixed pseudo-element below, not on this
+       scroll container — painting it here made it scroll away with the
+       content and expose the feed. */
+    background-color: transparent;
+  }
+
+  /* Fixed backdrop pinned to the viewport: stays put while only the modal
+     content scrolls. z-index:-1 keeps it behind the modal content but, since
+     the overlay establishes a z-index:100 stacking context, still above the
+     feed. */
+  & :global(.post-modal-overlay)::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-color: theme('colors.overlay.quaternary.onion');
   }
 }

packages/shared/src/components/modals/BasePostModal.tsx

@@ -30,6 +30,12 @@ interface BasePostModalProps extends ModalProps {
   navigationCustomActions?: ReactNode;
   navigationContainerClassName?: string;
   navigationHideSubscribeAction?: boolean;
+  /**
+   * Redesign top-bar behavior: hide the top strip's "…" menu (it lives in the
+   * focus-card header) and, once scrolled, float a fixed bar with the post
+   * stats + "…" menu + close.
+   */
+  navigationRedesign?: boolean;
   loadingChildren?: ReactNode;
   post?: Post;
 }
@@ -48,6 +54,7 @@ function BasePostModal({
   navigationCustomActions,
   navigationContainerClassName,
   navigationHideSubscribeAction,
+  navigationRedesign,
   loadingChildren,
   post,
   onRequestClose,
@@ -131,6 +138,7 @@ function BasePostModal({
                 leadingContent={navigationLeadingContent}
                 customActions={navigationCustomActions}
                 hideSubscribeAction={navigationHideSubscribeAction}
+                hideOptions={navigationRedesign}
                 onClose={onRequestClose}
                 post={post}
               />

packages/shared/src/components/modals/CollectionPostModal.tsx

@@ -42,6 +42,7 @@ export default function CollectionPostModal({
       onAfterOpen={onLoad}
       size={showRedesign ? Modal.Size.Large : Modal.Size.XLarge}
       className={showRedesign ? 'laptop:!overflow-clip' : undefined}
+      navigationRedesign={showRedesign}
       onRequestClose={onRequestClose}
       postType={PostType.Collection}
       source={post.source}

packages/shared/src/components/modals/ImageModal.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import ImageModal from './ImageModal';
+
+const src = 'https://media.daily.dev/image.png';
+
+const setup = (onRequestClose = jest.fn()) => {
+  render(
+    <ImageModal
+      isOpen
+      src={src}
+      alt="Cover image"
+      onRequestClose={onRequestClose}
+    />,
+  );
+  return onRequestClose;
+};
+
+describe('ImageModal', () => {
+  it('renders the image full-screen with its alt and contained sizing', () => {
+    setup();
+    const img = screen.getByAltText('Cover image');
+    expect(img).toHaveAttribute('src', src);
+    expect(img).toHaveClass('object-contain', 'max-h-full', 'max-w-full');
+  });
+
+  it('closes when the backdrop is clicked', () => {
+    const onRequestClose = setup();
+    const [overlay] = screen.getAllByRole('button', { name: 'Close' });
+    fireEvent.click(overlay);
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+
+  it('closes on Escape', () => {
+    const onRequestClose = setup();
+    fireEvent.keyDown(document.body, { key: 'Escape' });
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+});