From 8745e4a25dca233850d74f467d48f5a4e5aa23cb Mon Sep 17 00:00:00 2001
From: aegroto <aegroto@protonmail.com>
Date: Mon, 18 Nov 2024 16:57:38 +0100
Subject: [PATCH 1/2] feat: carousel integration with history navigation

---
 components/carousel.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/carousel.js b/components/carousel.js
index 1b5ed6dd0..8e5720e6e 100644
--- a/components/carousel.js
+++ b/components/carousel.js
@@ -5,6 +5,7 @@ import ArrowRight from '@/svgs/arrow-right-line.svg'
 import styles from './carousel.module.css'
 import { useShowModal } from './modal'
 import { Dropdown } from 'react-bootstrap'
+import { usePathname } from 'next/navigation'
 
 function useSwiping ({ moveLeft, moveRight }) {
   const [touchStartX, setTouchStartX] = useState(null)
@@ -104,10 +105,14 @@ function CarouselOverflow ({ originalSrc, rel }) {
 }
 
 export function CarouselProvider ({ children }) {
+  const pathname = usePathname()
+
   const media = useRef(new Map())
   const showModal = useShowModal()
 
   const showCarousel = useCallback(({ src }) => {
+    window.history.pushState(null, '', pathname)
+
     showModal((close, setOptions) => {
       return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
     }, {

From 3be1418cff2faade3a60bd787b7c0adfb2f82e8c Mon Sep 17 00:00:00 2001
From: aegroto <aegroto@protonmail.com>
Date: Fri, 22 Nov 2024 10:32:13 +0100
Subject: [PATCH 2/2] fix: navigation-based carousel close action

---
 components/carousel.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/carousel.js b/components/carousel.js
index 8e5720e6e..4927bfed3 100644
--- a/components/carousel.js
+++ b/components/carousel.js
@@ -114,7 +114,10 @@ export function CarouselProvider ({ children }) {
     window.history.pushState(null, '', pathname)
 
     showModal((close, setOptions) => {
-      return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
+      const closeAction = () => {
+        window.history.back()
+      }
+      return <Carousel close={closeAction} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
     }, {
       fullScreen: true,
       overflow: <CarouselOverflow {...media.current.get(src)} />