refactor(catalog): unify commands and embed guarded catalog workspace

src/features/catalog/client/use-catalog-navigation.ts

@@ -0,0 +1,131 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import {
+	type CatalogSelection,
+	readCatalogSelection,
+	writeCatalogSelection,
+} from "./catalog-selection-url";
+
+export function requestCatalogNavigation() {
+	return window.dispatchEvent(
+		new Event("catalog:before-navigation", { cancelable: true }),
+	);
+}
+
+/** Selection history stays local: changing category does not reload the server page. */
+export function useCatalogNavigation({
+	enabled,
+	restore,
+	mayLeave,
+}: {
+	enabled: boolean;
+	restore: (selection: CatalogSelection) => void;
+	mayLeave: () => boolean;
+}) {
+	const current = useRef({ restore, mayLeave });
+	useEffect(() => {
+		current.current = { restore, mayLeave };
+	}, [restore, mayLeave]);
+	const previousUrl = useRef("");
+	const position = useRef(0);
+	const restoringHistory = useRef(false);
+	useEffect(() => {
+		if (!enabled) return;
+		previousUrl.current = window.location.href;
+		position.current = window.history.state?.catalogSelectionPosition ?? 0;
+		window.history.replaceState(
+			{ ...window.history.state, catalogSelectionPosition: position.current },
+			"",
+		);
+		current.current.restore(
+			readCatalogSelection(new URL(window.location.href)),
+		);
+		const onPopState = () => {
+			if (restoringHistory.current) {
+				restoringHistory.current = false;
+				return;
+			}
+			const targetPosition = window.history.state?.catalogSelectionPosition;
+			if (!current.current.mayLeave()) {
+				if (
+					typeof targetPosition === "number" &&
+					targetPosition !== position.current
+				) {
+					restoringHistory.current = true;
+					window.history.go(position.current - targetPosition);
+					return;
+				}
+				window.history.replaceState(
+					window.history.state,
+					"",
+					previousUrl.current,
+				);
+				return;
+			}
+			position.current =
+				typeof targetPosition === "number" ? targetPosition : position.current;
+			previousUrl.current = window.location.href;
+			current.current.restore(
+				readCatalogSelection(new URL(window.location.href)),
+			);
+		};
+		const onLink = (event: MouseEvent) => {
+			if (
+				event.defaultPrevented ||
+				event.button !== 0 ||
+				event.ctrlKey ||
+				event.metaKey ||
+				event.shiftKey ||
+				event.altKey
+			)
+				return;
+			const link = (event.target as Element).closest?.(
+				"a[href]",
+			) as HTMLAnchorElement | null;
+			if (
+				!link ||
+				link.target === "_blank" ||
+				link.hasAttribute("download") ||
+				link.href === window.location.href
+			)
+				return;
+			if (!current.current.mayLeave()) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		const onNavigation = (event: Event) => {
+			if (!current.current.mayLeave()) event.preventDefault();
+		};
+		window.addEventListener("catalog:before-navigation", onNavigation);
+		window.addEventListener("popstate", onPopState);
+		document.addEventListener("click", onLink, true);
+		return () => {
+			window.removeEventListener("catalog:before-navigation", onNavigation);
+			window.removeEventListener("popstate", onPopState);
+			document.removeEventListener("click", onLink, true);
+		};
+	}, [enabled]);
+	return useCallback(
+		(selection: CatalogSelection) => {
+			if (!enabled) return;
+			const url = writeCatalogSelection(
+				new URL(window.location.href),
+				selection,
+			);
+			if (url.href !== window.location.href) {
+				position.current += 1;
+				window.history.pushState(
+					{
+						...window.history.state,
+						catalogSelectionPosition: position.current,
+					},
+					"",
+					url,
+				);
+			}
+			previousUrl.current = url.href;
+		},
+		[enabled],
+	);
+}