From b5541b23a473767fa09c94a3d583dafed727cb5e Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Mon, 7 Apr 2025 22:52:51 +0200
Subject: [PATCH] fix: freeze when clicking script history diff button (#5581)

* fix: validate saved module before passing to flow module editor

* fix: freeze when clicking script history diff button
---
 .../components/ScriptVersionHistory.svelte    | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/ScriptVersionHistory.svelte b/frontend/src/lib/components/ScriptVersionHistory.svelte
index d3c53c5b1a..d07f1d716d 100644
--- a/frontend/src/lib/components/ScriptVersionHistory.svelte
+++ b/frontend/src/lib/components/ScriptVersionHistory.svelte
@@ -13,16 +13,15 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let openDetails: boolean = false
-	export let scriptPath: string
+	let { openDetails = false, scriptPath }: { openDetails?: boolean; scriptPath: string } = $props()
 
-	let deploymentMsgUpdateMode = false
-	let deploymentMsgUpdate: string | undefined = undefined
+	let deploymentMsgUpdateMode = $state(false)
+	let deploymentMsgUpdate: string | undefined = $state()
 
-	let selectedVersion: ScriptHistory | undefined = undefined
-	let selectedVersionIndex: number | undefined = undefined
-	let versions: ScriptHistory[] | undefined = undefined
-	let loading: boolean = false
+	let selectedVersion: ScriptHistory | undefined = $state()
+	let selectedVersionIndex: number | undefined = $state()
+	let versions: ScriptHistory[] | undefined = $state()
+	let loading: boolean = $state(false)
 
 	async function loadVersions() {
 		loading = true
@@ -56,8 +55,8 @@
 
 	loadVersions()
 
-	let showDiff: boolean = false
-	let previousHash: string | undefined = undefined
+	let showDiff: boolean = $state(false)
+	let previousHash: string | undefined = $state()
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -67,15 +66,15 @@
 				{#if versions && versions.length > 0}
 					<div class="flex gap-2 flex-col">
 						{#each versions ?? [] as version, versionIndex}
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<div
 								class={classNames(
 									'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer ',
 									selectedVersion?.script_hash == version.script_hash ? 'bg-surface-selected' : '',
 									'hover:bg-surface-hover'
 								)}
-								on:click={() => {
+								onclick={() => {
 									selectedVersion = version
 									selectedVersionIndex = versionIndex
 
@@ -135,10 +134,15 @@
 										type="text"
 										bind:value={deploymentMsgUpdate}
 										class="!w-auto grow"
-										on:click|stopPropagation={() => {}}
-										on:keydown|stopPropagation
-										on:keypress|stopPropagation={({ key }) => {
-											if (key === 'Enter') updateDeploymentMsg(selectedVersion?.script_hash)
+										onclick={(e) => {
+											e.stopPropagation()
+										}}
+										onkeydown={(e) => {
+											e.stopPropagation()
+										}}
+										onkeypress={(e) => {
+											e.stopPropagation()
+											if (e.key === 'Enter') updateDeploymentMsg(selectedVersion?.script_hash)
 										}}
 									/>
 									<Button
@@ -174,7 +178,7 @@
 									Version {selectedVersion.script_hash}
 								{/if}
 								<button
-									on:click={() => {
+									onclick={() => {
 										deploymentMsgUpdate = selectedVersion?.deployment_msg
 										deploymentMsgUpdateMode = true
 									}}