Char List Tags Collapsable

public/index.html

@@ -3059,4 +3059,4 @@
     </script>
 </body>
 
-</html>
+</html>

public/script.js

@@ -5501,7 +5501,7 @@ $(document).ready(function () {
 
     $("#chat").on('scroll', debounce(() => {
         updateVisibleDivs('#chat', false);
-    }, 5));
+    }, 10));
 
     let S_TAFocused = false;
     let S_TAPreviouslyFocused = false;

public/scripts/tags.js

@@ -26,9 +26,14 @@ const TAG_LOGIC_AND = true; // switch to false to use OR logic for combining tag
 const CHARACTER_SELECTOR = '#rm_print_characters_block > div';
 
 const ACTIONABLE_TAGS = {
-    VIEW: { id: 2, name: 'Manage tags', color: 'rgba(150, 100, 100, 0.5)', action: onViewTagsListClick, icon: 'fa-solid fa-tags' },
+
     FAV: { id: 1, name: 'Show only favorites', color: 'rgba(255, 255, 0, 0.5)', action: applyFavFilter, icon: 'fa-solid fa-star' },
     GROUP: { id: 0, name: 'Show only groups', color: 'rgba(100, 100, 100, 0.5)', action: filterByGroups, icon: 'fa-solid fa-users' },
+    HINT: { id: 3, name: 'Show Tag List', color: 'rgba(150, 100, 100, 0.5)', action: onTagListHintClick, icon: 'fa-solid fa-tags' },
+}
+
+const InListActionable = {
+    VIEW: { id: 2, name: 'Manage tags', color: 'rgba(150, 100, 100, 0.5)', action: onViewTagsListClick, icon: 'fa-solid fa-gear' },
 }
 
 const DEFAULT_TAGS = [
@@ -233,6 +238,9 @@ function appendTagToList(listElement, tag, { removable, selectable, action }) {
         tagElement.on('click', () => action.bind(tagElement)());
         tagElement.addClass('actionable');
     }
+    if (action && tag.id === 2) {
+        tagElement.addClass('innerActionable hidden');
+    }
 
     $(listElement).append(tagElement);
 }
@@ -291,6 +299,9 @@ function printTags() {
 
     $(FILTER_SELECTOR).find('.actionable').last().addClass('margin-right-10px');
 
+    for (const tag of Object.values(InListActionable)) {
+        appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: false, action: tag.action });
+    }
     for (const tag of tagsToDisplay) {
         appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: true, });
     }
@@ -437,6 +448,13 @@ function onTagColorize(evt) {
     saveSettingsDebounced();
 }
 
+function onTagListHintClick() {
+    console.log($(this));
+    $(this).toggleClass('selected');
+    $(this).siblings(".tag:not(.actionable)").toggle(100);
+    $(this).siblings(".innerActionable").toggleClass('hidden');
+}
+
 $(document).ready(() => {
     createTagInput('#tagInput', '#tagList');
     createTagInput('#groupTagInput', '#groupTagList');

public/style.css

@@ -130,6 +130,7 @@ table.responsiveTable {
     padding: 5px;
 }
 
+.hidden,
 .hiddenByScroll {
     visibility: hidden !important;
 }
@@ -2332,6 +2333,7 @@ input[type="range"]::-webkit-slider-thumb {
 .mes_buttons .mes_edit,
 .mes_buttons .mes_bookmark,
 .extraMesButtonsHint,
+#tagListHint,
 .extraMesButtons div {
     cursor: pointer;
     transition: 0.3s ease-in-out;
@@ -2342,6 +2344,7 @@ input[type="range"]::-webkit-slider-thumb {
 .mes_buttons .mes_edit:hover,
 .mes_buttons .mes_bookmark:hover,
 .extraMesButtonsHint:hover,
+#tagListHint:hover,
 .extraMesButtons div:hover {
     opacity: 1;
 }
@@ -2735,9 +2738,13 @@ h5 {
     width: fit-content;
     min-width: 0;
     text-shadow: none !important;
-
 }
 
+#rm_tag_filter .tag:not(.actionable) {
+    display: none;
+}
+
+
 .tag.actionable {
     border-radius: 50%;
     aspect-ratio: 1 / 1;
@@ -2745,10 +2752,21 @@ h5 {
     min-width: calc(var(--mainFontSize) * 2);
     font-size: calc(var(--mainFontSize) * 1);
     padding: 0;
+    display: flex;
     justify-content: center;
     align-items: center;
 }
 
+#tagListHint {
+    align-self: center;
+    display: flex;
+    margin-right: 10px;
+}
+
+.opacity1 {
+    opacity: 1 !important;
+}
+
 .margin-right-10px {
     margin-right: 10px;
 }
@@ -2852,7 +2870,7 @@ body .ui-front {
 body .ui-widget-content {
     background-color: var(--SmartThemeBlurTintColor);
     border: 1px solid var(--white30a) !important;
-    border-radius: 15px;
+    border-radius: 10px;
     box-shadow: 0 0 5px black;
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
@@ -2869,15 +2887,18 @@ body .ui-widget-content .ui-menu-item-wrapper {
 }
 
 body .ui-widget-content li {
-    padding: 0.75rem 1.25rem;
+    padding: 5px;
     text-decoration: none;
     display: flex;
     align-items: center;
     cursor: pointer;
+    opacity: 0.5;
+    transition: all 200ms;
 }
 
 body .ui-widget-content li:hover {
-    background-color: var(--SmartThemeEmColor);
+    /* background-color: var(--SmartThemeEmColor); */
+    opacity: 1;
 }
 
 /* GROUP CHATS */