90 lines
2.8 KiB
Svelte
90 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { goto } from "$app/navigation";
|
|
import type { SearchResult } from "$lib/search";
|
|
import { createSearchState } from "$lib/searchState.svelte";
|
|
import SearchResults from "$lib/components/SearchResults.svelte";
|
|
|
|
const search = createSearchState();
|
|
|
|
let open = $state(false);
|
|
|
|
function onInput() {
|
|
search.schedule();
|
|
open = search.query.trim().length >= 2;
|
|
}
|
|
|
|
function select(r: SearchResult) {
|
|
open = false;
|
|
goto(`/thread/${r.threadId}`);
|
|
}
|
|
|
|
function onKeydown(e: KeyboardEvent) {
|
|
if (e.key === "Escape") {
|
|
open = false;
|
|
return;
|
|
}
|
|
if (!open) return;
|
|
search.navigate(e, select);
|
|
}
|
|
|
|
function onFocus() {
|
|
if (search.query.trim().length >= 2) open = true;
|
|
}
|
|
|
|
function onBlur() {
|
|
// Delay so a mousedown on a result still lands
|
|
setTimeout(() => (open = false), 120);
|
|
}
|
|
</script>
|
|
|
|
<div class="relative">
|
|
<div class="relative">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="pointer-events-none absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
|
|
/>
|
|
</svg>
|
|
<input
|
|
bind:value={search.query}
|
|
data-search-inline
|
|
type="search"
|
|
placeholder="Search"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
aria-controls={open ? "search-results-inline" : undefined}
|
|
aria-activedescendant={search.activeIndex >= 0
|
|
? `search-results-inline-${search.activeIndex}`
|
|
: undefined}
|
|
aria-label="Search discussions"
|
|
autocomplete="off"
|
|
oninput={onInput}
|
|
onkeydown={onKeydown}
|
|
onfocus={onFocus}
|
|
onblur={onBlur}
|
|
class="focus:ring-accent focus:dark:ring-accent w-full rounded border border-neutral-200 bg-neutral-100 py-2 pr-12 pl-11 text-neutral-800 placeholder-neutral-400 focus:bg-neutral-50 focus:ring-1 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder-neutral-500 focus:dark:bg-neutral-950"
|
|
/>
|
|
<kbd
|
|
class="pointer-events-none absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md bg-neutral-200 font-sans text-sm text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
|
|
aria-hidden="true">/</kbd
|
|
>
|
|
</div>
|
|
|
|
{#if open}
|
|
<SearchResults
|
|
{search}
|
|
idBase="search-results-inline"
|
|
class="absolute right-0 left-0 z-30 mt-2 max-h-96 overflow-auto rounded-lg border border-neutral-200 bg-white py-2 shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
|
|
onselect={select}
|
|
/>
|
|
{/if}
|
|
</div>
|