fix(hk): protect unsaved editors and await prefix save results

e2e/ui/fixture-server.mjs

@@ -197,6 +197,7 @@ const server = createServer(async (req, res) => {
 		}
 		if (
 			[
+				"/admin/unsaved-harness",
 				"/admin/attachment-harness",
 				"/admin/studio-harness",
 				"/admin/jobs-harness",

e2e/ui/fixtures/entry.tsx

@@ -16,6 +16,7 @@ import messages from "@/messages/en.json";
 import { AttachmentHarness } from "./attachment-harness";
 import { FurnitureJobsHarness } from "./furniture-jobs-harness";
 import { fixtureAction } from "./server-actions";
+import { UnsavedHarness } from "./unsaved-harness";
 
 const theme = document.createElement("style");
 theme.textContent = themePaletteCss(
@@ -105,7 +106,9 @@ createRoot(root).render(
 							? "News editor"
 							: "Furniture synchronization"}
 			</h1>
-			{route.includes("studio-harness") ? (
+			{route.includes("unsaved-harness") ? (
+				<UnsavedHarness />
+			) : route.includes("studio-harness") ? (
 				<StudioClient
 					source={buildFurniImportSource("it")}
 					initialTree={[]}

e2e/ui/fixtures/unsaved-harness.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { PrefixDialog } from "@/app/admin/prefixes/prefix-dialog";
+import {
+	confirmUnsavedNavigation,
+	useUnsavedChanges,
+} from "@/hooks/use-unsaved-changes";
+export function UnsavedHarness() {
+	const [value, setValue] = useState("");
+	const [open, setOpen] = useState(false);
+	const [failSave, setFailSave] = useState(false);
+	const [saved, setSaved] = useState(false);
+	const [navigated, setNavigated] = useState(false);
+	const guard = useUnsavedChanges(value !== "", "Discard unsaved changes?");
+	return (
+		<>
+			<label>
+				Working value
+				<input
+					aria-label="Working value"
+					value={value}
+					onChange={(event) => setValue(event.target.value)}
+				/>
+			</label>
+			<a href="/admin/unsaved-destination">Leave editor</a>
+			<a href="#same-page">Same page</a>
+			<a href="mailto:[email protected]">Email</a>
+			<button
+				type="button"
+				onClick={() => {
+					if (confirmUnsavedNavigation()) setNavigated(true);
+				}}
+			>
+				Programmatic navigation
+			</button>
+			<button
+				type="button"
+				onClick={() => {
+					guard.markSaved();
+					setValue("");
+					setSaved(true);
+				}}
+			>
+				Save working value
+			</button>
+			{saved && <p>Working value saved</p>}
+			{navigated && <p>Navigation allowed</p>}
+			<button type="button" onClick={() => setOpen(true)}>
+				Open prefix
+			</button>
+			<label>
+				<input
+					type="checkbox"
+					checked={failSave}
+					onChange={(event) => setFailSave(event.target.checked)}
+				/>
+				Fail prefix save
+			</label>
+			<PrefixDialog
+				isOpen={open}
+				onClose={() => setOpen(false)}
+				editPrefix={null}
+				onSave={async () => {
+					if (failSave) return false;
+					setSaved(true);
+					return true;
+				}}
+			/>
+		</>
+	);
+}

src/app/admin/import/badges/badge-editor-dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { getBadgeData, updateBadge } from "@/actions/badges";
@@ -15,6 +16,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useServerAction } from "@/hooks/use-server-action";
+import { useUnsavedChanges } from "@/hooks/use-unsaved-changes";
 
 interface BadgeEditorDialogProps {
 	code: string;
@@ -34,23 +36,39 @@ export function BadgeEditorDialog({
 	const [desc, setDesc] = useState("");
 	const [loading, setLoading] = useState(false);
 	const { run, isPending: saving } = useServerAction();
+	const [saved, setSaved] = useState({ name: "", desc: "" });
+	const tAction = useTranslations("pages.admin.actions");
+	const { confirmLeave, markSaved } = useUnsavedChanges(
+		open && !loading && (name !== saved.name || desc !== saved.desc),
+		tAction("leaveUnsaved"),
+	);
+	function requestOpenChange(next: boolean) {
+		if (next || (!saving && confirmLeave())) onOpenChange(next);
+	}
 
 	// Fetch current values when dialog opens
 	useEffect(() => {
 		if (!open || !code) return;
+		let active = true;
 		setLoading(true);
 		getBadgeData({ code })
 			.then((result) => {
-				if (result.ok) {
+				if (active && result.ok) {
 					const data = result.data as { name: string; desc: string };
 					setName(data.name ?? "");
 					setDesc(data.desc ?? "");
+					setSaved({ name: data.name ?? "", desc: data.desc ?? "" });
 				}
 			})
 			.catch(() => {
-				toast.error("Failed to load badge data");
+				if (active) toast.error("Failed to load badge data");
 			})
-			.finally(() => setLoading(false));
+			.finally(() => {
+				if (active) setLoading(false);
+			});
+		return () => {
+			active = false;
+		};
 	}, [open, code]);
 
 	function handleSave() {
@@ -58,6 +76,8 @@ export function BadgeEditorDialog({
 			successMessage: `Badge ${code} updated`,
 			errorMessage: "Save failed",
 			onSuccess: () => {
+				markSaved();
+				setSaved({ name, desc });
 				onSaved?.();
 				onOpenChange(false);
 			},
@@ -65,7 +85,7 @@ export function BadgeEditorDialog({
 	}
 
 	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
+		<Dialog open={open} onOpenChange={requestOpenChange}>
 			<DialogContent className="sm:max-w-md">
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
@@ -78,7 +98,7 @@ export function BadgeEditorDialog({
 						<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
 					</div>
 				) : (
-					<div className="space-y-4">
+					<fieldset disabled={saving} className="space-y-4">
 						<div className="space-y-2">
 							<Label htmlFor="badge-name">Name</Label>
 							<Input
@@ -97,13 +117,13 @@ export function BadgeEditorDialog({
 								placeholder="Badge description"
 							/>
 						</div>
-					</div>
+					</fieldset>
 				)}
 
 				<DialogFooter>
 					<Button
 						variant="outline"
-						onClick={() => onOpenChange(false)}
+						onClick={() => requestOpenChange(false)}
 						disabled={saving}
 					>
 						Cancel

src/app/admin/prefixes/prefixes-client.tsx

@@ -107,44 +107,34 @@ export function PrefixesClient({ canEdit }: { canEdit: boolean }) {
 		});
 	};
 
-	const handleSavePrefix = async (data: PrefixFormData, editId?: number) => {
+	const handleSavePrefix = (
-		if (editId) {
+		data: PrefixFormData,
+		editId?: number,
+	): Promise<boolean> => {
+		if (isPending) return Promise.resolve(false);
+		return new Promise((resolve) => {
+			const fields = {
+				text: data.text,
+				color: data.color,
+				icon: data.icon,
+				effect: data.effect,
+				active: data.active ? 1 : 0,
+			};
 			run(
 				() =>
-					updatePrefix({
+					editId
-						id: editId,
+						? updatePrefix({ id: editId, ...fields })
-						text: data.text,
+						: createPrefix({ username: data.username, ...fields }),
-						color: data.color,
-						icon: data.icon,
-						effect: data.effect,
-						active: data.active ? 1 : 0,
-					}),
 				{
-					successMessage: "Prefix updated!",
+					successMessage: editId ? "Prefix updated!" : "Prefix created!",
 					onSuccess: () => {
-						fetchPrefixes();
+						void fetchPrefixes();
+						resolve(true);
 					},
+					onError: () => resolve(false),
 				},
 			);
-		} else {
+		});
-			run(
-				() =>
-					createPrefix({
-						username: data.username,
-						text: data.text,
-						color: data.color,
-						icon: data.icon,
-						effect: data.effect,
-						active: data.active ? 1 : 0,
-					}),
-				{
-					successMessage: "Prefix created!",
-					onSuccess: () => {
-						fetchPrefixes();
-					},
-				},
-			);
-		}
 	};
 
 	const openAddDialog = () => {

src/app/admin/rooms/[id]/furni/edit-item-dialog.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { updateRoomItem } from "@/actions/rooms";
 import { Button } from "@/components/ui/button";
@@ -15,6 +16,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { useServerAction } from "@/hooks/use-server-action";
+import { useUnsavedChanges } from "@/hooks/use-unsaved-changes";
 
 interface EditItem {
 	id: number;
@@ -45,9 +47,26 @@ export function EditItemDialog({ roomId, item, open, onOpenChange }: Props) {
 	const [extraData, setExtraData] = useState("");
 
 	const isWall = item?.type === "i";
+	const tAction = useTranslations("pages.admin.actions");
+	const dirty =
+		!!item &&
+		(extraData !== item.extraData ||
+			(isWall
+				? wallPos !== item.wallPos
+				: x !== String(item.x) ||
+					y !== String(item.y) ||
+					z !== String(item.z) ||
+					rot !== String(item.rot)));
+	const { confirmLeave, markSaved } = useUnsavedChanges(
+		open && dirty,
+		tAction("leaveUnsaved"),
+	);
+	function requestOpenChange(next: boolean) {
+		if (next || (!isPending && confirmLeave())) onOpenChange(next);
+	}
 
 	useEffect(() => {
-		if (item) {
+		if (item && open) {
 			setX(String(item.x));
 			setY(String(item.y));
 			setZ(String(item.z));
@@ -55,7 +74,7 @@ export function EditItemDialog({ roomId, item, open, onOpenChange }: Props) {
 			setWallPos(item.wallPos);
 			setExtraData(item.extraData);
 		}
-	}, [item]);
+	}, [item, open]);
 
 	function handleSave() {
 		if (!item) return;
@@ -72,12 +91,15 @@ export function EditItemDialog({ roomId, item, open, onOpenChange }: Props) {
 				};
 		run(() => updateRoomItem(payload), {
 			successMessage: "Item updated and room reloaded",
-			onSuccess: () => onOpenChange(false),
+			onSuccess: () => {
+				markSaved();
+				onOpenChange(false);
+			},
 		});
 	}
 
 	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
+		<Dialog open={open} onOpenChange={requestOpenChange}>
 			<DialogContent className="sm:max-w-[480px]">
 				<DialogHeader>
 					<DialogTitle>Edit furniture</DialogTitle>
@@ -86,7 +108,7 @@ export function EditItemDialog({ roomId, item, open, onOpenChange }: Props) {
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="space-y-4">
+				<fieldset disabled={isPending} className="space-y-4">
 					{isWall ? (
 						<div className="space-y-2">
 							<Label htmlFor="wallPos">Wall position</Label>
@@ -165,12 +187,12 @@ export function EditItemDialog({ roomId, item, open, onOpenChange }: Props) {
 							Item state/data (e.g. dice value, sticky note text, color)
 						</p>
 					</div>
-				</div>
+				</fieldset>
 
 				<DialogFooter>
 					<Button
 						variant="outline"
-						onClick={() => onOpenChange(false)}
+						onClick={() => requestOpenChange(false)}
 						disabled={isPending}
 					>
 						Cancel

src/components/admin/search-dialog.tsx

@@ -21,6 +21,7 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { useDebounce } from "@/hooks/use-debounce";
+import { confirmUnsavedNavigation } from "@/hooks/use-unsaved-changes";
 import {
 	type AdminNavigationOptions,
 	visibleAdminNavigation,
@@ -152,6 +153,7 @@ export function SearchDialog({
 	}
 
 	function handleSelect(url: string) {
+		if (!confirmUnsavedNavigation()) return;
 		handleOpenChange(false);
 		setQuery("");
 		setResults([]);

src/hooks/use-unsaved-changes.test.ts

@@ -0,0 +1,57 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+const cleanup = vi.hoisted(() => [] as Array<() => void>);
+vi.mock("react", () => ({
+	useRef: (value: unknown) => ({ current: value }),
+	useCallback: (callback: unknown) => callback,
+	useEffect: (effect: () => (() => void) | undefined) => {
+		const dispose = effect();
+		if (dispose) cleanup.push(dispose);
+	},
+}));
+
+import {
+	confirmUnsavedNavigation,
+	useUnsavedChanges,
+} from "./use-unsaved-changes";
+
+let confirm: ReturnType<typeof vi.fn>;
+beforeEach(() => {
+	confirm = vi.fn().mockReturnValue(false);
+	vi.stubGlobal("window", Object.assign(new EventTarget(), { confirm }));
+	vi.stubGlobal("document", new EventTarget());
+	vi.stubGlobal("location", new URL("https://hotel.test/admin/editor"));
+});
+afterEach(() => {
+	for (const dispose of cleanup.splice(0)) dispose();
+	vi.unstubAllGlobals();
+});
+it("asks once for several dirty forms and allows clean navigation", () => {
+	useUnsavedChanges(true, "Discard changes?");
+	useUnsavedChanges(true, "Other changes?");
+	expect(confirmUnsavedNavigation()).toBe(false);
+	expect(confirm).toHaveBeenCalledTimes(1);
+	confirm.mockReturnValue(true);
+	expect(confirmUnsavedNavigation()).toBe(true);
+});
+it("removes unmounted forms from navigation protection", () => {
+	useUnsavedChanges(true, "Discard changes?");
+	for (const dispose of cleanup.splice(0)) dispose();
+	expect(confirmUnsavedNavigation()).toBe(true);
+	expect(confirm).not.toHaveBeenCalled();
+});
+it("protects explicit close but clears synchronously after successful save", () => {
+	const guard = useUnsavedChanges(true, "Discard changes?");
+	expect(guard.confirmLeave()).toBe(false);
+	guard.markSaved();
+	expect(guard.confirmLeave()).toBe(true);
+	expect(confirmUnsavedNavigation()).toBe(true);
+	expect(confirm).toHaveBeenCalledTimes(1);
+});
+it("keeps reload protected after cancelled navigation", () => {
+	useUnsavedChanges(true, "Discard changes?");
+	confirmUnsavedNavigation();
+	const event = new Event("beforeunload", { cancelable: true });
+	window.dispatchEvent(event);
+	expect(event.defaultPrevented).toBe(true);
+});