Merge pull request #260 from starknt/feat/youtube-search-bar

feat: press `/` to focus on the search bar like youtube

src/components/SearchBar/SearchBar.vue

@@ -1,5 +1,6 @@
 <!-- TODO: refactor all that code -->
 <script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
 import {
   addSearchHistory,
@@ -14,6 +15,7 @@ defineProps<{
   focusedCharacter?: string
 }>()
 
+const keywordRef = ref<HTMLInputElement>()
 const isFocus = ref<boolean>(false)
 const keyword = ref<string>('')
 const suggestions = reactive<SuggestionItem[]>([])
@@ -28,6 +30,16 @@ watch(isFocus, async (focus) => {
     searchHistory.value = await getSearchHistory()
 })
 
+onKeyStroke('/', (e) => {
+  e.preventDefault()
+  keywordRef.value?.focus()
+})
+onKeyStroke('Escape', (e) => {
+  e.preventDefault()
+  keywordRef.value?.blur()
+  isFocus.value = false
+}, { target: keywordRef })
+
 function handleInput() {
   selectedIndex.value = -1
   if (keyword.value.length > 0) {
@@ -164,6 +176,7 @@ async function handleClearSearchHistory() {
       </Transition>
 
       <input
+        ref="keywordRef"
         v-model.trim="keyword"
         rounded="60px focus:$bew-radius"
         p="l-6 r-18 y-3"