From 0742eb8c3d93609b997bb0d9d12ef0b951eeb11f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 2 Jan 2026 20:39:43 +0300
Subject: [PATCH] feat(AppSidebar): move filters and controls to separate
 components

---
 src/widgets/AppSidebar/ui/AppSidebar.svelte | 29 ++++-----------------
 src/widgets/AppSidebar/ui/Controls.svelte   | 12 +++++++++
 src/widgets/AppSidebar/ui/Filters.svelte    | 26 ++++++++++++++++++
 3 files changed, 43 insertions(+), 24 deletions(-)
 create mode 100644 src/widgets/AppSidebar/ui/Controls.svelte
 create mode 100644 src/widgets/AppSidebar/ui/Filters.svelte

diff --git a/src/widgets/AppSidebar/ui/AppSidebar.svelte b/src/widgets/AppSidebar/ui/AppSidebar.svelte
index 20b3874..3762beb 100644
--- a/src/widgets/AppSidebar/ui/AppSidebar.svelte
+++ b/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>
diff --git a/src/widgets/AppSidebar/ui/Controls.svelte b/src/widgets/AppSidebar/ui/Controls.svelte
new file mode 100644
index 0000000..3fa3d6d
--- /dev/null
+++ b/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>
diff --git a/src/widgets/AppSidebar/ui/Filters.svelte b/src/widgets/AppSidebar/ui/Filters.svelte
new file mode 100644
index 0000000..30001b1
--- /dev/null
+++ b/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}
+/>