force focus border for TemplateEditor

frontend/src/lib/components/TemplateEditor.svelte

@@ -26,6 +26,7 @@
 	import EditorTheme from './EditorTheme.svelte'
 	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 	import { setMonacoJsonOptions } from './monacoLanguagesOptions'
+	import { inputBorderClass } from './text_input/TextInput.svelte'
 
 	export const conf = {
 		wordPattern:
@@ -505,10 +506,12 @@
 
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
+			isFocus = true
 		})
 
 		editor.onDidBlurEditorText(() => {
 			dispatch('blur')
+			isFocus = false
 			updateCode()
 		})
 
@@ -604,6 +607,7 @@
 		editor?.focus()
 	}
 
+	let isFocus = false
 	let mounted = false
 	let loadTimeout: number | undefined = undefined
 	onMount(async () => {
@@ -661,16 +665,14 @@
 		{code}
 		lineNumbersWidth={14}
 		lineNumbersOffset={-20}
-		class="border template nonmain-editor rounded min-h-4 bg-surface-secondary !py-[8px] mx-0.5 overflow-clip"
+		class="template nonmain-editor rounded min-h-4 bg-surface-secondary !py-[8px] mx-0.5 overflow-clip"
 	/>
 {/if}
 <div
 	bind:this={divEl}
 	style="height: 18px; padding-left: 8px;"
-	class="{$$props.class ??
-		''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip {!editor
-		? 'hidden'
-		: ''}"
+	class="{inputBorderClass({ forceFocus: isFocus })} {$$props.class ??
+		''} template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip {!editor ? 'hidden' : ''}"
 	bind:clientWidth={width}
 ></div>
 

frontend/src/lib/components/text_input/TextInput.svelte

@@ -1,3 +1,23 @@
+<script module lang="ts">
+	export function inputBorderClass({
+		error,
+		forceFocus
+	}: {
+		error?: boolean
+		forceFocus?: boolean
+	} = {}) {
+		return twMerge(
+			'transition-colors  border',
+			forceFocus
+				? '!border-nord-900 dark:!border-nord-900'
+				: '!border-transparent focus:!border-nord-900 dark:focus:!border-nord-900 hover:!border-nord-400 dark:hover:!border-nord-300',
+			error
+				? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
+				: '!border-transparent'
+		)
+	}
+</script>
+
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements'
 	import { twMerge } from 'tailwind-merge'
@@ -16,15 +36,11 @@
 	{...inputProps}
 	class={twMerge(
 		// TODO Make tailwind classes for every color
-		'!bg-surface-secondary !border-transparent !shadow-none !py-2 !px-4',
+		'!bg-surface-secondary !shadow-none !py-2 !px-4',
 		'focus:!ring-0',
 		'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
 		'!rounded-md',
-		'transition-colors',
-		'focus:!border-nord-900 dark:focus:!border-nord-900 hover:!border-nord-400 dark:hover:!border-nord-300',
-		error
-			? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
-			: '!border-transparent',
+		inputBorderClass({ error: !!error }),
 		className
 	)}
 	bind:value