feat(main: menu): add find menu

Author: antonreshetov

src/main/menu/main.ts

@@ -187,6 +187,13 @@ const fileMenu: MenuItemConstructorOptions[] = [
     click: () => {
       BrowserWindow.getFocusedWindow()?.webContents.send('main-menu:new-folder')
     }
+  },
+  {
+    label: 'Find',
+    accelerator: 'CommandOrControl+F',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send('main-menu:search')
+    }
   }
 ]
 

src/renderer/App.vue

@@ -127,6 +127,10 @@ ipc.on('main-menu:copy-snippet', () => {
 ipc.on('main-menu:format-snippet', () => {
   emitter.emit('snippet:format', true)
 })
+
+ipc.on('main-menu:search', () => {
+  emitter.emit('search:focus', true)
+})
 </script>
 
 <style lang="scss">

src/renderer/components/snippets/SnippetListHeader.vue

@@ -2,6 +2,7 @@
   <div class="action">
     <UniconsSearch />
     <input
+      ref="inputRef"
       v-model="query"
       placeholder="Search..."
     >
@@ -23,14 +24,16 @@
 </template>
 
 <script setup lang="ts">
-import { onAddNewSnippet } from '@/composable'
+import { emitter, onAddNewSnippet } from '@/composable'
 import { useSnippetStore } from '@/store/snippets'
 import { useDebounceFn } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { track } from '@/electron'
 
 const snippetStore = useSnippetStore()
 
+const inputRef = ref<HTMLInputElement>()
+
 const query = computed({
   get: () => snippetStore.searchQuery,
   set: useDebounceFn(v => {
@@ -45,6 +48,10 @@ const onReset = () => {
   snippetStore.searchQuery = undefined
   snippetStore.setSnippetsByAlias('all')
 }
+
+emitter.on('search:focus', () => {
+  inputRef.value?.focus()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -62,6 +69,7 @@ const onReset = () => {
     padding: 0 var(--spacing-xs);
     height: 24px;
     background-color: var(--color-snippet-list);
+    color: var(--color-text);
   }
   :deep(svg) {
     flex-shrink: 0;

src/shared/types/renderer/composable/index.d.ts

@@ -4,4 +4,5 @@ export type EmitterEvents = {
   'folder:click': any
   'folder:rename': string
   'scroll-to:folder': string
+  'search:focus': boolean
 }