enhance(carousel): Close carousel on browser back navigation

[brymut]

Description

Add to browser history stack when opening carousel, so that navigating back on browser should close the carousel modal, not leave the post entirely.

closes #1508

Screenshots

Screen.Recording.2025-07-08.at.18.00.49.mov

Additional Context

Was anything unclear during your work on this PR? Anything we should definitely take a closer look at?

Checklist

Are your changes backward compatible? Please answer below:
Y
For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
10

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
Y

Did you introduce any new environment variables? If so, call them out explicitly here:
N

[Copilot]

Pull Request Overview

This PR enhances the carousel modal so that opening it pushes a history state and pressing the browser back button closes the carousel instead of navigating away.

• Integrates Next.js router in CarouselProvider to push a #carousel hash when opening and call router.back() on close
• Updates Carousel to re-run the overflow option via setOptions whenever the index or source changes
• Adds useRouter import and adjusts effect/callback dependencies for proper behavior

Comments suppressed due to low confidence (3)

components/carousel.js:121

• [nitpick] The variable url is ambiguous—consider renaming it to basePath or pathWithoutHash to clarify that it strips the hash fragment.

    const url = router.asPath.split('#')[0]

components/carousel.js:120

• [nitpick] The new history‐push and back‐navigation behavior isn’t covered by existing tests. Add a test to simulate opening the carousel and pressing the back button to ensure it closes correctly.

  const showCarousel = useCallback(({ src }) => {

components/carousel.js:123

• Pushing history state alone won't close the carousel when the user hits the back button. You should listen for popstate or Next.js router events (e.g., router.events.on('routeChangeStart')) and call the modal's close() callback when the URL no longer contains #carousel.

      router.push(url, url + '#carousel', { shallow: true })

[cursor]

Bug: Carousel Hash Management and Component Update Issues

The carousel's URL hash management is flawed: it unconditionally replaces existing hashes with #carousel upon opening, causing users to lose their original navigation context (e.g., #comment-id) when navigating back. The modal also fails to close automatically via browser back navigation due to a missing hash change listener. Furthermore, if the initial src is not found, the CarouselOverflow component is rendered without props and is never updated because its useEffect early-exits.

components/carousel.js#L119-L136

stacker.news/components/carousel.js

Lines 119 to 136 in b76ced7

	const showCarousel = useCallback(({ src }) => {
	const url = router.asPath.split('#')[0]
	if (window.location.hash !== '#carousel') {
	router.push(url, url + '#carousel', { shallow: true })
	}
	showModal((close, setOptions) => {
	return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
	}, {
	fullScreen: true,
	overflow: <CarouselOverflow {...media.current.get(src)} />,
	onClose: () => {
	if (window.location.hash === '#carousel') {
	router.back()
	}
	}
	})
	}, [showModal, media.current, router])

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎

[brymut]

Happy to have a look again based on the cursor feedback, but I can confirm that the modal does close automatically upon navigating backwards, as shown in the PR description screen recording.

[cursor]

Bug: Carousel History Management Fails

The carousel's history management has two issues related to its handling of the #carousel URL hash:

1. Incorrect Back Navigation: If the carousel is opened when the URL already contains #carousel, no new history entry is pushed. However, closing it still triggers router.back() (if the hash is present), causing unintended navigation to the previous page instead of just closing the modal.
2. Redundant History Entries (Race Condition): Rapidly opening the carousel multiple times can push redundant history entries. This occurs because the window.location.hash check might not reflect the updated URL immediately after router.push(), leading to multiple router.push() calls and requiring multiple back button presses to close the carousel.

Locations (1)

• components/carousel.js#L121-L134

Fix in Cursor • Fix in Web

[ekzyis]

Closing the carousel now always scrolls us to the top:

2025-07-24.21-37-19.mp4

[brymut]

Closing the carousel now always scrolls us to the top:

Let me have a look at that