#104 - Refactored search history to use IndexedDB

src/components/InputSearch.svelte

@@ -2,6 +2,7 @@
   import { debounce } from 'obsidian'
   import { toggleInputComposition } from 'src/globals'
   import { createEventDispatcher, tick } from 'svelte'
+  import { cacheManager } from "../cache-manager"
 
   export let initialValue = ''
   export let placeholder = ''
@@ -24,22 +25,25 @@
   }
 
   const debouncedOnInput = debounce(() => {
+    // If typing a query and not executing it,
+    // the next time we open the modal, the search field will be empty
+    cacheManager.addToSearchHistory('')
     dispatch('input', value)
-  }, 250)
+  }, 200)
 </script>
 
 <div class="omnisearch-input-container">
   <div class="omnisearch-input-field">
     <input
-      bind:value
       bind:this="{elInput}"
-      on:input="{debouncedOnInput}"
-      on:compositionstart="{_ => toggleInputComposition(true)}"
-      on:compositionend="{_ => toggleInputComposition(false)}"
-      type="text"
+      bind:value
       class="prompt-input"
+      on:compositionend="{_ => toggleInputComposition(false)}"
+      on:compositionstart="{_ => toggleInputComposition(true)}"
+      on:input="{debouncedOnInput}"
       {placeholder}
-      spellcheck="false"/>
+      spellcheck="false"
+      type="text"/>
   </div>
   <slot></slot>
 </div>

src/components/ModalInFile.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script context="module" lang="ts">
   let lastSearch = ''
 </script>
 
@@ -19,7 +19,6 @@
   import ResultItemInFile from './ResultItemInFile.svelte'
   import { Query } from 'src/search/query'
   import { openNote } from 'src/tools/notes'
-  import { saveSearchHistory } from '../search/search-history'
 
   export let modal: OmnisearchInFileModal
   export let parent: OmnisearchVaultModal | null = null
