Feature: allows sorting tags by most used (#4768) * add sorting tags by most used * Fix whitespaces * Code review updates * Remove commented code * Fix capitalization in comment * Apply review suggestion * Simplify template init * Reformat * Add documentation for appendViewTagToList and printViewTagList functions * Reprint renamed tags regardless of sorting mode --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

e7af479427601a6affe58ab9bf1373cd5464bdfb

Serena <85121347+AzureKarasuba@users.noreply.github.com>

Signed

Parents: 1baaa26729b173afde7df3ca844a2d7add939fb6

public/locales/zh-cn.json+4 -0 Viewed

     "Drag handle to reorder. Click name to rename. Click color to change display.": "拖拽左侧三条横线以排序，点击名字以重命名，点击调色盘以切换颜色。",
     "Click on the folder icon to use this tag as a folder.": "点击文件夹图标来将此标签作为一个文件夹。",
     "Use alphabetical sorting": "按字母顺序排列",
+    "Sort mode": "排序模式",
+    "Manual (Drag & Drop)": "手动 (拖放)",
+    "Alphabetical (A-Z)": "按字母 (A-Z)",
+    "Most Used (By Count)": "按使用次数",
     "tags_sorting_desc": "启用后，标签在创建或重命名时会自动按字母顺序排序。\n禁用后，新标签会追加到末尾。\n\n如果通过拖动手动重新排列标签，则自动排序将被禁用。",
     "Are you sure you want to delete the theme?": "你确定要删除这个主题吗？",
     "Hi,": "嗨，",

public/locales/zh-tw.json+4 -0 Viewed

     "Drag handle to reorder. Click name to rename. Click color to change display.": "拖動以重新排序。點選名稱重新命名。點選顏色更改顯示。",
     "Click on the folder icon to use this tag as a folder.": "點選資料夾圖示以將此標籤作為資料夾。",
     "Use alphabetical sorting": "按字母順序排序 ",
+    "Sort mode": "排序模式",
+    "Manual (Drag & Drop)": "手動（拖放）",
+    "Alphabetical (A-Z)": "按字母（A-Z）",
+    "Most Used (By Count)": "按使用次數",
     "tags_sorting_desc": "啟用後，標籤將在建立或重新命名時將自動按字母排序。\n停用時，新標籤將附加到結尾。\n若標籤被手動拖動重新排序，則自動排序將被停用。",
     "and connect to an": "並連線到",
     "You can add more": "您可加入更多",

public/scripts/power-user.js+6 -1 Viewed

     updateBindModelTemplatesState,
 } from './instruct-mode.js';
-import { getTagsList, tag_import_setting, tag_map, tags } from './tags.js';
+import { getTagsList, tag_import_setting, tag_map, tag_sort_mode, tags } from './tags.js';
 import { tokenizers } from './tokenizers.js';
 import { BIAS_CACHE } from './logit-bias.js';
 import { renderTemplateAsync } from './templates.js';

     enable_auto_select_input: false,
     enable_md_hotkeys: false,
     tag_import_setting: tag_import_setting.ASK,
+    tag_sort_mode: tag_sort_mode.MANUAL,
     disable_group_trimming: false,
     single_line: false,

@@ -1556,6 +1557,10 @@ export async function loadPowerUserSettings(settings, data) {
1556	if (settings.power_user.click_to_edit === undefined && settings.power_user.chat_display === chat_styles.DOCUMENT) {	1557	if (settings.power_user.click_to_edit === undefined && settings.power_user.chat_display === chat_styles.DOCUMENT) {
1557	settings.power_user.click_to_edit = true;	1558	settings.power_user.click_to_edit = true;
1558	}	1559	}
		1560	if (Object.hasOwn(settings.power_user, 'auto_sort_tags') && !Object.hasOwn(settings.power_user, 'tag_sort_mode')) {
		1561	settings.power_user.tag_sort_mode = settings.power_user.auto_sort_tags ? tag_sort_mode.ALPHABETICAL : tag_sort_mode.MANUAL;
		1562	delete settings.power_user.auto_sort_tags;
		1563	}
1559	Object.assign(power_user, settings.power_user);	1564	Object.assign(power_user, settings.power_user);
1560	}	1565	}
1561		1566

public/scripts/tags.js+52 -52 Viewed

     ONLY_EXISTING: 4,
 };
