feat(AssetBrowserModal): set initial focus to SearchBox (#5945)

## Summary

Some quick design feedback.

## Changes

1. Fix the placeholder text so it's showing up correctly.
2. Make the SearchBox take initial focus when the modal is opened.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5945-feat-AssetBrowserModal-set-initial-focus-to-SearchBox-2846d73d365081bfb3e0cde78c827d5f)
by [Unito](https://www.unito.io)

Author: arjansingh

src/components/input/SearchBox.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta<typeof SearchBox> = {
   component: SearchBox,
   tags: ['autodocs'],
   argTypes: {
-    placeHolder: {
+    placeholder: {
       control: 'text'
     },
     showBorder: {
@@ -22,7 +22,7 @@ const meta: Meta<typeof SearchBox> = {
     }
   },
   args: {
-    placeHolder: 'Search...',
+    placeholder: 'Search...',
     showBorder: false,
     size: 'md'
   }

src/components/input/SearchBox.vue

@@ -5,10 +5,10 @@
       ref="input"
       v-model="searchQuery"
       :aria-label="
-        placeHolder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
+        placeholder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
       "
       :placeholder="
-        placeHolder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
+        placeholder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
       "
       type="text"
       unstyled
@@ -19,17 +19,19 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  placeHolder,
+  autofocus = false,
+  placeholder,
   showBorder = false,
   size = 'md'
 } = defineProps<{
-  placeHolder?: string
+  autofocus?: boolean
+  placeholder?: string
   showBorder?: boolean
   size?: 'md' | 'lg'
 }>()
@@ -43,6 +45,8 @@ const focusInput = () => {
   }
 }
 
+onMounted(() => autofocus && focusInput())
+
 const wrapperStyle = computed(() => {
   const baseClasses = [
     'relative flex w-full items-center gap-2',

src/locales/en/main.json

@@ -1944,7 +1944,7 @@
     "connectionError": "Please check your connection and try again",
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "noModelsInFolder": "No {type} available in this folder",
-    "searchAssetsPlaceholder": "Search assets...",
+    "searchAssetsPlaceholder": "Type to search...",
     "allModels": "All Models",
     "allCategory": "All {category}",
     "unknown": "Unknown",

src/platform/assets/components/AssetBrowserModal.vue

@@ -23,6 +23,7 @@
     <template #header>
       <SearchBox
         v-model="searchQuery"
+        :autofocus="true"
         size="lg"
         :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
         class="max-w-96"