refac

src/lib/components/common/SensitiveInput.svelte

@@ -7,26 +7,42 @@
 	export let type = 'text';
 	export let required = true;
 	export let readOnly = false;
-	export let outerClassName = 'flex flex-1 bg-transparent';
-	export let inputClassName = 'w-full text-sm py-0.5 bg-transparent';
-	export let showButtonClassName = 'pl-1.5  transition bg-transparent';
+	export let variant: 'plain' | 'settings' = 'plain';
+	export let outerClassName = 'flex flex-1';
+	export let inputClassName = '';
+	export let showButtonClassName = '';
 	export let screenReader = true;
 	export let autocomplete = 'off';
 	export let name: string | undefined = undefined;
+	let className = '';
+	export { className as class };
 
 	let show = false;
 
-	const inputChromeClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	$: outerClass =
+		variant === 'settings'
+			? `${outerClassName} h-7 items-center rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 transition-colors focus-within:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:focus-within:border-blue-500`
+			: outerClassName;
+	$: inputBaseClass =
+		variant === 'settings'
+			? 'min-w-0 flex-1 bg-transparent text-xs text-gray-700 outline-hidden placeholder:text-gray-300 disabled:text-gray-500 dark:text-gray-300 dark:placeholder:text-gray-700'
+			: 'w-full bg-transparent py-0.5 text-sm outline-hidden';
+	$: resolvedInputClass = `${inputBaseClass} ${variant === 'plain' ? className : ''} ${inputClassName} ${
+		show ? '' : 'password'
+	}`;
+	$: buttonClass =
+		variant === 'settings'
+			? `ml-1.5 bg-transparent text-gray-400 transition hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 ${showButtonClassName}`
+			: `pl-1.5 bg-transparent transition ${showButtonClassName}`;
 </script>
 
-<div class={outerClassName}>
+<div class={outerClass}>
 	{#if screenReader}
 		<label class="sr-only" for={id}>{placeholder || $i18n.t('Password')}</label>
 	{/if}
 	<input
 		{id}
-		class={`${inputClassName} ${show ? '' : 'password'} ${inputChromeClass}`}
+		class={resolvedInputClass}
 		{placeholder}
 		type={type === 'password' && !show ? 'password' : 'text'}
 		bind:value
@@ -36,7 +52,7 @@
 		{autocomplete}
 	/>
 	<button
-		class={showButtonClassName}
+		class={buttonClass}
 		type="button"
 		aria-pressed={show}
 		aria-label={$i18n.t('Make password visible in the user interface')}

src/lib/components/common/SettingsSelect.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+
 	export let value: string | number | boolean = '';
 	export let id = '';
 	export let name = '';
@@ -6,7 +8,7 @@
 	export let placeholder = '';
 	export let required = false;
 	export let disabled = false;
-	export let className = 'w-fit min-w-32';
+	export let className = 'w-fit max-w-full';
 	export let selectClassName = '';
 </script>
 
@@ -20,9 +22,13 @@
 		title={placeholder || undefined}
 		{required}
 		{disabled}
-		class="h-7 w-full truncate rounded-lg border border-gray-100/50 !bg-gray-50/40 ps-2.5 pe-9 text-left text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 disabled:opacity-50 dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500 {selectClassName}"
+		class="h-7 w-full max-w-full appearance-none truncate rounded-lg border border-gray-100/50 !bg-gray-50/40 ps-2.5 pe-8 text-left text-xs text-gray-700 outline-hidden transition-colors [field-sizing:content] focus:border-blue-400 disabled:opacity-50 dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500 {selectClassName}"
 		on:change
 	>
 		<slot />
 	</select>
+	<ChevronDown
+		className="pointer-events-none absolute end-2 top-1/2 size-3.5 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+		strokeWidth="2"
+	/>
 </div>