From 93e59a932749ef20039d5dbf206d67ec83949c7b Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Tue, 23 Sep 2025 18:04:22 +0200
Subject: [PATCH] started updating PropertyEditor

---
 .../lib/components/ArrayTypeNarrowing.svelte  | 70 ++++++++++---------
 .../lib/components/NumberTypeNarrowing.svelte | 48 ++++++++-----
 .../lib/components/StringTypeNarrowing.svelte |  6 +-
 .../inputs/currency/CurrencyInput.svelte      |  3 +-
 .../components/schema/PropertyEditor.svelte   | 49 ++++++-------
 .../components/text_input/TextInput.svelte    |  2 +-
 6 files changed, 100 insertions(+), 78 deletions(-)

diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
index 86b4fb6c10..0a27ddf228 100644
--- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte
+++ b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
@@ -10,6 +10,7 @@
 	import type { SchemaProperty } from '$lib/common'
 	import Toggle from './Toggle.svelte'
 	import { tick } from 'svelte'
+	import Select from './select/Select.svelte'
 
 	interface Props {
 		canEditResourceType?: boolean
@@ -54,39 +55,44 @@
 
 {#if canEditResourceType || originalType == 'string[]' || originalType == 'object[]'}
 	<Label label="Items type">
-		<select
-			bind:value={selected}
-			onchange={() => {
-				if (selected == 'enum') {
-					itemsType = { type: 'string', enum: [] }
-				} else if (selected == 'string') {
-					itemsType = { type: 'string' }
-				} else if (selected == 'number') {
-					itemsType = { type: 'number' }
-				} else if (selected == 'object') {
-					itemsType = { ...itemsType, type: 'object' }
-				} else if (selected == 'bytes') {
-					itemsType = { type: 'string', contentEncoding: 'base64' }
-				} else if (selected == 'resource') {
-					itemsType = { type: 'resource', resourceType: itemsType?.resourceType }
-				} else if (selected == 's3object') {
-					itemsType = { type: 'object', resourceType: 's3object' }
-				} else {
-					itemsType = undefined
+		<Select
+			bind:value={
+				() => selected,
+				(v) => {
+					selected = v
+					if (selected == 'enum') {
+						itemsType = { type: 'string', enum: [] }
+					} else if (selected == 'string') {
+						itemsType = { type: 'string' }
+					} else if (selected == 'number') {
+						itemsType = { type: 'number' }
+					} else if (selected == 'object') {
+						itemsType = { ...itemsType, type: 'object' }
+					} else if (selected == 'bytes') {
+						itemsType = { type: 'string', contentEncoding: 'base64' }
+					} else if (selected == 'resource') {
+						itemsType = { type: 'resource', resourceType: itemsType?.resourceType }
+					} else if (selected == 's3object') {
+						itemsType = { type: 'object', resourceType: 's3object' }
+					} else {
+						itemsType = undefined
+					}
 				}
-			}}
-			id="array-type-narrowing"
-		>
-			<option value="string"> Items are strings</option>
-			<option value="enum">Items are strings from an enum</option>
-			{#if originalType != 'string[]'}
-				<option value="s3object">Items are S3 objects</option>
-				<option value="object"> Items are objects (JSON)</option>
-				<option value="resource"> Items are resources</option>
-				<option value="number">Items are numbers</option>
-				<option value="bytes">Items are bytes</option>
-			{/if}
-		</select>
+			}
+			items={[
+				{ value: 'string', label: 'Items are strings' },
+				{ value: 'enum', label: 'Items are strings from an enum' },
+				...(originalType != 'string[]'
+					? [
+							{ value: 's3object', label: 'Items are S3 objects' },
+							{ value: 'object', label: 'Items are objects (JSON)' },
+							{ value: 'resource', label: 'Items are resources' },
+							{ value: 'number', label: 'Items are numbers' },
+							{ value: 'bytes', label: 'Items are bytes' }
+						]
+					: [])
+			] as { value: string; label: string }[]}
+		/>
 	</Label>
 {:else if itemsType?.resourceType}
 	<Label label="Resource type">
diff --git a/frontend/src/lib/components/NumberTypeNarrowing.svelte b/frontend/src/lib/components/NumberTypeNarrowing.svelte
index 5d0ffe2c51..e3796889ae 100644
--- a/frontend/src/lib/components/NumberTypeNarrowing.svelte
+++ b/frontend/src/lib/components/NumberTypeNarrowing.svelte
@@ -3,6 +3,8 @@
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 	import { selectOptions } from './apps/editor/component'
+	import Select from './select/Select.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	interface Props {
 		min: number | undefined
@@ -44,7 +46,11 @@
 					options={{ right: 'Enabled' }}
 					size="xs"
 				/>
-			{/snippet} <input type="number" bind:value={min} disabled={!minChecked} />
+			{/snippet}
+			<TextInput
+				inputProps={{ type: 'number', disabled: !minChecked }}
+				bind:value={() => min?.toString(), (v) => (min = v ? parseInt(v) : undefined)}
+			/>
 		</Label>
 
 		<Label label="Max" class="w-full col-span-1 ">
@@ -68,31 +74,41 @@
 					size="xs"
 				/>
 			{/snippet}
-			<input type="number" bind:value={max} disabled={!maxChecked} />
+			<TextInput
+				inputProps={{ type: 'number', disabled: !maxChecked }}
+				bind:value={() => max?.toString(), (v) => (max = v ? parseInt(v) : undefined)}
+			/>
 		</Label>
 	</div>
-	<div class="grid grid-cols-3 gap-4">
-		<Label label="Currency" class="w-full col-span-2">
+	<div class="flex gap-2">
+		<Label label="Currency" class=" col-span-2">
 			{#snippet header()}
 				<Tooltip light small>
 					Select a currency to display the number in. If a currency is selected, you can also select
 					a locale to format the number according to that locale.
 				</Tooltip>
 			{/snippet}
-			<select bind:value={currency}>
-				<option value={undefined}> No currency </option>
-				{#each selectOptions.currencyOptions as c}
-					<option value={c}>{c}</option>
-				{/each}
-			</select>
+			<Select
+				bind:value={
+					() => currency,
+					(v) => {
+						currency = v
+						if (!v) currencyLocale = undefined
+					}
+				}
+				items={selectOptions.currencyOptions.map((c) => ({ label: c, value: c }))}
+				placeholder="No currency"
+				clearable
+			/>
 		</Label>
 		<Label label="Currency locale" class="w-full">
-			<select bind:value={currencyLocale} disabled={!currency}>
-				<option value={undefined}> No locale </option>
-				{#each selectOptions.localeOptions as c}
-					<option value={c}>{c}</option>
-				{/each}
-			</select>
+			<Select
+				bind:value={currencyLocale}
+				items={selectOptions.localeOptions.map((c) => ({ label: c, value: c }))}
+				placeholder="No locale"
+				disabled={!currency}
+				clearable
+			/>
 		</Label>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index 5fa15f090a..60beab3149 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -11,6 +11,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import RegexGen from './copilot/RegexGen.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	interface Props {
 		pattern: string | undefined
@@ -326,7 +327,10 @@
 	{:else if kind == 'none'}
 		{#if !noExtra}
 			<Label label="Min textarea rows">
-				<input type="number" bind:value={minRows} />
+				<TextInput
+					inputProps={{ type: 'number' }}
+					bind:value={() => minRows?.toString(), (v) => (minRows = v ? parseInt(v) : undefined)}
+				/>
 			</Label>
 		{/if}
 	{:else if kind === 'base64'}
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
index 31dd81b882..61bbe2aeeb 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+	import { inputBaseClass, inputBorderClass } from '$lib/components/text_input/TextInput.svelte'
 	import { onMount, untrack } from 'svelte'
 
 	/* Forked from MIT LICENSE
@@ -208,7 +209,7 @@
 		bind:value
 	/>
 	<input
-		class="
+		class="{inputBaseClass} {inputBorderClass()} 
 			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
 			{isNegativeAllowed && !isZero && !isNegative
 			? (inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE)
diff --git a/frontend/src/lib/components/schema/PropertyEditor.svelte b/frontend/src/lib/components/schema/PropertyEditor.svelte
index c72b5593a2..f3b94f24dd 100644
--- a/frontend/src/lib/components/schema/PropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/PropertyEditor.svelte
@@ -16,6 +16,7 @@
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import { createEventDispatcher, onMount, untrack } from 'svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import TextInput, { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte'
 
 	interface Props {
 		description?: string
@@ -179,6 +180,7 @@
 				onkeydown={onKeyDown}
 				onchange={() => dispatch('change')}
 				placeholder="Field description"
+				class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
 			></textarea>
 		</Label>
 
@@ -186,30 +188,31 @@
 			{#snippet header()}
 				<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
 			{/snippet}
-			<input
+			<TextInput
 				bind:value={title}
-				onchange={() => dispatch('change')}
-				onkeydown={onKeyDown}
-				placeholder="Field title"
+				inputProps={{ placeholder: 'Field title', onkeydown, onchange: () => dispatch('change') }}
 			/>
 		</Label>
 
-		<Label label="Placeholder">
-			{#snippet header()}
-				<Tooltip light>
-					Will be displayed in the input field when the field is empty. If not set, the default
-					value will be used. The placeholder is disabled depending on the field type, format, etc.
-				</Tooltip>
-			{/snippet}
+		{#if shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
+			<Label label="Placeholder">
+				{#snippet header()}
+					<Tooltip light>
+						Will be displayed in the input field when the field is empty. If not set, the default
+						value will be used. The placeholder is disabled depending on the field type, format,
+						etc.
+					</Tooltip>
+				{/snippet}
 
-			<textarea
-				placeholder="Enter a placeholder"
-				rows="1"
-				bind:value={placeholder}
-				onchange={() => dispatch('change')}
-				disabled={!shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
-			></textarea>
-		</Label>
+				<textarea
+					placeholder="Enter a placeholder"
+					rows="1"
+					bind:value={placeholder}
+					onchange={() => dispatch('change')}
+					class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
+				></textarea>
+			</Label>
+		{/if}
 
 		{#if type == 'array'}
 			<ArrayTypeNarrowing
@@ -285,11 +288,3 @@
 		{@render children?.()}
 	</div>
 </div>
-
-<style>
-	input::-webkit-outer-spin-button,
-	input::-webkit-inner-spin-button {
-		-webkit-appearance: none !important;
-		margin: 0;
-	}
-</style>
diff --git a/frontend/src/lib/components/text_input/TextInput.svelte b/frontend/src/lib/components/text_input/TextInput.svelte
index 8ea757110f..cdbe3bdf12 100644
--- a/frontend/src/lib/components/text_input/TextInput.svelte
+++ b/frontend/src/lib/components/text_input/TextInput.svelte
@@ -18,7 +18,7 @@
 	}
 
 	export const inputBaseClass =
-		'rounded-md focus:ring-0 no-default-style text-sm text-tertiary !bg-surface-secondary disabled:!bg-surface-disabled disabled:cursor-not-allowed shadow-none py-2 px-4'
+		'rounded-md focus:ring-0 no-default-style text-sm text-tertiary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-4 placeholder-hint'
 </script>
 
 <script lang="ts">