feat: add placeholder support to empty lists of applied controls in selector

frontend/messages/en.json

@@ -2671,6 +2671,7 @@
 	"doraAttributes": "DORA Attributes",
 	"doraAssessment": "DORA Assessment",
 	"moreOnTerminologiesHelpText": "Hint: more options can be defined through terminologies",
+	"selectPlaceholder": "Select...",
 	"ebiosRmSyncModalTitle": "Risk Assessment Options",
 	"ebiosRmSyncModalBody": "A risk assessment already exists for this EBIOS RM study: \"{name}\"\n\nWould you like to:",
 	"ebiosRmSyncExisting": "Sync Existing",

frontend/messages/fr.json

@@ -2671,6 +2671,7 @@
 	"webhookSecret": "Secret webhook",
 	"webhookSecretAlreadySetHelpText": "Le secret webhook est déjà défini.",
 	"webhookUrl": "URL webhook",
+	"selectPlaceholder": "Sélectionner...",
 	"ebiosRmSyncModalTitle": "Options d'analyse de risque",
 	"ebiosRmSyncModalBody": "Une analyse de risque existe déjà pour cette étude EBIOS RM : \"{name}\"\n\nQue souhaitez-vous faire :",
 	"ebiosRmSyncExisting": "Synchroniser l'existante",

frontend/src/lib/components/Forms/AutocompleteSelect.svelte

@@ -40,6 +40,7 @@
 		disabled?: boolean;
 		hidden?: boolean;
 		translateOptions?: boolean;
+		placeholder?: string | null;
 		options?: Option[];
 		optionsEndpoint?: string;
 		optionsDetailedUrlParameters?: [string, string][];
@@ -88,6 +89,7 @@
 		disabled = false,
 		hidden = false,
 		translateOptions = true,
+		placeholder = m.selectPlaceholder(),
 		options = [],
 		optionsEndpoint = '',
 		optionsDetailedUrlParameters = [],
@@ -371,7 +373,7 @@
 		cachedOptions = selected;
 	});
 
-	run(() => {
+	$effect(() => {
 		// Only update value after options are loaded
 		if (!isInternalUpdate && optionsLoaded && !arraysEqual(selectedValues, $value)) {
 			isInternalUpdate = true;
@@ -457,6 +459,8 @@
 			duplicates={false}
 			key={JSON.stringify}
 			filterFunc={fastFilter}
+			{placeholder}
+			--sms-placeholder-color="#9ca3af"
 		>
 			{#snippet option({ option })}
 				{#if optionSnippet}
@@ -552,3 +556,9 @@
 		<p class="text-sm text-gray-500 whitespace-pre-line">{helpText}</p>
 	{/if}
 </div>
+
+<style>
+	.control :global(input::placeholder) {
+		font-style: italic;
+	}
+</style>

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -226,6 +226,9 @@
 	const rows = handler.getRows();
 	let invalidateTable = $state(false);
 
+	// Hide search field when table is empty to avoid user confusion
+	let showSearch = $derived(search && $rows.length > 0);
+
 	$tableHandlers[baseEndpoint] = handler;
 
 	handler.onChange((state: State) =>
@@ -249,7 +252,6 @@
 			featureFlags: page.data?.featureflags
 		})
 	);
-
 	onMount(() => {
 		if (orderBy) {
 			orderBy.direction === 'asc'
@@ -472,7 +474,7 @@
 				{/snippet}
 			</Popover>
 		{/if}
-		{#if search}
+		{#if showSearch}
 			<Search {handler} />
 		{/if}
 		{#if pagination && rowsPerPage}

frontend/src/lib/components/ModelTable/Search.svelte

@@ -28,3 +28,10 @@
 	bind:value
 	oninput={search}
 />
+
+<style>
+	#search-input::placeholder {
+		font-style: italic;
+		color: #9ca3af;
+	}
+</style>