Fixed some layouts and naming (#24)

src/components/ModalContainer.svelte

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

src/components/ModalInFile.svelte

@@ -4,7 +4,6 @@ let lastSearch = ""
 
 <script lang="ts">
 import InputSearch from "./InputSearch.svelte"
-import ResultIemVault from "./ResultItemVault.svelte"
 import {
   eventBus,
   excerptAfter,
@@ -17,6 +16,7 @@ import { MarkdownView } from "obsidian"
 import { getSuggestions } from "../search"
 import ModalContainer from "./ModalContainer.svelte"
 import type { OmnisearchInFileModal, OmnisearchVaultModal } from "src/modals"
+import ResultItemInFile from "./ResultItemInFile.svelte"
 
 export let modal: OmnisearchInFileModal
 export let parent: OmnisearchVaultModal | null = null
@@ -127,10 +127,9 @@ async function openSelection(): Promise<void> {
 <InputSearch value={searchQuery} on:input={(e) => (searchQuery = e.detail)} />
 
 <ModalContainer>
-  <div class="prompt-results">
   {#if groupedOffsets.length && note}
     {#each groupedOffsets as offset, i}
-        <ResultIemVault
+      <ResultItemInFile
         {offset}
         {note}
         index={i}
@@ -142,7 +141,6 @@ async function openSelection(): Promise<void> {
   {:else}
     <center> We found 0 result for your search here. </center>
   {/if}
-  </div>
 </ModalContainer>
 <div class="prompt-instructions">
   <div class="prompt-instruction">

src/components/ModalVault.svelte

@@ -7,12 +7,12 @@ 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/modals"
+import ResultItemVault from "./ResultItemVault.svelte"
 
 export let modal: OmnisearchVaultModal
 let selectedIndex = 0
@@ -94,9 +94,8 @@ function scrollIntoView(): void {
 <InputSearch value={lastSearch} on:input={(e) => (searchQuery = e.detail)} />
 
 <ModalContainer>
-  <div class="prompt-results">
   {#each resultNotes as result, i}
-      <ResultIemInFile
+    <ResultItemVault
       selected={i === selectedIndex}
       note={result}
       on:mousemove={(e) => (selectedIndex = i)}
@@ -106,7 +105,6 @@ function scrollIntoView(): void {
   {#if !resultNotes.length && searchQuery}
     <center> We found 0 result for your search here. </center>
   {/if}
-  </div>
 </ModalContainer>
 
 <div class="prompt-instructions">

src/components/ResultItemInFile.svelte

@@ -1,25 +1,18 @@
 <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 offset: number
 export let note: ResultNote
+export let index = 0
+export let selected = false
 
 $: reg = stringsToRegex(note.foundWords)
-$: matches = getMatches(note.content, reg)
+$: cleanedContent = makeExcerpt(note?.content ?? "", offset)
-$: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
 </script>
 
-<ResultItemContainer id={note.path} {selected} on:mousemove on:click>
+<ResultItemContainer id={index.toString()} {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>

src/components/ResultItemVault.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
 import type { ResultNote } from "../globals"
+import { getMatches } from "../search"
 import { highlighter, makeExcerpt, stringsToRegex } from "../utils"
-import ResultIemContainer from "./ResultItemContainer.svelte"
+import ResultItemContainer from "./ResultItemContainer.svelte"
 
-export let offset: number
-export let note: ResultNote
-export let index = 0
 export let selected = false
+export let note: ResultNote
 
 $: reg = stringsToRegex(note.foundWords)
-$: cleanedContent = makeExcerpt(note?.content ?? "", offset)
+$: matches = getMatches(note.content, reg)
+$: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
 </script>
 
-<ResultIemContainer id={index.toString()} {selected} on:mousemove on:click>
+<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>
-</ResultIemContainer>
+</ResultItemContainer>

src/modals.ts

@@ -13,6 +13,7 @@ abstract class OmnisearchModal extends Modal {
     this.modalEl.replaceChildren()
     this.modalEl.append(closeEl)
     this.modalEl.addClass('omnisearch-modal', 'prompt')
+    this.modalEl.removeClass('modal')
     this.modalEl.tabIndex = -1
 
     // Setup events that can be listened through the event bus