fix(admin): clear unsaved-changes guard before redirect on groups/new

Use createUnsavedWarning() + UnsavedWarningBanner to replace the inline
beforeNavigate/isDirty pattern, and add an enhance callback that calls
clearOnSuccess() before update() so the guard is disarmed before
SvelteKit's internal goto() fires on a redirect result.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/routes/admin/groups/new/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
-import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
+import { createUnsavedWarning } from '$lib/shared/hooks/useUnsavedWarning.svelte';
+import UnsavedWarningBanner from '$lib/shared/primitives/UnsavedWarningBanner.svelte';
 
 const availableStandard = $derived([
 	{ value: 'READ_ALL', label: m.admin_perm_read_all() },
@@ -18,17 +19,7 @@ const availableAdmin = $derived([
 
 let { form } = $props();
 
-let isDirty = $state(false);
-let showUnsavedWarning = $state(false);
-let discardTarget: string | null = $state(null);
-
-beforeNavigate(({ cancel, to }) => {
-	if (isDirty) {
-		cancel();
-		showUnsavedWarning = true;
-		discardTarget = to?.url.href ?? null;
-	}
-});
+const unsaved = createUnsavedWarning();
 </script>
 
 <div class="flex flex-1 flex-col overflow-hidden">
@@ -58,23 +49,8 @@ beforeNavigate(({ cancel, to }) => {
 
 	<!-- Scrollable body -->
 	<div class="flex-1 overflow-y-auto px-5 py-5">
-		{#if showUnsavedWarning}
-			<div
-				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
-			>
-				<span>{m.admin_unsaved_warning()}</span>
-				<button
-					type="button"
-					onclick={() => {
-						isDirty = false;
-						showUnsavedWarning = false;
-						if (discardTarget) goto(discardTarget);
-					}}
-					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
-				>
-					{m.person_discard_changes()}
-				</button>
-			</div>
+		{#if unsaved.showUnsavedWarning}
+			<UnsavedWarningBanner onDiscard={unsaved.discard} />
 		{/if}
 		{#if form?.error}
 			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
@@ -85,11 +61,11 @@ beforeNavigate(({ cancel, to }) => {
 		<form
 			id="new-group-form"
 			method="POST"
-			use:enhance
-			oninput={() => {
-				isDirty = true;
-				showUnsavedWarning = false;
+			use:enhance={() => async ({ result, update }) => {
+				if (result.type === 'redirect') unsaved.clearOnSuccess();
+				await update();
 			}}
+			oninput={unsaved.markDirty}
 			class="space-y-5"
 		>
 			<!-- Name card -->