{/if}
+
+
diff --git a/src/lib/components/search/SearchResult.svelte b/src/lib/components/search/SearchResult.svelte
index 6b32c05..a7943a6 100644
--- a/src/lib/components/search/SearchResult.svelte
+++ b/src/lib/components/search/SearchResult.svelte
@@ -3,10 +3,12 @@
interface Props {
result: SearchResultItem;
+ active?: boolean;
onselect: () => void;
+ onhover?: () => void;
}
- let { result, onselect }: Props = $props();
+ let { result, active = false, onselect, onhover }: Props = $props();
const href = $derived(result.type === 'app' ? result.url : `/boards/${result.id}`);
const isExternal = $derived(result.type === 'app');
@@ -17,11 +19,14 @@
target={isExternal ? '_blank' : undefined}
rel={isExternal ? 'noopener noreferrer' : undefined}
onclick={onselect}
- class="flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors hover:bg-accent"
+ onmouseenter={onhover}
+ class="flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors
+ {active ? 'search-active bg-primary/15 text-foreground' : 'hover:bg-accent'}"
>
{#if result.icon}
{result.icon}
@@ -76,4 +81,11 @@
>
{result.type}
+
+
+ {#if active}
+
+ ↵
+
+ {/if}
diff --git a/src/lib/components/ui/EntityPicker.svelte b/src/lib/components/ui/EntityPicker.svelte
new file mode 100644
index 0000000..29977dd
--- /dev/null
+++ b/src/lib/components/ui/EntityPicker.svelte
@@ -0,0 +1,240 @@
+
+
+{#if name}
+
+{/if}
+
+
+
+{#if open}
+
+
{}}
+ style="animation: epFadeIn 0.15s ease-out"
+ >
+
+
+
+
+
+
+
+
+
+ {#if filtered.length === 0}
+
—
+ {:else}
+ {#each filtered as item, i (item.value + (item._isNone ? '_none' : ''))}
+
+ {/each}
+ {/if}
+
+
+
+
+ ↑↓ navigate · Enter select · Esc close
+
+
+
+{/if}
+
+
diff --git a/src/lib/components/ui/IconGrid.svelte b/src/lib/components/ui/IconGrid.svelte
new file mode 100644
index 0000000..76ce866
--- /dev/null
+++ b/src/lib/components/ui/IconGrid.svelte
@@ -0,0 +1,189 @@
+
+
+
+
+{#if name}
+
+{/if}
+
+
+
+{#if open}
+
+ {#if showFilter}
+
+
+
+ {/if}
+
+ {#each filteredItems as item (item.value)}
+
+ {/each}
+ {#if filteredItems.length === 0}
+
+ {$t('search.no_results', { values: { query: filterQuery } })}
+
+ {/if}
+
+
+{/if}
+
+
diff --git a/src/lib/components/widget/WidgetCreationForm.svelte b/src/lib/components/widget/WidgetCreationForm.svelte
index 532c402..79cca90 100644
--- a/src/lib/components/widget/WidgetCreationForm.svelte
+++ b/src/lib/components/widget/WidgetCreationForm.svelte
@@ -1,5 +1,9 @@
-
+
-
{#if selectedWidgetType === 'app'}
-
{:else if selectedWidgetType === 'bookmark'}
@@ -177,15 +191,12 @@
{:else if selectedWidgetType === 'note'}
-
-
+ columns={2}
+ />
diff --git a/src/lib/i18n/en.json b/src/lib/i18n/en.json
index 5f60d62..fdfb469 100644
--- a/src/lib/i18n/en.json
+++ b/src/lib/i18n/en.json
@@ -258,6 +258,11 @@
"search.no_results": "No results for \"{query}\"",
"search.apps": "Apps",
"search.boards": "Boards",
+ "search.nav_hint": "navigate",
+ "search.select_hint": "select",
+ "search.close_hint": "close",
+
+ "common.search_filter": "Filter...",
"common.save": "Save",
"common.cancel": "Cancel",
diff --git a/src/lib/i18n/ru.json b/src/lib/i18n/ru.json
index c46e5af..ecc0e0d 100644
--- a/src/lib/i18n/ru.json
+++ b/src/lib/i18n/ru.json
@@ -246,6 +246,11 @@
"search.no_results": "Ничего не найдено по запросу «{query}»",
"search.apps": "Приложения",
"search.boards": "Доски",
+ "search.nav_hint": "навигация",
+ "search.select_hint": "выбрать",
+ "search.close_hint": "закрыть",
+
+ "common.search_filter": "Фильтр...",
"common.save": "Сохранить",
"common.cancel": "Отмена",
"common.delete": "Удалить",
diff --git a/src/lib/stores/search.svelte.ts b/src/lib/stores/search.svelte.ts
index 69e6c29..475dfcf 100644
--- a/src/lib/stores/search.svelte.ts
+++ b/src/lib/stores/search.svelte.ts
@@ -5,17 +5,49 @@ export interface SearchResultItem {
description: string | null;
url: string;
icon: string | null;
+ /** Optional action (e.g. "open in new tab"). If present, item acts as a command. */
+ action?: () => void;
}
+export interface SearchGroup {
+ key: string;
+ label: string;
+ items: SearchResultItem[];
+}
+
+const GROUP_ORDER: Record = { app: 0, board: 1 };
+
class SearchStore {
open = $state(false);
query = $state('');
results = $state([]);
loading = $state(false);
error = $state(null);
+ selectedIdx = $state(0);
#debounceTimer: ReturnType | null = null;
+ /** Grouped results for rendering, preserving group order. */
+ get grouped(): SearchGroup[] {
+ const map = new Map();
+ for (const item of this.results) {
+ const existing = map.get(item.type);
+ if (existing) {
+ existing.push(item);
+ } else {
+ map.set(item.type, [item]);
+ }
+ }
+ return Array.from(map.entries())
+ .sort(([a], [b]) => (GROUP_ORDER[a] ?? 99) - (GROUP_ORDER[b] ?? 99))
+ .map(([key, items]) => ({ key, label: key, items }));
+ }
+
+ /** Flat list of items in render order (for keyboard navigation). */
+ get flatItems(): SearchResultItem[] {
+ return this.grouped.flatMap((g) => g.items);
+ }
+
constructor() {
if (typeof window !== 'undefined') {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -97,6 +129,7 @@ class SearchStore {
}
this.results = items;
+ this.selectedIdx = 0;
} catch {
this.error = 'Search failed';
this.results = [];
@@ -105,12 +138,25 @@ class SearchStore {
}
}
+ moveSelection(delta: number) {
+ const flat = this.flatItems;
+ if (flat.length === 0) return;
+ this.selectedIdx = Math.max(0, Math.min(this.selectedIdx + delta, flat.length - 1));
+ }
+
+ selectCurrent(): SearchResultItem | null {
+ const flat = this.flatItems;
+ if (this.selectedIdx < 0 || this.selectedIdx >= flat.length) return null;
+ return flat[this.selectedIdx];
+ }
+
toggle() {
this.open = !this.open;
if (!this.open) {
this.query = '';
this.results = [];
this.error = null;
+ this.selectedIdx = 0;
}
}
@@ -119,6 +165,7 @@ class SearchStore {
this.query = '';
this.results = [];
this.error = null;
+ this.selectedIdx = 0;
}
}