Display total and dynamic character count

public/index.html

@@ -2803,7 +2803,11 @@
                         <div class="rm_tag_controls">
                             <div class="tags rm_tag_filter"></div>
                         </div>
+                        <!-- a div containing a dynamically updated count of characters currently displayed -->
+                        <div id="rm_character_count" ></div>
+                        <hr>
                     </div>
+
                     <div id="rm_print_characters_block"></div>
                 </div>
 

public/script.js

@@ -942,6 +942,7 @@ async function getCharacters() {
         }
         await getGroups();
         await printCharacters();
+        updateCharacterCount('#rm_print_characters_block > div');
     }
 }
 
@@ -6458,6 +6459,15 @@ const swipe_right = () => {
     }
 }
 
+export function updateCharacterCount(characterSelector) {
+    const visibleCharacters = $(characterSelector).not('.hiddenBySearch').not('.hiddenByTag').not('.hiddenByGroup').not('.hiddenByGroupMember').not('.hiddenByFav');
+    const visibleCharacterCount = visibleCharacters.length;
+    const totalCharacterCount = $(characterSelector).length;
+
+    $('#rm_character_count').text(`(${visibleCharacters.length} / ${totalCharacterCount}) Characters`);
+    console.log('visibleCharacters.length: ' + visibleCharacters.length);
+}
+
 function updateVisibleDivs(containerSelector, resizecontainer) {
     var $container = $(containerSelector);
     var $children = $container.children();
@@ -6712,6 +6722,8 @@ $(document).ready(function () {
             });
             updateVisibleDivs('#rm_print_characters_block', true);
         }
+        updateCharacterCount(selector);
+
 
     });
 

public/scripts/tags.js

@@ -6,6 +6,7 @@ import {
     menu_type,
     updateVisibleDivs,
     getCharacters,
+    updateCharacterCount,
 } from "../script.js";
 
 import { selected_group } from "./group-chats.js";
@@ -82,6 +83,7 @@ function applyFavFilter(characterSelector) {
         }
 
     });
+    updateCharacterCount(characterSelector);
     updateVisibleDivs('#rm_print_characters_block', true);
 }
 
@@ -94,6 +96,7 @@ function filterByGroups(characterSelector) {
     $(characterSelector).each((_, element) => {
         $(element).toggleClass('hiddenByGroup', displayGroupsOnly && !$(element).hasClass('group_select'));
     });
+    updateCharacterCount(characterSelector);
     updateVisibleDivs('#rm_print_characters_block', true);
 }
 
@@ -355,6 +358,7 @@ function onTagFilterClick(listElement, characterSelector) {
     const tagIds = [...($(listElement).find(".tag.selected:not(.actionable)").map((_, el) => $(el).attr("id")))];
     const excludedTagIds = [...($(listElement).find(".tag.excluded:not(.actionable)").map((_, el) => $(el).attr("id")))];
     $(characterSelector).each((_, element) => applyFilterToElement(tagIds, excludedTagIds, element));
+    updateCharacterCount(characterSelector);
     updateVisibleDivs('#rm_print_characters_block', true);
 }
 

public/style.css

@@ -1159,6 +1159,12 @@ input[type="file"] {
     filter: brightness(150%);
 }
 
+#rm_character_count {
+    padding: 5px;
+    font-size: 14px;
+    font-weight: bold;
+}
+
 #rm_print_characters_block {
     /* padding: 5px 0; */
     overflow-y: auto;
@@ -5087,3 +5093,4 @@ body.waifuMode .zoomed_avatar {
     text-align: center;
     line-height: 14px;
 }
+