feat: remembers group collapse state

for https://github.com/haishanh/yacd/issues/480

2 files changed, 25 insertions, 3 deletions

diff --git a/src/store/app.js b/src/store/app.js
index 465a564..ae8e8a2 100644
--- a/src/store/app.js
+++ b/src/store/app.js
@@ -1,4 +1,5 @@
 import { loadState, saveState, clearState } from '../misc/storage';
+import { debounce } from '../misc/utils';
 
 import { fetchConfigs } from './configs';
 import { closeModal } from './modals';
@@ -7,6 +8,9 @@ export const getClashAPIConfig = s => s.app.clashAPIConfig;
 export const getTheme = s => s.app.theme;
 export const getSelectedChartStyleIndex = s => s.app.selectedChartStyleIndex;
 export const getLatencyTestUrl = s => s.app.latencyTestUrl;
+export const getCollapsibleIsOpen = s => s.app.collapsibleIsOpen;
+
+const saveStateDebounced = debounce(saveState, 600);
 
 export function updateClashAPIConfig({ hostname: iHostname, port, secret }) {
   return async (dispatch, getState) => {
@@ -76,6 +80,16 @@ export function updateAppConfig(name, value) {
   };
 }
 
+export function updateCollapsibleIsOpen(prefix, name, v) {
+  return (dispatch, getState) => {
+    dispatch('updateCollapsibleIsOpen', s => {
+      s.app.collapsibleIsOpen[`${prefix}:${name}`] = v;
+    });
+    // side effect
+    saveStateDebounced(getState().app);
+  };
+}
+
 // type Theme = 'light' | 'dark';
 const defaultState = {
   clashAPIConfig: {
@@ -85,7 +99,10 @@ const defaultState = {
   },
   latencyTestUrl: 'http://www.gstatic.com/generate_204',
   selectedChartStyleIndex: 0,
-  theme: 'dark'
+  theme: 'dark',
+
+  // type { [string]: boolean }
+  collapsibleIsOpen: {}
 };
 
 function parseConfigQueryString() {
diff --git a/src/store/index.js b/src/store/index.js
index 1fe8459..78ddca3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,8 @@
 import {
   initialState as app,
   selectChartStyleIndex,
-  updateAppConfig
+  updateAppConfig,
+  updateCollapsibleIsOpen
 } from './app';
 import {
   initialState as proxies,
@@ -25,5 +26,9 @@ export const actions = {
   selectChartStyleIndex,
   updateAppConfig,
   // proxies
-  toggleUnavailableProxiesFilter
+  toggleUnavailableProxiesFilter,
+
+  app: {
+    updateCollapsibleIsOpen
+  }
 };