Fixed #96 #97

assets/styles.css

@@ -29,3 +29,22 @@
 
 .omnisearch-highlight {
 }
+
+.omnisearch-input-container {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}
+
+.omnisearch-input-field {
+  position: relative;
+  flex-grow: 1;
+}
+
+.omnisearch-input__context {
+  position: absolute;
+  right: 1em;
+  top: calc(50% - 0.75em);
+  color: var(--text-faint);
+  font-size: small;
+}

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>
 
+<div class="omnisearch-input-container">
+  <div class="omnisearch-input-field">
     <input
       bind:value
-  bind:this={elInput}
+      bind:this="{elInput}"
-  on:input={debouncedOnInput}
+      on:input="{debouncedOnInput}"
-  on:compositionstart={_ => toggleInputComposition(true)}
+      on:compositionstart="{_ => toggleInputComposition(true)}"
-  on:compositionend={_ => toggleInputComposition(false)}
+      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,9 +140,10 @@
   }
 </script>
 
-<div class="modal-title">Omnisearch - File</div>
+<InputSearch
-<div class="modal-content">
+  value={searchQuery}
-  <InputSearch value={searchQuery} on:input={e => (searchQuery = e.detail)} />
+  on:input={e => (searchQuery = e.detail)}
+  label="Omnisearch - File" />
 
 <ModalContainer>
   {#if groupedOffsets.length && note}
@@ -161,7 +162,6 @@
     </div>
   {/if}
 </ModalContainer>
-</div>
 
 <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>
+<InputSearch
-<div class="modal-content">
+  value="{searchQuery}"
-  <InputSearch value={searchQuery} on:input={e => (searchQuery = e.detail)} />
+  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}
+      selected="{i === selectedIndex}"
-        note={result}
+      note="{result}"
-        on:mousemove={e => (selectedIndex = i)}
+      on:mousemove="{_ => (selectedIndex = i)}"
-        on:click={onClick} />
+      on:click="{onClick}" />
   {/each}
   {#if !resultNotes.length && searchQuery}
-      <center> We found 0 result for your search here. </center>
+    <div style="text-align: center;">
+      We found 0 result for your search here.
+    </div>
   {/if}
 </ModalContainer>
-</div>
 
 <div class="prompt-instructions">
   <div class="prompt-instruction">

src/modals.ts

@@ -1,4 +1,4 @@
-import { App, Modal, TFile, Platform } from 'obsidian'
+import { App, Modal, TFile } from 'obsidian'
 import ModalVault from './components/ModalVault.svelte'
 import ModalInFile from './components/ModalInFile.svelte'
 import { eventBus, isInputComposition } from './globals'
@@ -6,14 +6,14 @@ import { settings } from './settings'
 import { get } from 'svelte/store'
 
 abstract class OmnisearchModal extends Modal {
-  constructor(app: App) {
+  protected constructor(app: App) {
     super(app)
 
     // Remove all the default modal's children
     // so that we can more easily customize it
-    const closeEl = this.containerEl.find('.modal-close-button')
+    // const closeEl = this.containerEl.find('.modal-close-button')
     this.modalEl.replaceChildren()
-    this.modalEl.append(closeEl)
+    // this.modalEl.append(closeEl)
     this.modalEl.addClass('omnisearch-modal', 'prompt')
     // this.modalEl.removeClass('modal')
     this.modalEl.tabIndex = -1

src/settings.ts

@@ -1,7 +1,7 @@
 import { Plugin, PluginSettingTab, Setting, SliderComponent } from 'obsidian'
 import { notesCacheFilePath, searchIndexFilePath } from './globals'
 import type OmnisearchPlugin from './main'
-import { get, readable, writable } from 'svelte/store'
+import { get, writable } from 'svelte/store'
 
 interface WeightingSettings {
   weightBasename: number
@@ -17,6 +17,7 @@ export interface OmnisearchSettings extends WeightingSettings {
   ribbonIcon: boolean
   showShortName: boolean
   showContext: boolean
+  showCreateButton: boolean
   CtrlJK: boolean
   CtrlNP: boolean
   storeIndexInFile: boolean
@@ -61,8 +62,7 @@ export class SettingsTab extends PluginSettingTab {
     const diacriticsDesc = new DocumentFragment()
     diacriticsDesc.createSpan({}, span => {
       span.innerHTML = `Normalize diacritics in search terms. Words like "brûlée" or "žluťoučký" will be indexed as "brulee" and "zlutoucky".<br/>
-        <strong>Needs a restart to fully take effect.</strong>
+        <strong>Needs a restart to fully take effect.</strong>`
-        `
     })
     new Setting(containerEl)
       .setName('Ignore diacritics')
@@ -77,6 +77,7 @@ export class SettingsTab extends PluginSettingTab {
         })
       )
 
+    // Store index
     const serializedIndexDesc = new DocumentFragment()
     serializedIndexDesc.createSpan({}, span => {
       span.innerHTML = `The search index is stored on disk, instead of being rebuilt at every startup.
@@ -91,8 +92,8 @@ export class SettingsTab extends PluginSettingTab {
       .setDesc(serializedIndexDesc)
       .addToggle(toggle =>
         toggle.setValue(get(settings).storeIndexInFile).onChange(async v => {
-          app.vault.adapter.remove(notesCacheFilePath)
+          await app.vault.adapter.remove(notesCacheFilePath)
-          app.vault.adapter.remove(searchIndexFilePath)
+          await app.vault.adapter.remove(searchIndexFilePath)
           settings.update(s => {
             s.storeIndexInFile = v
             return s
@@ -145,10 +146,29 @@ export class SettingsTab extends PluginSettingTab {
         })
       )
 
+    // Show "Create note" button
+    const createBtnDesc = new DocumentFragment()
+    createBtnDesc.createSpan({}, span => {
+      span.innerHTML = `Shows a button next to the search input, to create a note.
+        Acts the same as the <code>shift ↵</code> shortcut, can be useful for mobile device users.`
+    })
+    new Setting(containerEl)
+      .setName('Show "Create note" button')
+      .setDesc(createBtnDesc)
+      .addToggle(toggle =>
+        toggle.setValue(get(settings).showCreateButton).onChange(async v => {
+          settings.update(s => {
+            s.showCreateButton = v
+            return s
+          })
+          await saveSettings(this.plugin)
+        })
+      )
+
     // Show notices
     new Setting(containerEl)
       .setName('Show indexing notices')
-      .setDesc('Show a notice when indexing is done, usually at startup.')
+      .setDesc('Shows a notice when indexing is done, usually at startup.')
       .addToggle(toggle =>
         toggle.setValue(get(settings).showIndexingNotices).onChange(async v => {
           settings.update(s => {
@@ -258,6 +278,7 @@ export const DEFAULT_SETTINGS: OmnisearchSettings = {
   showShortName: false,
   ribbonIcon: true,
   showContext: true,
+  showCreateButton: false,
 
   weightBasename: 2,
   weightH1: 1.5,