Add tag editor

public/index.html

@@ -1491,7 +1491,10 @@
                         <hr>
 
                         <div id="tags_div">
-                            <input id="tagInput" class="text_pole tag_input" placeholder="Search / Create tags" maxlength="25" />
+                            <div class="tag_controls">
+                                <input id="tagInput" class="text_pole tag_input" placeholder="Search / Create tags" maxlength="25" />
+                                <div class="tags_view menu_button fa-solid fa-pen-to-square" title="View all tags"></div>
+                            </div>
                             <div id="tagList" class="tags"></div>
                         </div>
 
@@ -1570,7 +1573,10 @@
                         </div>
                     </div>
                     <div id="group_tags_div" class="wide100p">
-                        <input id="groupTagInput" class="text_pole tag_input" placeholder="Search / Create tags" maxlength="25" />
+                        <div class="tag_controls">
+                            <input id="groupTagInput" class="text_pole tag_input flex1" placeholder="Search / Create tags" maxlength="25" />
+                            <div class="tags_view menu_button fa-solid fa-pen-to-square" title="View all tags"></div>
+                        </div>
                         <div id="groupTagList" class="tags"></div>
                     </div>
                     <div id="rm_group_add_members_header">
@@ -1765,6 +1771,14 @@
 
     <!-- templates for JS to reuse when needed -->
 
+    <div id="tag_view_template" class="template_element">
+        <div class="tag_view_item">
+            <div class="tag_view_name" contenteditable="true"></div>
+            <div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
+            <div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button"></div>
+        </div>
+    </div>
+
     <div id="entry_edit_template" class="template_element">
         <div class="world_entry">
             <form class="world_entry_form">

public/scripts/tags.js

@@ -1,4 +1,4 @@
-import { characters, saveSettingsDebounced, this_chid, selected_button } from "../script.js";
+import { characters, saveSettingsDebounced, this_chid, selected_button, callPopup } from "../script.js";
 import { group_rm_panel_mode, selected_group } from "./group-chats.js";
 
 export {
@@ -285,6 +285,46 @@ function createTagInput(inputSelector, listSelector) {
         .focus(onTagInputFocus); // <== show tag list on click
 }
 
+function onViewTagsListClick() {
+    const list = document.createElement('div');
+    const everything = Object.values(tag_map).flat();
+    $(list).append('<h3>Tags</h3><i>Click on the tag name to edit it.</i>')
+
+    for (const tag of tags) {
+        const count = everything.filter(x => x == tag.id).length;
+        const template = $('#tag_view_template .tag_view_item').clone();
+
+        template.attr('id', tag.id);
+        template.find('.tag_view_counter_value').text(count);
+        template.find('.tag_view_name').text(tag.name);
+
+        list.appendChild(template.get(0));
+    }
+
+    callPopup(list.outerHTML, 'text');
+}
+
+function onTagDeleteClick() {
+    const id = $(this).closest('.tag_view_item').attr('id');
+    for (const key of Object.keys(tag_map)) {
+        tag_map[key] = tag_map[key].filter(x => x.id !== id);
+    }
+    const index = tags.findIndex(x => x.id === id);
+    tags.splice(index, 1);
+    $(`.tag[id="${id}"]`).remove();
+    $(`.tag_view_item[id="${id}"]`).remove();
+    saveSettingsDebounced();
+}
+
+function onTagRenameInput() {
+    const id = $(this).closest('.tag_view_item').attr('id');
+    const newName = $(this).text();
+    const tag = tags.find(x => x.id === id);
+    tag.name = newName;
+    $(`.tag[id="${id}"] .tag_name`).text(newName);
+    saveSettingsDebounced();
+}
+
 $(document).ready(() => {
     createTagInput('#tagInput', '#tagList');
     createTagInput('#groupTagInput', '#groupTagList');
@@ -294,5 +334,8 @@ $(document).ready(() => {
     $(document).on("click", ".character_select", onCharacterSelectClick);
     $(document).on("click", ".group_select", onGroupSelectClick);
     $(document).on("click", ".tag_remove", onTagRemoveClick);
-    $(document).on("input", '.tag_input', onTagInput);
+    $(document).on("input", ".tag_input", onTagInput);
+    $(document).on("click", ".tags_view", onViewTagsListClick);
+    $(document).on("click", ".tag_delete", onTagDeleteClick);
+    $(document).on("input", ".tag_view_name", onTagRenameInput);
 });

public/style.css

@@ -2379,6 +2379,33 @@ h5 {
     min-width: 0;
 }
 
+.tag_controls {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.tag_view_item {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 15px;
+}
+
+.tag_view_name {
+    text-align: left;
+    flex: 2;
+}
+
+.tag_view_counter {
+    text-align: right;
+    flex: 1;
+}
+
+.tag_delete {
+    padding-right: 0;
+}
+
 .tag {
     border-radius: 5px;
     border-style: solid;
@@ -2407,7 +2434,6 @@ h5 {
 }
 
 .tags {
-
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -2421,30 +2447,12 @@ h5 {
 }
 
 .tags.tags_inline {
-    /* position: absolute; */
-    /* margin-right: 5px;
-    margin-left: 5px; */
-    /*     top: 30px;
-    left: 70px; */
     opacity: 0.6;
     column-gap: 0.2rem;
     row-gap: 0.2rem;
     justify-content: flex-start;
     max-height: 66%;
     overflow: hidden;
-    /* max-width: calc(100% - 75px); */
-    /*
-    position: absolute;
-    margin-right: 5px;
-    right: 0;
-    opacity: 0.6;
-    column-gap: 0.2rem;
-    row-gap: 0.2rem;
-    justify-content: flex-end;
-    max-width: 50%;
-    max-height: 100%;
-    overflow: hidden;
-    */
 }
 
 .tag_name {
@@ -2467,15 +2475,46 @@ h5 {
     cursor: pointer;
 }
 
+body .ui-autocomplete {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
 body .ui-front {
     z-index: 10000;
 }
 
 body .ui-widget-content {
-    background-color: var(--SmartThemeFastUIBGColor);
+    background-color: var(--SmartThemeBlurTintColor);
+    border: 1px solid var(--white30a) !important;
+    border-radius: 15px;
+    box-shadow: 0 0 5px black;
+    text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
     color: var(--SmartThemeBodyColor);
 }
 
+body .ui-widget-content .ui-state-active {
+    margin: unset !important;
+}
+
+body .ui-widget-content .ui-menu-item-wrapper {
+    background: unset;
+    border: unset;
+}
+
+body .ui-widget-content li {
+    padding: 0.75rem 1.25rem;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+body .ui-widget-content li:hover {
+    background-color: var(--SmartThemeEmColor);
+}
+
 /* GROUP CHATS */
 
 #rm_group_top_bar {
@@ -3555,7 +3594,8 @@ body.no-blur #dialogue_popup,
 body.no-blur #select_chat_popup,
 body.no-blur .options-content,
 body.no-blur #send_form,
-body.no-blur .list-group {
+body.no-blur .list-group,
+body.no-blur .ui-widget-content {
     background-color: var(--SmartThemeFastUIBGColor) !important;
 }