From 77a337588971aae4c8c71204c3c08ba1cc372deb Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Thu, 1 Jan 2026 17:09:14 +1030
Subject: [PATCH] feat: refactor RegularExpressionForm and RegexPatternField to
 track changes

---
 .../[databaseId]/[id]/+page.svelte            | 23 +++---
 .../components/RegexPatternField.svelte       | 18 ++++-
 .../components/RegularExpressionForm.svelte   | 75 ++++++++++++++-----
 .../[databaseId]/new/+page.svelte             | 23 +++---
 4 files changed, 96 insertions(+), 43 deletions(-)

diff --git a/src/routes/regular-expressions/[databaseId]/[id]/+page.svelte b/src/routes/regular-expressions/[databaseId]/[id]/+page.svelte
index 557cdb2..53b1745 100644
--- a/src/routes/regular-expressions/[databaseId]/[id]/+page.svelte
+++ b/src/routes/regular-expressions/[databaseId]/[id]/+page.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import RegularExpressionForm from '../components/RegularExpressionForm.svelte';
+	import DirtyModal from '$ui/modal/DirtyModal.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 
-	// Form state initialized from data
-	let name = data.regularExpression.name;
-	let tags = data.regularExpression.tags.map((t) => t.name);
-	let pattern = data.regularExpression.pattern;
-	let description = data.regularExpression.description ?? '';
-	let regex101Id = data.regularExpression.regex101_id ?? '';
+	// Build initial data from server
+	$: initialData = {
+		name: data.regularExpression.name,
+		tags: data.regularExpression.tags.map((t) => t.name),
+		pattern: data.regularExpression.pattern,
+		description: data.regularExpression.description ?? '',
+		regex101Id: data.regularExpression.regex101_id ?? ''
+	};
 
 	function handleCancel() {
 		goto(`/regular-expressions/${data.currentDatabase.id}`);
@@ -26,10 +29,8 @@
 	databaseName={data.currentDatabase.name}
 	canWriteToBase={data.canWriteToBase}
 	actionUrl="?/update"
-	bind:name
-	bind:tags
-	bind:pattern
-	bind:description
-	bind:regex101Id
+	{initialData}
 	onCancel={handleCancel}
 />
+
+<DirtyModal />
diff --git a/src/routes/regular-expressions/[databaseId]/components/RegexPatternField.svelte b/src/routes/regular-expressions/[databaseId]/components/RegexPatternField.svelte
index 4737806..a0caedd 100644
--- a/src/routes/regular-expressions/[databaseId]/components/RegexPatternField.svelte
+++ b/src/routes/regular-expressions/[databaseId]/components/RegexPatternField.svelte
@@ -6,6 +6,18 @@
 	// Props
 	export let pattern: string = '';
 	export let regex101Id: string = '';
+	export let onPatternChange: ((value: string) => void) | undefined = undefined;
+	export let onRegex101IdChange: ((value: string) => void) | undefined = undefined;
+
+	function handlePatternChange(value: string) {
+		pattern = value;
+		onPatternChange?.(value);
+	}
+
+	function handleRegex101IdChange(value: string) {
+		regex101Id = value;
+		onRegex101IdChange?.(value);
+	}
 
 	// Internal state
 	let unitTests: Regex101UnitTest[] = [];
@@ -70,7 +82,8 @@
 		<textarea
 			id="pattern"
 			name="pattern"
-			bind:value={pattern}
+			value={pattern}
+			oninput={(e) => handlePatternChange(e.currentTarget.value)}
 			rows="3"
 			placeholder="e.g., \b(SPARKS)\b"
 			class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 font-mono text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
@@ -90,7 +103,8 @@
 				type="text"
 				id="regex101Id"
 				name="regex101Id"
-				bind:value={regex101Id}
+				value={regex101Id}
+				oninput={(e) => handleRegex101IdChange(e.currentTarget.value)}
 				placeholder="e.g., GMV8jd/1"
 				class="block flex-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 font-mono text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
 			/>
diff --git a/src/routes/regular-expressions/[databaseId]/components/RegularExpressionForm.svelte b/src/routes/regular-expressions/[databaseId]/components/RegularExpressionForm.svelte
index 5854ffd..6671dd2 100644
--- a/src/routes/regular-expressions/[databaseId]/components/RegularExpressionForm.svelte
+++ b/src/routes/regular-expressions/[databaseId]/components/RegularExpressionForm.svelte
@@ -6,23 +6,47 @@
 	import RegexPatternField from './RegexPatternField.svelte';
 	import { alertStore } from '$alerts/store';
 	import { Save, Trash2, Loader2 } from 'lucide-svelte';
+	import {
+		current,
+		isDirty,
+		initEdit,
+		initCreate,
+		update
+	} from '$lib/client/stores/dirty';
+
+	// Form data shape
+	interface RegularExpressionFormData {
+		name: string;
+		tags: string[];
+		pattern: string;
+		description: string;
+		regex101Id: string;
+	}
 
 	// Props
 	export let mode: 'create' | 'edit';
 	export let databaseName: string;
 	export let canWriteToBase: boolean = false;
 	export let actionUrl: string = '';
-
-	// Form data
-	export let name: string = '';
-	export let tags: string[] = [];
-	export let pattern: string = '';
-	export let description: string = '';
-	export let regex101Id: string = '';
+	export let initialData: RegularExpressionFormData;
 
 	// Event handlers
 	export let onCancel: () => void;
 
+	const defaults: RegularExpressionFormData = {
+		name: '',
+		tags: [],
+		pattern: '',
+		description: '',
+		regex101Id: ''
+	};
+
+	if (mode === 'create') {
+		initCreate(initialData ?? defaults);
+	} else {
+		initEdit(initialData);
+	}
+
 	// Loading states
 	let saving = false;
 	let deleting = false;
@@ -47,7 +71,7 @@
 			: `Update regular expression settings`;
 	$: submitButtonText = mode === 'create' ? 'Create' : 'Save Changes';
 
-	$: isValid = name.trim() !== '' && pattern.trim() !== '';
+	$: isValid = $current.name.trim() !== '' && $current.pattern.trim() !== '';
 
 	async function handleSaveClick() {
 		if (canWriteToBase) {
@@ -99,19 +123,21 @@
 		action={actionUrl}
 		use:enhance={() => {
 			saving = true;
-			return async ({ result, update }) => {
+			return async ({ result, update: formUpdate }) => {
 				if (result.type === 'failure' && result.data) {
 					alertStore.add('error', (result.data as { error?: string }).error || 'Operation failed');
 				} else if (result.type === 'redirect') {
 					alertStore.add('success', mode === 'create' ? 'Regular expression created!' : 'Regular expression updated!');
+					// Mark as clean so navigation guard doesn't trigger
+					initEdit($current as RegularExpressionFormData);
 				}
-				await update();
+				await formUpdate();
 				saving = false;
 			};
 		}}
 	>
 		<!-- Hidden fields for form data -->
-		<input type="hidden" name="tags" value={JSON.stringify(tags)} />
+		<input type="hidden" name="tags" value={JSON.stringify($current.tags)} />
 		<input type="hidden" name="layer" value={selectedLayer} />
 
 		<!-- Basic Info Section -->
@@ -130,7 +156,8 @@
 						type="text"
 						id="name"
 						name="name"
-						bind:value={name}
+						value={$current.name}
+						oninput={(e) => update('name', e.currentTarget.value)}
 						placeholder="e.g., Release Group - SPARKS"
 						class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
 					/>
@@ -145,7 +172,11 @@
 						Categorize this pattern for easier filtering
 					</p>
 					<div class="mt-2">
-						<TagInput bind:tags placeholder="Add tags..." />
+						<TagInput
+							tags={$current.tags}
+							onchange={(newTags) => update('tags', newTags)}
+							placeholder="Add tags..."
+						/>
 					</div>
 				</div>
 
@@ -160,7 +191,8 @@
 					<textarea
 						id="description"
 						name="description"
-						bind:value={description}
+						value={$current.description}
+						oninput={(e) => update('description', e.currentTarget.value)}
 						rows="3"
 						placeholder="What does this pattern match?"
 						class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
@@ -175,7 +207,12 @@
 				Pattern
 			</h2>
 
-			<RegexPatternField bind:pattern bind:regex101Id />
+			<RegexPatternField
+				pattern={$current.pattern}
+				regex101Id={$current.regex101Id}
+				onPatternChange={(v) => update('pattern', v)}
+				onRegex101IdChange={(v) => update('regex101Id', v)}
+			/>
 		</div>
 
 		<!-- Actions -->
@@ -185,7 +222,7 @@
 				{#if mode === 'edit'}
 					<button
 						type="button"
-						on:click={handleDeleteClick}
+						onclick={handleDeleteClick}
 						class="flex items-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 dark:border-red-700 dark:bg-neutral-900 dark:text-red-300 dark:hover:bg-red-900"
 					>
 						<Trash2 size={14} />
@@ -198,15 +235,15 @@
 			<div class="flex gap-3">
 				<button
 					type="button"
-					on:click={onCancel}
+					onclick={onCancel}
 					class="flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800"
 				>
 					Cancel
 				</button>
 				<button
 					type="button"
-					disabled={saving || !isValid}
-					on:click={handleSaveClick}
+					disabled={saving || !isValid || !$isDirty}
+					onclick={handleSaveClick}
 					class="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent-500 dark:hover:bg-accent-600"
 				>
 					{#if saving}
diff --git a/src/routes/regular-expressions/[databaseId]/new/+page.svelte b/src/routes/regular-expressions/[databaseId]/new/+page.svelte
index 3a9f19c..711487b 100644
--- a/src/routes/regular-expressions/[databaseId]/new/+page.svelte
+++ b/src/routes/regular-expressions/[databaseId]/new/+page.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import RegularExpressionForm from '../components/RegularExpressionForm.svelte';
+	import DirtyModal from '$ui/modal/DirtyModal.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 
-	// Form state - initialize from preset data
-	let name = data.preset.name;
-	let tags: string[] = data.preset.tags;
-	let pattern = data.preset.pattern;
-	let description = data.preset.description;
-	let regex101Id = data.preset.regex101Id;
+	// Initial data from preset or defaults
+	const initialData = {
+		name: data.preset.name,
+		tags: data.preset.tags,
+		pattern: data.preset.pattern,
+		description: data.preset.description,
+		regex101Id: data.preset.regex101Id
+	};
 
 	function handleCancel() {
 		goto(`/regular-expressions/${data.currentDatabase.id}`);
@@ -25,10 +28,8 @@
 	mode="create"
 	databaseName={data.currentDatabase.name}
 	canWriteToBase={data.canWriteToBase}
-	bind:name
-	bind:tags
-	bind:pattern
-	bind:description
-	bind:regex101Id
+	{initialData}
 	onCancel={handleCancel}
 />
+
+<DirtyModal />