From 0c5fe3d6370b6b5cadd10116aa563b6a2db60c66 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmx.de>
Date: Sun, 28 Apr 2024 04:46:05 +0200
Subject: [PATCH] Fix bogus folder not working if tag was cut off

---
 public/scripts/tags.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/public/scripts/tags.js b/public/scripts/tags.js
index 9d82ba5e0..548a34bbe 100644
--- a/public/scripts/tags.js
+++ b/public/scripts/tags.js
@@ -680,11 +680,21 @@ function printTagList(element, { tags = undefined, addTag = undefined, forEntity
     const expanded = $element.hasClass('tags-expanded') || (expanded_tags_cache.length && expanded_tags_cache.indexOf(key ?? getTagKeyForEntityElement(element)) >= 0);
 
     // We prepare some stuff. No matter which list we have, there is a maximum value of tags we are going to display
-    const TAGS_LIMIT = 50;
-    const MAX_TAGS = !expanded ? TAGS_LIMIT : Number.MAX_SAFE_INTEGER;
-    let totalPrinted = 0;
-    let hiddenTags = 0;
-    const filterActive = (/** @type {Tag} */ tag) => tag.filter_state && !isFilterState(tag.filter_state, FILTER_STATES.UNDEFINED);
+    // Constants to define tag printing limits
+    const DEFAULT_TAGS_LIMIT = 50;
+    const tagsDisplayLimit = expanded ? Number.MAX_SAFE_INTEGER : DEFAULT_TAGS_LIMIT;
+
+    // Functions to determine tag properties
+    const isFilterActive = (/** @type {Tag} */ tag) => tag.filter_state && !isFilterState(tag.filter_state, FILTER_STATES.UNDEFINED);
+    const shouldPrintTag = (/** @type {Tag} */ tag) => isBogusFolder(tag) || isFilterActive(tag);
+
+    // Calculating the number of tags to print
+    const mandatoryPrintTagsCount = printableTags.filter(shouldPrintTag).length;
+    const availableSlotsForAdditionalTags = Math.max(tagsDisplayLimit - mandatoryPrintTagsCount, 0);
+
+    // Counters for printed and hidden tags
+    let additionalTagsPrinted = 0;
+    let tagsSkipped = 0;
 
     for (const tag of printableTags) {
         // If we have a custom action selector, we override that tag options for each tag
@@ -698,16 +708,16 @@ function printTagList(element, { tags = undefined, addTag = undefined, forEntity
         }
 
         // Check if we should print this tag
-        if (totalPrinted++ < MAX_TAGS || filterActive(tag)) {
+        if (shouldPrintTag(tag) || additionalTagsPrinted++ < availableSlotsForAdditionalTags) {
             appendTagToList($element, tag, tagOptions);
         } else {
-            hiddenTags++;
+            tagsSkipped++;
         }
     }
 
     // After the loop, check if we need to add the placeholder.
     // The placehold if clicked expands the tags and remembers either via class or cache array which was expanded, so it'll stay expanded until the next reload.
-    if (hiddenTags > 0) {
+    if (tagsSkipped > 0) {
         const id = 'placeholder_' + uuidv4();
 
         // Add click event
@@ -726,7 +736,7 @@ function printTagList(element, { tags = undefined, addTag = undefined, forEntity
 
         // Print the placeholder object with its styling and action to show the remaining tags
         /** @type {Tag} */
-        const placeholderTag = { id: id, name: '...', title: `${hiddenTags} tags not displayed.\n\nClick to expand remaining tags.`, color: 'transparent', action: showHiddenTags, class: 'placeholder-expander' };
+        const placeholderTag = { id: id, name: '...', title: `${tagsSkipped} tags not displayed.\n\nClick to expand remaining tags.`, color: 'transparent', action: showHiddenTags, class: 'placeholder-expander' };
         // It should never be marked as a removable tag, because it's just an expander action
         /** @type {TagOptions} */
         const placeholderTagOptions = { ...tagOptions, removable: false };