Align desktop UI with mobile shop flows and polish navigation

src/components/ui/SearchField.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 defineProps<{
   modelValue?: string
   placeholder?: string
@@ -7,13 +9,23 @@ defineProps<{
 defineEmits<{
   'update:modelValue': [value: string]
 }>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+function focus() {
+  inputRef.value?.focus()
+}
+
+defineExpose({ focus })
 </script>
 
 <template>
   <div class="search-field">
     <input
+      ref="inputRef"
       class="search-field__input"
       type="search"
+      enterkeyhint="search"
       :value="modelValue"
       :placeholder="placeholder"
       @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"