src/widgets/AppSidebar/ui/AppSidebar.svelte

@@ -1,31 +1,12 @@
 <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 CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
-
-const { categories: providers } = $derived($providersFilterStore);
-const { categories: subsets } = $derived($subsetsFilterStore);
-const { categories } = $derived($categoryFilterStore);
+import Controls from './Controls.svelte';
+import Filters from './Filters.svelte';
 </script>
 
 <Sidebar.Root>
-    <Sidebar.Content>
-        <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}
-        />
+    <Sidebar.Content class="p-2">
+        <Filters />
+        <Controls />
     </Sidebar.Content>
 </Sidebar.Root>

src/widgets/AppSidebar/ui/Controls.svelte

@@ -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>

src/widgets/AppSidebar/ui/Filters.svelte

@@ -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}
+/>