refactor(createFilterStore): move from store pattern to svelte 5 runes usage

src/features/FilterFonts/index.ts

@@ -1,5 +1,11 @@
-export { categoryFilterStore } from './model/stores/categoryFilterStore';
-export { providersFilterStore } from './model/stores/providersFilterStore';
-export { subsetsFilterStore } from './model/stores/subsetsFilterStore';
-
-export { clearAllFilters } from './model/services/clearAllFilters/clearAllFilters';
+export {
+    createFilterManager,
+    type FilterManager,
+} from './lib/filterManager/filterManager.svelte';
+export {
+    FONT_CATEGORIES,
+    FONT_PROVIDERS,
+    FONT_SUBSETS,
+} from './model/const/const';
+export type { FilterGroupConfig } from './model/const/types/common';
+export { filterManager } from './model/state/manager.svelte';

src/features/FilterFonts/lib/filterManager/filterManager.svelte.ts

@@ -0,0 +1,59 @@
+import {
+    type Filter,
+    createFilter,
+} from '$shared/lib/utils';
+import type { FilterGroupConfig } from '../../model/const/types/common';
+
+/**
+ * Create a filter manager instance.
+ */
+export function createFilterManager(configs: FilterGroupConfig[]) {
+    // Create filter instances upfront
+    const groups = $state(
+        configs.map(config => ({
+            id: config.id,
+            label: config.label,
+            instance: createFilter({ properties: config.properties }),
+        })),
+    );
+
+    // Derived: any selection across all groups
+    const hasAnySelection = $derived(
+        groups.some(group => group.instance.selectedProperties.length > 0),
+    );
+
+    // Derived: total count across all groups
+    const totalSelectedCount = $derived(
+        groups.reduce(
+            (acc, group) => acc + group.instance.selectedProperties.length,
+            0,
+        ),
+    );
+
+    return {
+        // Direct array reference (reactive)
+        get groups() {
+            return groups;
+        },
+
+        // Derived values
+        get hasAnySelection() {
+            return hasAnySelection;
+        },
+        get totalSelectedCount() {
+            return totalSelectedCount;
+        },
+
+        // Global action
+        deselectAllGlobal: () => {
+            groups.forEach(group => group.instance.deselectAll());
+        },
+
+        // Helper to get group by id
+        getGroup: (id: string) => {
+            return groups.find(g => g.id === id);
+        },
+    };
+}
+
+export type FilterManager = ReturnType<typeof createFilterManager>;

src/features/FilterFonts/model/const/const.ts

@@ -1,4 +1,4 @@
-import type { Property } from '$shared/lib/store/createFilterStore/createFilterStore';
+import type { Property } from '$shared/lib/store';
 
 export const FONT_CATEGORIES: Property[] = [
     {

src/features/FilterFonts/model/const/types/common.ts

@@ -0,0 +1,7 @@
+import type { Property } from '$shared/lib/store';
+
+export interface FilterGroupConfig {
+    id: string;
+    label: string;
+    properties: Property[];
+}

src/features/FilterFonts/model/services/clearAllFilters/clearAllFilters.ts

@@ -1,9 +0,0 @@
-import { categoryFilterStore } from '../../stores/categoryFilterStore';
-import { providersFilterStore } from '../../stores/providersFilterStore';
-import { subsetsFilterStore } from '../../stores/subsetsFilterStore';
-
-export function clearAllFilters() {
-    categoryFilterStore.deselectAllProperties();
-    providersFilterStore.deselectAllProperties();
-    subsetsFilterStore.deselectAllProperties();
-}

src/features/FilterFonts/model/state/manager.svelte.ts

@@ -0,0 +1,27 @@
+import { createFilterManager } from '../../lib/filterManager/filterManager.svelte';
+import {
+    FONT_CATEGORIES,
+    FONT_PROVIDERS,
+    FONT_SUBSETS,
+} from '../const/const';
+import type { FilterGroupConfig } from '../const/types/common';
+
+const filtersData: FilterGroupConfig[] = [
+    {
+        id: 'providers',
+        label: 'Font provider',
+        properties: FONT_PROVIDERS,
+    },
+    {
+        id: 'subsets',
+        label: 'Font subset',
+        properties: FONT_SUBSETS,
+    },
+    {
+        id: 'categories',
+        label: 'Font category',
+        properties: FONT_CATEGORIES,
+    },
+];
+
+export const filterManager = createFilterManager(filtersData);

src/features/FilterFonts/model/stores/categoryFilterStore.ts

@@ -1,18 +0,0 @@
-import {
-    type FilterModel,
-    createFilterStore,
-} from '$shared/lib/store/createFilterStore/createFilterStore';
-import { FONT_CATEGORIES } from '../const/const';
-
-/**
- * Initial state for CategoryFilter
- */
-export const initialState: FilterModel = {
-    searchQuery: '',
-    properties: FONT_CATEGORIES,
-};
-
-/**
- * CategoryFilter store
- */
-export const categoryFilterStore = createFilterStore(initialState);

src/features/FilterFonts/model/stores/providersFilterStore.ts

@@ -1,18 +0,0 @@
-import {
-    type FilterModel,
-    createFilterStore,
-} from '$shared/lib/store/createFilterStore/createFilterStore';
-import { FONT_PROVIDERS } from '../const/const';
-
-/**
- * Initial state for ProvidersFilter
- */
-export const initialState: FilterModel = {
-    searchQuery: '',
-    properties: FONT_PROVIDERS,
-};
-
-/**
- * ProvidersFilter store
- */
-export const providersFilterStore = createFilterStore(initialState);

src/features/FilterFonts/model/stores/subsetsFilterStore.ts

@@ -1,18 +0,0 @@
-import {
-    type FilterModel,
-    createFilterStore,
-} from '$shared/lib/store/createFilterStore/createFilterStore';
-import { FONT_SUBSETS } from '../const/const';
-
-/**
- * Initial state for SubsetsFilter
- */
-const initialState: FilterModel = {
-    searchQuery: '',
-    properties: FONT_SUBSETS,
-};
-
-/**
- * SubsetsFilter store
- */
-export const subsetsFilterStore = createFilterStore(initialState);