#107 - updated WIP layout

assets/styles.css

@@ -4,10 +4,30 @@
 .omnisearch-result {
   white-space: normal;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+
+.omnisearch-result__title-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 5px;
+  flex-wrap: wrap;
 }
 
 .omnisearch-result__title {
+  align-items: center;
+  display: flex;
+  gap: 5px;
+}
+
+.omnisearch-result__folder-path {
+  font-size: 0.75rem;
+  align-items: center;
+  display: flex;
+  gap: 5px;
 }
 
 .omnisearch-result__counter {
@@ -27,12 +47,20 @@
   color: var(--text-muted);
 }
 
+.omnisearch-result__image-container {
+  flex-basis: 20%;
+  text-align: right
+}
+
 .omnisearch-highlight {
 }
 
 .omnisearch-default-highlight {
-  color: var(--text-normal);
-  background-color: var(--text-highlight-bg);
+  text-decoration: underline;
+  text-decoration-color: var(--text-highlight-bg);
+  text-decoration-thickness: 3px;
+  text-underline-offset: -1px;
+  text-decoration-skip-ink: none;
 }
 
 .omnisearch-input-container {

src/components/ResultItemVault.svelte

@@ -4,17 +4,24 @@
   import {
     highlighter,
     isFileImage,
+    isFilePDF,
     makeExcerpt,
+    pathWithoutFilename,
     removeDiacritics,
     stringsToRegex,
   } from '../tools/utils'
   import ResultItemContainer from './ResultItemContainer.svelte'
+  import { onMount } from 'svelte'
+  import { setIcon } from 'obsidian'
 
   export let selected = false
   export let note: ResultNote
 
   let imagePath: string | null = null
   let title = ''
+  let notePath = ''
+  let folderPathIcon
+  let filePathIcon
 
   $: {
     imagePath = null
@@ -31,10 +38,21 @@
   $: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
   $: glyph = false //cacheManager.getLiveDocument(note.path)?.doesNotExist
   $: {
-    title = settings.showShortName ? note.basename : note.path
+    title = note.basename
+    notePath = pathWithoutFilename(note.path)
     if (settings.ignoreDiacritics) {
       title = removeDiacritics(title)
     }
+
+    // Icons
+    if (folderPathIcon) {
+      setIcon(folderPathIcon, 'folder-open')
+    }
+    if (filePathIcon) {
+      if (isFileImage(note.path)) setIcon(filePathIcon, 'file-image')
+      else if (isFilePDF(note.path)) setIcon(filePathIcon, 'file-line-chart')
+      else setIcon(filePathIcon, 'file-text')
+    }
   }
 </script>
 
@@ -44,31 +62,42 @@
   on:click
   on:mousemove
   selected="{selected}">
-  <div style="display:flex">
-    <div>
-      <div>
+  <div style="flex-grow: 1;">
+    <div class="omnisearch-result__title-container">
       <span class="omnisearch-result__title">
-          {@html title.replace(reg, highlighter)}
+        <!--        <span bind:this="{filePathIcon}"></span>-->
+        <span>{@html title.replace(reg, highlighter)}</span>
+
+        <!-- Counter -->
+        <!--{#if note.matches.length > 0}-->
+        <!--  <span class="omnisearch-result__counter">-->
+        <!--    {note.matches.length}&nbsp;{note.matches.length > 1-->
+        <!--      ? 'matches'-->
+        <!--      : 'match'}-->
+        <!--  </span>-->
+        <!--{/if}-->
       </span>
 
-        {#if note.matches.length > 0}
-          <span class="omnisearch-result__counter">
-            {note.matches.length}&nbsp;{note.matches.length > 1
-              ? 'matches'
-              : 'match'}
-          </span>
-        {/if}
+      <!-- Folder path -->
+      <div class="omnisearch-result__folder-path">
+        <span bind:this="{folderPathIcon}"></span>
+        <span>{notePath}</span>
+      </div>
     </div>
 
+    <div style="display: flex; flex-direction: row;">
       {#if $showExcerpt}
         <div class="omnisearch-result__body">
           {@html cleanedContent.replace(reg, highlighter)}
         </div>
       {/if}
-    </div>
 
+      <!-- Image -->
       {#if imagePath}
+        <div class="omnisearch-result__image-container">
           <img style="width: 100px" src="{imagePath}" alt="" />
+        </div>
       {/if}
     </div>
+  </div>
 </ResultItemContainer>

src/settings.ts

@@ -32,8 +32,6 @@ export interface OmnisearchSettings extends WeightingSettings {
   imagesIndexing: boolean
   /** Activate the small 🔍 button on Obsidian's ribbon */
   ribbonIcon: boolean
-  /** Display short filenames in search results, instead of the full path */
-  showShortName: boolean
   /** Display the small contextual excerpt in search results */
   showExcerpt: boolean
   /** Render line returns with <br> in excerpts */
@@ -295,19 +293,6 @@ export class SettingsTab extends PluginSettingTab {
         })
       )
 
-    // Display note names without the full path
-    new Setting(containerEl)
-      .setName('Hide full path in results list')
-      .setDesc(
-        'In the search results, only show the note name, without the full path.'
-      )
-      .addToggle(toggle =>
-        toggle.setValue(settings.showShortName).onChange(async v => {
-          settings.showShortName = v
-          await saveSettings(this.plugin)
-        })
-      )
-
     // Highlight results
     new Setting(containerEl)
       .setName('Highlight matching words in results')
@@ -390,7 +375,6 @@ export const DEFAULT_SETTINGS: OmnisearchSettings = {
   PDFIndexing: false,
   imagesIndexing: false,
 
-  showShortName: false,
   ribbonIcon: true,
   showExcerpt: true,
   renderLineReturnInExcerpts: true,

src/tools/utils.ts

@@ -43,6 +43,12 @@ export function removeFrontMatter(text: string): string {
   return text.replace(regexYaml, '')
 }
 
+export function pathWithoutFilename(path: string): string {
+  const split = path.split('/')
+  split.pop()
+  return split.join('/')
+}
+
 export function wait(ms: number): Promise<void> {
   return new Promise(resolve => {
     setTimeout(resolve, ms)