From 7bc0a690cbf2133e6823f9cd5a6a23e5cc19af49 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 2 Jan 2026 11:15:02 +0300
Subject: [PATCH] feat(CategoryFilter): create CategoryFilter component

---
 src/features/CategoryFilter/model/state.ts    | 48 +++++++++++++------
 .../store/categoryFilterStore.ts              | 37 ++++----------
 .../CategoryFilter/ui/CategoryFilter.svelte   | 20 ++++++++
 3 files changed, 63 insertions(+), 42 deletions(-)
 create mode 100644 src/features/CategoryFilter/ui/CategoryFilter.svelte

diff --git a/src/features/CategoryFilter/model/state.ts b/src/features/CategoryFilter/model/state.ts
index 71d4cb5..9935247 100644
--- a/src/features/CategoryFilter/model/state.ts
+++ b/src/features/CategoryFilter/model/state.ts
@@ -1,17 +1,37 @@
+import type { FilterModel } from '$shared/store/createFilterStore';
+
 /**
  * Model of state for CategoryFilter
  */
-export interface CategoryFilterStateModel {
-    /**
-     * Search query
-     */
-    searchQuery?: string;
-    /**
-     * Categories
-     */
-    categories: string[];
-    /**
-     * Selected categories
-     */
-    selectedCategories: string[];
-}
+export type CategoryFilterModel = FilterModel;
+
+export const FONT_CATEGORIES = [
+    {
+        id: 'serif',
+        name: 'Serif',
+    },
+    {
+        id: 'sans-serif',
+        name: 'Sans-serif',
+    },
+    {
+        id: 'display',
+        name: 'Display',
+    },
+    {
+        id: 'handwriting',
+        name: 'Handwriting',
+    },
+    {
+        id: 'monospace',
+        name: 'Monospace',
+    },
+    {
+        id: 'script',
+        name: 'Script',
+    },
+    {
+        id: 'slab',
+        name: 'Slab',
+    },
+] as const;
diff --git a/src/features/CategoryFilter/store/categoryFilterStore.ts b/src/features/CategoryFilter/store/categoryFilterStore.ts
index b1cd804..287ce6e 100644
--- a/src/features/CategoryFilter/store/categoryFilterStore.ts
+++ b/src/features/CategoryFilter/store/categoryFilterStore.ts
@@ -1,35 +1,16 @@
-import { writable } from 'svelte/store';
-import type { CategoryFilterStateModel } from '../model/state';
+import { FONT_CATEGORIES } from '$entities/Font/model/font';
+import { createFilterStore } from '$shared/store/createFilterStore';
+import type { CategoryFilterModel } from '../model/state';
 
 /**
  * Initial state for CategoryFilter
  */
-export const initialState: CategoryFilterStateModel = {
+export const initialState: CategoryFilterModel = {
     searchQuery: '',
-    categories: [],
-    selectedCategories: [],
+    categories: FONT_CATEGORIES,
 };
 
-const { subscribe, set, update } = writable<CategoryFilterStateModel>(initialState);
-
-export const categoryFilterStore = {
-    subscribe,
-    set,
-    update,
-
-    /**
-     * Update the search query filter.
-     *
-     * @param searchQuery - Search text (undefined to clear)
-     *
-     * Learning Note:
-     * We use update() to modify the store based on current state.
-     * This is like a Redux reducer but without the boilerplate!
-     */
-    setSearchQuery: (searchQuery: string | undefined) => {
-        update(state => ({
-            ...state,
-            searchQuery: searchQuery || undefined,
-        }));
-    },
-};
+/**
+ * CategoryFilter store
+ */
+export const categoryFilterStore = createFilterStore(initialState);
diff --git a/src/features/CategoryFilter/ui/CategoryFilter.svelte b/src/features/CategoryFilter/ui/CategoryFilter.svelte
new file mode 100644
index 0000000..2edd948
--- /dev/null
+++ b/src/features/CategoryFilter/ui/CategoryFilter.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
+import { categoryFilterStore } from '../store/categoryFilterStore';
+
+const { categories } = $derived($categoryFilterStore);
+
+function didCategoryToggle(categoryId: string) {
+    if (categories?.find(category => category.id === categoryId)) {
+        categoryFilterStore.deselectCategory(categoryId);
+    } else {
+        categoryFilterStore.selectCategory(categoryId);
+    }
+}
+</script>
+
+<CheckboxFilter
+    filterName="Font category"
+    categories={categories}
+    onCategoryToggle={didCategoryToggle}
+/>