feat(filters): support multiple values

src/features/GetFonts/lib/mapper/mapManagerToParams.ts

@@ -4,8 +4,7 @@ import type { FilterManager } from '../filterManager/filterManager.svelte';
 /**
  * Maps filter manager to proxy API parameters.
  *
- * Transforms UI filter state into proxy API query parameters.
- * Handles conversion from filter groups to API-specific parameters.
+ * Updated to support multiple filter values (arrays)
  *
  * @param manager - Filter manager instance with reactive state
  * @returns - Partial proxy API parameters ready for API call
@@ -15,13 +14,18 @@ import type { FilterManager } from '../filterManager/filterManager.svelte';
  * // Example filter manager state:
  * // {
  * //   queryValue: 'roboto',
- * //   providers: ['google'],
- * //   categories: ['sans-serif'],
+ * //   providers: ['google', 'fontshare'],
+ * //   categories: ['sans-serif', 'serif'],
  * //   subsets: ['latin']
  * // }
  *
  * const params = mapManagerToParams(manager);
- * // Returns: { provider: 'google', category: 'sans-serif', subset: 'latin', q: 'roboto' }
+ * // Returns: {
+ * //   providers: ['google', 'fontshare'],
+ * //   categories: ['sans-serif', 'serif'],
+ * //   subsets: ['latin'],
+ * //   q: 'roboto'
+ * // }
  * ```
  */
 export function mapManagerToParams(manager: FilterManager): Partial<ProxyFontsParams> {
@@ -33,22 +37,17 @@ export function mapManagerToParams(manager: FilterManager): Partial<ProxyFontsPa
         // Search query (debounced)
         q: manager.debouncedQueryValue || undefined,
 
-        // Provider filter (single value - proxy API doesn't support array)
-        // Use first provider if multiple selected, or undefined if none/all selected
-        provider: providers && providers.length === 1
-            ? (providers[0] as 'google' | 'fontshare')
+        // NEW: Support arrays - send all selected values
+        providers: providers && providers.length > 0
+            ? providers as string[]
             : undefined,
 
-        // Category filter (single value - proxy API doesn't support array)
-        // Use first category if multiple selected, or undefined if none/all selected
-        category: categories && categories.length === 1
-            ? (categories[0] as ProxyFontsParams['category'])
+        categories: categories && categories.length > 0
+            ? categories as string[]
             : undefined,
 
-        // Subset filter (single value - proxy API doesn't support array)
-        // Use first subset if multiple selected, or undefined if none/all selected
-        subset: subsets && subsets.length === 1
-            ? (subsets[0] as ProxyFontsParams['subset'])
+        subsets: subsets && subsets.length > 0
+            ? subsets as string[]
             : undefined,
     };
 }

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

@@ -4,26 +4,58 @@ import {
     FONT_PROVIDERS,
     FONT_SUBSETS,
 } from '../const/const';
+import { filtersStore } from './filters.svelte';
 
-const initialConfig = {
-    queryValue: '',
-    groups: [
-        {
-            id: 'providers',
-            label: 'Font provider',
-            properties: FONT_PROVIDERS,
-        },
-        {
-            id: 'subsets',
-            label: 'Font subset',
-            properties: FONT_SUBSETS,
-        },
-        {
-            id: 'categories',
-            label: 'Font category',
-            properties: FONT_CATEGORIES,
-        },
-    ],
-};
+/**
+ * Creates initial filter config
+ *
+ * Uses dynamic filters from backend if available,
+ * otherwise falls back to hard-coded constants
+ */
+function createInitialConfig() {
+    const dynamicFilters = filtersStore.filters;
+
+    // If filters are loaded, use them
+    if (dynamicFilters.length > 0) {
+        return {
+            queryValue: '',
+            groups: dynamicFilters.map(filter => ({
+                id: filter.id,
+                label: filter.name,
+                properties: filter.options.map(opt => ({
+                    id: opt.id,
+                    name: opt.name,
+                    value: opt.value,
+                    count: opt.count,
+                    selected: false,
+                })),
+            })),
+        };
+    }
+
+    // Fallback to hard-coded constants (backward compatibility)
+    return {
+        queryValue: '',
+        groups: [
+            {
+                id: 'providers',
+                label: 'Font provider',
+                properties: FONT_PROVIDERS,
+            },
+            {
+                id: 'subsets',
+                label: 'Font subset',
+                properties: FONT_SUBSETS,
+            },
+            {
+                id: 'categories',
+                label: 'Font category',
+                properties: FONT_CATEGORIES,
+            },
+        ],
+    };
+}
+
+const initialConfig = createInitialConfig();
 
 export const filterManager = createFilterManager(initialConfig);