frontend-svelte/src/widgets/ComparisonView/ui/Search/Search.svelte

<!--
    Component: Search
    Typeface search input for the comparison view.
    Updates the global filterManager query to filter the font list.
-->
<script lang="ts">
import { fontStore } from '$entities/Font';
import {
    filterManager,
    mapManagerToParams,
} from '$features/GetFonts';
import { SearchBar } from '$shared/ui';
import { untrack } from 'svelte';

$effect(() => {
    const params = mapManagerToParams(filterManager);
    untrack(() => fontStore.setParams(params));
});
</script>

<div class="p-6 border-b border-black/5">
    <SearchBar
        id="font-search"
        class="w-full"
        placeholder="Typeface Search"
        aria-label="Search typefaces"
        bind:value={filterManager.queryValue}
        fullWidth
    />
</div>