src/features/CategoryFilter/model/state.ts

@@ -0,0 +1,17 @@
+/**
+ * Model of state for CategoryFilter
+ */
+export interface CategoryFilterStateModel {
+    /**
+     * Search query
+     */
+    searchQuery?: string;
+    /**
+     * Categories
+     */
+    categories: string[];
+    /**
+     * Selected categories
+     */
+    selectedCategories: string[];
+}

src/features/CategoryFilter/store/categoryFilterStore.ts

@@ -0,0 +1,35 @@
+import { writable } from 'svelte/store';
+import type { CategoryFilterStateModel } from '../model/state';
+
+/**
+ * Initial state for CategoryFilter
+ */
+export const initialState: CategoryFilterStateModel = {
+    searchQuery: '',
+    categories: [],
+    selectedCategories: [],
+};
+
+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,
+        }));
+    },
+};