From 8d1352d9447259f1d32409baab364aa45b4adc49 Mon Sep 17 00:00:00 2001
From: Parth Jadhav <jadhavparth99@gmail.com>
Date: Thu, 19 Jan 2023 13:39:26 +0530
Subject: [PATCH] feat: show result path & refactor result component (#38)

---
 src/routes/App/App.svelte                  |  12 +--
 src/routes/App/lib/FileSearchResult.svelte | 105 ++++++++++++++++++++
 src/routes/App/lib/SearchResult.svelte     | 106 ++++-----------------
 src/utils/icon.ts                          |  38 ++++++++
 src/utils/path.ts                          |  13 +++
 5 files changed, 173 insertions(+), 101 deletions(-)
 create mode 100644 src/routes/App/lib/FileSearchResult.svelte
 create mode 100644 src/utils/icon.ts
 create mode 100644 src/utils/path.ts

diff --git a/src/routes/App/App.svelte b/src/routes/App/App.svelte
index c47078b..9fb4495 100644
--- a/src/routes/App/App.svelte
+++ b/src/routes/App/App.svelte
@@ -28,16 +28,6 @@
     appState.settings = false;
   };
 
-  const searchResultClicked = async (event: any) => {
-    await invoke('open_command', { path: event.target.id });
-    const searchBarInput = document.getElementById(
-      'searchBarInput'
-    ) as HTMLInputElement;
-    results = [];
-    searchBarInput.value = '';
-    await appWindow.hide();
-  };
-
   const search = async (searchPrompt: string) => {
     footerText = 'Loading...';
     [results, executionTime, resultType] = await invoke('handle_input', {
@@ -85,7 +75,7 @@
     <!-- svelte-ignore empty-block -->
     {#await appWindow.setSize(new LogicalSize(750, 100))}{/await}
     <SearchBar on:input={handleInput} />
-    <SearchResult bind:results {resultType} on:click={searchResultClicked} />
+    <SearchResult bind:results {resultType} />
     <Footer {footerText} />
   {/if}
   {#if appState.settings}
diff --git a/src/routes/App/lib/FileSearchResult.svelte b/src/routes/App/lib/FileSearchResult.svelte
new file mode 100644
index 0000000..5fad4f0
--- /dev/null
+++ b/src/routes/App/lib/FileSearchResult.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { getFileName, getTruncatedFilePath } from '../../../utils/path';
+  import { getIcon } from '../../../utils/icon';
+  export let filePath;
+  export let resultType: number;
+</script>
+
+<button on:click class="searchResult" id={filePath}>
+  <div class="resultContent">
+    {#await getIcon(getFileName(filePath).replace(/.app$/, ''))}
+      <span class="icon" />
+    {:then { icon, fallbackIcon }}
+      <img
+        class="icon"
+        src={icon}
+        alt=""
+        on:error={event => {
+          // @ts-ignore
+          event.target.src = fallbackIcon;
+        }}
+      />
+    {/await}
+    <p class="fileName">
+      {getFileName(filePath).replace(/.app$/, '')}
+    </p>
+  </div>
+  {#if resultType == 2}
+    <div class="resultPathDiv">
+      <p class="resultPathText">
+        {getTruncatedFilePath(filePath)}
+      </p>
+    </div>
+  {/if}
+</button>
+
+<style>
+  .resultPathDiv {
+    position: relative;
+    right: 0%;
+  }
+
+  .resultPathText {
+    font-family: Helvetica;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 20px;
+    margin: 0;
+    color: var(--secondary-text-color);
+    width: 250px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .searchResult {
+    margin-top: 7px;
+    margin-left: 12px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0px 12px;
+    width: 726px;
+    height: 43px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    flex: none;
+    order: 1;
+    flex-grow: 0;
+  }
+  .resultContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    margin-right: auto;
+  }
+
+  .icon {
+    display: inline-flex;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
+
+  .fileName {
+    font-family: Helvetica;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+    color: var(--primary-text-color);
+    text-align: left;
+    width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/src/routes/App/lib/SearchResult.svelte b/src/routes/App/lib/SearchResult.svelte
index 96003b8..e054017 100644
--- a/src/routes/App/lib/SearchResult.svelte
+++ b/src/routes/App/lib/SearchResult.svelte
@@ -2,12 +2,11 @@
   export let results: string[];
   export let resultType: number;
 
-  import { appDataDir, join, resolveResource } from '@tauri-apps/api/path';
-  import { convertFileSrc } from '@tauri-apps/api/tauri';
   import { appWindow, LogicalSize } from '@tauri-apps/api/window';
+  import { invoke } from '@tauri-apps/api/tauri';
   import { afterUpdate } from 'svelte';
-  import { FALLBACK_ICON_SYMBOL, icons } from '../../../cache';
   import CalculationResult from './CalculationResult.svelte';
+  import FileSearchResult from './FileSearchResult.svelte';
 
   afterUpdate(async () => {
     const height = document.getElementsByClassName('container')[0].clientHeight;
@@ -19,42 +18,15 @@
     }
   });
 
-  async function getIcon(app_name: string) {
-    let icon = icons.get(app_name);
-    let fallbackIcon = icons.get(FALLBACK_ICON_SYMBOL);
-
-    if (icon && fallbackIcon) {
-      return { icon, fallbackIcon };
-    }
-
-    if (!fallbackIcon) {
-      fallbackIcon = convertFileSrc(
-        await resolveResource('assets/default.svg')
-      );
-      icons.set(FALLBACK_ICON_SYMBOL, fallbackIcon);
-    }
-
-    let iconPath: string;
-    if (
-      [
-        'Migration Assistant',
-        'System Information',
-        'Calendar',
-        'System Settings',
-        'Photo Booth',
-        'AirPort Utility',
-      ].includes(app_name)
-    ) {
-      iconPath = await resolveResource(`assets/appIcons/${app_name}.app.png`);
-    } else {
-      const appDataDirPath = await appDataDir();
-      iconPath = await join(appDataDirPath, `appIcons/${app_name}.app.png`);
-    }
-
-    icon = convertFileSrc(iconPath);
-    icons.set(app_name, icon);
-    return { icon, fallbackIcon };
-  }
+  const searchResultClicked = async (event: any) => {
+    await invoke('open_command', { path: event.target.id });
+    const searchBarInput = document.getElementById(
+      'searchBarInput'
+    ) as HTMLInputElement;
+    results = [];
+    searchBarInput.value = '';
+    await appWindow.hide();
+  };
 
   async function handleKeydown(event) {
     if (event.keyCode == 38 || event.keyCode == 40) {
@@ -98,22 +70,11 @@
   {#if results.length > 0 && results[0] !== ' '}
     {#if resultType !== 3}
       {#each results.slice(0, 5) as result}
-        <button on:click class="searchResult" id={result}>
-          {#await getIcon(result.split('/').pop().replace(/.app$/, ''))}
-            <span class="appIcon" />
-          {:then { icon, fallbackIcon }}
-            <img
-              class="appIcon"
-              src={icon}
-              alt=""
-              on:error={event => {
-                // @ts-ignore
-                event.target.src = fallbackIcon;
-              }}
-            />
-          {/await}
-          <p class="appName">{result.split('/').pop().replace(/.app$/, '')}</p>
-        </button>
+        <FileSearchResult
+          filePath={result}
+          on:click={searchResultClicked}
+          {resultType}
+        />
       {/each}
     {:else}
       <CalculationResult bind:results />
@@ -122,44 +83,9 @@
 </div>
 
 <style>
-  .searchResult {
-    margin-top: 7px;
-    margin-left: 12px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0px 12px;
-    width: 726px;
-    height: 43px;
-    background: transparent;
-    border: none;
-    border-radius: 8px;
-    flex: none;
-    order: 1;
-    flex-grow: 0;
-  }
-
   :global(.searchResultFocused) {
     background: var(--highlight-overlay) !important;
     outline: 0 !important;
     border-radius: 8px;
   }
-
-  .appIcon {
-    display: inline-flex;
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-  }
-
-  .appName {
-    font-family: Helvetica;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    margin: 0;
-    color: var(--primary-text-color);
-  }
 </style>
diff --git a/src/utils/icon.ts b/src/utils/icon.ts
new file mode 100644
index 0000000..98cfc64
--- /dev/null
+++ b/src/utils/icon.ts
@@ -0,0 +1,38 @@
+import { resolveResource, appDataDir, join } from '@tauri-apps/api/path';
+import { FALLBACK_ICON_SYMBOL, icons } from '../cache';
+import { convertFileSrc } from '@tauri-apps/api/tauri';
+
+export const getIcon = async (app_name: string) => {
+  let icon = icons.get(app_name);
+  let fallbackIcon = icons.get(FALLBACK_ICON_SYMBOL);
+
+  if (icon && fallbackIcon) {
+    return { icon, fallbackIcon };
+  }
+
+  if (!fallbackIcon) {
+    fallbackIcon = convertFileSrc(await resolveResource('assets/default.svg'));
+    icons.set(FALLBACK_ICON_SYMBOL, fallbackIcon);
+  }
+
+  let iconPath: string;
+  if (
+    [
+      'Migration Assistant',
+      'System Information',
+      'Calendar',
+      'System Settings',
+      'Photo Booth',
+      'AirPort Utility',
+    ].includes(app_name)
+  ) {
+    iconPath = await resolveResource(`assets/appIcons/${app_name}.app.png`);
+  } else {
+    const appDataDirPath = await appDataDir();
+    iconPath = await join(appDataDirPath, `appIcons/${app_name}.app.png`);
+  }
+
+  icon = convertFileSrc(iconPath);
+  icons.set(app_name, icon);
+  return { icon, fallbackIcon };
+};
diff --git a/src/utils/path.ts b/src/utils/path.ts
new file mode 100644
index 0000000..245faa2
--- /dev/null
+++ b/src/utils/path.ts
@@ -0,0 +1,13 @@
+const getFileName = (path: string) => {
+  return path.split('/').pop();
+};
+
+const getTruncatedFilePath = (path: string) => {
+  const pathArray = path.split('/');
+  const fileName = pathArray.pop();
+  const fileDir = pathArray.pop();
+  const fileParentDir = pathArray.pop();
+  return `${fileParentDir}/${fileDir}/${fileName}`;
+};
+
+export { getFileName, getTruncatedFilePath };