+/** @enum {string} */
+export const tag_sort_mode = {
+    MANUAL: 'manual',
+    ALPHABETICAL: 'alphabetical',
+    BY_ENTRIES: 'by_entries',
+};
 /**
  * @type {{ FAV: Tag, GROUP: Tag, FOLDER: Tag, VIEW: Tag, HINT: Tag, UNFILTER: Tag }}
  * A collection of global actional tags for the filter panel

  * @property {string} [folder_type] - The bogus folder type of this tag (based on `TAG_FOLDER_TYPES`)
  * @property {string} [filter_state] - The saved state of the filter chosen of this tag (based on `FILTER_STATES`)
  * @property {number} [sort_order] - A custom integer representing the sort order if tags are sorted
+ * @property {number} [count] - The number of entities that have this tag assigned
  * @property {string} [color] - The background color of the tag
  * @property {string} [color2] - The foreground color of the tag
  * @property {number} [create_date] - A number representing the date when this tag was created

 async function onViewTagsListClick() {
     const html = $(document.createElement('div'));
     html.attr('id', 'tag_view_list');
-    html.append(await renderTemplateAsync('tagManagement', { bogus_folders: power_user.bogus_folders, auto_sort_tags: power_user.auto_sort_tags }));
+    html.append(await renderTemplateAsync('tagManagement', { bogus_folders: power_user.bogus_folders }));
     const tagContainer = $('<div class="tag_view_list_tags ui-sortable"></div>');
     html.append(tagContainer);
+    const $sortModeSelect = html.find('#tag_sort_mode_select');
+    $sortModeSelect.val(power_user.tag_sort_mode);
+    $sortModeSelect.on('change', function () {
+        const newMode = $(this).val().toString();
+        power_user.tag_sort_mode = newMode;
+        saveSettingsDebounced();
+        printViewTagList(tagContainer);
+    });
     printViewTagList(tagContainer);
     makeTagListDraggable(tagContainer);
     await callGenericPopup(html, POPUP_TYPE.TEXT, null, { allowVerticalScrolling: true, wide: true, large: true });
+}
-/**
- * Print the list of tags in the tag management view
- * @param {Event} event Event that triggered the color change
- * @param {boolean} toggle State of the toggle
- */
-function toggleAutoSortTags(event, toggle) {
-    if (toggle === power_user.auto_sort_tags) return;
-    // Ask user to confirm if enabling and it was manually sorted before
-    if (toggle && isManuallySorted() && !confirm('Are you sure you want to automatically sort alphabetically?')) {
-        if (event.target instanceof HTMLInputElement) {
-            event.target.checked = false;
-        }
-        return;
-    }
-    power_user.auto_sort_tags = toggle;
-    printCharactersDebounced();
-    saveSettingsDebounced();
-}
-/** This function goes over all existing tags and checks whether they were reorderd in the past. @returns {boolean} */
-function isManuallySorted() {
-    return tags.some((tag, index) => tag.sort_order !== index);
-}
 function makeTagListDraggable(tagContainer) {
     const onTagsSort = () => {
         tagContainer.find('.tag_view_item').each(function (i, tagElement) {

         });
         // If tags were dragged manually, we have to disable auto sorting
-        if (power_user.auto_sort_tags) {
+        if (power_user.tag_sort_mode !== tag_sort_mode.MANUAL) {
-            power_user.auto_sort_tags = false;
+            power_user.tag_sort_mode = tag_sort_mode.MANUAL;
-            $('#tag_view_list input[name="auto_sort_tags"]').prop('checked', false);
+            $('#tag_sort_mode_select').val(tag_sort_mode.MANUAL);
-            toastr.info('Automatic sorting of tags deactivated.');
+            toastr.info('Switched to Manual sorting mode.');
+        }
         // If the order of tags in display has changed, we need to redraw some UI elements. Do it debounced so it doesn't block and you can drag multiple tags.

  * @returns {number} The compare result
  */
 function compareTagsForSort(a, b) {
+    // default sort: alphabetical, case insensitive
     const defaultSort = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
-    if (power_user.auto_sort_tags) {
+    // sort on number of entries
+    if (power_user.tag_sort_mode === tag_sort_mode.BY_ENTRIES) {
+        return ((b.count || 0) - (a.count || 0)) || defaultSort;
+    }
+    // alphabetical sort
+    if (power_user.tag_sort_mode === tag_sort_mode.ALPHABETICAL) {
         return defaultSort;
+    }
+    // manual sort
     if (a.sort_order !== undefined && b.sort_order !== undefined) {
         return a.sort_order - b.sort_order;
     } else if (a.sort_order !== undefined) {

     toastr.success('Tag created', 'Create Tag');
+}
-function appendViewTagToList(list, tag, everything) {
+/**
-    const count = everything.filter(x => x == tag.id).length;
+ * Appends a tag to the view tag list.
+ * @param {JQuery<HTMLElement>} list List element
+ * @param {Tag} tag Tag object
+ * @param {number} count Count of characters/groups using this tag
+ */
+function appendViewTagToList(list, tag, count) {
     const template = VIEW_TAG_TEMPLATE.clone();
     template.attr('id', tag.id);
     template.find('.tag_view_counter_value').text(count);

     tag_map[data.newAvatar] = Array.from(new Set([...prevTagMap, ...newTagMap]));
+}
+/**
+ * Prints the tag list in the view tags popup.
+ * @param {JQuery<HTMLElement>} tagContainer Container element
+ * @param {boolean} empty Whether to empty the container before printing
+ */
 function printViewTagList(tagContainer, empty = true) {
     if (empty) tagContainer.empty();
     const everything = Object.values(tag_map).flat();
-    const sortedTags = sortTags(tags);
+    const tagsWithCounts = tags.map(tag => {
+        const count = everything.filter(x => x === tag.id).length;
+        return { ...tag, count: count };
+    });
+    const sortedTags = sortTags(tagsWithCounts);
     for (const tag of sortedTags) {
-        appendViewTagToList(tagContainer, tag, everything);
+        appendViewTagToList(tagContainer, tag, tag.count);
+    }
+}

     eventSource.on(event_types.CHARACTER_DUPLICATED, copyTags);
     eventSource.makeFirst(event_types.CHAT_CHANGED, () => selected_group ? applyTagsOnGroupSelect() : applyTagsOnCharacterSelect());
-    $(document).on('input', '#tag_view_list input[name="auto_sort_tags"]', (evt) => {
-        const toggle = $(evt.target).is(':checked');
-        toggleAutoSortTags(evt.originalEvent, toggle);
-        printViewTagList($('#tag_view_list .tag_view_list_tags'));
-    });
     $(document).on('focusout', '#tag_view_list .tag_view_name', (evt) => {
-        // Reorder/reprint tags, but only if the name actually has changed, and only if we auto sort tags
+        // Reorder/reprint tags, but only if the name actually has changed
-        if (!power_user.auto_sort_tags || !$(evt.target).is('[dirty]')) return;
+        if (!$(evt.target).is('[dirty]')) return;
         // Remember the order, so we can flash highlight if it changed after reprinting
         const tagId = ($(evt.target).closest('.tag_view_item')).attr('id');

+        }
     });
-    // Initialize auto sort setting based on whether it was sorted before
-    if (power_user.auto_sort_tags === undefined || power_user.auto_sort_tags === null) {
-        power_user.auto_sort_tags = !isManuallySorted();
-        if (power_user.auto_sort_tags) {
-            printCharactersDebounced();
-        }
-    }
     registerTagsSlashCommands();
     restoreSavedTagFilters();
+}

public/scripts/templates/tagManagement.html+8 -9 Viewed

         </div>
     </div>
     <div class="justifyLeft m-b-1">
+        <div class="flex-container alignItemsBaseline">
+            <span data-i18n="Sort mode">Sort mode:</span>
+            <select id="tag_sort_mode_select" class="flex1 text_pole">
+                <option value="manual" data-i18n="Manual (Drag & Drop)">Manual (Drag & Drop)</option>
+                <option value="alphabetical" data-i18n="Alphabetical (A-Z)">Alphabetical (A-Z)</option>
+                <option value="by_entries" data-i18n="Most Used (By Count)">Most Used (By Count)</option>
+            </select>
+        </div>
         <small>
             <span data-i18n="Drag handle to reorder. Click name to rename. Click color to change display.">Drag handle to reorder. Click name to rename. Click color to change display.</span><br>
             {{#if bogus_folders}}<span data-i18n="Click on the folder icon to use this tag as a folder.">Click on the folder icon to use this tag as a folder.</span><br>{{/if}}
-            <label class="checkbox_label flex-container alignItemsCenter m-t-1" for="auto_sort_tags">
-                <input type="checkbox" id="auto_sort_tags" name="auto_sort_tags" {{#if auto_sort_tags}} checked{{/if}} />
-                <span data-i18n="Use alphabetical sorting">
-                    Use alphabetical sorting
-                </span>
-                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]tags_sorting_desc"
-                    title="If enabled, tags will automatically be sorted alphabetically on creation or rename.&#10;If disabled, new tags will be appended at the end.&#10;&#10;If a tag is manually reordered by dragging, automatic sorting will be disabled.">
-                </div>
-            </label>
         </small>
     </div>