save debug modal state in route

src/hooks/use-route-state-value.ts

@@ -15,6 +15,8 @@ export default function useRouteStateValue<T extends unknown>(key: string, fallb
   const navigate = useNavigate();
   const location = useLocation();
 
+  const locationRef = useRef(location);
+  locationRef.current = location;
   const stateRef = useRef<Record<string, any>>(location.state ?? {});
   stateRef.current = location.state ?? {};
   const valueRef = useRef<T>(stateRef.current[key] ?? fallback);
@@ -29,16 +31,19 @@ export default function useRouteStateValue<T extends unknown>(key: string, fallb
       } else newState[key] = valueOrSetter;
 
       if (stateRef.current[key] !== newState[key]) {
-        navigate(".", { state: newState, replace });
+        navigate(locationRef.current, { state: newState, replace });
       }
     },
-    [key],
+    [key, navigate],
+  );
+  const clearValue = useCallback(
+    (replace = true) => {
+      const newState = { ...stateRef.current };
+      delete newState[key];
+      navigate(locationRef.current, { state: newState, replace });
+    },
+    [key, navigate],
   );
-  const clearValue = useCallback(() => {
-    const newState = { ...stateRef.current };
-    delete newState[key];
-    navigate(".", newState);
-  }, [key]);
 
   return { value: valueRef.current, setValue, clearValue };
 }

src/providers/route/debug-modal-provider.tsx

@@ -1,22 +1,43 @@
 import { NostrEvent } from "nostr-tools";
-import { PropsWithChildren, createContext, useCallback, useMemo, useState } from "react";
+import { PropsWithChildren, createContext, useCallback, useContext, useMemo, useState } from "react";
 
 import EventDebugModal from "../../components/debug-modal/event-debug-modal";
+import useRouteStateValue from "../../hooks/use-route-state-value";
+import { useRouterMarker } from "../drawer-sub-view-provider";
+import { UNSAFE_DataRouterContext } from "react-router-dom";
 
 export const DebugModalContext = createContext({
   open: (event: NostrEvent) => {},
 });
 
 export default function DebugModalProvider({ children }: PropsWithChildren) {
+  const routeState = useRouteStateValue("debug", false);
+  const { router } = useContext(UNSAFE_DataRouterContext)!;
+  const marker = useRouterMarker(router);
   const [event, setEvent] = useState<NostrEvent>();
 
-  const open = useCallback((event: NostrEvent) => setEvent(event), [setEvent]);
+  if (routeState.value !== true) marker.reset();
+
+  const open = useCallback(
+    (event: NostrEvent) => {
+      setEvent(event);
+      marker.set();
+      routeState.setValue(true, false);
+    },
+    [setEvent, marker.set, routeState.setValue],
+  );
+  const close = useCallback(() => {
+    setEvent(undefined);
+    router.navigate(marker.index.current ?? -1);
+    marker.reset();
+  }, [marker.reset, marker.index, router.navigate]);
+
   const context = useMemo(() => ({ open }), [open]);
 
   return (
     <DebugModalContext.Provider value={context}>
       {children}
-      {event && <EventDebugModal event={event} isOpen onClose={() => setEvent(undefined)} />}
+      {routeState.value && event && <EventDebugModal event={event} isOpen onClose={close} />}
     </DebugModalContext.Provider>
   );
 }