feat: improve scrolling with calculator

src/plugins/built-in/globalSearch/Calculator.svelte

@@ -98,7 +98,7 @@
   <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 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))))">
+        style="--char-count: {searchTerm?.length || 10}; font-size: min(2.5rem, max(1rem, calc(35vw / 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">

src/plugins/built-in/globalSearch/SearchBar.svelte

@@ -195,14 +195,15 @@
           />
         </div>
 
-        <Calculator 
+        
-          searchTerm={searchTerm} 
+        <ul class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
-          isSelected={selectedIndex === 0} 
+          <Calculator 
-          on:hasResult={(e) => updateCalculatorState(e.detail)}
+            searchTerm={searchTerm} 
-        />
+            isSelected={selectedIndex === 0} 
-
+            on:hasResult={(e) => updateCalculatorState(e.detail)}
-        {#if combinedResults.length > 0}
+          />
-          <ul class="overflow-y-auto max-h-[24rem] text-base scroll-py-2 p-1 gap-0.5 flex flex-col">
+          
+          {#if combinedResults.length > 0}
             {#each combinedResults as result, i (result.id)} 
               {@const isSelected = selectedIndex === (calculatorResult ? i + 1 : i)}
               {@const item = result.item} 
@@ -251,23 +252,23 @@
                 {/if}
               </li>
             {/each}
-          </ul>
+          {:else if !calculatorResult}
-        {:else if !calculatorResult}
+            <div class="px-8 py-16 text-center text-zinc-900 dark:text-zinc-200 sm:px-16">
-          <div class="px-8 py-16 text-center text-zinc-900 dark:text-zinc-200 sm:px-16">
+              {#if isLoading}
-            {#if isLoading}
+                <div class="mx-auto w-8 h-8 rounded-full border-2 animate-spin border-zinc-300 dark:border-zinc-700 border-t-zinc-600 dark:border-t-zinc-300"></div>
-              <div class="mx-auto w-8 h-8 rounded-full border-2 animate-spin border-zinc-300 dark:border-zinc-700 border-t-zinc-600 dark:border-t-zinc-300"></div>
+                <p class="mt-4 text-lg dark:text-zinc-300">Searching...</p>
-              <p class="mt-4 text-lg dark:text-zinc-300">Searching...</p>
+              {:else}
-            {:else}
+                <svg class="mx-auto w-8 h-8 text-opacity-40 dark:text-opacity-60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-              <svg class="mx-auto w-8 h-8 text-opacity-40 dark:text-opacity-60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+                </svg>
-              </svg>
+                <p class="mt-6 text-lg dark:text-zinc-300">No matches found. Try something else.</p>
-              <p class="mt-6 text-lg dark:text-zinc-300">No matches found. Try something else.</p>
+              {/if}
-            {/if}
+            </div>
-          </div>
+          {/if}
-        {/if}
+        </ul>
         <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 justify-between items-center h-5 text-sm text-zinc-500 dark:text-zinc-400">
               <div class="flex gap-4 items-center">
                 {#if !calculatorResult}
                   {#if selectedIndex >= 0 && selectedIndex < combinedResults.length}

src/plugins/built-in/test/index.ts

@@ -31,8 +31,13 @@ const testPlugin: Plugin<typeof settings> = {
   run: async (api) => {
     console.log('Test plugin running');
 
+    api.events.on('ping', (data) => {
+      console.log('Ping received! Page changed to: ', data);
+    });
+
     const { unregister } = api.seqta.onPageChange((page) => {
-      console.log('Page changed to', page);
+      //console.log('Page changed to', page);
+      api.events.emit('ping', page);
 
       console.log('Current setting value:', api.settings.someSetting);
     });

src/plugins/index.ts

@@ -7,6 +7,7 @@ import themesPlugin from './built-in/themes';
 import animatedBackgroundPlugin from './built-in/animatedBackground';
 import assessmentsAveragePlugin from './built-in/assessmentsAverage';
 import globalSearchPlugin from './built-in/globalSearch';
+import testPlugin from './built-in/test';
 
 // Initialize plugin manager
 const pluginManager = PluginManager.getInstance();
@@ -18,7 +19,7 @@ pluginManager.registerPlugin(assessmentsAveragePlugin);
 pluginManager.registerPlugin(notificationCollectorPlugin);
 pluginManager.registerPlugin(timetablePlugin);
 pluginManager.registerPlugin(globalSearchPlugin);
-//pluginManager.registerPlugin(testPlugin);
+pluginManager.registerPlugin(testPlugin);
 
 export { init as Monofile } from './monofile';