From bfad0708e2c8062664e852f6f18223fd943ad5f5 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 25 Oct 2025 07:01:27 +0800
Subject: [PATCH] fix(web): make memoFilterStore reactive by marking fields as
 observable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes the root cause of non-reactive filtering. The MemoFilterState class
was not marking its fields as observable in MobX, so changes to the filters
array were not being tracked.

Added makeObservable configuration to mark:
- filters and shortcut as observable
- addFilter, removeFilter, removeFiltersByFactor, clearAllFilters, setShortcut as actions

This ensures that when tags are clicked and filters are added/removed,
MobX observer components will re-render and fetch new data.

Related to #5189

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/store/memoFilter.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/src/store/memoFilter.ts b/web/src/store/memoFilter.ts
index 16325763b..567779388 100644
--- a/web/src/store/memoFilter.ts
+++ b/web/src/store/memoFilter.ts
@@ -7,6 +7,7 @@
  * Filters are URL-driven and shareable - copying the URL preserves the filter state.
  */
 import { uniqBy } from "lodash-es";
+import { makeObservable, observable, action } from "mobx";
 import { StandardState } from "./base-store";
 
 /**
@@ -90,6 +91,15 @@ class MemoFilterState extends StandardState {
    */
   constructor() {
     super();
+    makeObservable(this, {
+      filters: observable,
+      shortcut: observable,
+      addFilter: action,
+      removeFilter: action,
+      removeFiltersByFactor: action,
+      clearAllFilters: action,
+      setShortcut: action,
+    });
     this.initFromURL();
   }