Refactor right menus

2025-06-05 21:59:27 +02:00 · 2023-03-16 22:51:18 +02:00
parent 4225f217d0
commit 4ce7fa59be
5 changed files with 152 additions and 143 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -244,8 +244,7 @@
    <div id="shadow_select_chat_popup">
        <div id="select_chat_popup">
            <div id="select_chat_popup_text">
-                <img id="select_chat_cross" src="img/cross.png"
-                    style="position: absolute; right: 15px; top:14px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
+                <img id="select_chat_cross" src="img/cross.png" alt="Close">

            </div>
            <div id="select_chat_import"> <!-- import chat popup header -->
@@ -321,8 +320,15 @@

    <nav id="right-nav-panel">
        <div id="right-nav-panel-tabs">
-            <div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">&#x1F464;</div>
-            <div class="right_menu_button" id="rm_button_settings" title="API and AI Settings">⚙️</div>
+            <div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">
+                <img alt="" src="img/id-card-regular.svg" />
+            </div>
+            <div class="right_menu_button" id="rm_button_settings" title="API and AI Settings">
+                <img alt="" src="img/gear-solid.svg" />
+            </div>
+            <div class="right_menu_button" id="rm_button_extensions" title="Extensions">
+                <img alt="" src="img/cubes-solid.svg" />
+            </div>
            <div class="right_menu_button" id="rm_button_selected_ch">
                <h2></h2>
            </div>
@@ -419,12 +425,12 @@
            <div id="group_member_template">
                <div class="group_member">
                    <div class="avatar">
-                        <img src="" />
+                        <img alt="Avatar" src="" />
                    </div>
                    <div class="ch_name"></div>
                    <div class="group_member_icon">
-                        <img class="minus" src="img/minus-solid.svg">
-                        <img class="plus" src="img/plus-solid.svg">
+                        <img alt="Remove" class="minus" src="img/minus-solid.svg">
+                        <img alt="Add" class="plus" src="img/plus-solid.svg">
                    </div>
                </div>
            </div>
@@ -466,7 +472,7 @@
                <div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
                    <div class="API-logo">
                        <a href="https://github.com/KoboldAI/KoboldAI-Client" target="_blank">
-                            <img src="img/kobold.png" style="width:40px;height:40px;">
+                            <img alt="KoboldAI Logo" src="img/kobold.png" style="width:40px;height:40px;">
                        </a>
                    </div>
                    <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
@@ -746,9 +752,10 @@
                    </label>
                </div>
            </div>
+        </div>

+        <div id="rm_extensions_block" class="right_menu">
            <div class="extensions_block">
-                <hr>
                <h3>Extensions: <a target="_blank" href="https://github.com/SillyLossy/TavernAI-extras">TavernAI-extras</a></h3>
                <input id="extensions_url" type="text" class="text_pole" />
                <div class="extensions_url_block">
@@ -836,12 +843,22 @@
                <div id="options_button">
                    <div id="options">
                        <div class="options-content">
-                            <a id="option_start_new_chat"><img src="img/save_and_start_new_chat.png"><span>Start new
-                                    chat</span></a>
-                            <a id="option_select_chat"><img src="img/book6.png"><span>View Past Chats</span></a>
+                            <a id="option_start_new_chat">
+                                <img alt="" src="img/save_and_start_new_chat.png">
+                                <span>Start new chat</span></a>
+                            <a id="option_select_chat">
+                                <img alt="" src="img/book6.png">
+                                <span>View Past Chats</span>
+                            </a>
                            <hr>
-                            <a id="option_delete_mes"><img src="img/del_mes.png"><span>Delete messages</span></a>
-                            <a id="option_regenerate"><img src="img/regenerate.png"><span>Regenerate</span></a>
+                            <a id="option_delete_mes">
+                                <img alt="" src="img/del_mes.png">
+                                <span>Delete messages</span>
+                            </a>
+                            <a id="option_regenerate">
+                                <img alt="" src="img/regenerate.png">
+                                <span>Regenerate</span>
+                            </a>
                        </div>
                    </div>
                </div>
