Persist actionable tag states on reload (#4368) * Persist actionable tag states on reload Closes #3666 * Remove unneeded simulated clicks

659930d5ba3dfa407f45fd0485a4f9187b74b97c

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: 979fe60ebca7ff529f8b5b0a6e2649ab72b7c9f0

public/css/rm-groups.css+1 -0 Viewed

@@ -6,6 +6,7 @@
6	align-items: center;	6	align-items: center;
7	}	7	}
8		8
		9	#rm_group_chats_block .tag.filterByFolder,
9	#rm_group_chats_block .tag.filterByGroups {	10	#rm_group_chats_block .tag.filterByGroups {
10	display: none;	11	display: none;
11	}	12	}

public/scripts/RossAscends-mods.js+24 -28 Viewed

  * The character or group is selected (clicked) if it is found.
  */
 async function RA_autoloadchat() {
-    if (document.querySelector('#rm_print_characters_block .character_select') !== null) {
+    // active character is the name, we should look it up in the character list and get the id
-        // active character is the name, we should look it up in the character list and get the id
+    if (active_character !== null && active_character !== undefined) {
-        if (active_character !== null && active_character !== undefined) {
+        const active_character_id = characters.findIndex(x => getTagKeyForEntity(x) === active_character);
-            const active_character_id = characters.findIndex(x => getTagKeyForEntity(x) === active_character);
+        if (active_character_id !== -1) {
-            if (active_character_id !== -1) {
+            await selectCharacterById(active_character_id);
-                await selectCharacterById(active_character_id);
+            // Do a little tomfoolery to spoof the tag selector
-                // Do a little tomfoolery to spoof the tag selector
+            const selectedCharElement = $(`#rm_print_characters_block .character_select[chid="${active_character_id}"]`);
-                const selectedCharElement = $(`#rm_print_characters_block .character_select[chid="${active_character_id}"]`);
+            applyTagsOnCharacterSelect.call(selectedCharElement);
-                applyTagsOnCharacterSelect.call(selectedCharElement);
+        } else {
-            } else {
+            setActiveCharacter(null);
-                setActiveCharacter(null);
+            saveSettingsDebounced();
-                saveSettingsDebounced();
+            console.warn(`Currently active character with ID ${active_character} not found. Resetting to no active character.`);
-                console.warn(`Currently active character with ID ${active_character} not found. Resetting to no active character.`);
-            }
+        }
+    }
-        if (active_group !== null && active_group !== undefined) {
+    if (active_group !== null && active_group !== undefined) {
-            if (active_character) {
+        if (active_character) {
-                console.warn('Active character and active group are both set. Only active character will be loaded. Resetting active group.');
+            console.warn('Active character and active group are both set. Only active character will be loaded. Resetting active group.');
+            setActiveGroup(null);
+            saveSettingsDebounced();
+        } else {
+            const result = await openGroupById(String(active_group));
+            if (!result) {
                 setActiveGroup(null);
                 saveSettingsDebounced();
-            } else {
+                console.warn(`Currently active group with ID ${active_group} not found. Resetting to no active group.`);
-                const result = await openGroupById(String(active_group));
-                if (!result) {
-                    setActiveGroup(null);
-                    saveSettingsDebounced();
-                    console.warn(`Currently active group with ID ${active_group} not found. Resetting to no active group.`);
-                }
+            }
+        }
+    }
-        // if the character list hadn't been loaded yet, try again.
-    } else { setTimeout(RA_autoloadchat, 100); }
+}
 export async function favsToHotswap() {

public/scripts/tags.js+45 -3 Viewed

 import { commonEnumProviders } from './slash-commands/SlashCommandCommonEnumsProvider.js';
 import { renderTemplateAsync } from './templates.js';
 import { t, translate } from './i18n.js';
+import { accountStorage } from './util/AccountStorage.js';
 export {
     TAG_FOLDER_TYPES,

     return $(listSelector).is(GROUP_FILTER_SELECTOR) ? groupCandidatesFilter : entitiesFilter;
+}
+const ACTIONABLE_FILTER_STORAGE_KEYS = Object.freeze({
+    GROUP: 'TagFilterState_GROUP',
+    FAV: 'TagFilterState_FAV',
+    FOLDER: 'TagFilterState_FOLDER',
+});
 /** @enum {number} */
 export const tag_filter_type = {
     character: 0,

 /**
  * Applies the favorite filter to the character list.
- * @param {FilterHelper} filterHelper Instance of FilterHelper class.
+ * @param {FilterHelper} _filterHelper Instance of FilterHelper class. Unused since it needs to be applied to both filters.
  */
-function filterByFav(filterHelper) {
+function filterByFav(_filterHelper) {
     const state = toggleTagThreeState($(this));
     ACTIONABLE_TAGS.FAV.filter_state = state;
-    filterHelper.setFilterData(FILTER_TYPES.FAV, state);
+    accountStorage.setItem(ACTIONABLE_FILTER_STORAGE_KEYS.FAV, state);
+    entitiesFilter.setFilterData(FILTER_TYPES.FAV, state);
+    groupCandidatesFilter.setFilterData(FILTER_TYPES.FAV, state);
+}
 /**

 function filterByGroups(filterHelper) {
     const state = toggleTagThreeState($(this));
     ACTIONABLE_TAGS.GROUP.filter_state = state;
+    accountStorage.setItem(ACTIONABLE_FILTER_STORAGE_KEYS.GROUP, state);
     filterHelper.setFilterData(FILTER_TYPES.GROUP, state);
+}

     const state = toggleTagThreeState($(this));
     ACTIONABLE_TAGS.FOLDER.filter_state = state;
+    accountStorage.setItem(ACTIONABLE_FILTER_STORAGE_KEYS.FOLDER, state);
     filterHelper.setFilterData(FILTER_TYPES.FOLDER, state);
+}

+    }
+}
+function restoreSavedTagFilters() {
+    try {
+        const validStates = new Set(Object.keys(FILTER_STATES));
+        const readState = (/** @type {string} */ storageKey) => {
+            const v = accountStorage.getItem(storageKey);
+            return v && validStates.has(v) ? v : null;
+        };
+        const favState = readState(ACTIONABLE_FILTER_STORAGE_KEYS.FAV);
+        const groupState = readState(ACTIONABLE_FILTER_STORAGE_KEYS.GROUP);
+        const folderState = readState(ACTIONABLE_FILTER_STORAGE_KEYS.FOLDER);
+        if (favState) {
+            ACTIONABLE_TAGS.FAV.filter_state = favState;
+            entitiesFilter.setFilterData(FILTER_TYPES.FAV, favState, true);
+            groupCandidatesFilter.setFilterData(FILTER_TYPES.FAV, favState, true);
+        }
+        if (groupState) {
+            ACTIONABLE_TAGS.GROUP.filter_state = groupState;
+            entitiesFilter.setFilterData(FILTER_TYPES.GROUP, groupState, true);
+        }
+        if (folderState) {
+            ACTIONABLE_TAGS.FOLDER.filter_state = folderState;
+            entitiesFilter.setFilterData(FILTER_TYPES.FOLDER, folderState, true);
+        }
+    } catch (e) {
+        console.warn('Failed to restore actionable filter states from account storage', e);
+    }
+}
 export function initTags() {
     createTagInput('#tagInput', '#tagList', { tagOptions: { removable: true } });
     createTagInput('#groupTagInput', '#groupTagList', { tagOptions: { removable: true } });

@@ -2281,4 +2322,5 @@ export function initTags() {
2281	}	2322	}
2282		2323
2283	registerTagsSlashCommands();	2324	registerTagsSlashCommands();
		2325	restoreSavedTagFilters();
2284	}	2326	}