Gray out bogus folders if they don't drill down

- Implements and resolves #2404
- Common CSS class for entities in char list
- entity flag to lower opacity for entities that aren't really useful for navigation

public/index.html

@@ -5465,7 +5465,7 @@
         </div>
     </div>
     <div id="character_template" class="template_element">
-        <div class="character_select flex-container wide100p alignitemsflexstart" chid="" id="">
+        <div class="character_select entity_block flex-container wide100p alignitemsflexstart" chid="" id="">
             <div class="avatar" title="">
                 <img src="">
             </div>
@@ -5766,7 +5766,7 @@
         </div>
     </div>
     <div id="group_list_template" class="template_element">
-        <div class="group_select flex-container wide100p alignitemsflexstart">
+        <div class="group_select entity_block flex-container wide100p alignitemsflexstart">
             <div class="avatar">
                 <img src="">
             </div>
@@ -5784,7 +5784,7 @@
         </div>
     </div>
     <div id="bogus_folder_template" class="template_element">
-        <div class="bogus_folder_select flex-container wide100p alignitemsflexstart">
+        <div class="bogus_folder_select entity_block flex-container wide100p alignitemsflexstart">
             <div class="avatar flex alignitemscenter textAlignCenter">
                 <i class="bogus_folder_icon fa-solid fa-xl"></i>
             </div>

public/script.js

@@ -1368,7 +1368,7 @@ export async function printCharacters(fullRefresh = false) {
         nextText: '>',
         formatNavigator: PAGINATION_TEMPLATE,
         showNavigator: true,
-        callback: function (data) {
+        callback: function (/** @type {Entity[]} */ data) {
             $(listId).empty();
             if (power_user.bogus_folders && isBogusFolderOpen()) {
                 $(listId).append(getBackBlock());
@@ -1388,7 +1388,7 @@ export async function printCharacters(fullRefresh = false) {
                         displayCount++;
                         break;
                     case 'tag':
-                        $(listId).append(getTagBlock(i.item, i.entities, i.hidden));
+                        $(listId).append(getTagBlock(i.item, i.entities, i.hidden, i.isUseless));
                         break;
                 }
             }
@@ -1442,8 +1442,9 @@ function verifyCharactersSearchSortRule() {
  * @property {Character|Group|import('./scripts/tags.js').Tag|*} item - The item
  * @property {string|number} id - The id
  * @property {'character'|'group'|'tag'} type - The type of this entity (character, group, tag)
- * @property {Entity[]} [entities] - An optional list of entities relevant for this item
+ * @property {Entity[]?} [entities=null] - An optional list of entities relevant for this item
- * @property {number} [hidden] - An optional number representing how many hidden entities this entity contains
+ * @property {number?} [hidden=null] - An optional number representing how many hidden entities this entity contains
+ * @property {boolean?} [isUseless=null] - Specifies if the entity is useless (not relevant, but should still be displayed for consistency) and should be displayed greyed out
  */
 
 /**
@@ -1538,6 +1539,15 @@ export function getEntitiesList({ doFilter = false, doSort = true } = {}) {
         }
     }
 
+    // Final step, updating some properties after the last filter run
+    const nonTagEntitiesCount = entities.filter(entity => entity.type !== 'tag').length;
+    for (const entity of entities) {
+        if (entity.type === 'tag') {
+            if (entity.entities?.length == nonTagEntitiesCount) entity.isUseless = true;
+        }
+    }
+
+    // Sort before returning if requested
     if (doSort) {
         sortEntitiesList(entities);
     }

public/scripts/tags.js

@@ -283,11 +283,12 @@ function chooseBogusFolder(source, tagId, remove = false) {
  * Builds the tag block for the specified item.
  *
  * @param {Tag} tag The tag item
- * @param {*} entities The list ob sub items for this tag
+ * @param {any[]} entities The list ob sub items for this tag
- * @param {*} hidden A count of how many sub items are hidden
+ * @param {number} hidden A count of how many sub items are hidden
+ * @param {boolean} isUseless Whether the tag is useless (should be displayed greyed out)
  * @returns The html for the tag block
  */
-function getTagBlock(tag, entities, hidden = 0) {
+function getTagBlock(tag, entities, hidden = 0, isUseless = false) {
     let count = entities.length;
 
     const tagFolder = TAG_FOLDER_TYPES[tag.folder_type];
@@ -300,6 +301,7 @@ function getTagBlock(tag, entities, hidden = 0) {
     template.find('.bogus_folder_hidden_counter').text(hidden > 0 ? `${hidden} hidden` : '');
     template.find('.bogus_folder_counter').text(`${count} ${count != 1 ? 'characters' : 'character'}`);
     template.find('.bogus_folder_icon').addClass(tagFolder.fa_icon);
+    if (isUseless) template.addClass('useless');
 
     // Fill inline character images
     buildAvatarList(template.find('.bogus_folder_avatars_block'), entities);

public/style.css

@@ -2363,6 +2363,10 @@ input[type="file"] {
     padding: 1px;
 }
 
+#rm_print_characters_block .entity_block.useless {
+    opacity: 0.25;
+}
+
 #rm_ch_create_block {
     display: none;
     overflow-y: auto;