From 7d181fd2e8c2e95b3b3f00eb10913c94e973ed36 Mon Sep 17 00:00:00 2001
From: SillyLossy <titan0599@gmail.com>
Date: Mon, 8 May 2023 15:16:55 +0300
Subject: [PATCH] Optimize character list layouts

---
 public/index.html      | 23 ++++++++++-------------
 public/scripts/tags.js |  1 +
 public/style.css       | 11 ++++++++---
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/public/index.html b/public/index.html
index d1280c7bd..5013d0ced 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1857,27 +1857,24 @@
 
                 <div name="Character List Panel" id="rm_characters_block" class="right_menu">
                     <div id="charListFixedTop">
-                        <div class="form_create_bottom_buttons_block">
+                        <form id="form_character_search_form" action="javascript:void(null);">
                             <div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
                             <div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
                             <div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
-                        </div>
-                        <form id="form_character_search_form" action="javascript:void(null);">
-                            <input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." maxlength="50" />
+                            <input id="character_search_bar" class="text_pole" type="search" placeholder="Search..." maxlength="50" />
                             <select id="character_sort_order" title="Characters sorting order">
-                                <option data-field="name" data-order="asc">Name, A-Z</option>
-                                <option data-field="name" data-order="desc">Name, Z-A</option>
-                                <option data-field="date_added" data-order="desc">Date added, newer first</option>
-                                <option data-field="date_added" data-order="asc">Date added, older first</option>
-                                <option data-field="fav" data-order="desc" data-rule="boolean">Favorites first</option>
-                                <option data-field="date_last_chat" data-order="desc">Recently chatted</option>
-                                <option data-field="chat_size" data-order="desc">Most chatted</option>
-                                <option data-field="chat_size" data-order="asc">Least chatted</option>
+                                <option data-field="name" data-order="asc">A-Z</option>
+                                <option data-field="name" data-order="desc">Z-A</option>
+                                <option data-field="date_added" data-order="desc">Newest</option>
+                                <option data-field="date_added" data-order="asc">Oldest</option>
+                                <option data-field="fav" data-order="desc" data-rule="boolean">Favorites</option>
+                                <option data-field="date_last_chat" data-order="desc">Recent</option>
+                                <option data-field="chat_size" data-order="desc">Most chats</option>
+                                <option data-field="chat_size" data-order="asc">Least chats</option>
                             </select>
                         </form>
                         <div class="rm_tag_controls">
                             <div id="rm_tag_filter" class="tags"></div>
-                            <div class="tags_view menu_button fa-solid fa-tags" title="Manage Tags"></div>
                         </div>
                     </div>
                     <div id="rm_print_characters_block"></div>
diff --git a/public/scripts/tags.js b/public/scripts/tags.js
index cc6faff99..796a8f0d3 100644
--- a/public/scripts/tags.js
+++ b/public/scripts/tags.js
@@ -18,6 +18,7 @@ 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' },
 }
diff --git a/public/style.css b/public/style.css
index fa134b0ad..0bc463af3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1059,20 +1059,25 @@ select option:not(:checked) {
 #form_character_search_form {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: stretch;
     margin: 5px;
-    column-gap: 10px;
+    column-gap: 5px;
+}
+
+#form_character_search_form .menu_button {
+    margin: 0;
 }
 
 #character_sort_order {
     margin: 0;
     flex: 1;
+    height: auto;
 }
 
 #character_search_bar {
+    margin: 0;
     flex: 1;
     padding-left: 0.75em;
-    margin: 0;
 }
 
 input[type=search]::-webkit-search-cancel-button {