From 6a556b69407db457ca77d839025b13dd6a5ae0a1 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Tue, 1 Apr 2025 18:19:45 +1100
Subject: [PATCH] feat: further interface tweaks

---
 .../built-in/globalSearch/Calculator.svelte   | 22 ++++++++++---------
 .../built-in/globalSearch/SearchBar.svelte    | 21 +++++++++---------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/plugins/built-in/globalSearch/Calculator.svelte b/src/plugins/built-in/globalSearch/Calculator.svelte
index c7acf596..90c119c6 100644
--- a/src/plugins/built-in/globalSearch/Calculator.svelte
+++ b/src/plugins/built-in/globalSearch/Calculator.svelte
@@ -48,20 +48,20 @@
       if (evaluated !== undefined) {
         if (math.typeOf(evaluated) === 'Unit') {
           // Handle unit conversion results
-          result = math.format(evaluated, { precision: 14 });
+          result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
           inputUnit = detectUnit(input);
           outputUnit = detectUnit(result);
         } else if (typeof evaluated === 'number') {
           // Handle regular numbers
           if (math.round(evaluated) === evaluated) {
-            result = math.format(evaluated, { precision: 14 });
+            result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
           } else {
-            result = math.format(evaluated, { precision: 14 });
+            result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
           }
           inputUnit = '';
           outputUnit = '';
         } else {
-          result = math.format(evaluated, { precision: 14 });
+          result = math.format(evaluated, { precision: 14, lowerExp: -15, upperExp: 15 });
           inputUnit = '';
           outputUnit = '';
         }
@@ -94,10 +94,11 @@
 
 {#if result !== null}
 <div class="p-2">
-  <p class="text-[0.85rem] p-1 pb-0.5 font-semibold text-zinc-500 dark:text-zinc-400">Calculator</p>
+  <p class="text-[0.85rem] p-1 pb-0.5 pt-0 font-semibold text-zinc-500 dark:text-zinc-400">Calculator</p>
   <div class="flex items-center justify-between gap-8 rounded-lg border border-transparent {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 border-zinc-900/5 dark:border-zinc-100/5' : ''}">
-    <div class="flex flex-col flex-1 items-center py-4 pl-4">
-      <div class="py-2 text-4xl font-semibold text-zinc-900 dark:text-white">
+    <div class="flex flex-col flex-1 items-center py-4 pl-4 min-w-0">
+      <div class="overflow-hidden py-2 w-full font-semibold text-center whitespace-nowrap text-zinc-900 dark:text-white text-ellipsis" 
+        style="--char-count: {result?.length || 10}; font-size: min(2.5rem, max(1rem, calc(25vw / var(--char-count, 10))))">
         {searchTerm}
       </div>
       <div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-900 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-100/10">
@@ -105,7 +106,7 @@
       </div>
     </div>
 
-    <div class="flex flex-col justify-center items-center w-12">
+    <div class="flex flex-col flex-shrink-0 justify-center items-center w-12">
       <div class="h-8 w-[1px] bg-zinc-900/5 dark:bg-zinc-100/5"></div>
       <div class="text-2xl text-zinc-900 dark:text-zinc-100">
         →
@@ -114,8 +115,9 @@
     </div>
 
     {#if !isCalculating}
-      <div class="flex flex-col flex-1 items-center py-4 pr-4">
-        <div class="py-2 text-4xl font-semibold text-zinc-900 dark:text-white">
+      <div class="flex flex-col flex-1 items-center py-4 pr-4 min-w-0">
+        <div class="overflow-hidden py-2 w-full font-semibold text-center whitespace-nowrap text-zinc-900 dark:text-white text-ellipsis" 
+             style="--char-count: {result?.length || 10}; font-size: min(2.5rem, max(1rem, calc(30vw / var(--char-count, 10))))">
           {result}
         </div>
         <div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-900 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-100/10">
diff --git a/src/plugins/built-in/globalSearch/SearchBar.svelte b/src/plugins/built-in/globalSearch/SearchBar.svelte
index bd2a31bf..95d2d94f 100644
--- a/src/plugins/built-in/globalSearch/SearchBar.svelte
+++ b/src/plugins/built-in/globalSearch/SearchBar.svelte
@@ -3,8 +3,8 @@
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
   import { fade, scale } from 'svelte/transition';
   import { circOut, quintOut } from 'svelte/easing';
-  import { getStaticCommands, type StaticCommandItem } from './commands';
-  import { getAllDynamicItems, type DynamicContentItem } from './dynamicSearch';
+  import { type StaticCommandItem } from './commands';
+  import { type DynamicContentItem } from './dynamicSearch';
   import type { CombinedResult } from './types';
   import { createSearchIndexes, performSearch as doSearch } from './searchUtils';
   import { highlightMatch, highlightSnippet } from './highlightUtils';
@@ -33,7 +33,6 @@
     
     console.debug(`[Global Search] Indexed ${commands.length} command items and ${dynamicItems.length} dynamic items.`);
   }
-
   let commandPalleteOpen = $state(false);
   let searchTerm = $state('');
   let selectedIndex = $state(0);
@@ -171,7 +170,7 @@
          role="button"
          tabindex="0">
       <div
-        class="w-full max-w-2xl rounded-xl ring-1 shadow-2xl ring-black/5 dark:ring-white/10 { transparencyEffects ? 'bg-white/80 dark:bg-zinc-900/80 backdrop-blur' : 'bg-white dark:bg-zinc-900' }"
+        class="w-full max-w-2xl overflow-clip rounded-xl ring-1 shadow-2xl ring-black/5 dark:ring-white/10 { transparencyEffects ? 'bg-white/80 dark:bg-zinc-900/80 backdrop-blur' : 'bg-white dark:bg-zinc-900' }"
         transition:scale={{ duration: 100, start: 0.95, opacity: 0, easing: circOut }}
         onclick={(e) => {
           e.stopPropagation();
@@ -203,7 +202,7 @@
         />
 
         {#if combinedResults.length > 0}
-          <ul class="overflow-y-auto max-h-[32rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
+          <ul class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
             {#each combinedResults as result, i (result.id)} 
               {@const isSelected = selectedIndex === (calculatorResult ? i + 1 : i)}
               {@const item = result.item} 
@@ -221,9 +220,9 @@
                       {@html highlightMatch(staticItem.text, searchTerm, result.matches)}
                     </span>
                     {#if staticItem.keybindLabel}
-                      <span class="flex-none ml-auto text-sm font-semibold text-zinc-500 dark:text-zinc-400">
-                        <kbd class="px-2 py-1 rounded bg-zinc-100 dark:bg-zinc-800">{staticItem.keybindLabel}</kbd>
-                      </span>
+                      <div class="flex-none ml-auto">
+                        {@render Shortcut({ text: '', keybind: staticItem.keybindLabel })}
+                      </div>
                     {/if}
                   </button>
                 {:else if result.type === 'dynamic'}
@@ -266,7 +265,7 @@
             {/if}
           </div>
         {/if}
-        <div class="p-3 w-full border-t border-zinc-900/5 dark:border-zinc-100/5">
+        <div class="px-3 py-2 w-full border-t border-zinc-900/5 dark:border-zinc-100/5 bg-white/5">
           {#if combinedResults.length > 0 || calculatorResult}
             <div class="flex justify-between items-center text-sm text-zinc-500 dark:text-zinc-400">
               <div class="flex gap-4 items-center">
@@ -274,7 +273,7 @@
                   {#if selectedIndex >= 0 && selectedIndex < combinedResults.length}
                     {@const item = combinedResults[selectedIndex].item}
                     {#if 'keybind' in item && item.keybind}
-                      {@render Shortcut({ text: 'Shortcut', keybind: item.keybindLabel })}
+                      {@render Shortcut({ text: 'Shortcut', keybind: [ ...(item?.keybindLabel ?? []) ] })}
                     {/if}
                   {/if}
                 {/if}
@@ -299,7 +298,7 @@
   <div class="flex gap-2 items-center">
     <div class="flex gap-1 items-center">
       {#each keybind as key}
-        <kbd class="px-1 py-0.5 text-center align-middle rounded min-w-6 bg-zinc-100 dark:bg-zinc-800">{key}</kbd>
+        <kbd class="px-1 py-0.5 text-[0.8rem] text-center align-middle rounded min-w-6 bg-zinc-100 dark:bg-zinc-100/10">{key}</kbd>
       {/each}
     </div>
     <span>{text}</span>