Add image lightbox with Radix UI Dialog and improved image handling

Co-authored-by: paul.jaffre <[email protected]>

Author: cursoragent

app/globals.css

@@ -180,3 +180,60 @@ body {
   content: "Step " counter(onboarding-step) ": ";
   font-weight: inherit;
 }
+
+/* Lightbox animations */
+@keyframes dialog-content-show {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialog-content-hide {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+}
+
+@keyframes dialog-overlay-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-overlay-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+[data-state="open"] {
+  animation: dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-state="closed"] {
+  animation: dialog-content-hide 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.dialog-overlay[data-state="open"] {
+  animation: dialog-overlay-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.dialog-overlay[data-state="closed"] {
+  animation: dialog-overlay-hide 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}

package.json

@@ -49,6 +49,7 @@
     "@prettier/plugin-xml": "^3.3.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-tabs": "^1.1.1",

src/components/docImage.tsx

@@ -1,8 +1,7 @@
 import path from 'path';
 
-import Image from 'next/image';
-
 import {serverContext} from 'sentry-docs/serverContext';
+import {DocImageClient} from './docImageClient';
 
 export default function DocImage({
   src,
@@ -40,18 +39,14 @@ export default function DocImage({
     .map(s => parseInt(s, 10));
 
   return (
-    <a href={imgPath} target="_blank" rel="noreferrer">
-      <Image
-        {...props}
-        src={src}
-        width={width}
-        height={height}
-        style={{
-          width: '100%',
-          height: 'auto',
-        }}
-        alt={props.alt ?? ''}
-      />
-    </a>
+    <DocImageClient
+      src={src}
+      imgPath={imgPath}
+      width={width}
+      height={height}
+      alt={props.alt ?? ''}
+      style={props.style}
+      className={props.className}
+    />
   );
 }

src/components/docImageClient.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Image from 'next/image';
+import {ImageLightbox} from './imageLightbox';
+
+interface DocImageClientProps {
+  src: string;
+  imgPath: string;
+  width: number;
+  height: number;
+  alt: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export function DocImageClient({
+  src,
+  imgPath,
+  width,
+  height,
+  alt,
+  style,
+  className,
+}: DocImageClientProps) {
+  const handleContextMenu = (e: React.MouseEvent) => {
+    // Allow right-click to open in new tab
+    const link = document.createElement('a');
+    link.href = imgPath;
+    link.target = '_blank';
+    link.rel = 'noreferrer';
+    link.click();
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    // If Ctrl/Cmd+click, open in new tab instead of lightbox
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      window.open(imgPath, '_blank', 'noreferrer');
+    }
+  };
+
+  return (
+    <div onContextMenu={handleContextMenu} onClick={handleClick}>
+      <ImageLightbox
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+      >
+        <Image
+          src={src}
+          width={width}
+          height={height}
+          style={{
+            width: '100%',
+            height: 'auto',
+            ...style,
+          }}
+          className={className}
+          alt={alt}
+        />
+      </ImageLightbox>
+    </div>
+  );
+}

src/components/imageLightbox.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import {useState} from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import {X} from 'react-feather';
+import Image from 'next/image';
+
+interface ImageLightboxProps {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  children: React.ReactNode;
+}
+
+export function ImageLightbox({src, alt, width, height, children}: ImageLightboxProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger asChild>
+        <button className="cursor-pointer border-none bg-transparent p-0 block w-full">
+          {children}
+        </button>
+      </Dialog.Trigger>
+      
+      <Dialog.Portal>
+        <Dialog.Overlay className="dialog-overlay fixed inset-0 bg-black/80 backdrop-blur-sm z-50" />
+        
+        <Dialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[90vh] max-w-[90vw] translate-x-[-50%] translate-y-[-50%]">
+          
+          {/* Close button */}
+          <Dialog.Close className="absolute right-4 top-4 z-10 rounded-sm bg-black/50 p-2 text-white opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Dialog.Close>
+
+          {/* Image container */}
+          <div className="relative flex items-center justify-center">
+            <Image
+              src={src}
+              alt={alt}
+              width={width}
+              height={height}
+              className="max-h-[90vh] max-w-[90vw] object-contain"
+              style={{
+                width: 'auto',
+                height: 'auto',
+              }}
+              priority
+            />
+          </div>
+
+          {/* Image caption */}
+          {alt && (
+            <div className="absolute bottom-0 left-0 right-0 bg-black/75 p-4 text-center text-white">
+              <p className="text-sm">{alt}</p>
+            </div>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}