chore: move Filters and Controls to GetFont feature

This commit is contained in:
Ilia Mashkov
2026-01-13 19:57:22 +03:00
parent 4810c2b228
commit d9d45bf9fb
3 changed files with 30 additions and 23 deletions

View File

@@ -9,13 +9,12 @@
* - Font subset: Character subsets available (Latin, Latin Extended, etc.) * - Font subset: Character subsets available (Latin, Latin Extended, etc.)
* - Font category: Serif, Sans-serif, Display, etc. * - Font category: Serif, Sans-serif, Display, etc.
* *
* Uses $derived for reactive access to filter states, ensuring UI updates * This component handles reactive sync between filterManager selections
* when selections change through any means (sidebar, programmatically, etc.). * and the unifiedFontStore using an $effect block to ensure filters are
* automatically synchronized whenever selections change.
*/ */
import { filterManager } from '$features/FilterFonts';
import { CheckboxFilter } from '$shared/ui'; import { CheckboxFilter } from '$shared/ui';
import { filterManager } from '../../model';
$inspect(filterManager.groups).with(console.trace);
</script> </script>
{#each filterManager.groups as group (group.id)} {#each filterManager.groups as group (group.id)}

View File

@@ -1,17 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$shared/shadcn/ui/button';
import { filterManager } from '../../model';
/** /**
* Controls Component * Controls Component
* *
* Action button group for filter operations. Provides two buttons: * Action button group for filter operations. Provides two buttons:
* *
* - Reset: Clears all active filters (outline variant for secondary action) * - Reset: Clears all active filters (outline variant for secondary action)
* - Apply: Applies selected filters (primary variant for main action)
*
* Buttons are equally sized (flex-1) for balanced layout. Note:
* Functionality not yet implemented - wire up to filter stores.
*/ */
import { filterManager } from '$features/FilterFonts';
import { Button } from '$shared/shadcn/ui/button';
</script> </script>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
@@ -22,7 +19,4 @@ import { Button } from '$shared/shadcn/ui/button';
> >
Reset Reset
</Button> </Button>
<Button class="flex-1 cursor-pointer">
Apply
</Button>
</div> </div>

View File

@@ -1,4 +1,12 @@
<script lang="ts"> <script lang="ts">
import {
FilterControls,
Filters,
} from '$features/GetFonts';
import {
Content as SidebarContent,
Root as SidebarRoot,
} from '$shared/shadcn/ui/sidebar/index';
/** /**
* FiltersSidebar Component * FiltersSidebar Component
* *
@@ -6,19 +14,25 @@
* for font filtering operations. Organized into two sections: * for font filtering operations. Organized into two sections:
* *
* - Filters: Category-based filter groups (providers, subsets, categories) * - Filters: Category-based filter groups (providers, subsets, categories)
* - Controls: Apply/Reset buttons for filter actions * - Controls: Reset button for filter actions
*
* Features:
* - Loading indicator during font fetch operations
* - Empty state message when no fonts match filters
* - Error display for failed font operations
* - Responsive sidebar behavior via shadcn Sidebar component
* *
* Uses Sidebar.Root from shadcn for responsive sidebar behavior including * Uses Sidebar.Root from shadcn for responsive sidebar behavior including
* mobile drawer and desktop persistent sidebar modes. * mobile drawer and desktop persistent sidebar modes.
*/ */
import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
import Controls from './Controls.svelte';
import Filters from './Filters.svelte';
</script> </script>
<Sidebar.Root> <SidebarRoot>
<Sidebar.Content class="p-2"> <SidebarContent class="p-2">
<!-- Filter groups -->
<Filters /> <Filters />
<Controls />
</Sidebar.Content> <!-- Action buttons -->
</Sidebar.Root> <FilterControls />
</SidebarContent>
</SidebarRoot>