Refactor persona panel with headings

82422b45002b1c93f153acecf904357dbd8e19e6

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 4322197aba621eb22dadbc0571a96add8176ae5b

public/index.html+32 -23 Viewed

                         </div>
                     </div>
                     <div id="persona-management-block" class="flex-container wide100p flexGap10">
                         <div class="persona_management_left_column flex1 overflowHidden wide100p">
                             <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>

                                 <input type="hidden" id="avatar_upload_overwrite" name="overwrite_name" value="">
                             </form>
                         </div>
                         <div class="persona_management_right_column flex1">
                             <h4div data-i18nclass="Namepersona_management_current_persona">Name</h4>
 -                            <div class="change_name">
 +                                <h4 class="standoutHeader" data-i18n="Current Persona">Current Persona</h4>
 -                                <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">
 +                                <h4 data-i18n="Name">Name</h4>
                                 </div class="change_name">
 -                                <div id="lock_user_name" class="menu_button fa-solid fa-unlock" title="Click to lock your selected persona to the current chat. Click again to remove the lock." data-i18n="[title]Click to lock your selected persona to the current chat. Click again to remove the lock.">
 +                                    <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>
 +                                    <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 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>
 +                                    <div id="lock_user_name" class="menu_button fa-solid fa-unlock" title="Click to lock your selected persona to the current chat. Click again to remove the lock." data-i18n="[title]Click to lock your selected persona to the current chat. Click again to remove the lock.">
 -                                <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="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>
 -                            </div>
++
 -                            <div>
                                 <h4 data-i18n="Persona Description">Persona Description</h4>
                                 <textarea id="persona_description" name="persona_description" data-i18n="[placeholder]Example: [{{user}} is a 28-year-old Romanian cat girl.]" placeholder="Example:&#10;[{{user}} is a 28-year-old Romanian cat girl.]" class="text_pole textarea_compact" value="" autocomplete="off" rows="8"></textarea>
                                 <div class="extension_token_counter">
                                     <span data-i18n="Tokens persona description">Tokens</span>: <span id="persona_description_token_count">0</span>
                                 </div>
                                                             </div>
++
 +                            <div class="persona_management_global_settings">
 +                                <h4 class="standoutHeader" data-i18n="Global Settings">Global Settings</h4>
++
 +                                <div class="persona_management_description_position_container">
                                     <label for="persona_description_position" data-i18n="Position:">Position:</label>
                                     <select id="persona_description_position">
                                         <option value="9" data-i18n="None (disabled)">None (disabled)</option>

                                         </div>
                                     </div>
                                 </div>
 -                            </div>
++
                                                             <div class="persona_management_show_notifications range-block">
                                                                     <label for="persona_show_notifications" class="checkbox_label">
                                                                             <input id="persona_show_notifications" type="checkbox" />
                                                                             <span data-i18n="Show notifications on switching personas">
                                                                                     Show notifications on switching personas
                                                                             </span>
                                                                     </label>
 +                                </div>
                             </div>
                         </div>
                     </div>