From 2344d98e203f324e0e630ef3daa8c762c3bfc875 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmail.com>
Date: Tue, 28 Jan 2025 20:53:55 +0100
Subject: [PATCH] Move persona buttons to right panel

- Move all buttons from the persona list to the right panel, to the already existing ones
- Common CSS class/style for '.buttons_block'
- Common CSS style for a red button
- Refactored a few persona buttons' functionalities
---
 public/index.html          | 32 +++++++++++---------
 public/script.js           |  4 +--
 public/scripts/personas.js | 62 +++++++++++++++-----------------------
 public/style.css           | 33 ++++++++++----------
 4 files changed, 60 insertions(+), 71 deletions(-)

diff --git a/public/index.html b/public/index.html
index 07392c5c7..b3d1ed1f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4957,14 +4957,16 @@
                             <div class="persona_management_current_persona">
                                 <h4 class="standoutHeader" data-i18n="Current Persona">Current Persona</h4>
 
-                                <h4 data-i18n="Name">Name</h4>
-                                <div class="change_name">
-                                    <input id="your_name" name="your_name" data-i18n="[placeholder]Enter your name" placeholder="Enter your name" class="text_pole wide100p" value="" autocomplete="off">
-                                    <div id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name" data-i18n="[title]Click to set a new User Name">
-                                    </div>
-                                    <div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages">
-                                    </div>
-                                    <div id="persona_lore_button" class="menu_button fa-solid fa-globe" title="Persona Lore&#10;Alt+Click to open the lorebook" data-i18n="[title]Persona Lore Alt+Click to open the lorebook">
+                                <div id="persona_controls" class="flex-container">
+                                    <h5 id="your_name" class="persona_name">[Persona Name]</h5>
+                                    <div class="persona_controls_buttons_block buttons_block">
+                                        <div id="persona_rename_button" class="menu_button fa-solid fa-pencil" title="Rename Persona / Bind Name To Avatar" data-i18n="[title]Rename Persona / Bind Name To Avatar"></div>
+                                        <div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages"></div>
+                                        <div id="persona_lore_button" class="menu_button fa-solid fa-globe" title="Persona Lore&#10;Alt+Click to open the lorebook" data-i18n="[title]Persona Lore Alt+Click to open the lorebook"></div>
+
+                                        <div id="persona_set_image_button" class="menu_button fa-solid fa-image" title="Change Persona Image" data-i18n="[title]Change Persona Image"></div>
+                                        <div id="persona_duplicate_button" class="menu_button fa-solid fa-clone" title="Duplicate Persona" data-i18n="[title]Duplicate Persona"></div>
+                                        <div id="persona_delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Persona" data-i18n="[title]Delete Persona"></div>
                                     </div>
                                 </div>
 
@@ -5109,13 +5111,13 @@
                                 </div>
                             </div>
                             <div class="flex-container flexFlowColumn expander flexNoGap">
-                                <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
+                                <div id="avatar_div" class="avatar_div buttons_block alignitemsflexstart justifySpaceBetween flexnowrap">
                                     <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
                                         <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                         <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
                                     </label>
                                     <div class="flex-container" id="avatar_controls">
-                                        <div class="form_create_bottom_buttons_block">
+                                        <div class="form_create_bottom_buttons_block buttons_block">
                                             <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
                                             <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
                                             <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
@@ -5131,7 +5133,7 @@
                                             <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
                                                 <input type="submit" id="create_button" name="create_button">
                                             </label>
-                                            <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
+                                            <div id="delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Character" data-i18n="[title]Delete Character"></div>
                                         </div>
                                         <label class="flex1 height100p" for="char-management-dropdown">
                                             <select id="char-management-dropdown" class="text_pole">
@@ -5469,23 +5471,23 @@
                     <div class="wide100p character_name_block">
                         <span class="ch_name flex1"></span>
                         <div class="avatar-buttons">
-                            <button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
+                            <!-- <button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
                                 <i class="fa-fw fa-solid fa-user-edit fa-sm"></i>
                             </button>
                             <button class="menu_button set_persona_image" title="Change persona image" data-i18n="[title]Change persona image">
                                 <i class="fa-fw fa-solid fa-image fa-sm"></i>
                             </button>
-                            <!--
+
                             <button class="menu_button set_default_persona" title="Select this as default persona for the new chats." data-i18n="[title]Select this as default persona for the new chats.">
                                 <i class="fa-fw fa-solid fa-crown fa-sm"></i>
                             </button>
