feat: add IconGrid, EntityPicker controls and enhance search panel
Port icon grid and entity picker patterns from wled-screen-controller. IconGrid replaces plain <select> elements with visual icon grids for known item sets (widget type, icon type, healthcheck method, permission level). EntityPicker replaces search dropdowns with a command-palette style overlay with keyboard navigation and filtering. Enhance SearchDialog with keyboard navigation (arrow keys, Enter, Escape), grouped results with section headers, active highlight, and a footer with shortcut hints.
This commit is contained in:
@@ -2,15 +2,13 @@
|
||||
import { t } from 'svelte-i18n';
|
||||
import { search } from '$lib/stores/search.svelte.js';
|
||||
import SearchResult from './SearchResult.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let inputEl: HTMLInputElement;
|
||||
|
||||
const appResults = $derived(search.results.filter((r) => r.type === 'app'));
|
||||
const boardResults = $derived(search.results.filter((r) => r.type === 'board'));
|
||||
let resultsEl: HTMLDivElement;
|
||||
|
||||
$effect(() => {
|
||||
if (search.open && inputEl) {
|
||||
// Focus input when dialog opens
|
||||
requestAnimationFrame(() => inputEl?.focus());
|
||||
}
|
||||
});
|
||||
@@ -20,19 +18,66 @@
|
||||
search.close();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
search.moveSelection(1);
|
||||
scrollActiveIntoView();
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
search.moveSelection(-1);
|
||||
scrollActiveIntoView();
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
const item = search.selectCurrent();
|
||||
if (item) {
|
||||
if (item.action) {
|
||||
item.action();
|
||||
} else if (item.type === 'app') {
|
||||
window.open(item.url, '_blank', 'noopener,noreferrer');
|
||||
} else {
|
||||
goto(item.url);
|
||||
}
|
||||
search.close();
|
||||
}
|
||||
} else if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function scrollActiveIntoView() {
|
||||
requestAnimationFrame(() => {
|
||||
const el = resultsEl?.querySelector('.search-active');
|
||||
el?.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
}
|
||||
|
||||
// Track flat index offset per group for keyboard highlight
|
||||
function getFlatIndexOffset(groupIdx: number): number {
|
||||
let offset = 0;
|
||||
for (let i = 0; i < groupIdx; i++) {
|
||||
offset += search.grouped[i].items.length;
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
|
||||
const isMac = $derived(
|
||||
typeof navigator !== 'undefined' && navigator.platform?.toLowerCase().includes('mac')
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if search.open}
|
||||
<!-- Backdrop -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[15vh] backdrop-blur-sm"
|
||||
onclick={handleBackdropClick}
|
||||
onkeydown={(e) => e.key === 'Escape' && search.close()}
|
||||
style="animation: searchFadeIn 0.15s ease-out"
|
||||
>
|
||||
<!-- Dialog -->
|
||||
<div
|
||||
class="w-full max-w-lg rounded-lg border border-border bg-popover shadow-2xl"
|
||||
class="flex w-full max-w-lg flex-col rounded-lg border border-border bg-popover shadow-2xl"
|
||||
style="max-height: 60vh; animation: searchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1)"
|
||||
role="dialog"
|
||||
aria-label={$t('search.placeholder')}
|
||||
>
|
||||
@@ -57,6 +102,7 @@
|
||||
type="text"
|
||||
placeholder={$t('search.placeholder')}
|
||||
class="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<kbd
|
||||
class="hidden rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline"
|
||||
@@ -66,7 +112,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div class="max-h-[50vh] overflow-y-auto p-2">
|
||||
<div class="overflow-y-auto p-2" bind:this={resultsEl}>
|
||||
{#if search.loading}
|
||||
<div class="flex items-center justify-center py-8">
|
||||
<div
|
||||
@@ -84,29 +130,57 @@
|
||||
{$t('search.no_results', { values: { query: search.query } })}
|
||||
</p>
|
||||
{:else}
|
||||
{#if appResults.length > 0}
|
||||
{#each search.grouped as group, groupIdx (group.key)}
|
||||
<div class="mb-2">
|
||||
<p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{$t('search.apps')}
|
||||
<p
|
||||
class="mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{$t(`search.${group.label}s`) ?? group.label}
|
||||
</p>
|
||||
{#each appResults as result (result.id)}
|
||||
<SearchResult {result} onselect={() => search.close()} />
|
||||
{#each group.items as result, itemIdx (result.id)}
|
||||
{@const flatIdx = getFlatIndexOffset(groupIdx) + itemIdx}
|
||||
<SearchResult
|
||||
{result}
|
||||
active={flatIdx === search.selectedIdx}
|
||||
onselect={() => search.close()}
|
||||
onhover={() => (search.selectedIdx = flatIdx)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if boardResults.length > 0}
|
||||
<div>
|
||||
<p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{$t('search.boards')}
|
||||
</p>
|
||||
{#each boardResults as result (result.id)}
|
||||
<SearchResult {result} onselect={() => search.close()} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="border-t border-border px-4 py-1.5 text-[11px] text-muted-foreground">
|
||||
<span class="inline-flex items-center gap-3">
|
||||
<span>↑↓ {$t('search.nav_hint') ?? 'navigate'}</span>
|
||||
<span>↵ {$t('search.select_hint') ?? 'select'}</span>
|
||||
<span>esc {$t('search.close_hint') ?? 'close'}</span>
|
||||
<span class="ml-auto">{isMac ? '⌘' : 'Ctrl'}+K</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
@keyframes searchFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes searchSlideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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'}"
|
||||
>
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md
|
||||
{active ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'}"
|
||||
>
|
||||
{#if result.icon}
|
||||
<span class="text-lg">{result.icon}</span>
|
||||
@@ -76,4 +81,11 @@
|
||||
>
|
||||
{result.type}
|
||||
</span>
|
||||
|
||||
<!-- Enter hint when active -->
|
||||
{#if active}
|
||||
<kbd class="shrink-0 rounded border border-border bg-muted px-1 py-0.5 text-[10px] text-muted-foreground">
|
||||
↵
|
||||
</kbd>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user