eval=>static preserves labeled state, wording (w/ label)

frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -11,7 +11,11 @@
 	import RefreshDatabaseStudioTable from './RefreshDatabaseStudioTable.svelte'
 	import { isObjectOptionArray, isStringArray } from '$lib/components/multiselect/types'
 
-	export let componentInput: StaticInput<any[]> & { loading?: boolean; expr?: string }
+	export let componentInput: StaticInput<any[]> & {
+		loading?: boolean
+		expr?: string
+		isLabeled?: boolean
+	}
 	export let subFieldType: InputType | undefined = undefined
 	export let selectOptions: StaticOptions['selectOptions'] | undefined = undefined
 	export let id: string | undefined
@@ -223,6 +227,7 @@
 		const newComponentInput = { ...componentInput }
 		newComponentInput.value = items.map((item) => item.value).filter((item) => item != undefined)
 		newComponentInput.expr = JSON.stringify(newComponentInput.value)
+		newComponentInput.isLabeled = labeled
 
 		const newSubFieldType = labeled ? 'labeledselect' : 'simplestringselect'
 
@@ -281,7 +286,7 @@
 			{#if hasLabeledMode}
 				<Toggle
 					options={{
-						right: 'Labeled'
+						right: 'w/ label'
 					}}
 					size="xs"
 					bind:checked={labeled}

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -3,7 +3,7 @@
 	import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import JsonEditor from './JsonEditor.svelte'
-	import { getContext } from 'svelte'
+	import { getContext, onMount } from 'svelte'
 	import type { AppViewerContext } from '$lib/components/apps/types'
 	import IconSelectInput from './IconSelectInput.svelte'
 	import ColorInput from './ColorInput.svelte'
@@ -24,7 +24,7 @@
 	import EditableSchemaDrawer from '$lib/components/schema/EditableSchemaDrawer.svelte'
 	import AppPicker from '$lib/components/wizards/AppPicker.svelte'
 
-	export let componentInput: StaticInput<any> | undefined
+	export let componentInput: (StaticInput<any> & { isLabeled?: boolean }) | undefined
 	export let fieldType: InputType | undefined = undefined
 	export let subFieldType: InputType | undefined = undefined
 	export let selectOptions: StaticOptions['selectOptions'] | undefined = undefined
@@ -35,6 +35,18 @@
 
 	const { onchange } = getContext<AppViewerContext>('AppViewerContext')
 
+	$: componentInput && onchange?.()
+
+	onMount(() => {
+		/** preserve the `labeled` toggling when switching from eval to static */
+		if (
+			componentInput?.isLabeled &&
+			fieldType === 'array' &&
+			subFieldType === 'simplestringselect'
+		) {
+			subFieldType = 'labeledselect'
+		}
+	})
 	/**
 	 * Workaround for MultiSelect
 	 *
@@ -49,12 +61,9 @@
 			return
 		}
 		const { newComponentInput, newSubFieldType } = newData
-
 		componentInput = { ...componentInput, ...newComponentInput }
 		subFieldType = newSubFieldType
 	}
-
-	$: componentInput && onchange?.()
 </script>
 
 {#key subFieldType}