-                            -->
+
                             <button class="menu_button duplicate_persona" title="Duplicate persona" data-i18n="[title]Duplicate persona">
                                 <i class="fa-fw fa-solid fa-clone fa-sm"></i>
                             </button>
                             <button class="menu_button delete_avatar" title="Delete persona" data-i18n="[title]Delete persona">
                                 <i class="fa-fw fa-solid fa-trash-alt fa-sm"></i>
-                            </button>
+                            </button> -->
                         </div>
                     </div>
                     <div class="ch_description"></div>
diff --git a/public/script.js b/public/script.js
index 701079384..512185aa4 100644
--- a/public/script.js
+++ b/public/script.js
@@ -6810,7 +6810,7 @@ export function setUserName(value, { toastPersonaNameChange = true } = {}) {
     if (name1 === undefined || name1 == '')
         name1 = default_user_name;
     console.log(`User name changed to ${name1}`);
-    $('#your_name').val(name1);
+    $('#your_name').text(name1);
     if (toastPersonaNameChange && power_user.persona_show_notifications) {
         toastr.success(t`Your messages will now be sent as ${name1}`, t`Persona Changed`);
     }
@@ -6864,7 +6864,7 @@ export async function getSettings() {
         settings = JSON.parse(data.settings);
         if (settings.username !== undefined && settings.username !== '') {
             name1 = settings.username;
-            $('#your_name').val(name1);
+            $('#your_name').text(name1);
         }
 
         await setUserControls(data.enable_accounts);
diff --git a/public/scripts/personas.js b/public/scripts/personas.js
index 1ec9b5e77..7afb3ef0c 100644
--- a/public/scripts/personas.js
+++ b/public/scripts/personas.js
@@ -466,6 +466,8 @@ const countPersonaDescriptionTokens = debounce(async () => {
 }, debounce_timeout.relaxed);
 
 export function setPersonaDescription() {
+    $('#your_name').text(name1);
+
     if (power_user.persona_description_position === persona_description_positions.AFTER_CHAR) {
         power_user.persona_description_position = persona_description_positions.IN_PROMPT;
     }
@@ -674,9 +676,8 @@ async function updatePersonaNameIfExists(avatarId, newName) {
     saveSettingsDebounced();
 }
 
-async function bindUserNameToPersona(e) {
-    e?.stopPropagation();
-    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
+async function bindUserNameToPersona() {
+    const avatarId = user_avatar;
 
     if (!avatarId) {
         console.warn('No avatar id found');
@@ -719,6 +720,7 @@ async function bindUserNameToPersona(e) {
         if (isCurrentPersona) {
             console.log(`Auto-updating user name to ${personaName}`);
             setUserName(personaName);
+            await updatePersonaNameIfExists(user_avatar, personaName);
         }
     } else {
         // If the user clicked ok, but didn't enter a name, delete the persona
@@ -730,6 +732,8 @@ async function bindUserNameToPersona(e) {
     saveSettingsDebounced();
     await getUserAvatars(true, avatarId);
     setPersonaDescription();
+
+    retriggerFirstMessageOnEmptyChat();
 }
 
 function selectCurrentPersona({ toastPersonaNameChange = true } = {}) {
@@ -969,22 +973,15 @@ async function lockPersona(type = 'chat') {
 }
 
 
-async function deleteUserAvatar(e) {
-    e?.stopPropagation();
-    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
+async function deleteUserAvatar() {
+    const avatarId = user_avatar;
 
     if (!avatarId) {
         console.warn('No avatar id found');
         return;
     }
-
-    if (avatarId == user_avatar) {
-        console.warn(`User tried to delete their current avatar ${avatarId}`);
-        toastr.warning(t`You cannot delete the avatar you are currently using`, t`Persona Warning`);
-        return;
-    }
-
-    const confirm = await Popup.show.confirm(t`Are you sure you want to delete this avatar?`, t`All information associated with its linked persona will be lost.`);
+    const confirm = await Popup.show.confirm(t`Delete Persona`,
+        t`Are you sure you want to delete this avatar?` + '<br />' + t`All information associated with its linked persona will be lost.`);
 
     if (!confirm) {
         console.debug('User cancelled deleting avatar');
@@ -1016,8 +1013,9 @@ async function deleteUserAvatar(e) {
         }
 
         saveSettingsDebounced();
-        await getUserAvatars();
-        updatePersonaLockIcons();
+
+        // Use the existing mechanism to re-render the persona list and choose the next persona here
+        await loadPersonaForCurrentChat({ doRender: true });
     }
 }
 
@@ -1237,9 +1235,9 @@ function updatePersonaLockIcons() {
     $('#lock_persona_to_char i.icon').toggleClass('fa-unlock', !hasCharLock);
 }
 
-async function loadPersonaForCurrentChat() {
+async function loadPersonaForCurrentChat({ doRender = false } = {}) {
     // Cache persona list to check if they exist
-    const userAvatars = await getUserAvatars(false);
+    const userAvatars = await getUserAvatars(doRender);
 
     // Define a persona for this chat
     let chatPersona = '';
@@ -1500,9 +1498,8 @@ async function duplicatePersona(avatarId) {
 }
 
 export function initPersonas() {
-    $(document).on('click', '.bind_user_name', bindUserNameToPersona);
     $(document).on('click', '.set_default_persona', toggleDefaultPersonaClicked);
-    $(document).on('click', '.delete_avatar', deleteUserAvatar);
+    $('#persona_delete_button').on('click', deleteUserAvatar);
     $('#lock_persona_default').on('click', () => togglePersonaLock('default'));
     $('#lock_user_name').on('click', () => togglePersonaLock('chat'));
     $('#lock_persona_to_char').on('click', () => togglePersonaLock('character'));
@@ -1548,11 +1545,13 @@ export function initPersonas() {
         retriggerFirstMessageOnEmptyChat();
     });
 
-    $('#your_name_button').click(async function () {
+    $('#persona_rename_button').click(async function () {
         const userName = String($('#your_name').val()).trim();
         setUserName(userName);
         await updatePersonaNameIfExists(user_avatar, userName);
         retriggerFirstMessageOnEmptyChat();
+        // TODO: Do both binding and/or rename?
+        //bindUserNameToPersona();
     });
 
     $(document).on('click', '#user_avatar_block .avatar_upload', function () {
@@ -1560,28 +1559,15 @@ export function initPersonas() {
         $('#avatar_upload_file').trigger('click');
     });
 
-    $(document).on('click', '#user_avatar_block .duplicate_persona', function (e) {
-        e.stopPropagation();
-        const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
+    $('#persona_duplicate_button').on('click', () => duplicatePersona(user_avatar));
 
-        if (!avatarId) {
+    $('#persona_set_image_button').on('click', function () {
+        if (!user_avatar) {
             console.log('no imgfile');
             return;
         }
 
-        duplicatePersona(avatarId);
-    });
-
-    $(document).on('click', '#user_avatar_block .set_persona_image', function (e) {
-        e.stopPropagation();
-        const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
-
-        if (!avatarId) {
-            console.log('no imgfile');
-            return;
-        }
-
-        $('#avatar_upload_overwrite').val(avatarId);
+        $('#avatar_upload_overwrite').val(user_avatar);
         $('#avatar_upload_file').trigger('click');
     });
 
diff --git a/public/style.css b/public/style.css
index 0f9bcacb1..bba18ed6a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2919,6 +2919,16 @@ select option:not(:checked) {
     filter: grayscale(0.5);
 }
 
+#persona_controls .persona_name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    white-space: nowrap;
+    margin-right: 10px;
+    font-size: calc(var(--mainFontSize) * 1.25);
+    color: var(--grey50);
+}
+
 input[type=search]::-webkit-search-cancel-button {
     -webkit-appearance: none;
     height: 1em;
@@ -3395,12 +3405,7 @@ grammarly-extension {
     cursor: pointer;
 }
 
-#rm_characters_block .form_create_bottom_buttons_block {
-    justify-content: space-evenly !important;
-    flex-grow: 0;
-}
-
-.form_create_bottom_buttons_block {
+.buttons_block {
     display: flex;
     flex: 1;
     gap: 5px;
@@ -3409,18 +3414,21 @@ grammarly-extension {
     flex-wrap: wrap;
 }
 
-.form_create_bottom_buttons_block .menu_button {
+.buttons_block .menu_button {
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 5px;
+    margin: 0;
+    filter: grayscale(0.5);
 }
 
-#delete_button,
+.red_button,
 .redWarningBG {
     background-color: var(--crimson70a) !important;
 }
 
-#delete_button:hover,
+.red_button:hover,
 .redWarningBG:hover {
     background-color: var(--fullred) !important;
 }
@@ -3614,13 +3622,6 @@ grammarly-extension {
     min-width: calc(1.25em + 12px);
 }
 
-.avatar_div .menu_button,
-.form_create_bottom_buttons_block .menu_button {
-    padding: 5px;
-    margin: 0;
-    filter: grayscale(0.5);
-}
-
 .menu_button:hover,
 .menu_button.active {
     background-color: var(--white30a);