glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(AppSidebar): move filters and controls to separate components

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-02 20:39:43 +03:00
parent 109c69c1b9
commit 0742eb8c3d
3 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/widgets/AppSidebar/ui/AppSidebar.svelte
View File

@@ -1,31 +1,12 @@
<script lang="ts"> <script lang="ts">
import { categoryFilterStore } from '$features/CategoryFilter';
import { providersFilterStore } from '$features/ProvidersFilter';
import { subsetsFilterStore } from '$features/SubsetsFilter';
import * as Sidebar from '$shared/shadcn/ui/sidebar/index'; import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte'; import Controls from './Controls.svelte';
import Filters from './Filters.svelte';
const { categories: providers } = $derived($providersFilterStore);
const { categories: subsets } = $derived($subsetsFilterStore);
const { categories } = $derived($categoryFilterStore);
</script> </script>
<Sidebar.Root> <Sidebar.Root>
<Sidebar.Content> <Sidebar.Content class="p-2">
<CheckboxFilter <Filters />
filterName="Font provider" <Controls />
categories={providers}
onCategoryToggle={providersFilterStore.toggleCategory}
/>
<CheckboxFilter
filterName="Font subset"
categories={subsets}
onCategoryToggle={subsetsFilterStore.toggleCategory}
/>
<CheckboxFilter
filterName="Font category"
categories={categories}
onCategoryToggle={categoryFilterStore.toggleCategory}
/>
</Sidebar.Content> </Sidebar.Content>
</Sidebar.Root> </Sidebar.Root>

12
src/widgets/AppSidebar/ui/Controls.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
import { Button } from '$shared/shadcn/ui/button';
</script>
<div class="flex flex-row gap-2">
<Button variant="outline" class="flex-1 cursor-pointer">
Reset
</Button>
<Button class="flex-1 cursor-pointer">
Apply
</Button>
</div>

26
src/widgets/AppSidebar/ui/Filters.svelte Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts">
import { categoryFilterStore } from '$features/CategoryFilter';
import { providersFilterStore } from '$features/ProvidersFilter';
import { subsetsFilterStore } from '$features/SubsetsFilter';
import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
const { categories: providers } = $derived($providersFilterStore);
const { categories: subsets } = $derived($subsetsFilterStore);
const { categories } = $derived($categoryFilterStore);
</script>
<CheckboxFilter
filterName="Font provider"
categories={providers}
onCategoryToggle={providersFilterStore.toggleCategory}
/>
<CheckboxFilter
filterName="Font subset"
categories={subsets}
onCategoryToggle={subsetsFilterStore.toggleCategory}
/>
<CheckboxFilter
filterName="Font category"
categories={categories}
onCategoryToggle={categoryFilterStore.toggleCategory}
/>