From e943f39f4253017b811b9a4eeca740cac0d85e4b Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Tue, 26 Apr 2022 19:56:29 +0200
Subject: [PATCH] Fixed some layouts and naming (#24)

---
 src/components/ModalContainer.svelte   |  2 +-
 src/components/ModalInFile.svelte      | 32 ++++++++++++--------------
 src/components/ModalVault.svelte       | 26 ++++++++++-----------
 src/components/ResultItemInFile.svelte | 17 ++++----------
 src/components/ResultItemVault.svelte  | 21 +++++++++++------
 src/modals.ts                          |  1 +
 6 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/src/components/ModalContainer.svelte b/src/components/ModalContainer.svelte
index f772107..159d62c 100644
--- a/src/components/ModalContainer.svelte
+++ b/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>
diff --git a/src/components/ModalInFile.svelte b/src/components/ModalInFile.svelte
index a8f139b..bed06ea 100644
--- a/src/components/ModalInFile.svelte
+++ b/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,22 +127,20 @@ 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
-          {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>
+  {#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}
+    <center> We found 0 result for your search here. </center>
+  {/if}
 </ModalContainer>
 <div class="prompt-instructions">
   <div class="prompt-instruction">
diff --git a/src/components/ModalVault.svelte b/src/components/ModalVault.svelte
index b070f98..4e97592 100644
--- a/src/components/ModalVault.svelte
+++ b/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,19 +94,17 @@ function scrollIntoView(): void {
 <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>
+  {#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 class="prompt-instructions">
diff --git a/src/components/ResultItemInFile.svelte b/src/components/ResultItemInFile.svelte
index 5430c13..4cbbcbf 100644
--- a/src/components/ResultItemInFile.svelte
+++ b/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, note.matches[0]?.offset ?? -1)
+$: cleanedContent = makeExcerpt(note?.content ?? "", offset)
 </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>
+<ResultItemContainer id={index.toString()} {selected} on:mousemove on:click>
   <div class="omnisearch-result__body">
     {@html cleanedContent.replace(reg, highlighter)}
   </div>
diff --git a/src/components/ResultItemVault.svelte b/src/components/ResultItemVault.svelte
index 2ea252d..5430c13 100644
--- a/src/components/ResultItemVault.svelte
+++ b/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>
diff --git a/src/modals.ts b/src/modals.ts
index 5a12841..3af48a3 100644
--- a/src/modals.ts
+++ b/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