Tag Folders: tag filters indicator and show settings

- Add an indicator if any tag filters are applied, so you can see if there are any filters even if the list is collapsed
- Save collapse state of the tag list
- Fix folders vanishing if tag filters are applied (now really)

public/css/tags.css

@@ -187,10 +187,8 @@
 
 .tag_as_folder.yes_folder:after {
     position: absolute;
-    top: -8px;
+    top: calc(var(--mainFontSize) * -0.5);
-    bottom: 0;
+    right: calc(var(--mainFontSize) * -0.5);
-    left: 0;
-    right: -24px;
     content: "\2714";
     font-size: calc(var(--mainFontSize) * 1);
     color: green;
@@ -205,10 +203,8 @@
 
 .tag_as_folder.no_folder:after {
     position: absolute;
-    top: -8px;
+    top: calc(var(--mainFontSize) * -0.5);
-    bottom: 0;
+    right: calc(var(--mainFontSize) * -0.5);
-    left: 0;
-    right: -24px;
     content: "\2715";
     font-size: calc(var(--mainFontSize) * 1);
     color: red;
@@ -220,3 +216,19 @@
         1px -1px 0px black;
     opacity: 1;
 }
+
+.tag.indicator:after {
+    position: absolute;
+    top: calc(var(--mainFontSize) * -0.5);
+    right: -2px;
+    content: "\25CF";
+    font-size: calc(var(--mainFontSize) * 1);
+    color: var(--SmartThemeBodyColor);
+    line-height: calc(var(--mainFontSize) * 1.3);
+    text-align: center;
+    text-shadow: 1px 1px 0px black,
+        -1px -1px 0px black,
+        -1px 1px 0px black,
+        1px -1px 0px black;
+    opacity: 1;
+}

public/scripts/filters.js

@@ -116,6 +116,7 @@ export class FilterHelper {
         }
 
         const getIsTagged = (entity) => {
+            const isTag = entity.type === 'tag';
             const tagFlags = selected.map(tagId => this.isElementTagged(entity, tagId));
             const trueFlags = tagFlags.filter(x => x);
             const isTagged = TAG_LOGIC_AND ? tagFlags.length === trueFlags.length : trueFlags.length > 0;
@@ -123,7 +124,9 @@ export class FilterHelper {
             const excludedTagFlags = excluded.map(tagId => this.isElementTagged(entity, tagId));
             const isExcluded = excludedTagFlags.includes(true);
 
-            if (isExcluded) {
+            if (isTag) {
+                return true;
+            } else if (isExcluded) {
                 return false;
             } else if (selected.length > 0 && !isTagged) {
                 return false;

public/scripts/power-user.js

@@ -234,6 +234,7 @@ let power_user = {
     encode_tags: false,
     servers: [],
     bogus_folders: false,
+    show_tag_filters: false,
     aux_field: 'character_version',
     restore_user_input: true,
     reduced_motion: false,

public/scripts/tags.js

@@ -370,6 +370,7 @@ function onTagFilterClick(listElement) {
     }
 
     runTagFilters(listElement);
+    updateTagFilterIndicator();
 }
 
 function runTagFilters(listElement) {
@@ -407,6 +408,21 @@ function printTagFilters(type = tag_filter_types.character) {
     for (const tagId of selectedTagIds) {
         $(`${FILTER_SELECTOR} .tag[id="${tagId}"]`).trigger('click');
     }
+
+    if (power_user.show_tag_filters) {
+        $('.rm_tag_controls .showTagList').addClass('selected');
+        $('.rm_tag_controls').find('.tag:not(.actionable)').show();
+    }
+
+    updateTagFilterIndicator();
+}
+
+function updateTagFilterIndicator() {
+    if ($('.rm_tag_controls').find('.tag:not(.actionable)').is('.selected, .excluded')) {
+        $('.rm_tag_controls .showTagList').addClass('indicator');
+    } else {
+        $('.rm_tag_controls .showTagList').removeClass('indicator');
+    }
 }
 
 function onTagRemoveClick(event) {
@@ -829,10 +845,15 @@ function onTagColorize2(evt) {
 }
 
 function onTagListHintClick() {
-    console.log($(this));
+    console.debug($(this));
     $(this).toggleClass('selected');
     $(this).siblings('.tag:not(.actionable)').toggle(100);
     $(this).siblings('.innerActionable').toggleClass('hidden');
+
+    power_user.show_tag_filters = $(this).hasClass('selected');
+    saveSettingsDebounced();
+
+    console.log('show_tag_filters', power_user.show_tag_filters);
 }
 
 jQuery(() => {