fix(createFilter): remove dirived from selectedProperties compute

src/shared/lib/helpers/createFilter/createFilter.svelte.ts

@@ -26,84 +26,52 @@ export interface FilterModel<TValue extends string> {
 
 /**
  * Create a filter store.
- * @param initialState - Initial state of the filter store
+ * @param initialState - Initial state of filter store
  */
-export function createFilter<TValue extends string>(
+export function createFilter<TValue extends string>(initialState: FilterModel<TValue>) {
-    initialState: FilterModel<TValue>,
+    // We map the initial properties into a reactive state array
-) {
+    const properties = $state(
-    let properties = $state(
         initialState.properties.map(p => ({
             ...p,
             selected: p.selected ?? false,
         })),
     );
 
-    const selectedProperties = $derived(properties.filter(p => p.selected));
-    const selectedCount = $derived(selectedProperties.length);
-
     return {
-        /**
-         * Get all properties.
-         */
         get properties() {
             return properties;
         },
-        /**
+
-         * Get selected properties.
-         */
         get selectedProperties() {
-            return selectedProperties;
+            return properties.filter(p => p.selected);
         },
-        /**
+
-         * Get selected count.
-         */
         get selectedCount() {
-            return selectedCount;
+            return this.selectedProperties.length;
         },
-        /**
+
-         * Toggle property selection.
+        // 3. Methods mutate the reactive state directly
-         */
+        toggleProperty(id: string) {
-        toggleProperty: (id: string) => {
+            const prop = properties.find(p => p.id === id);
-            properties = properties.map(p => ({
+            if (prop) prop.selected = !prop.selected;
-                ...p,
-                selected: p.id === id ? !p.selected : p.selected,
-            }));
         },
-        /**
+
-         * Select property.
-         */
         selectProperty(id: string) {
-            properties = properties.map(p => ({
+            const prop = properties.find(p => p.id === id);
-                ...p,
+            if (prop) prop.selected = true;
-                selected: p.id === id ? true : p.selected,
-            }));
         },
-        /**
+
-         * Deselect property.
-         */
         deselectProperty(id: string) {
-            properties = properties.map(p => ({
+            const prop = properties.find(p => p.id === id);
-                ...p,
+            if (prop) prop.selected = false;
-                selected: p.id === id ? false : p.selected,
-            }));
         },
-        /**
+
-         * Select all properties.
+        selectAll() {
-         */
+            properties.forEach(p => p.selected = true);
-        selectAll: () => {
-            properties = properties.map(p => ({
-                ...p,
-                selected: true,
-            }));
         },
-        /**
+
-         * Deselect all properties.
+        deselectAll() {
-         */
+            properties.forEach(p => p.selected = false);
-        deselectAll: () => {
-            properties = properties.map(p => ({
-                ...p,
-                selected: false,
-            }));
         },
     };
 }