feat(frontend): sets autofocus on select field on desktop

src/frontend/src/lib/components/manage/ManageTokens.svelte

@@ -25,6 +25,7 @@
 	import type { ExchangesData } from '$lib/types/exchange';
 	import type { Token } from '$lib/types/token';
 	import type { TokenToggleable } from '$lib/types/token-toggleable';
+	import { isDesktop } from '$lib/utils/device.utils';
 	import { replacePlaceholders } from '$lib/utils/i18n.utils';
 	import { filterTokensForSelectedNetwork } from '$lib/utils/network.utils';
 	import { filterTokens, pinEnabledTokensAtTop, sortTokens } from '$lib/utils/tokens.utils';
@@ -143,6 +144,7 @@
 		bind:filter
 		noMatch={noTokensMatch}
 		placeholder={$i18n.tokens.placeholder.search_token}
+		autofocus={isDesktop()}
 	/>
 </div>
 

src/frontend/src/lib/components/swap/SwapTokensList.svelte

@@ -12,6 +12,7 @@
 	import { i18n } from '$lib/stores/i18n.store';
 	import { SWAP_CONTEXT_KEY, type SwapContext } from '$lib/stores/swap.store';
 	import type { Token } from '$lib/types/token';
+	import { isDesktop } from '$lib/utils/device.utils';
 	import { filterTokens, pinTokensWithBalanceAtTop } from '$lib/utils/tokens.utils';
 
 	const { sourceToken, destinationToken } = getContext<SwapContext>(SWAP_CONTEXT_KEY);
@@ -40,6 +41,7 @@
 	bind:filter
 	noMatch={noTokensMatch}
 	placeholder={$i18n.tokens.placeholder.search_token}
+	autofocus={isDesktop()}
 />
 
 <div class="my-6 flex flex-col overflow-y-hidden sm:max-h-[26rem]">

src/frontend/src/lib/components/ui/InputSearch.svelte

@@ -7,9 +7,10 @@
 	export let filter = '';
 	export let noMatch = false;
 	export let placeholder: string;
+	export let autofocus = false;
 </script>
 
-<InputTextWithAction name="filter" required={false} bind:value={filter} {placeholder}>
+<InputTextWithAction name="filter" required={false} bind:value={filter} {placeholder} {autofocus}>
 	<svelte:fragment slot="inner-end">
 		{#if noMatch}
 			<button on:click={() => (filter = '')} aria-label={$i18n.core.text.clear_filter}>

src/frontend/src/lib/components/ui/InputTextWithAction.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
 	import { Input } from '@dfinity/gix-components';
+	import { nonNullish } from '@dfinity/utils';
+	import { onMount } from 'svelte';
 
 	export let value = '';
 	export let name: string;
 	export let placeholder: string;
 	export let required = true;
 	export let testId: string | undefined = undefined;
+	export let autofocus = false;
+
+	let inputElement: HTMLInputElement | undefined;
+
+	onMount(() => {
+		if (autofocus && nonNullish(inputElement)) {
+			inputElement.focus();
+		}
+	});
 </script>
 
 <Input
@@ -18,6 +29,7 @@
 	autocomplete="off"
 	{testId}
 	on:nnsInput
+	bind:inputElement
 >
 	<slot name="inner-end" slot="inner-end" />
 </Input>