fix: app editor svelte 5 fixes (#5570)

* fix: properly bind to array elements in Svelte each loops

This commit fixes an issue where binding directly to loop variables in Svelte's #each loops doesn't properly update the original array. Instead of binding directly to the loop variable, we now bind to the array elements using index variables.

The pattern used is: - Change: {#each arr as el} -> {#each arr as _, index} - Change: bind:value={el} -> bind:value={arr[index]}

Modified files: - frontend/src/lib/components/ArrayTypeNarrowing.svelte - frontend/src/lib/components/apps/editor/AppInputs.svelte - frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte

* better app settings panel reactivity

* fix: app editor table svelte 5 fixes

---------

Co-authored-by: Guilhem <guilhemlemouel@gmail.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -109,8 +109,7 @@
 
 	function refreshActions(actions: TableAction[]) {
 		if (!deepEqual(actions, lastActions)) {
-			lastActions = [...actions]
-
+			lastActions = structuredClone(actions)
 			updateOptions()
 		}
 	}

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -202,12 +202,8 @@
 
 	function refreshActions(actions: TableAction[]) {
 		if (!deepEqual(actions, lastActions)) {
-			// structuredClone did not work because it did not copy the array's
-			// prototype, causing deepEqual to return false although the objects were
-			// semantically the same
-			lastActions = [...actions]
-			// HACK: without setTimeout, the actions mount but aren't visible
-			setTimeout(updateOptions, 0.5)
+			lastActions = structuredClone(actions)
+			updateOptions()
 		}
 	}
 
@@ -459,7 +455,6 @@
 		}
 	}
 
-	let lastComputedColumnDefs: [Record<string, any>[] | undefined, TableAction[] | undefined]
 	function updateOptions() {
 		try {
 			const columnDefs =
@@ -481,10 +476,6 @@
 				})
 			}
 
-			// Don't update if the columns
-			if (deepEqual(lastComputedColumnDefs, [columnDefs, actions])) return
-			lastComputedColumnDefs = [columnDefs, actions]
-
 			api?.updateGridOptions({
 				rowData: value,
 				columnDefs: columnDefs.map((fields) => {

frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, onMount } from 'svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
 	import type { AppViewerContext } from '../../../types'
 	import type { TableAction } from '$lib/components/apps/editor/component'
 
@@ -32,29 +32,6 @@
 	const dispatch = createEventDispatcher()
 	const { selectedComponent, hoverStore, mode, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
-
-	let rowDiv: HTMLDivElement | undefined = undefined
-
-	let visible = false
-	onMount(() => {
-		// apply w-full to the the parent of the parent of the rowDiv
-		if (rowDiv) {
-			const parent = rowDiv.parentElement?.parentElement?.parentElement
-			if (parent) {
-				parent.classList.add('w-full')
-				visible = true
-			} else {
-				//sometimes the parent is not available immediately
-				setTimeout(() => {
-					const parent = rowDiv?.parentElement?.parentElement?.parentElement
-					if (parent) {
-						parent.classList.add('w-full')
-					}
-					visible = true
-				}, 10)
-			}
-		}
-	})
 </script>
 
 <RowWrapper
@@ -66,10 +43,8 @@
 	<div
 		class={twMerge(
 			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1 w-full transition-opacity duration-50',
-			wrapActions ? 'flex-wrap' : '',
-			visible ? 'opacity-100' : 'opacity-0'
+			wrapActions ? 'flex-wrap' : ''
 		)}
-		bind:this={rowDiv}
 	>
 		{#each actions as action, actionIndex}
 			<!-- svelte-ignore a11y-mouse-events-have-key-events -->