Fixed #96 #97

src/components/InputSearch.svelte

@@ -4,6 +4,7 @@
   import { createEventDispatcher, onMount, tick } from 'svelte'
 
   export let value = ''
+  export let label = ''
   const dispatch = createEventDispatcher()
 
   let elInput: HTMLInputElement
@@ -22,13 +23,22 @@
   }, 100)
 </script>
 
-<input
-  bind:value
-  bind:this={elInput}
-  on:input={debouncedOnInput}
-  on:compositionstart={_ => toggleInputComposition(true)}
-  on:compositionend={_ => toggleInputComposition(false)}
-  type="text"
-  class="prompt-input"
-  placeholder="Type to search through your notes"
-  spellcheck="false" />
+<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"
+      class="prompt-input"
+      placeholder="Type to search through your notes"
+      spellcheck="false" />
+
+    <span class="omnisearch-input__context">
+      {label}
+    </span>
+  </div>
+  <slot></slot>
+</div>

src/components/ModalInFile.svelte

@@ -140,28 +140,28 @@
   }
 </script>
 
-<div class="modal-title">Omnisearch - File</div>
-<div class="modal-content">
-  <InputSearch value={searchQuery} on:input={e => (searchQuery = e.detail)} />
+<InputSearch
+  value={searchQuery}
+  on:input={e => (searchQuery = e.detail)}
+  label="Omnisearch - File" />
 
-  <ModalContainer>
-    {#if groupedOffsets.length && note}
-      {#each groupedOffsets as offset, i}
-        <ResultItemInFile
-          {offset}
-          {note}
-          index={i}
-          selected={i === selectedIndex}
-          on:mousemove={e => (selectedIndex = i)}
-          on:click={openSelection} />
-      {/each}
-    {:else}
-      <div style="text-align: center;">
-        We found 0 result for your search here.
-      </div>
-    {/if}
-  </ModalContainer>
-</div>
+<ModalContainer>
+  {#if groupedOffsets.length && note}
+    {#each groupedOffsets as offset, i}
+      <ResultItemInFile
+        {offset}
+        {note}
+        index={i}
+        selected={i === selectedIndex}
+        on:mousemove={e => (selectedIndex = i)}
+        on:click={openSelection} />
+    {/each}
+  {:else}
+    <div style="text-align: center;">
+      We found 0 result for your search here.
+    </div>
+  {/if}
+</ModalContainer>
 
 <div class="prompt-instructions">
   <div class="prompt-instruction">

src/components/ModalVault.svelte

@@ -11,7 +11,7 @@
   import ResultItemVault from './ResultItemVault.svelte'
   import { Query } from 'src/query'
   import { saveSearchHistory, searchHistory } from 'src/search-history'
-  import { settings } from 'src/settings'
+  import { settings } from '../settings'
 
   export let modal: OmnisearchVaultModal
   let selectedIndex = 0
@@ -53,6 +53,7 @@
     }
     searchQuery = searchHistory[historySearchIndex]
   }
+
   function nextSearchHistory() {
     if (--historySearchIndex < 0) {
       historySearchIndex = searchHistory.length ? searchHistory.length - 1 : 0
@@ -66,7 +67,7 @@
       (a, b) => b.score - a.score
     )
     selectedIndex = 0
-    scrollIntoView()
+    await scrollIntoView()
   }
 
   function onClick(evt?: MouseEvent | KeyboardEvent) {
@@ -167,23 +168,29 @@
   }
 </script>
 
-<div class="modal-title">Omnisearch - Vault</div>
-<div class="modal-content">
-  <InputSearch value={searchQuery} on:input={e => (searchQuery = e.detail)} />
+<InputSearch
+  value="{searchQuery}"
+  on:input="{e => (searchQuery = e.detail)}"
+  label="Omnisearch - Vault">
+  {#if $settings.showCreateButton}
+    <button on:click="{createNoteAndCloseModal}">Create note</button>
+  {/if}
+</InputSearch>
 
-  <ModalContainer>
-    {#each resultNotes as result, i}
-      <ResultItemVault
-        selected={i === selectedIndex}
-        note={result}
-        on:mousemove={e => (selectedIndex = i)}
-        on:click={onClick} />
-    {/each}
-    {#if !resultNotes.length && searchQuery}
-      <center> We found 0 result for your search here. </center>
-    {/if}
-  </ModalContainer>
-</div>
+<ModalContainer>
+  {#each resultNotes as result, i}
+    <ResultItemVault
+      selected="{i === selectedIndex}"
+      note="{result}"
+      on:mousemove="{_ => (selectedIndex = i)}"
+      on:click="{onClick}" />
+  {/each}
+  {#if !resultNotes.length && searchQuery}
+    <div style="text-align: center;">
+      We found 0 result for your search here.
+    </div>
+  {/if}
+</ModalContainer>
 
 <div class="prompt-instructions">
   <div class="prompt-instruction">