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