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

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) => {
-		if (editId) {
+	const handleSavePrefix = (
+		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({
-						id: editId,
-						text: data.text,
-						color: data.color,
-						icon: data.icon,
-						effect: data.effect,
-						active: data.active ? 1 : 0,
-					}),
+					editId
+						? updatePrefix({ id: editId, ...fields })
+						: createPrefix({ username: data.username, ...fields }),
 				{
-					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