@@ -50,11 +49,11 @@
   $: (async () => {
     if (searchQuery) {
       query = new Query(searchQuery)
-      note = (await Search.getSuggestions(query, { singleFilePath }))[0] ?? null
+      note = (await Search.getSuggestions(query, {singleFilePath}))[0] ?? null
       lastSearch = searchQuery
     }
     selectedIndex = 0
-    scrollIntoView()
+    await scrollIntoView()
   })()
 
   $: {
@@ -105,14 +104,13 @@
   async function scrollIntoView(): Promise<void> {
     await tick()
     const elem = document.querySelector(`[data-result-id="${selectedIndex}"]`)
-    elem?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+    elem?.scrollIntoView({behavior: 'auto', block: 'nearest'})
   }
 
   async function openSelection(
     evt?: MouseEvent | KeyboardEvent
   ): Promise<void> {
     if (note) {
-      await saveSearchHistory()
       modal.close()
       if (parent) parent.close()
 
@@ -132,8 +130,8 @@
       pos.ch = 0
       view.editor.setCursor(pos)
       view.editor.scrollIntoView({
-        from: { line: pos.line - 10, ch: 0 },
-        to: { line: pos.line + 10, ch: 0 },
+        from: {line: pos.line - 10, ch: 0},
+        to: {line: pos.line + 10, ch: 0},
       })
     }
   }
@@ -145,9 +143,9 @@
 </script>
 
 <InputSearch
-  value="{searchQuery}"
   on:input="{e => (searchQuery = e.detail)}"
-  placeholder="Omnisearch - File" />
+  placeholder="Omnisearch - File"
+  value="{searchQuery}"/>
 
 <ModalContainer>
   {#if groupedOffsets.length && note}
@@ -158,7 +156,7 @@
         index="{i}"
         selected="{i === selectedIndex}"
         on:mousemove="{_e => (selectedIndex = i)}"
-        on:click="{openSelection}" />
+        on:click="{openSelection}"/>
     {/each}
   {:else}
     <div style="text-align: center;">

src/components/ModalVault.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { MarkdownView, Notice, TFile } from 'obsidian'
-  import { onMount, onDestroy, tick } from 'svelte'
+  import { onDestroy, onMount, tick } from 'svelte'
   import InputSearch from './InputSearch.svelte'
   import ModalContainer from './ModalContainer.svelte'
   import { eventBus, type ResultNote } from 'src/globals'
@@ -10,9 +10,9 @@
   import { OmnisearchInFileModal, type OmnisearchVaultModal } from 'src/components/modals'
   import ResultItemVault from './ResultItemVault.svelte'
   import { Query } from 'src/search/query'
-  import { saveSearchHistory, searchHistory } from 'src/search/search-history'
   import { settings } from '../settings'
   import * as NotesIndex from '../notes-index'
+  import { cacheManager } from "../cache-manager"
 
   export let modal: OmnisearchVaultModal
   let selectedIndex = 0
@@ -21,8 +21,9 @@
   let previousQuery: string
   let resultNotes: ResultNote[] = []
   let query: Query
-  $: selectedNote = resultNotes[selectedIndex]
 
+  $: selectedNote = resultNotes[selectedIndex]
+  $: searchQuery = previousQuery
   $: if (searchQuery) {
     updateResults()
   } else {
@@ -31,8 +32,7 @@
 
   onMount(async () => {
     await NotesIndex.refreshIndex()
-    previousQuery = searchHistory[historySearchIndex]
-    searchQuery = previousQuery
+    previousQuery = (await cacheManager.getSearchHistory())[historySearchIndex]
     eventBus.enable('vault')
     eventBus.on('vault', 'enter', openNoteAndCloseModal)
     eventBus.on('vault', 'create-note', createNoteAndCloseModal)
@@ -49,18 +49,21 @@
     eventBus.disable('vault')
   })
 
-  function prevSearchHistory() {
-    if (++historySearchIndex >= searchHistory.length) {
+  async function prevSearchHistory() {
+    // Filter out the empty string, if it's there
+    const history = (await cacheManager.getSearchHistory()).filter(s => s)
+    if (++historySearchIndex >= history.length) {
       historySearchIndex = 0
     }
-    searchQuery = searchHistory[historySearchIndex]
+    previousQuery = history[historySearchIndex]
   }
 
-  function nextSearchHistory() {
+  async function nextSearchHistory() {
+    const history = (await cacheManager.getSearchHistory()).filter(s => s)
     if (--historySearchIndex < 0) {
-      historySearchIndex = searchHistory.length ? searchHistory.length - 1 : 0
+      historySearchIndex = history.length ? history.length - 1 : 0
     }
-    searchQuery = searchHistory[historySearchIndex]
+    previousQuery = history[historySearchIndex]
   }
 
   async function updateResults() {
@@ -91,12 +94,11 @@
   }
 
   function saveCurrentQuery() {
-    searchHistory.unshift(searchQuery)
+    cacheManager.addToSearchHistory(searchQuery)
   }
 
   function openSearchResult(note: ResultNote, newPane = false) {
     saveCurrentQuery()
-    saveSearchHistory()
     openNote(note, newPane)
   }
 
@@ -177,7 +179,7 @@
       const elem = document.querySelector(
         `[data-result-id="${selectedNote.path}"]`
       )
-      elem?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+      elem?.scrollIntoView({behavior: 'auto', block: 'nearest'})
     }
   }
 </script>
@@ -197,7 +199,7 @@
       selected="{i === selectedIndex}"
       note="{result}"
       on:mousemove="{_ => (selectedIndex = i)}"
-      on:click="{onClick}" />
+      on:click="{onClick}"/>
   {/each}
   {#if !resultNotes.length && searchQuery}
     <div style="text-align: center;">
@@ -222,7 +224,7 @@
     <span>to switch to In-File Search</span>
   </div>
 
-  <br />
+  <br/>
 
   <div class="prompt-instruction">
     <span class="prompt-instruction-command">{getCtrlKeyLabel()} ↵</span>
@@ -237,7 +239,7 @@
     <span>to create in a new pane</span>
   </div>
 
-  <br />
+  <br/>
 
   <div class="prompt-instruction">
     <span class="prompt-instruction-command">alt ↵</span>