feat: add search

src/renderer/assets/scss/variables.scss

@@ -2,6 +2,7 @@
   --sidebar-width: 180px;
   --snippets-list-width: 250px;
   --title-bar-height: 15px;
+  --title-bar-height-offset: -5px;
   --menu-header: 80px;
 
   --spacing-unit: 4px;

src/renderer/components/editor/TheEditor.vue

@@ -135,6 +135,13 @@ const setValue = () => {
   const pos = editor.session.selection.toJSON()
   editor.setValue(props.modelValue)
   editor.session.selection.fromJSON(pos)
+
+  if (snippetStore.searchQuery) {
+    findAll(snippetStore.searchQuery)
+  } else {
+    editor.moveCursorTo(0, 0)
+    editor.clearSelection()
+  }
 }
 
 const setLang = () => {
@@ -145,6 +152,11 @@ const setTheme = () => {
   editor.session.setMode(`ace/theme/${props.theme}`)
 }
 
+const findAll = (q: string) => {
+  if (q === '') return
+  editor.findAll(q, { caseSensitive: false, preventScroll: true })
+}
+
 const getCursorPosition = () => {
   const { row, column } = editor.getCursorPosition()
   cursorPosition.row = row
@@ -164,6 +176,13 @@ watch(
   () => setValue()
 )
 
+watch(
+  () => snippetStore.searchQuery,
+  v => {
+    if (v) findAll(v)
+  }
+)
+
 window.addEventListener('resize', () => {
   forceRefresh.value = Math.random()
 })

src/renderer/components/snippets/SnippetHeader.vue

@@ -76,6 +76,8 @@ emitter.on('focus:snippet-name', () => {
     justify-content: space-between;
     align-items: center;
     height: v-bind(headerHeight);
+    position: relative;
+    top: var(--title-bar-height-offset);
   }
   .name {
     font-size: 16px;

src/renderer/components/snippets/SnippetList.vue

@@ -30,8 +30,9 @@ const snippetStore = useSnippetStore()
   grid-template-rows: 50px 1fr;
 }
 .header {
-  margin-top: 12px;
+  padding-top: var(--title-bar-height);
   display: flex;
+  border-bottom: 1px solid var(--color-border);
 }
 .body {
   overflow-y: scroll;

src/renderer/components/snippets/SnippetListHeader.vue

@@ -1,24 +1,46 @@
 <template>
   <div class="action">
     <UniconsSearch />
-    <input placeholder="Search...">
+    <input
+      v-model="query"
+      placeholder="Search..."
+    >
     <AppActionButton
-      class="add"
+      v-if="!query"
+      class="item"
       @click="onAddNewSnippet"
     >
       <UniconsPlus />
     </AppActionButton>
+    <AppActionButton
+      v-else
+      class="item"
+      @click="onReset"
+    >
+      <UniconsTimes />
+    </AppActionButton>
   </div>
 </template>
 
 <script setup lang="ts">
 import { emitter } from '@/composable'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
+import { useDebounceFn } from '@vueuse/core'
+import { computed } from 'vue'
 
 const snippetStore = useSnippetStore()
 const folderStore = useFolderStore()
 
+const query = computed({
+  get: () => snippetStore.searchQuery,
+  set: useDebounceFn(v => {
+    snippetStore.searchQuery = v
+    snippetStore.setSnippetsByAlias('all')
+    snippetStore.search(v!)
+  }, 300)
+})
+
 const onAddNewSnippet = async () => {
   if (folderStore.selectedAlias !== undefined) return
   if (!folderStore.selectedId) return
@@ -29,23 +51,31 @@ const onAddNewSnippet = async () => {
 
   emitter.emit('focus:snippet-name', true)
 }
+
+const onReset = () => {
+  snippetStore.searchQuery = undefined
+  snippetStore.setSnippetsByAlias('all')
+}
 </script>
 
 <style lang="scss" scoped>
 .action {
   display: flex;
   align-items: center;
-  padding: var(--spacing-sm);
+  padding: 0 var(--spacing-sm);
+  position: relative;
+  top: var(--title-bar-height-offset);
   input {
     outline: none;
     border: none;
     width: 100%;
     padding: 0 var(--spacing-xs);
+    height: 24px;
   }
   :deep(svg) {
     flex-shrink: 0;
   }
-  .add {
+  .item {
     position: relative;
     right: -8px;
   }

src/renderer/store/app.ts

@@ -8,7 +8,7 @@ export const useAppStore = defineStore('app', {
     sizes: {
       titlebar: 15,
       editor: {
-        titleHeight: 30,
+        titleHeight: 34,
         fragmentsHeight: 25,
         tagsHeight: 40,
         footerHeight: 30

src/renderer/store/snippets.ts

@@ -16,17 +16,18 @@ import type {
 } from '@shared/types/renderer/store/snippets'
 import { useTagStore } from './tags'
 import { useAppStore } from './app'
+import { uniqBy } from 'lodash'
 
 export const useSnippetStore = defineStore('snippets', {
-  state: () =>
-    ({
-      all: [],
-      snippets: [],
-      selected: undefined,
-      selectedMultiple: [],
-      fragment: 0,
-      isContextState: false
-    } as State),
+  state: (): State => ({
+    all: [],
+    snippets: [],
+    selected: undefined,
+    selectedMultiple: [],
+    fragment: 0,
+    isContextState: false,
+    searchQuery: undefined
+  }),
 
   getters: {
     selectedId: state => state.selected?.id,
@@ -263,6 +264,20 @@ export const useSnippetStore = defineStore('snippets', {
     async emptyTrash () {
       const ids = this.all.filter(i => i.isDeleted).map(i => i.id)
       await this.deleteSnippetsByIds(ids)
+    },
+    search (query: string) {
+      const byName = this.all.filter(i =>
+        i.name.toLowerCase().includes(query.toLowerCase())
+      )
+
+      const byContent = this.all.filter(i => {
+        return i.content.some(c =>
+          c.value.toLowerCase().includes(query.toLowerCase())
+        )
+      })
+
+      this.snippets = uniqBy([...byName, ...byContent], 'id')
+      this.selected = this.snippets[0]
     }
   }
 })

src/shared/types/renderer/store/snippets.d.ts

@@ -11,4 +11,5 @@ export interface State {
   selectedMultiple: Snippet[]
   fragment: number
   isContextState: boolean
+  searchQuery?: string
 }