improve argenum

frontend/src/lib/components/ArgEnum.svelte

@@ -10,6 +10,7 @@
 	export let defaultValue: string | undefined
 	export let valid: boolean
 	export let create: boolean
+	export let required: boolean
 
 	const dispatch = createEventDispatcher()
 
@@ -22,26 +23,36 @@
 	}
 </script>
 
-<AutoComplete
-	items={[...(enum_ ?? []), ...customItems]}
-	bind:selectedItem={value}
-	inputClassName={twMerge(
-		'bg-surface-secondary flex',
-		valid
-			? ''
-			: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
-	)}
-	value={value ?? defaultValue}
-	hideArrow={true}
-	dropdownClassName="!text-sm !py-2 !rounded-sm !border-gray-200 !border !shadow-md !bg-surface-primary"
-	className="w-full"
-	noInputStyles
-	onFocus={() => {
-		dispatch('focus')
-	}}
-	{create}
-	{onCreate}
-	{disabled}
-	{autofocus}
-	createText="Press enter to use this non-predefined value"
-/>
+<div class="w-full flex-col">
+	<div class="w-full">
+		<AutoComplete
+			items={[...(enum_ ?? []), ...customItems]}
+			bind:selectedItem={value}
+			inputClassName={twMerge(
+				'bg-surface-secondary flex',
+				valid
+					? ''
+					: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+			)}
+			value={value ?? defaultValue}
+			hideArrow={true}
+			dropdownClassName="!text-sm !py-2 !rounded-sm !border-gray-200 !border !shadow-md !bg-surface-primary"
+			className="w-full"
+			noInputStyles
+			onFocus={() => {
+				dispatch('focus')
+			}}
+			{create}
+			{required}
+			{onCreate}
+			{disabled}
+			{autofocus}
+			createText="Press enter to use this non-predefined value"
+		/>
+	</div>
+	{#if value}
+		<div class="-mt-2">
+			<span class="text-2xs text-secondary">selected: {value}</span>
+		</div>
+	{/if}
+</div>

frontend/src/lib/components/ArgInput.svelte

@@ -409,6 +409,7 @@
 													<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
 												{:else if Array.isArray(itemsType?.enum)}
 													<ArgEnum
+														required
 														create={extra['disableCreate'] != true}
 														on:focus={() => {
 															dispatch('focus')
@@ -520,6 +521,7 @@
 			{:else if inputCat == 'enum'}
 				<div class="flex flex-row w-full gap-1">
 					<ArgEnum
+						{required}
 						create={extra['disableCreate'] != true}
 						{defaultValue}
 						{valid}