refactor(createFilterStore): move from store pattern to svelte 5 runes usage
This commit is contained in:
@@ -10,12 +10,16 @@
|
||||
* Buttons are equally sized (flex-1) for balanced layout. Note:
|
||||
* Functionality not yet implemented - wire up to filter stores.
|
||||
*/
|
||||
import { clearAllFilters } from '$features/FilterFonts';
|
||||
import { filterManager } from '$features/FilterFonts';
|
||||
import { Button } from '$shared/shadcn/ui/button';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<Button variant="outline" class="flex-1 cursor-pointer" onclick={clearAllFilters}>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="flex-1 cursor-pointer"
|
||||
onclick={filterManager.deselectAllGlobal}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<Button class="flex-1 cursor-pointer">
|
||||
|
||||
@@ -12,31 +12,15 @@
|
||||
* Uses $derived for reactive access to filter states, ensuring UI updates
|
||||
* when selections change through any means (sidebar, programmatically, etc.).
|
||||
*/
|
||||
import { categoryFilterStore } from '$features/FilterFonts';
|
||||
import { providersFilterStore } from '$features/FilterFonts';
|
||||
import { subsetsFilterStore } from '$features/FilterFonts';
|
||||
import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
|
||||
import { filterManager } from '$features/FilterFonts';
|
||||
import { CheckboxFilter } from '$shared/ui';
|
||||
|
||||
/** Reactive properties from providers filter store */
|
||||
const { properties: providers } = $derived($providersFilterStore);
|
||||
/** Reactive properties from subsets filter store */
|
||||
const { properties: subsets } = $derived($subsetsFilterStore);
|
||||
/** Reactive properties from categories filter store */
|
||||
const { properties: categories } = $derived($categoryFilterStore);
|
||||
$inspect(filterManager.groups).with(console.trace);
|
||||
</script>
|
||||
|
||||
<CheckboxFilter
|
||||
displayedLabel="Font provider"
|
||||
properties={providers}
|
||||
onPropertyToggle={providersFilterStore.toggleProperty}
|
||||
/>
|
||||
<CheckboxFilter
|
||||
displayedLabel="Font subset"
|
||||
properties={subsets}
|
||||
onPropertyToggle={subsetsFilterStore.toggleProperty}
|
||||
/>
|
||||
<CheckboxFilter
|
||||
displayedLabel="Font category"
|
||||
properties={categories}
|
||||
onPropertyToggle={categoryFilterStore.toggleProperty}
|
||||
/>
|
||||
{#each filterManager.groups as group (group.id)}
|
||||
<CheckboxFilter
|
||||
displayedLabel={group.label}
|
||||
filter={group.instance}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user