fix(frontend): make prop search case insensitive (#6512)

* fix(frontend): make prop search case insensitive

* fix search object

* autofocus on search

* restore index search for arrays

frontend/src/lib/components/propertyPicker/ObjectViewer.svelte

@@ -3,7 +3,7 @@
 
 	import { copyToClipboard, truncate } from '$lib/utils'
 
-	import { createEventDispatcher, untrack, type Snippet } from 'svelte'
+	import { createEventDispatcher, tick, untrack, type Snippet } from 'svelte'
 	import { computeKey, keepByKeyOrValue } from './utils'
 	import { NEVER_TESTED_THIS_FAR } from '../flows/models'
 	import Portal from '$lib/components/Portal.svelte'
@@ -139,6 +139,7 @@
 	let closeBracket = $derived(isArray ? ']' : '}')
 	let keyLimit = $derived(isArray ? 5 : 100)
 	let fullyCollapsed = $derived(keys.length > 1 && collapsed)
+	let searchInput: HTMLInputElement | undefined = $state(undefined)
 </script>
 
 {#snippet renderScalar(k: string, v: any)}
@@ -200,6 +201,7 @@
 					class="!h-6 !text-2xs mt-0.5"
 					bind:value={search}
 					placeholder="Search..."
+					bind:this={searchInput}
 				/>
 				<button
 					class="absolute right-2 top-1 rounded-full hover:bg-surface-hover focus:bg-surface-hover text-secondary p-0.5"
@@ -215,7 +217,10 @@
 				iconOnly
 				btnClasses="text-tertiary hover:text-primary"
 				startIcon={{ icon: Search }}
-				on:click={() => (searchOpen = true)}
+				on:click={() => {
+					searchOpen = true
+					tick().then(() => searchInput?.focus())
+				}}
 			></Button>
 		{/if}
 	</div>

frontend/src/lib/components/propertyPicker/utils.ts

@@ -1,19 +1,24 @@
 function filterObject(obj: any, key: string, filterValue: boolean): any {
+	const keyLower = key.toLowerCase()
 	if (typeof obj !== 'object' || obj === null) {
 		if (!filterValue || obj === undefined || obj === null) {
 			return undefined
 		} else {
-			return obj.toString().includes(key) ? obj : undefined
+			return obj.toString().toLowerCase().includes(keyLower) ? obj : undefined
 		}
 	} else if (Array.isArray(obj)) {
 		let a = obj
-			.map((k, o) =>
-				typeof o == 'object'
+			.map((o, k) => {
+				// match index
+				if (String(k).toLowerCase().includes(keyLower)) {
+					return o
+				}
+				return typeof o == 'object'
 					? filterObject(o, key, filterValue)
-					: String(k - 1).includes(key)
+					: filterValue && String(o).toLowerCase().includes(keyLower)
 						? o
 						: undefined
-			)
+			})
 			.filter((v) => v !== undefined)
 		if (a.length === 0) {
 			return undefined
@@ -23,7 +28,9 @@ function filterObject(obj: any, key: string, filterValue: boolean): any {
 	} else {
 		let o = Object.fromEntries(
 			Object.entries(obj)
-				.map(([k, v]) => (k.includes(key) ? [k, v] : [k, filterObject(v, key, filterValue)]))
+				.map(([k, v]) =>
+					k.toLowerCase().includes(keyLower) ? [k, v] : [k, filterObject(v, key, filterValue)]
+				)
 				.filter(([k, v]) => v !== undefined)
 		)
 		if (Object.keys(o).length === 0) {