enhance(carousel): Close carousel on browser back navigation

[brymut]

Description

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

closes #1508

Screenshots

Screen.Recording.2025-08-18.at.17.36.26.mov

(Updated screen recording)

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 })

[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.

[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

[brymut]

Closing the carousel now always scrolls us to the top:

Should work now, switched to checking the URL hash instead, less complicated and seems to not have the scrolling issue.

Screen.Recording.2025-08-18.at.17.36.26.mov