--- a/public/script.js
+++ b/public/script.js
@@ -51,6 +51,8 @@ export {
    setCharacterName,
    setEditedMessageId,
    setSendButtonState,
+    selectRightMenuWithAnimation,
+    setRightTabSelectedClass,
    chat,
    this_chid,
    settings,
@@ -2486,18 +2488,45 @@ function compareVersions(v1, v2) {
    return 0;
 }

+function selectRightMenuWithAnimation(selectedMenuId) {
+    const displayModes = {
+        'rm_info_block': 'flex',
+        'rm_group_chats_block': 'flex',
+        'rm_api_block': 'grid',
+    };
+    document.querySelectorAll('#right-nav-panel .right_menu').forEach((menu) => {
+        $(menu).css('display', 'none');
+
+        if (selectedMenuId && selectedMenuId.replace('#', '') === menu.id) {
+            const mode = displayModes[menu.id] ?? 'block';
+            $(menu).css('display', mode);
+            $(menu).css("opacity", 0.0);
+            $(menu).transition({
+                opacity: 1.0,
+                duration: animation_rm_duration,
+                easing: animation_rm_easing,
+                complete: function () { },
+            });
+        }
+    })
+}
+
+function setRightTabSelectedClass(selectedButtonId) {
+    document.querySelectorAll('#right-nav-panel-tabs .right_menu_button').forEach((button) => {
+        button.classList.remove('selected-right-tab');
+        
+        if (selectedButtonId && selectedButtonId.replace('#', '') === button.id) {
+            button.classList.add('selected-right-tab');
+        }
+    });
+}
+
 function select_rm_info(text, charId = null) {
-    $("#rm_characters_block").css("display", "none");
-    $("#rm_api_block").css("display", "none");
-    $("#rm_ch_create_block").css("display", "none");
-    $("#rm_group_chats_block").css("display", "none");
-    $("#rm_info_block").css("display", "flex");

    $("#rm_info_text").html("<h3>" + text + "</h3>");

-    $("#rm_button_characters").css("class", "deselected-right-tab");
-    $("#rm_button_settings").css("class", "deselected-right-tab");
-    $("#rm_button_selected_ch").css("class", "deselected-right-tab");
+    selectRightMenuWithAnimation('rm_info_block');
+    setRightTabSelectedClass();

    prev_selected_char = charId;
 }
@@ -2509,7 +2538,7 @@ function select_selected_character(chid) {
    menu_type = "character_edit";
    $("#delete_button").css("display", "block");
    $("#export_button").css("display", "block");
-    $("#rm_button_selected_ch").css("class", "selected-right-tab");
+    setRightTabSelectedClass('rm_button_selected_ch');
    var display_name = characters[chid].name;

    $("#rm_button_selected_ch").children("h2").text(display_name);
@@ -2519,15 +2548,8 @@ function select_selected_character(chid) {
    //$("#character_import_button").css("display", "none");
    $("#create_button").attr("value", "Save");
    $("#create_button").css("display", "none");
-    var i = 0;
-    while ($("#rm_button_selected_ch").width() > 170 && i < 100) {
-        display_name = display_name.slice(0, display_name.length - 2);
-        //console.log(display_name);
-        $("#rm_button_selected_ch")
-            .children("h2")
-            .text($.trim(display_name) + "...");
-        i++;
-    }
+
+    $("#rm_button_selected_ch").children("h2").text(display_name);
    $("#add_avatar_button").val("");

    $("#character_popup_text_h3").text(characters[chid].name);
@@ -2571,19 +2593,8 @@ function select_rm_create() {
        }
    }

-    $("#rm_characters_block").css("display", "none");
-    $("#rm_api_block").css("display", "none");
-    $("#rm_ch_create_block").css("display", "block");
-    $("#rm_group_chats_block").css("display", "none");
-
-    $("#rm_ch_create_block").css("opacity", 0.0);
-    $("#rm_ch_create_block").transition({
-        opacity: 1.0,
-        duration: animation_rm_duration,
-        easing: animation_rm_easing,
-        complete: function () { },
-    });
-    $("#rm_info_block").css("display", "none");
+    selectRightMenuWithAnimation('rm_ch_create_block');
+    setRightTabSelectedClass();

    $("#delete_button_div").css("display", "none");
    $("#delete_button").css("display", "none");
@@ -2592,9 +2603,6 @@ function select_rm_create() {
    $("#create_button").attr("value", "Create");
    //RossAscends: commented this out as part of the auto-loading token counter
    //$('#result_info').html('&nbsp;');
-    $("#rm_button_characters").css("class", "deselected-right-tab");
-    $("#rm_button_settings").css("class", "deselected-right-tab");
-    $("#rm_button_selected_ch").css("class", "deselected-right-tab");

    //create text poles
    $("#rm_button_back").css("display", "inline-block");
@@ -2619,8 +2627,6 @@ function select_rm_create() {
 }

 function select_rm_characters() {
-    /* QuickRefresh(true); */
-
    if (prev_selected_char) {
        let newChId = characters.findIndex((x) => x.name == prev_selected_char);
        $(`.character_select[chid="${newChId}"]`).trigger("click");
@@ -2628,23 +2634,8 @@ function select_rm_characters() {
    }

    menu_type = "characters";
-    $("#rm_characters_block").css("display", "block");
-    $("#rm_characters_block").css("opacity", 0.0);
-    $("#rm_characters_block").transition({
-        opacity: 1.0,
-        duration: animation_rm_duration,
-        easing: animation_rm_easing,
-        complete: function () { },
-    });
-
-    $("#rm_api_block").css("display", "none");
-    $("#rm_ch_create_block").css("display", "none");
-    $("#rm_info_block").css("display", "none");
-    $("#rm_group_chats_block").css("display", "none");
-
-    $("#rm_button_characters").css("class", "selected-right-tab");
-    $("#rm_button_settings").css("class", "deselected-right-tab");
-    $("#rm_button_selected_ch").css("class", "deselected-right-tab");
+    selectRightMenuWithAnimation('rm_characters_block');
+    setRightTabSelectedClass('rm_button_characters');
 }

 function setExtensionPrompt(key, value) {
@@ -2820,48 +2811,13 @@ $(document).ready(function () {
        }
    });

-    /*     //RossAscends: Additional hotkeys
-      document.addEventListener('keydown', (event) => {
-  
-          if (event.ctrlKey && event.key == "Enter") {				// Ctrl+Enter for Regeneration Last Response
-  
-              if (is_send_press == false) {
-                  is_send_press = true;
-                  Generate('regenerate');
-              }
-          } else if (event.ctrlKey && event.key == "ArrowUp") {		//Ctrl+UpArrow for Connect to last server
-  
-              document.getElementById('api_button').click();
-  
-          }
-      }); */
-
    //menu buttons setup
-    var selected_button_style = {};
-    var deselected_button_style = {};
-
-    $("#rm_button_create").css("class", "deselected-right-tab");
-    $("#rm_button_characters").css("class", "deselected-right-tab");

    $("#rm_button_settings").click(function () {
        selected_button = "settings";
        menu_type = "settings";
-        $("#rm_characters_block").css("display", "none");
-        $("#rm_api_block").css("display", "grid");
-        $("#rm_api_block").css("opacity", 0.0);
-        $("#rm_api_block").transition({
-            opacity: 1.0,
-            duration: animation_rm_duration,
-            easing: animation_rm_easing,
-            complete: function () { },
-        });
-
-        $("#rm_ch_create_block").css("display", "none");
-        $("#rm_info_block").css("display", "none");
-        $("#rm_group_chats_block").css("display", "none");
-        $("#rm_button_characters").css("class", "deselected-right-tab");
-        $("#rm_button_settings").css("class", "selected-right-tab");
-        $("#rm_button_selected_ch").css("class", "deselected-right-tab");
+        selectRightMenuWithAnimation('rm_api_block');
+        setRightTabSelectedClass('rm_button_settings');
    });
    $("#rm_button_characters").click(function () {
        selected_button = "characters";
@@ -3106,10 +3062,7 @@ $(document).ready(function () {
                    characters.length = 0; // resets the characters array, forcing getcharacters to reset
                    name2 = systemUserName; // replaces deleted charcter name with system user since she will be displayed next.
                    chat = [...safetychat]; // sets up system user to tell user about having deleted a character
-                    $(document.getElementById("rm_button_selected_ch")).css(
-                        "class",
-                        "deselected-right-tab"
-                    ); // 'deselects' character's tab panel
+                    setRightTabSelectedClass() // 'deselects' character's tab panel
                    $(document.getElementById("rm_button_selected_ch"))
                        .children("h2")
                        .text(""); // removes character name from nav tabs
@@ -4066,6 +4019,13 @@ $(document).ready(function () {
        select_rm_characters();
    });

+    $("#rm_button_extensions").click(function () {
+        menu_type = 'extennsions';
+        selected_button = 'extensions';
+        setRightTabSelectedClass('rm_button_extensions');
+        selectRightMenuWithAnimation('rm_extensions_block');
+    });
+
    $(document).on("click", ".select_chat_block", function () {
        let file_name = $(this).attr("file_name").replace(".jsonl", "");
        //console.log(characters[this_chid]['chat']);
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -301,6 +301,9 @@ $("document").ready(function () {
 		//SaveLocal('ActiveChar',this_chid);
 		SaveLocal('SelectedNavTab','rm_button_selected_ch');
 	});
+    $("#rm_button_extensions").click(function() {
+		SaveLocal('SelectedNavTab','rm_button_extensions');
+    });
 	$("#rm_button_characters").click( function () {			//if char list is clicked, in addition to saving it...
 		SaveLocal('SelectedNavTab','rm_button_characters');
 		characters.sort(Intl.Collator().compare);			// we sort the list	
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -29,6 +29,8 @@ import {
    system_message_types,
    online_status,
    talkativeness_default,
+    selectRightMenuWithAnimation,
+    setRightTabSelectedClass,
 } from "../script.js";

 export {
@@ -442,17 +444,8 @@ function select_group_chats(chat_id) {
        }
    });
    $("#rm_group_filter").val("").trigger("input");
-    $("#rm_group_chats_block").css("display", "flex");
-    $("#rm_group_chats_block").css("opacity", 0.0);
-    $("#rm_group_chats_block").transition({
-        opacity: 1.0,
-        duration: 200,
-        easing: '',
-        complete: function () { },
-    });

-    $("#rm_ch_create_block").css("display", "none");
-    $("#rm_characters_block").css("display", "none");
+    selectRightMenuWithAnimation('rm_group_chats_block')

    async function memberClickHandler(event) {
        event.stopPropagation();
@@ -539,8 +532,8 @@ function select_group_chats(chat_id) {

    // top bar
    if (group) {
-        $("#rm_button_selected_ch").children("h2").css({});
        $("#rm_button_selected_ch").children("h2").text("");
+        setRightTabSelectedClass();
    }
 }

--- a/public/style.css
+++ b/public/style.css
@@ -491,7 +491,7 @@ textarea {


 .right_menu {
-    max-height: 90vh;
+    max-height: calc(100% - 60px);
    padding: 0 20px;
 }

@@ -532,6 +532,8 @@ input[type=submit] {}
    width: calc(100% - 70px);
    margin-left: 20px;
    margin-right: 30px;
+    display: flex;
+    align-items: flex-start;
 }

 /* ##################################################################### */
@@ -555,13 +557,6 @@ input[type=submit] {}
    filter: brightness(150%) grayscale(1);
 }

-#rm_button_panel_pin_div {
-    height: 20px;
-    width: 20px;
-    margin-top: 0;
-    margin-right: 0;
-    float: right;
-}

 #rm_button_panel_pin {
    padding: 0;
@@ -572,35 +567,50 @@ input[type=submit] {}
    z-index: 3001;
 }

+#rm_button_panel_pin_div {
+    width: 26px;
+    height: 26px;
+}
+
 #rm_button_panel_pin:hover::after {
-    filter: grayscale(1) brightness(150%);
+    filter: invert(1) brightness(150%);
 }

 #rm_button_panel_pin::after {
-    content: '\01F513';
+    content: ' ';
+    transform: translateY(-100%);
+    background-repeat: no-repeat;
+    background-position: center;
    position: absolute;
-    filter: grayscale(1);
-    line-height: 20px;
-    font-size: 15px;
+    display: block;
    padding: 0;
-    text-align: center;
-    vertical-align: middle;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-top: -25px;
-    margin-left: 0;
+    margin: 0;
+    background-image: url('/img/lock-open-solid.svg');
+    filter: invert(1);
+    width: 26px;
+    height: 26px;
    -webkit-transition: all 0.275s;
    transition: all 0.275s;
 }

 #rm_button_panel_pin:checked::after {
-    content: '\01F512';
-    /*closed lock emoji*/
-    line-height: 20px;
-    font-size: 15px;
+    background-image: url('/img/lock-solid.svg');
 }

+#rm_button_selected_ch {
+    flex: 1;
+    overflow: hidden;
+}
+
+#rm_button_selected_ch h2 {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+}
+
+.selected-right-tab {
+    filter: brightness(200%);
+}

 /* ####################################################################### */

@@ -623,6 +633,11 @@ input[type=submit] {}
    overflow-y: auto;
 }

+#rm_extensions_block {
+    display: none;
+    overflow-y: auto;
+}
+
 /* ################################################################*/
 /*   CUSTOMIZE THE DROPDOWN SELECT COLORS FOR RIGHT MENU
 /*#################################################################*/
@@ -707,6 +722,7 @@ select option:not(:checked) {

 #rm_characters_block {
    display: block;
+    overflow-y: auto;
    /* visibility: hidden; */
 }

@@ -777,6 +793,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
    margin-left: 10px;
    margin-top: 5px;
    transform: translateY(25%);
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

 .character_select:hover {
@@ -1988,6 +2006,16 @@ input[type="range"] {
 	width:30px;*/
 }

+#select_chat_cross {
+    position: absolute;
+    right: 15px;
+    top:14px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
 #advanced_book_logo {
    width: 35px;
    height: 35px;
@@ -2148,6 +2176,9 @@ input[type="range"] {
 .group_member .ch_name {
    flex-grow: 1;
    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - 110px);
 }

 .group_member:hover {
@@ -2398,6 +2429,11 @@ h2 {
    font-size: 1.25rem;
 }

+.right_menu_button img {
+    filter: invert(1);
+    height: 26px;
+}
+
 a {
    color: orange;
    text-decoration: none;