feat: add fuzzy search

Author: antonreshetov

package.json

@@ -56,6 +56,7 @@
     "electron-store": "^8.0.1",
     "floating-vue": "^2.0.0-beta.17",
     "fs-extra": "^10.0.1",
+    "fuse.js": "^7.0.0",
     "highlight.js": "^11.5.1",
     "i18next": "^21.8.14",
     "i18next-fs-backend": "^1.1.4",

pnpm-lock.yaml

@@ -189,8 +189,8 @@ const init = async () => {
     }
   })
 
-  if (snippetStore.searchQuery) {
-    findAll(snippetStore.searchQuery)
+  if (snippetStore.searchQueryEscaped) {
+    findAll(snippetStore.searchQueryEscaped)
   }
 }
 
@@ -303,8 +303,8 @@ watch(
   () => {
     setValue(props.modelValue)
 
-    if (snippetStore.searchQuery) {
-      findAll(snippetStore.searchQuery)
+    if (snippetStore.searchQueryEscaped) {
+      findAll(snippetStore.searchQueryEscaped)
     }
 
     clearHistory()
@@ -319,7 +319,7 @@ watch(
 )
 
 watch(
-  () => snippetStore.searchQuery,
+  () => snippetStore.searchQueryEscaped,
   v => {
     if (v) {
       findAll(v)

src/renderer/components/editor/EditorCodemirror.vue

@@ -17,7 +17,7 @@ import type {
 } from '@shared/types/renderer/store/snippets'
 import { useTagStore } from './tags'
 import { useAppStore } from './app'
-import { uniqBy } from 'lodash'
+import Fuse from 'fuse.js'
 
 export const useSnippetStore = defineStore('snippets', {
   state: (): State => ({
@@ -27,6 +27,7 @@ export const useSnippetStore = defineStore('snippets', {
     selectedMultiple: [],
     fragment: 0,
     searchQuery: undefined,
+    searchQueryEscaped: undefined,
     sort: 'updatedAt',
     hideSubfolderSnippets: false,
     compactMode: false,
@@ -304,17 +305,33 @@ export const useSnippetStore = defineStore('snippets', {
       await this.deleteSnippetsByIds(ids)
     },
     search (query: string) {
-      const byName = this.all.filter(i =>
-        i.name.toLowerCase().includes(query.toLowerCase())
-      )
+      let q = query
+      let isExactSearch = false
 
-      const byContent = this.all.filter(i => {
-        return i.content.some(c =>
-          c.value.toLowerCase().includes(query.toLowerCase())
-        )
+      // обрезка кавычек для точного поиска
+      if (query.startsWith('"') && query.endsWith('"')) {
+        isExactSearch = true
+        q = query.slice(1, -1)
+      }
+
+      this.searchQueryEscaped = q
+
+      if (!q) {
+        this.setSnippetsByAlias('all')
+        this.searchQueryEscaped = undefined
+        return
+      }
+
+      const fuse = new Fuse(this.all, {
+        includeScore: true,
+        threshold: isExactSearch ? 0 : 0.4,
+        ignoreLocation: true,
+        keys: ['name', 'content.value']
       })
 
-      this.snippets = uniqBy([...byName, ...byContent], 'id')
+      const result = fuse.search(q)
+
+      this.snippets = result.map(i => i.item)
       this.selected = this.snippets[0]
     },
     setSort (sort: SnippetsSort) {

src/renderer/store/snippets.ts

@@ -11,6 +11,7 @@ export interface State {
   selectedMultiple: Snippet[]
   fragment: number
   searchQuery?: string
+  searchQueryEscaped?: string
   sort: SnippetsSort
   hideSubfolderSnippets: boolean
   compactMode: boolean