alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add IconGrid, EntityPicker controls and enhance search panel
CI / lint-and-check (push) Failing after 4m56s
Details
CI / test (push) Has been skipped
Details
CI / docker-build (push) Has been skipped
Details

Browse Source 
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:
Admin
2026-03-25 11:58:21 +03:00
parent 54a30ca4ca
commit 8d7847889e
11 changed files with 744 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/search/SearchDialog.svelte
+99 -25
View File
@@ -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>