feat: improve searchbar

This commit is contained in:
SethBurkart123
2025-04-01 16:02:54 +11:00
parent ea77224c75
commit e884b0526b
4 changed files with 30 additions and 28 deletions
@@ -64,7 +64,7 @@
isCalculating = true;
// Let mathjs handle everything
const evaluated = math.evaluate(input);
const evaluated = math.evaluate(input.replace('**', '^'));
// Format the result
if (evaluated !== undefined) {
@@ -103,7 +103,7 @@
} finally {
isCalculating = false;
}
}, 3);
}, 2);
$effect(() => {
processInput(searchTerm);
@@ -119,17 +119,17 @@
<p class="text-[0.85rem] p-1 pb-0.5 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="text-3xl font-semibold text-zinc-900 dark:text-white">
<div class="py-2 text-4xl font-semibold text-zinc-900 dark:text-white">
{searchTerm}
</div>
<div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800">
<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">
{inputUnit || 'Question'}
</div>
</div>
<div class="flex flex-col 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-600 dark:text-zinc-400">
<div class="text-2xl text-zinc-900 dark:text-zinc-100">
</div>
<div class="h-8 w-[1px] bg-zinc-900/5 dark:bg-zinc-100/5"></div>
@@ -137,10 +137,10 @@
{#if !isCalculating}
<div class="flex flex-col flex-1 items-center py-4 pr-4">
<div class="text-3xl font-semibold text-zinc-900 dark:text-white">
<div class="py-2 text-4xl font-semibold text-zinc-900 dark:text-white">
{result}
</div>
<div class="px-3 py-1 mt-1 text-sm rounded-md text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800">
<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">
{outputUnit || 'Result'}
</div>
</div>
@@ -113,10 +113,15 @@
}
});
$effect(() => {
if (combinedResults.length === 0 && calculatorResult && commandPalleteOpen) {
selectedIndex = 0;
}
});
const selectNext = () => {
if (calculatorResult && selectedIndex === -1) {
selectedIndex = 0; // Move from calculator to first search result
} else if (selectedIndex < combinedResults.length - 1) {
const maxIndex = (calculatorResult ? 1 : 0) + combinedResults.length - 1;
if (selectedIndex < maxIndex) {
selectedIndex++;
}
};
@@ -124,18 +129,15 @@
const selectPrev = () => {
if (selectedIndex > 0) {
selectedIndex--;
} else if (selectedIndex === 0 && calculatorResult) {
selectedIndex = -1; // Move from first search result to calculator
}
};
const executeSelected = () => {
if (selectedIndex === -1 && calculatorResult) {
if (calculatorResult) {
if (calculatorResult && selectedIndex === 0) {
navigator.clipboard.writeText(calculatorResult);
}
} else {
combinedResults[selectedIndex]?.item.action();
const resultIndex = calculatorResult ? selectedIndex - 1 : selectedIndex;
combinedResults[resultIndex]?.item.action();
}
commandPalleteOpen = false;
};
@@ -196,21 +198,21 @@
<Calculator
searchTerm={searchTerm}
isSelected={selectedIndex === -1}
isSelected={selectedIndex === 0}
on:hasResult={(e) => updateCalculatorState(e.detail)}
/>
{#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">
{#each combinedResults as result, i (result.id)}
{@const isSelected = selectedIndex === i}
{@const isSelected = selectedIndex === (calculatorResult ? i + 1 : i)}
{@const item = result.item}
<li>
{#if result.type === 'command'}
<!-- Render Static Command -->
{@const staticItem = item as StaticCommandItem}
<button
class="w-full flex items-center px-2 py-1.5 rounded-lg transition duration-150 select-none cursor-pointer group
class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
onclick={() => { staticItem.action(); commandPalleteOpen = false; }}
>
@@ -228,7 +230,7 @@
<!-- Render Dynamic Content Item -->
{@const dynamicItem = item as DynamicContentItem}
<button
class="w-full flex flex-col px-2 py-1.5 rounded-lg transition duration-150 select-none cursor-pointer group
class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group
{isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
onclick={() => { dynamicItem.action(); commandPalleteOpen = false; }}
>
@@ -33,7 +33,7 @@ const staticCommands: StaticCommandItem[] = [
id: 'messages',
icon: '\uea6e',
category: 'navigation',
text: 'Messages',
text: 'Messages 4',
keybind: ['alt+m'],
keybindLabel: 'Alt+M',
action: () => {
@@ -29,10 +29,10 @@ export function createSearchIndexes() {
keys: ['text', 'category', 'keywords'],
includeScore: true,
includeMatches: true,
threshold: 0.4,
minMatchCharLength: 2,
threshold: 0.6,
minMatchCharLength: 1,
ignoreLocation: true,
useExtendedSearch: true
useExtendedSearch: false
};
const dynamicOptions = {
@@ -45,10 +45,10 @@ export function createSearchIndexes() {
],
includeScore: true,
includeMatches: true,
threshold: 0.4,
minMatchCharLength: 2,
threshold: 0.6,
minMatchCharLength: 1,
ignoreLocation: true,
useExtendedSearch: true
useExtendedSearch: false
};
return {