Refactored Svelte components

src/components/InputSearch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { debounce } from "obsidian"
+import { createEventDispatcher, onMount, tick } from "svelte"
+
+export let value = ''
+const dispatch = createEventDispatcher()
+
+let elInput: HTMLInputElement
+
+onMount(async () => {
+  await tick()
+  elInput.focus()
+  elInput.select()
+})
+
+const debouncedOnInput = debounce(() => {
+  dispatch("input", value)
+}, 100)
+</script>
+
+<input
+  bind:value
+  bind:this={elInput}
+  on:input={debouncedOnInput}
+  type="text"
+  class="prompt-input"
+  placeholder="Type to search through your notes"
+  spellcheck="false"
+/>

src/components/ModalContainer.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<div class="modal-content" on:mousedown={(e) => e.preventDefault()}>
+  <slot />
+</div>

src/components/ModalInFile.svelte

@@ -0,0 +1,162 @@
+<script lang="ts" context="module">
+let lastSearch = ""
+</script>
+
+<script lang="ts">
+import InputSearch from "./InputSearch.svelte"
+import ResultIemVault from "./ResultItemVault.svelte"
+import {
+  eventBus,
+  excerptAfter,
+  type ResultNote,
+  type SearchMatch,
+} from "../globals"
+import { loopIndex } from "../utils"
+import { onDestroy, onMount, tick } from "svelte"
+import { MarkdownView } from "obsidian"
+import { getSuggestions } from "../search"
+import ModalContainer from "./ModalContainer.svelte"
+import type { OmnisearchInFileModal, OmnisearchVaultModal } from "src/modal";
+
+export let modal: OmnisearchInFileModal
+export let parent: OmnisearchVaultModal | null = null
+export let singleFilePath = ""
+export let searchQuery: string
+
+let groupedOffsets: number[] = []
+let selectedIndex = 0
+let note: ResultNote | null = null
+
+onMount(() => {
+  searchQuery = lastSearch
+  eventBus.disable("vault")
+
+  eventBus.on("infile", "enter", openSelection)
+  eventBus.on("infile", "arrow-up", () => moveIndex(-1))
+  eventBus.on("infile", "arrow-down", () => moveIndex(1))
+})
+
+onDestroy(() => {
+  eventBus.enable("vault")
+})
+
+$: {
+  if (searchQuery) {
+    note = getSuggestions(searchQuery, { singleFilePath })[0] ?? null
+    lastSearch = searchQuery
+  }
+  selectedIndex = 0
+  scrollIntoView()
+}
+
+$: {
+  if (note) {
+    const groups = getGroups(note.matches)
+    groupedOffsets = groups.map((group) =>
+      Math.round((group.first()!.offset + group.last()!.offset) / 2)
+    )
+    // console.log(groups)
+    // console.log(groupedOffsets)
+  }
+}
+
+/**
+ * Group together close
+ */
+function getGroups(matches: SearchMatch[]): SearchMatch[][] {
+  const groups: SearchMatch[][] = []
+  let lastOffset = -1
+  while (true) {
+    const group = getGroupedMatches(matches, lastOffset, excerptAfter)
+    if (!group.length) break
+    lastOffset = group.last()!.offset
+    groups.push(group)
+  }
+  return groups
+}
+
+function getGroupedMatches(
+  matches: SearchMatch[],
+  offsetFrom: number,
+  maxLen: number
+): SearchMatch[] {
+  const first = matches.find((m) => m.offset > offsetFrom)
+  if (!first) return []
+  return matches.filter(
+    (m) => m.offset > offsetFrom && m.offset <= first.offset + maxLen
+  )
+}
+
+function moveIndex(dir: 1 | -1): void {
+  selectedIndex = loopIndex(selectedIndex + dir, groupedOffsets.length)
+  scrollIntoView()
+}
+
+function scrollIntoView(): void {
+  tick().then(() => {
+    const elem = document.querySelector(`[data-result-id="${selectedIndex}"]`)
+    elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
+  })
+}
+
+async function openSelection(): Promise<void> {
+  // TODO: clean me, merge with notes.openNote()
+  if (note) {
+    modal.close()
+    if (parent) parent.close()
+
+    await app.workspace.openLinkText(note.path, "")
+    const view = app.workspace.getActiveViewOfType(MarkdownView)
+    if (!view) {
+      throw new Error("OmniSearch - No active MarkdownView")
+    }
+
+    const offset = groupedOffsets[selectedIndex] ?? 0
+    const pos = view.editor.offsetToPos(offset)
+    pos.ch = 0
+    view.editor.setCursor(pos)
+    view.editor.scrollIntoView({
+      from: { line: pos.line - 10, ch: 0 },
+      to: { line: pos.line + 10, ch: 0 },
+    })
+  }
+}
+</script>
+
+<div class="modal-title">Omnisearch - File</div>
+<InputSearch value={searchQuery} on:input={(e) => (searchQuery = e.detail)} />
+
+<ModalContainer>
+  <div class="prompt-results">
+    {#if groupedOffsets.length && note}
+      {#each groupedOffsets as offset, i}
+        <ResultIemVault
+          {offset}
+          {note}
+          index={i}
+          selected={i === selectedIndex}
+          on:mousemove={(e) => (selectedIndex = i)}
+          on:click={openSelection}
+        />
+      {/each}
+    {:else}
+      <center> We found 0 result for your search here. </center>
+    {/if}
+  </div>
+</ModalContainer>
+<div class="prompt-instructions">
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>
+  </div>
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">↵</span><span>to open</span>
+  </div>
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">esc</span>
+    {#if !!parent}
+      <span>to go back to Vault Search</span>
+    {:else}
+      <span>to dismiss</span>
+    {/if}
+  </div>
+</div>

src/components/ModalVault.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" context="module">
+let lastSearch = ""
+</script>
+
+<script lang="ts">
+import { TFile } from "obsidian"
+import { onMount, tick } from "svelte"
+import InputSearch from "./InputSearch.svelte"
+import ModalContainer from "./ModalContainer.svelte"
+import ResultIemInFile from "./ResultItemInFile.svelte"
+import { eventBus, type ResultNote } from "../globals"
+import { createNote, openNote } from "../notes"
+import { getSuggestions } from "../search"
+import { loopIndex } from "../utils"
+import { OmnisearchInFileModal, type OmnisearchVaultModal } from "src/modal"
+
+export let modal: OmnisearchVaultModal
+let selectedIndex = 0
+let searchQuery: string
+let resultNotes: ResultNote[] = []
+$: selectedNote = resultNotes[selectedIndex]
+
+$: {
+  if (searchQuery) {
+    resultNotes = getSuggestions(searchQuery)
+    lastSearch = searchQuery
+  }
+  selectedIndex = 0
+  scrollIntoView()
+}
+
+onMount(() => {
+  searchQuery = lastSearch
+  eventBus.on("vault", "enter", onInputEnter)
+  eventBus.on("vault", "shift-enter", onInputShiftEnter)
+  eventBus.on("vault", "ctrl-enter", onInputCtrlEnter)
+  eventBus.on("vault", "alt-enter", onInputAltEnter)
+  eventBus.on("vault", "arrow-up", () => moveIndex(-1))
+  eventBus.on("vault", "arrow-down", () => moveIndex(1))
+})
+
+function onClick() {
+  if (!selectedNote) return
+  openNote(selectedNote)
+  modal.close()
+}
+
+function onInputEnter(): void {
+  // console.log(event.detail)
+  if (!selectedNote) return
+  openNote(selectedNote)
+  modal.close()
+}
+
+function onInputCtrlEnter(): void {
+  if (!selectedNote) return
+  openNote(selectedNote, true)
+  modal.close()
+}
+
+async function onInputShiftEnter(): Promise<void> {
+  await createNote(searchQuery)
+  modal.close()
+}
+
+function onInputAltEnter(): void {
+  if (selectedNote) {
+    const file = app.vault.getAbstractFileByPath(selectedNote.path)
+    if (file && file instanceof TFile) {
+      // modal.close()
+      new OmnisearchInFileModal(app, file, searchQuery, modal).open()
+    }
+  }
+}
+
+function moveIndex(dir: 1 | -1): void {
+  selectedIndex = loopIndex(selectedIndex + dir, resultNotes.length)
+  scrollIntoView()
+}
+
+function scrollIntoView(): void {
+  tick().then(() => {
+    if (selectedNote) {
+      const elem = document.querySelector(
+        `[data-result-id="${selectedNote.path}"]`
+      )
+      elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
+    }
+  })
+}
+</script>
+
+<div class="modal-title">Omnisearch - Vault</div>
+<InputSearch value={lastSearch} on:input={(e) => (searchQuery = e.detail)} />
+
+<ModalContainer>
+  <div class="prompt-results">
+    {#each resultNotes as result, i}
+      <ResultIemInFile
+        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}
+  </div>
+</ModalContainer>
+
+<div class="prompt-instructions">
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>
+  </div>
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">alt ↵</span>
+    <span>to expand in-note results</span>
+  </div>
+  <br />
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">↵</span><span>to open</span>
+  </div>
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">ctrl ↵</span>
+    <span>to open in a new pane</span>
+  </div>
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">shift ↵</span>
+    <span>to create</span>
+  </div>
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">esc</span><span>to dismiss</span>
+  </div>
+</div>

src/components/ResultItemContainer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte"
+
+export let id: string
+export let selected = false
+</script>
+
+<div
+  data-result-id={id}
+  class="suggestion-item omnisearch-result"
+  class:is-selected={selected}
+  on:mousemove
+  on:click
+  on:auxclick
+>
+  <slot />
+</div>

src/components/ResultItemInFile.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { ResultNote } from "../globals"
+import { getMatches } from "../search"
+import { highlighter, makeExcerpt, stringsToRegex } from "../utils"
+import ResultItemContainer from "./ResultItemContainer.svelte"
+
+export let selected = false
+export let note: ResultNote
+
+$: reg = stringsToRegex(note.foundWords)
+$: matches = getMatches(note.content, reg)
+$: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
+</script>
+
+<ResultItemContainer id={note.path} {selected} on:mousemove on:click>
+  <span class="omnisearch-result__title">
+    {@html note.basename.replace(reg, highlighter)}
+  </span>
+
+  <span class="omnisearch-result__counter">
+    {matches.length}&nbsp;{matches.length > 1 ? "matches" : "match"}
+  </span>
+  <div class="omnisearch-result__body">
+    {@html cleanedContent.replace(reg, highlighter)}
+  </div>
+</ResultItemContainer>

src/components/ResultItemVault.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { ResultNote } from "../globals"
+import { highlighter, makeExcerpt, stringsToRegex } from "../utils"
+import ResultIemContainer from "./ResultItemContainer.svelte"
+
+export let offset: number
+export let note: ResultNote
+export let index = 0
+export let selected = false
+
+$: reg = stringsToRegex(note.foundWords)
+$: cleanedContent = makeExcerpt(note?.content ?? "", offset)
+</script>
+
+<ResultIemContainer id={index.toString()} {selected} on:mousemove on:click>
+  <div class="omnisearch-result__body">
+    {@html cleanedContent.replace(reg, highlighter)}
+  </div>
+</ResultIemContainer>