Characters list top panel touchup (#4282) * Move search bar under buttons Closes #4275 * Remove horizontal rules from right menu * Add toggle for search form * Add container for extension rm buttons * Be square or be there * Adjust font sizes * Square enlargement program * Adjust margins * Remove margin from pagination outlet buttons * Adjust margin on tag controls * Collapse 1px margins * Update public/script.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Remove variable assignment --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

ba12b32a1fc9d606e9c155a35ac34d36d14bb6ee

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: c3e3fdb0ca0fe95eb19804f4358e931874fa51bb

public/css/st-tailwind.css+0 -8 Viewed

     margin-left: 20px;
+}
-/*used to fix smallness of certain FontAwesome glyph which break button squareness*/
-/*currently used on: CharList Import*/
-.faSmallFontSquareFix {
-    font-size: calc(var(--mainFontSize) *1.25);
-    width: calc(var(--mainFontSize) *1.95);
-}
 .textarea_compact {
     font-size: calc(var(--mainFontSize) * 0.95);
     line-height: 1.2;

public/css/tags.css+1 -1 Viewed

     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
-    margin: 5px;
+    margin: 5px 0;
+}
 .rm_tag_filter .tag {

public/index.html+12 -8 Viewed

                     <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
                         <div class="hotswap avatars_inline scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps">
                         </div>
-                        <hr class="wide100p">
                     </div>
                 </div>

                     </div>
                     <div name="Character List Panel" id="rm_characters_block" class="right_menu">
                         <div id="charListFixedTop">
-                            <form id="form_character_search_form" action="javascript:void(null);">
+                            <div id="rm_button_bar">
                                 <div id="rm_button_create" title="Create New Character" data-i18n="[title]Create New Character" class="menu_button fa-solid fa-user-plus"></div>
-                                <div id="character_import_button" title="Import Character from File" data-i18n="[title]Import Character from File" class="menu_button fa-solid fa-file-import faSmallFontSquareFix"></div>
+                                <div id="character_import_button" title="Import Character from File" data-i18n="[title]Import Character from File" class="menu_button fa-solid fa-file-import"></div>
-                                <div id="external_import_button" title="Import content from external URL" data-i18n="[title]Import content from external URL" class="menu_button fa-solid fa-cloud-arrow-down faSmallFontSquareFix"></div>
+                                <div id="external_import_button" title="Import content from external URL" data-i18n="[title]Import content from external URL" class="menu_button fa-solid fa-cloud-arrow-down"></div>
                                 <div id="rm_button_group_chats" title="Create New Chat Group" data-i18n="[title]Create New Chat Group" class="menu_button fa-solid fa-users-gear"></div>
-                                <input id="character_search_bar" class="text_pole width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
+                                <div id="rm_buttons_container">
-                                <select id="character_sort_order" title="Characters sorting order" data-i18n="[title]Characters sorting order">
+                                    <!-- Container for additional buttons added by extensions -->
+                                </div>
+                                <select id="character_sort_order" class="flex1 text_pole textarea_compact" title="Characters sorting order" data-i18n="[title]Characters sorting order">
                                     <option data-field="search" data-order="desc" data-i18n="Search" hidden>Search</option>
                                     <option data-field="name" data-order="asc" data-i18n="A-Z">A-Z</option>
                                     <option data-field="name" data-order="desc" data-i18n="Z-A">Z-A</option>

                                     <option data-field="data_size" data-order="asc" data-i18n="Least tokens">Least tokens</option>
                                     <option data-field="name" data-order="random" data-i18n="Random">Random</option>
                                 </select>
-                            </form>
+                                <div id="rm_button_search" class="right_menu_button fa-fw fa-solid fa-search" title="Toggle search bar" data-i18n="[title]Toggle search bar"></div>
+                            </div>
+                            <div id="form_character_search_form">
+                                <input id="character_search_bar" class="text_pole textarea_compact width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
+                            </div>
                             <div class="rm_tag_controls">
                                 <div class="tags rm_tag_filter"></div>
                                 <div class="tags rm_tag_bogus_drilldown"></div>
                             </div>
-                            <hr>
                         </div>
                         <div id="rm_print_characters_pagination">

public/script.js+33 -7 Viewed

     });
