enhance(carousel): Close carousel on browser back navigation

Author: brymut

components/carousel.js

@@ -114,20 +114,56 @@ function CarouselOverflow ({ originalSrc, rel }) {
 export function CarouselProvider ({ children }) {
   const media = useRef(new Map())
   const showModal = useShowModal()
+  const modalCloseRef = useRef(null)
+  const [confirmedCount, setConfirmedCount] = useState(0)
 
   const showCarousel = useCallback(({ src }) => {
     // only show confirmed entries
     const confirmedEntries = Array.from(media.current.entries())
       .filter(([, entry]) => entry.confirmed)
 
     showModal((close, setOptions) => {
+      modalCloseRef.current = close
       return <Carousel close={close} mediaArr={confirmedEntries} src={src} setOptions={setOptions} />
     }, {
       fullScreen: true,
-      overflow: <CarouselOverflow {...media.current.get(src)} />
+      overflow: <CarouselOverflow {...media.current.get(src)} />,
+      hash: 'carousel',
+      onClose: () => {
+        modalCloseRef.current = null
+      }
     })
   }, [showModal])
 
+  // Handle initial hash-based carousel opening with proper SSR safety
+  useEffect(() => {
+    // Ensure we're in browser environment
+    if (typeof window === 'undefined') return
+
+    const handleHashCarousel = () => {
+      if (window.location.hash === '#carousel') {
+        const confirmedEntries = Array.from(media.current.entries())
+          .filter(([, entry]) => entry.confirmed)
+
+        if (confirmedEntries.length > 0) {
+          showCarousel({ src: confirmedEntries[0][0] })
+        } else {
+          // Remove hash if no confirmed media exists
+          window.history.replaceState(
+            window.history.state, 
+            '', 
+            window.location.pathname + window.location.search
+          )
+        }
+      }
+    }
+
+    // Only run on mount if hash is present
+    if (window.location.hash === '#carousel') {
+      handleHashCarousel()
+    }
+  }, [showCarousel, confirmedCount])
+
   const addMedia = useCallback(({ src, originalSrc, rel }) => {
     media.current.set(src, { src, originalSrc, rel, confirmed: false })
   }, [])
@@ -137,11 +173,29 @@ export function CarouselProvider ({ children }) {
     if (mediaItem) {
       mediaItem.confirmed = true
       media.current.set(src, mediaItem)
+      
+      const newConfirmedCount = Array.from(media.current.values())
+        .filter(entry => entry.confirmed).length
+      setConfirmedCount(newConfirmedCount)
+
+      // Handle hash-based carousel opening when first media is confirmed
+      if (typeof window !== 'undefined' && window.location.hash === '#carousel') {
+        if (newConfirmedCount === 1) {
+          showCarousel({ src })
+        }
+      }
     }
-  }, [])
+  }, [showCarousel])
 
   const removeMedia = useCallback((src) => {
+    const wasConfirmed = media.current.get(src)?.confirmed
     media.current.delete(src)
+    
+    if (wasConfirmed) {
+      const newConfirmedCount = Array.from(media.current.values())
+        .filter(entry => entry.confirmed).length
+      setConfirmedCount(newConfirmedCount)
+    }
   }, [])
 
   const value = useMemo(

components/modal.js

@@ -59,12 +59,22 @@ export default function useModal () {
       return
     }
 
+    const currentHash = window.location.hash
+    if (currentHash) {
+      const hasModalWithHash = modalStack.current.some(
+        modal => modal.options?.hash && `#${modal.options.hash}` === currentHash
+      )
+      if (hasModalWithHash) {
+        window.history.replaceState(window.history.state, '', window.location.pathname + window.location.search)
+      }
+    }
+
     while (modalStack.current.length) {
       getCurrentContent()?.options?.onClose?.()
       modalStack.current.pop()
     }
     forceUpdate()
-  }, [onBack])
+  }, [onBack, getCurrentContent])
 
   const router = useRouter()
   useEffect(() => {
@@ -80,6 +90,21 @@ export default function useModal () {
     return () => router.events.off('routeChangeStart', maybeOnClose)
   }, [router.events, onClose, getCurrentContent])
 
+  useEffect(() => {
+    const handleHashChange = () => {
+      const currentContent = getCurrentContent()
+      if (!currentContent?.options?.hash) return
+
+      const expectedHash = `#${currentContent.options.hash}`
+      if (window.location.hash !== expectedHash) {
+        onClose()
+      }
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [onClose, getCurrentContent])
+
   const modal = useMemo(() => {
     if (modalStack.current.length === 0) {
       return null
@@ -116,6 +141,12 @@ export default function useModal () {
   const showModal = useCallback(
     (getContent, options) => {
       document.activeElement?.blur()
+      if (options?.hash) {
+        const newHash = `#${options.hash}`
+        if (window.location.hash !== newHash) {
+          window.history.pushState(window.history.state, '', newHash)
+        }
+      }
       const ref = { node: getContent(onClose, setOptions), options }
       if (options?.replaceModal) {
         modalStack.current = [ref]
@@ -124,7 +155,7 @@ export default function useModal () {
       }
       forceUpdate()
     },
-    [onClose]
+    [onClose, setOptions]
   )
 
   return [modal, showModal]