From 872418757ce1fb8e8393da585a234a0a1366af26 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Wed, 31 Jan 2024 12:13:01 +0200
Subject: [PATCH] #1761 Personas grid view (slight return)

---
 public/css/toggle-dependent.css | 23 +++++++++++++++++------
 public/index.html               |  5 +++--
 public/scripts/personas.js      | 13 +++++++++++++
 public/style.css                | 14 ++++++--------
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css
index edded8de5..ea440fb9c 100644
--- a/public/css/toggle-dependent.css
+++ b/public/css/toggle-dependent.css
@@ -36,7 +36,8 @@ body.charListGrid #rm_print_characters_block {
 }
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select,
-body.charListGrid #rm_print_characters_block .character_select {
+body.charListGrid #rm_print_characters_block .character_select,
+#user_avatar_block.gridView .avatar-container {
     width: 30%;
     align-items: flex-start;
     height: min-content;
@@ -47,7 +48,8 @@ body.charListGrid #rm_print_characters_block .character_select {
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select .ch_name,
 body.charListGrid #rm_print_characters_block .character_select .ch_name,
-body.charListGrid #rm_print_characters_block .group_select .ch_name {
+body.charListGrid #rm_print_characters_block .group_select .ch_name,
+#user_avatar_block.gridView .avatar-container .ch_name {
     width: 100%;
     max-width: 100px;
     text-align: center;
@@ -55,12 +57,20 @@ body.charListGrid #rm_print_characters_block .group_select .ch_name {
 }
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select .character_name_block,
-body.charListGrid #rm_print_characters_block .character_select .character_name_block {
+body.charListGrid #rm_print_characters_block .character_select .character_name_block,
+#user_avatar_block.gridView .avatar-container .character_name_block {
     width: 100%;
+    flex-direction: column;
+}
+
+#user_avatar_block.gridView .avatar-container .avatar-buttons {
+    flex-wrap: wrap;
+    justify-content: space-evenly;
 }
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select .character_select_container,
-body.charListGrid #rm_print_characters_block .character_select .character_select_container {
+body.charListGrid #rm_print_characters_block .character_select .character_select_container,
+#user_avatar_block.gridView .avatar-container .character_select_container {
     width: 100%;
     justify-content: center;
     max-width: 100px;
@@ -83,7 +93,8 @@ body.charListGrid #rm_print_characters_block .bogus_folder_counter_block,
 body.charListGrid #rm_print_characters_block .ch_description,
 body.charListGrid #rm_print_characters_block .tags_inline,
 body.charListGrid #rm_print_characters_block .character_version,
-body.charListGrid #rm_print_characters_block .ch_avatar_url {
+body.charListGrid #rm_print_characters_block .ch_avatar_url,
+#user_avatar_block.gridView .avatar-container .ch_description {
     display: none;
 }
 
@@ -150,7 +161,7 @@ body.big-avatars .avatar_collage {
 }
 
 body.big-avatars .ch_description,
-.avatar-container .ch_description {
+body.big-avatars .avatar-container .ch_description {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
diff --git a/public/index.html b/public/index.html
index f36500e50..618f151a5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3656,7 +3656,7 @@
                         </div>
                     </div>
                     <div id="persona-management-block" class="flex-container wide100p flexGap10">
-                        <div class="flex1">
+                        <div class="flex1 overflowHidden">
                             <div class="flex-container marginBot10 alignitemscenter">
                                 <div id="create_dummy_persona" class="menu_button menu_button_icon" title="Create a dummy persona" data-i18n="[title]Create a dummy persona">
                                     <i class="fa-solid fa-person-circle-question fa-fw"></i>
@@ -3664,6 +3664,7 @@
                                 </div>
                                 <input id="persona_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="100">
                                 <div id="persona_pagination_container" class="flex1"></div>
+                                <i id="persona_grid_toggle" class="fa-solid fa-table-cells-large menu_button" title="Toggle grid view"></i>
                             </div>
                             <div id="user_avatar_block">
                                 <div class="avatar_upload">+</div>
@@ -5326,7 +5327,7 @@
         <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
     </div>
     <div id="user_avatar_template" class="template_element">
-        <div class="avatar-container wide100p">
+        <div class="avatar-container">
             <div imgfile="" class="avatar">
                 <img src="" alt="User Avatar">
             </div>
diff --git a/public/scripts/personas.js b/public/scripts/personas.js
index be50f1a58..624e4d78b 100644
--- a/public/scripts/personas.js
+++ b/public/scripts/personas.js
@@ -21,6 +21,13 @@ import { persona_description_positions, power_user } from './power-user.js';
 import { getTokenCount } from './tokenizers.js';
 import { debounce, delay, download, parseJsonFile } from './utils.js';
 
+const GRID_STORAGE_KEY = 'Personas_GridView';
+
+function switchPersonaGridView() {
+    const state = localStorage.getItem(GRID_STORAGE_KEY) === 'true';
+    $('#user_avatar_block').toggleClass('gridView', state);
+}
+
 /**
  * Uploads an avatar file to the server
  * @param {string} url URL for the avatar file
@@ -633,6 +640,11 @@ export function initPersonas() {
     $('#personas_backup').on('click', onBackupPersonas);
     $('#personas_restore').on('click', () => $('#personas_restore_input').trigger('click'));
     $('#personas_restore_input').on('change', onPersonasRestoreInput);
+    $('#persona_grid_toggle').on('click', () => {
+        const state = localStorage.getItem(GRID_STORAGE_KEY) === 'true';
+        localStorage.setItem(GRID_STORAGE_KEY, String(!state));
+        switchPersonaGridView();
+    });
 
     eventSource.on('charManagementDropdown', (target) => {
         if (target === 'convert_to_persona') {
@@ -640,4 +652,5 @@ export function initPersonas() {
         }
     });
     eventSource.on(event_types.CHAT_CHANGED, setChatLockedPersona);
+    switchPersonaGridView();
 }
diff --git a/public/style.css b/public/style.css
index 9c9339d28..0a1f24dea 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1586,10 +1586,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 /*applies to both groups and solos chars in the char list*/
-#rm_print_characters_block .ch_name {
+#rm_print_characters_block .ch_name,
+.avatar-container .ch_name {
     flex: 1;
     white-space: nowrap;
-    /* max-width: calc(100% - 29px); */
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
@@ -1828,6 +1828,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
     border-radius: 10px;
     cursor: pointer;
     margin-bottom: 1px;
+    width: 100%;
+    outline: 2px solid transparent;
+    border: 2px solid transparent;
 }
 
 grammarly-extension {
@@ -2272,7 +2275,7 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
 #user_avatar_block {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: space-around;
 }
 
 .avatar-container .avatar {
@@ -2284,11 +2287,6 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     outline: 2px solid transparent;
 }
 
-.avatar-container {
-    outline: 2px solid transparent;
-    border: 2px solid transparent;
-}
-
 .avatar-container.selected {
     border: 2px solid rgba(255, 255, 255, 0.7);
 }