Add filter by favorites to group member candidates list

public/index.html

@@ -1595,6 +1595,7 @@
                     <div id="rm_group_add_members_header">
                         <h3>Add Members</h3>
                         <input id="rm_group_filter" class="text_pole" type="search" placeholder="Filter..." maxlength="100" />
+                        <div id="group_fav_filter" class="menu_button fa-solid fa-ranking-star" title="Show only favorites"></div>
                     </div>
                     <div class="flex-container flexFlowColumn flexNoGap overflowYAuto wide100p flexGrow">
                         <div id="rm_group_add_members"></div>

public/scripts/group-chats.js

@@ -71,6 +71,7 @@ let groups = [];
 let selected_group = null;
 let group_generation_id = null;
 let fav_grp_checked = false;
+let fav_filter_on = false;
 
 export const group_activation_strategy = {
     NATURAL: 0,
@@ -846,6 +847,7 @@ function select_group_chats(groupId, skipAnimation) {
         template.find(".avatar img").attr("title", character.avatar);
         template.find(".ch_name").text(character.name);
         template.attr("chid", characters.indexOf(character));
+        template.addClass(character.fav == 'true' ? 'is_fav' : '');
 
         if (
             group &&
@@ -860,6 +862,7 @@ function select_group_chats(groupId, skipAnimation) {
     }
 
     sortCharactersList("#rm_group_add_members .group_member");
+    filterMembersByFavorites(false);
 
     const groupHasMembers = !!$("#rm_group_members").children().length;
     $("#rm_group_submit").prop("disabled", !groupHasMembers);
@@ -996,12 +999,11 @@ function filterGroupMembers() {
     const searchValue = $(this).val().trim().toLowerCase();
 
     if (!searchValue) {
-        $("#rm_group_add_members .group_member").show();
+        $("#rm_group_add_members .group_member").removeClass('hiddenBySearch');
     } else {
         $("#rm_group_add_members .group_member").each(function () {
-            $(this).children(".ch_name").text().toLowerCase().includes(searchValue)
-                ? $(this).show()
-                : $(this).hide();
+            const isValidSearch = $(this).children(".ch_name").text().toLowerCase().includes(searchValue);
+            $(this).toggleClass('hiddenBySearch', !isValidSearch);
         });
     }
 }
@@ -1057,9 +1059,28 @@ async function createGroup() {
     }
 }
 
+function toggleFilterByFavorites() {
+    filterMembersByFavorites(!fav_filter_on);
+}
+
+function filterMembersByFavorites(value) {
+    fav_filter_on = value;
+    $('#group_fav_filter').toggleClass('fav_on', fav_filter_on);
+
+    if (!fav_filter_on) {
+        $("#rm_group_add_members .group_member").removeClass('hiddenByFav');
+    } else {
+        $("#rm_group_add_members .group_member").each(function () {
+            const isValidSearch = $(this).hasClass("is_fav");
+            $(this).toggleClass('hiddenByFav', !isValidSearch);
+        });
+    }
+}
+
 $(document).ready(() => {
     $(document).on("click", ".group_select", selectGroup);
     $("#rm_group_filter").on("input", filterGroupMembers);
+    $("#group_fav_filter").on("click", toggleFilterByFavorites);
     $("#rm_group_submit").on("click", createGroup);
     $("#rm_group_automode").on("input", function () {
         const value = $(this).prop("checked");

public/style.css

@@ -1218,7 +1218,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 .character_select.is_fav .avatar,
-.group_select.is_fav .avatar {
+.group_select.is_fav .avatar,
+.group_member.is_fav .avatar {
     outline: 2px solid #c5b457;
 }
 
@@ -2643,7 +2644,7 @@ body .ui-widget-content li:hover {
     flex-direction: row;
     align-items: center;
     width: 100%;
-    column-gap: 1rem;
+    column-gap: 10px;
 }
 
 #rm_group_add_members_header input {