feat: open inline images in lightbox

src/hooks/useImageLightbox.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState, type RefObject } from 'react'
+import { trackInlineImageLightboxOpened } from '../lib/productAnalytics'
+import { getDoubleClickedImageTarget, type ImageLightboxTarget } from '../utils/imageLightboxTarget'
+
+type UseImageLightboxArgs = {
+  containerRef: RefObject<HTMLDivElement | null>
+}
+
+type UseImageLightboxResult = {
+  image: ImageLightboxTarget | null
+  close: () => void
+}
+
+export function useImageLightbox({ containerRef }: UseImageLightboxArgs): UseImageLightboxResult {
+  const [image, setImage] = useState<ImageLightboxTarget | null>(null)
+  const close = useCallback(() => setImage(null), [])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const onDoubleClick = (event: MouseEvent) => {
+      const nextImage = getDoubleClickedImageTarget(event.target)
+      if (!nextImage) return
+
+      event.preventDefault()
+      setImage(nextImage)
+      trackInlineImageLightboxOpened()
+    }
+
+    container.addEventListener('dblclick', onDoubleClick, true)
+    return () => container.removeEventListener('dblclick', onDoubleClick, true)
+  }, [containerRef])
+
+  return { image, close }
+}