+}
+function initCharacterSearch() {
+    const debouncedCharacterSearch = debounce((searchQuery) => {
+        entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);
+    });
+    const searchForm = $('#form_character_search_form');
+    const searchInput = $('#character_search_bar');
+    const searchButton = $('#rm_button_search');
+    const storageKey = 'characterSearchFormVisible';
+    searchInput.on('input', function () {
+        const searchQuery = String($(this).val());
+        debouncedCharacterSearch(searchQuery);
+    });
+    searchButton.on('click', function () {
+        const newVisibility = !searchForm.is(':visible');
+        searchForm.toggle(newVisibility);
+        searchButton.toggleClass('active', newVisibility);
+        accountStorage.setItem(storageKey, String(newVisibility));
+        if (newVisibility) {
+            searchInput.trigger('focus');
+        }
+    });
+    eventSource.on(event_types.APP_READY, () => {
+        const isVisible = accountStorage.getItem(storageKey) === 'true';
+        searchForm.toggle(isVisible);
+        searchButton.toggleClass('active', isVisible);
+    });
+}
 // MARK: DOM Handlers Start
 jQuery(async function () {

     $(document).on('click', '.last_mes .swipe_right', swipe_right);
     $(document).on('click', '.last_mes .swipe_left', swipe_left);
-    const debouncedCharacterSearch = debounce((searchQuery) => {
+    initCharacterSearch();
-        entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);
-    });
-    $('#character_search_bar').on('input', function () {
-        const searchQuery = String($(this).val());
-        debouncedCharacterSearch(searchQuery);
-    });
     $('#mes_impersonate').on('click', function () {
         $('#option_impersonate').trigger('click');

public/style.css+35 -8 Viewed

     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
-    padding: 0px 10px 0px 5px;
+    padding-right: 5px;
+}
 #chartokenwarning.menu_button {

@@ -2667,6 +2667,7 @@ input[type="file"] {
2667	transition: all var(--animation-duration-3x) ease-in-out;	2667	transition: all var(--animation-duration-3x) ease-in-out;
2668	}	2668	}
2669		2669
		2670	.right_menu_button.active,
2670	.right_menu_button:hover {	2671	.right_menu_button:hover {
2671	filter: brightness(150%);	2672	filter: brightness(150%);
2672	}	2673	}

@@ -2771,6 +2772,11 @@ input[type="file"] {
2771	padding: 1px;	2772	padding: 1px;
2772	}	2773	}
2773		2774
		2775	#rm_print_characters_pagination .menu_button {
		2776	margin: 0;
		2777	padding: 4px 5px;
		2778	}
		2779
2774	.bulk_select_checkbox {	2780	.bulk_select_checkbox {
2775	align-self: center;	2781	align-self: center;
2776	}	2782	}

     overflow-y: auto;
+}
+#rm_button_bar {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+}
+#rm_button_bar .menu_button {
+    width: calc(var(--mainFontSize) * 1.8);
+    aspect-ratio: 1;
+    margin: 0;
+}
+#rm_buttons_container {
+    display: contents;
+}
 #floatingPrompt,
 #cfgConfig {
     overflow-y: auto;

     flex-grow: 1;
+}
+#charListFixedTop {
+    padding: 1px;
+}
 #form_character_search_form {
     display: flex;
     flex-direction: row;
     align-items: stretch;
-    margin: 5px;
     column-gap: 5px;
+}
-#form_character_search_form .menu_button,
 #GroupFavDelOkBack .menu_button {
     margin: 0;
     height: fit-content;

+}
 #character_sort_order {
-    margin: 0;
     flex: 1;
     border-radius: 5px;
-    height: auto;
+    margin: 0;
+    padding: 4px 5px;
+}
 #character_search_bar {
-    margin: 0;
     flex: 1;
-    /* padding-left: 0.75em; */
+}
-    height: auto;
+#rm_button_search {
+    align-self: center;
+    font-size: 1.1em;
+    margin: 0 2px;
+}
 #persona_search_bar {