- added toggle for sheld width

- both nav panels conform to sheld width on change
- left nav now has a lock
- sheldWidth defaults to 800
- narrowed top_bar to match sheldWidth
- nav panels fill the vertical space where top_bar used to be
- removed bottom gap on wide screens for all large panels and popups
- reverted menu_button styles
- FastUI now changes send_form styling dynamically
- bg selector drawer width is now sheld-100px
- bg thumbnails display ay 160px width

public/index.html

@@ -175,7 +175,6 @@
                         <div class="online_status_text4">Not connected</div>
                     </div>
                 </div>
-
                 <div id="openai_api" style="display: none;position: relative;">
                     <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                         <h4>API key </h4>
@@ -197,7 +196,6 @@
                     </div>
                     <br>
                 </div>
-
                 <div id="poe_api">
                     <div class="inline-drawer">
                         <div class="inline-drawer-toggle inline-drawer-header">
@@ -297,6 +295,21 @@
                             </label>
                         </div>
                     </div>
+                    <div id="sheld-width" class="range-block" title="Adjust width of chat display on PCs and other wide screens">
+                        <div class="range-block-title">
+                            <h4>Chat Width (PC)</h4>
+                        </div>
+                        <div class="range-block-range">
+                            <label>
+                                <input name="sheld_width" type="radio" value="0" />
+                                800px
+                            </label>
+                            <label>
+                                <input name="sheld_width" type="radio" value="1" />
+                                1000px
+                            </label>
+                        </div>
+                    </div>
                 </div>
                 <div id="power-user-options-block">
                     <h3>Power User Options</h3>
@@ -321,9 +334,16 @@
 
         <div id="ai-config-button" class="drawer" style="z-index:3002;">
             <div class="drawer-toggle drawer-header">
-                <div class="drawer-icon icon-sliders closedIcon" title="AI Response Configuration"></div>
+                <div id="leftNavDrawerIcon" class="drawer-icon icon-sliders closedIcon" title="AI Response Configuration"></div>
             </div>
-            <div class="drawer-content fillLeft closedDrawer widthFreeExpand">
+            <div id="left-nav-panel" class="drawer-content fillLeft closedDrawer widthFreeExpand">
+                <div class="right_menu_button" id="lm_button_panel_pin_div" title="Locked = Character Management panel will stay open">
+                    <input type="checkbox" id="lm_button_panel_pin">
+                    <label for="lm_button_panel_pin">
+                        <img class="unchecked svg_icon" alt="" src="img/lock-open-solid.svg" />
+                        <img class="checked svg_icon" alt="" src="img/lock-solid.svg" />
+                    </label>
+                </div>
                 <div class="flex-container">
                     <div id="respective-presets-block" class="width100p">
                         <div id="kobold_api-presets">

public/scripts/RossAscends-mods.js

@@ -24,9 +24,11 @@ import { oai_settings } from "./openai.js";
 import { poe_settings } from "./poe.js";
 
 var NavToggle = document.getElementById("nav-toggle");
-var PanelPin = document.getElementById("rm_button_panel_pin");
+var RPanelPin = document.getElementById("rm_button_panel_pin");
+var LPanelPin = document.getElementById("lm_button_panel_pin");
 var SelectedCharacterTab = document.getElementById("rm_button_selected_ch");
 var RightNavPanel = document.getElementById("right-nav-panel");
+var LeftNavPanel = document.getElementById("left-nav-panel")
 var AdvancedCharDefsPopup = document.getElementById("character_popup");
 var ConfirmationPopup = document.getElementById("dialogue_popup");
 var AutoConnectCheckbox = document.getElementById("auto-connect-checkbox");
@@ -207,6 +209,7 @@ function RA_checkOnlineStatus() {
         if (online_status !== undefined && online_status !== "no_connection") {
             $("#send_textarea").attr("placeholder", "Type a message..."); //on connect, placeholder tells user to type message
             const formColor = power_user.fast_ui_mode ? "var(--black90a)" : "var(--black60a)";
+            /* console.log("RA-AC -- connected, coloring input as " + formColor); */
             $("#send_form").css("background-color", formColor); //on connect, form BG changes to transprent black
             $("#API-status-top").removeClass("redOverlayGlow");
             connection_made = true;
@@ -294,9 +297,9 @@ $("document").ready(function () {
     $("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); });
 
     //toggle pin class when lock toggle clicked
-    $(PanelPin).on("click", function () {
+    $(RPanelPin).on("click", function () {
-        SaveLocal("NavLockOn", $(PanelPin).prop("checked"));
+        SaveLocal("NavLockOn", $(RPanelPin).prop("checked"));
-        if ($(PanelPin).prop("checked") == true) {
+        if ($(RPanelPin).prop("checked") == true) {
             console.log('adding pin class to right nav');
             $(RightNavPanel).addClass('pinnedOpen');
         } else {
@@ -310,34 +313,82 @@ $("document").ready(function () {
             }
         }
     });
+    $(LPanelPin).on("click", function () {
+        SaveLocal("LNavLockOn", $(LPanelPin).prop("checked"));
+        if ($(LPanelPin).prop("checked") == true) {
+            console.log('adding pin class to Left nav');
+            $(LeftNavPanel).addClass('pinnedOpen');
+        } else {
+            console.log('removing pin class from Left nav');
+            $(LeftNavPanel).removeClass('pinnedOpen');
 
-    // read the state of Nav Lock and apply to rightnav classlist
+            if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
-    $(PanelPin).prop('checked', LoadLocalBool("NavLockOn"));
+                $(LeftNavPanel).slideToggle(200, "swing");
+                $(leftNavDrawerIcon).toggleClass('openIcon closedIcon');
+                $(LeftNavPanel).toggleClass('openDrawer closedDrawer');
+            }
+        }
+    });
+
+    // read the state of right Nav Lock and apply to rightnav classlist
+    $(RPanelPin).prop('checked', LoadLocalBool("NavLockOn"));
     if (LoadLocalBool("NavLockOn") == true) {
         //console.log('setting pin class via local var');
         $(RightNavPanel).addClass('pinnedOpen');
     }
-    if ($(PanelPin).prop('checked' == true)) {
+    if ($(RPanelPin).prop('checked' == true)) {
         console.log('setting pin class via checkbox state');
         $(RightNavPanel).addClass('pinnedOpen');
     }
+    // read the state of left Nav Lock and apply to leftnav classlist
+    $(LPanelPin).prop('checked', LoadLocalBool("LNavLockOn"));
+    if (LoadLocalBool("LNavLockOn") == true) {
+        //console.log('setting pin class via local var');
+        $(LeftNavPanel).addClass('pinnedOpen');
+    }
+    if ($(LPanelPin).prop('checked' == true)) {
+        console.log('setting pin class via checkbox state');
+        $(LeftNavPanel).addClass('pinnedOpen');
+    }
 
-    //save state of nav being open or closed
+    //save state of Right nav being open or closed
     $("#rightNavDrawerIcon").on("click", function () {
         if (!$("#rightNavDrawerIcon").hasClass('openIcon')) {
             SaveLocal('NavOpened', 'true');
         } else { SaveLocal('NavOpened', 'false'); }
     });
 
+    //save state of Left nav being open or closed
+    $("#leftNavDrawerIcon").on("click", function () {
+        if (!$("#leftNavDrawerIcon").hasClass('openIcon')) {
+            SaveLocal('LNavOpened', 'true');
+        } else { SaveLocal('LNavOpened', 'false'); }
+    });
+
+    //auto-open R nav if locked and previously open
+
     if (LoadLocalBool("NavLockOn") == true && LoadLocalBool("NavOpened") == true) {
+        console.log("RA -- clicking right nav to open");
         $("#rightNavDrawerIcon").click();
     } else {
-        console.log('didnt see reason to open nav on load: ' +
+        console.log('didnt see reason to open right nav on load: ' +
             LoadLocalBool("NavLockOn")
             + ' nav open pref' +
             LoadLocalBool("NavOpened" == true));
     }
 
+    //auto-open L nav if locked and previously open
+
+    if (LoadLocalBool("LNavLockOn") == true && LoadLocalBool("LNavOpened") == true) {
+        console.log("RA -- clicking left nav to open");
+        $("#leftNavDrawerIcon").click();
+    } else {
+        console.log('didnt see reason to open left nav on load: ' +
+            LoadLocalBool("LNavLockOn")
+            + ' L-nav open pref' +
+            LoadLocalBool("LNavOpened" == true));
+    }
+
     //save AutoConnect and AutoLoadChat prefs
     $(AutoConnectCheckbox).on("change", function () { SaveLocal("AutoConnectEnabled", $(AutoConnectCheckbox).prop("checked")); });
     $(AutoLoadChatCheckbox).on("change", function () { SaveLocal("AutoLoadChatEnabled", $(AutoLoadChatCheckbox).prop("checked")); });

public/scripts/power-user.js

@@ -16,6 +16,11 @@ const chat_styles = {
     BUBBLES: 1,
 }
 
+const sheld_width = {
+    DEFAULT: 0,
+    w1000px: 1,
+}
+
 let power_user = {
     collapse_newlines: false,
     force_pygmalion_formatting: false,
@@ -29,6 +34,7 @@ let power_user = {
     fast_ui_mode: true,
     avatar_style: avatar_styles.ROUND,
     chat_display: chat_styles.DEFAULT,
+    sheld_width: sheld_width.DEFAULT,
 };
 
 const storage_keys = {
@@ -43,7 +49,8 @@ const storage_keys = {
     fast_ui_mode: "TavernAI_fast_ui_mode",
     multigen: "TavernAI_multigen",
     avatar_style: "TavernAI_avatar_style",
-    chat_display: "TavernAI_chat_display"
+    chat_display: "TavernAI_chat_display",
+    sheld_width: "TavernAI_sheld_width"
 };
 
 function collapseNewlines(x) {
@@ -54,6 +61,7 @@ function switchUiMode() {
     const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
     $("body").toggleClass("no-blur", power_user.fast_ui_mode);
+    $("#send_form").toggleClass("no-blur-sendtextarea", power_user.fast_ui_mode);
 }
 
 function applyAvatarStyle() {
@@ -66,9 +74,21 @@ function applyChatDisplay() {
     $("body").toggleClass("bubblechat", power_user.chat_display === chat_styles.BUBBLES);
 }
 
+function applySheldWidth() {
+    power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? chat_styles.DEFAULT);
+    $("body").toggleClass("w1000px", power_user.sheld_width === sheld_width.w1000px);
+    let r = document.documentElement;
+    if (power_user.sheld_width === 1) {
+        r.style.setProperty('--sheldWidth', '1000px');
+    } else {
+        r.style.setProperty('--sheldWidth', '800px');
+    }
+}
+
 applyAvatarStyle();
 switchUiMode();
 applyChatDisplay();
+applySheldWidth();
 
 // TODO delete in next release
 function loadFromLocalStorage() {
@@ -97,6 +117,7 @@ function loadPowerUserSettings(settings) {
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
     power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
     power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
+    power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
 
     $("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
     $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@@ -110,6 +131,7 @@ function loadPowerUserSettings(settings) {
     $("#multigen").prop("checked", power_user.multigen);
     $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
     $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
+    $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
 }
 
 $(document).ready(() => {
@@ -149,7 +171,7 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
-    $("#custom_chat_separator").on('input', function() {
+    $("#custom_chat_separator").on('input', function () {
         power_user.custom_chat_separator = $(this).val();
         saveSettingsDebounced();
     });
@@ -177,4 +199,10 @@ $(document).ready(() => {
         localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
         applyChatDisplay();
     });
+    $(`input[name="sheld_width"]`).on('input', function (e) {
+        power_user.sheld_width = Number(e.target.value);
+        localStorage.setItem(storage_keys.sheld_width, power_user.sheld_width);
+        console.log("sheld width changing now");
+        applySheldWidth();
+    });
 });

public/style.css

@@ -33,9 +33,11 @@
     --greyCAIbg: rgb(36, 36, 37);
     --ivory: rgb(220, 220, 210);
 
-    --sheldWidth: 1000px;
+    --sheldWidth: 800px;
 }
 
+
+
 * {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
@@ -154,7 +156,10 @@ code {
 /*TOPPER margin*/
 
 #top-bar {
-    width: 100vw;
+    width: var(--sheldWidth);
+    margin: 0 auto;
+    left: 0;
+    right: 0;
     display: inline-block;
     height: 40px;
     position: fixed;
@@ -163,6 +168,7 @@ code {
     box-shadow: 0 2px 20px 0 var(--black70a);
     backdrop-filter: blur(10px);
     background-color: var(--black70a);
+    /* border-radius: 0 0 20px 20px; */
     -webkit-backdrop-filter: blur(10px);
     z-index: 3000;
 }
@@ -170,20 +176,20 @@ code {
 #sheld {
     display: grid;
     grid-template-rows: auto min-content;
-    height: calc(100svh - 40px);
+    height: calc(100svh - 42px);
     overflow-x: hidden;
-    max-width: var(--sheldWidth);
+    max-width: 800px;
     position: absolute;
     left: 0;
     right: 0;
-    top: 35px;
+    top: 41px;
     margin: 0 auto;
     z-index: 2;
 
 }
 
 #chat {
-    margin-top: 5px;
+    /* margin-top: 5px; */
     overflow-x: hidden;
     padding-bottom: 0;
     overflow-y: scroll;
@@ -205,7 +211,7 @@ code {
 #form_sheld {
     white-space: nowrap;
     width: 100%;
-    margin: 1px auto 10px auto;
+    margin: 1px auto 0 auto;
     z-index: 3;
 }
 
@@ -420,7 +426,8 @@ code {
 }
 
 #avatars-style .range-block-range,
-#chat-display .range-block-range {
+#chat-display .range-block-range,
+#sheld-width .range-block-range {
     display: flex;
     flex-direction: column;
 }
@@ -651,27 +658,33 @@ input[type="file"] {
 }
 
 
-#rm_button_panel_pin {
+#rm_button_panel_pin,
+#lm_button_panel_pin {
     display: none;
 }
 
-#rm_button_panel_pin:checked+label {
+#rm_button_panel_pin:checked+label,
+#lm_button_panel_pin:checked+label {
     display: block;
 }
 
-#rm_button_panel_pin:checked+label .checked {
+#rm_button_panel_pin:checked+label .checked,
+#lm_button_panel_pin:checked+label .checked {
     display: block;
 }
 
-#rm_button_panel_pin:checked+label .unchecked {
+#rm_button_panel_pin:checked+label .unchecked,
+#lm_button_panel_pin:checked+label .unchecked {
     display: none;
 }
 
-#rm_button_panel_pin:not(:checked)+label .checked {
+#rm_button_panel_pin:not(:checked)+label .checked,
+#lm_button_panel_pin:not(:checked)+label .checked {
     display: none;
 }
 
-#rm_button_panel_pin:not(:checked)+label .unchecked {
+#rm_button_panel_pin:not(:checked)+label .unchecked,
+#lm_button_panel_pin:not(:checked)+label .unchecked {
     display: block;
 }
 
@@ -787,10 +800,6 @@ img[src*="user-slash-solid.svg"] {
     display: block;
 }
 
-#api_button,
-#api_button_novel,
-#api_button_textgenerationwebui {}
-
 #textgenerationwebui_api pre {
     display: inline;
 }
@@ -922,9 +931,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-top: 5px;
     display: flex;
     flex-wrap: wrap;
-    width: 100%;
+    width: calc(var(--sheldWidth) - 100px);
-    max-width: 800px;
+    max-width: 100vw;
-    justify-content: center;
+    justify-content: space-evenly;
 }
 
 .bg_example {
@@ -1030,9 +1039,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
     position: relative;
 }
 
-#advanced_div {
-    /* width: 100%; */
-}
 
 #rm_characters_block .form_create_bottom_buttons_block {
     justify-content: space-evenly !important;
@@ -1189,12 +1195,12 @@ input[type=search]:focus::-webkit-search-cancel-button {
     background-color: var(--black50a);
     border: 1px solid var(--white30a);
     border-radius: 10px;
-    padding: 5px;
+    padding: 10px;
     width: min-content;
     cursor: pointer;
     margin: 10px 0;
     transition: 0.3s;
-    /* font-size: 15px; */
+    font-size: 15px;
 }
 
 .menu_button:hover {
@@ -1335,7 +1341,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     background-color: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(50px);
     -webkit-backdrop-filter: blur(50px);
-    max-width: 800px;
+    max-width: var(--sheldWidth);
     height: calc(100% - 40px);
     position: absolute;
     margin-left: auto;
@@ -1581,7 +1587,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) {
 }
 
 /* the checkbox starts with a size 0 background of a checkmark */
-input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin)::after {
+input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin)::after {
     content: '';
     color: var(--white100);
     position: absolute;
@@ -1602,15 +1608,13 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin)::after {
 }
 
 /* when the checkbox is checked, the background image is grown to normal size to fill the background of the 'checkbox'*/
-input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after {
+input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):checked::after {
     -webkit-transform: scale(1);
     transform: scale(1);
 }
 
 /*---------------------------------------------------------------------------------------------------------*/
 
-#title_api {}
-
 .option_select_right_menu {
     width: 284px;
     margin-bottom: 35px;
@@ -1924,8 +1928,8 @@ input[type="range"]::-webkit-slider-thumb {
     -webkit-backdrop-filter: blur(30px);
     grid-template-rows: 50px 100px 100px 100px auto;
     grid-gap: 10px;
-    max-width: 800px;
+    max-width: var(--sheldWidth);
-    height: calc(100vh - 50px);
+    height: calc(100vh - 40px);
     position: absolute;
     z-index: 3002;
     margin-left: auto;
@@ -2019,9 +2023,9 @@ input[type="range"]::-webkit-slider-thumb {
 #select_chat_popup {
     display: grid;
     grid-template-rows: auto auto;
-    max-width: 800px;
+    max-width: var(--sheldWidth);
     height: min-content;
-    max-height: calc(100vh - 55px);
+    max-height: calc(100vh - 40px);
     min-height: 100px;
     position: absolute;
     z-index: 2066;
@@ -2590,9 +2594,9 @@ a {
 #right-nav-panel {
     width: calc((100vw - var(--sheldWidth) - 2px) /2);
     /* min-width: 450px; */
-    height: calc(100vh - 55px);
+    height: 100vh;
     position: fixed;
-    top: 40px;
+    top: 0;
     margin: 0;
     right: 0;
     left: auto;
@@ -2654,14 +2658,6 @@ a {
     font-size: 2em;
 }
 
-/* this is what causes the panel movement */
-#nav-toggle:checked~#right-nav-panel {
-    /*     right: 0;
-    box-shadow: -5px 0 20px 0 var(--black70a); */
-    /*overflow-y: auto;*/
-}
-
-
 #right-nav-panel>div:not(#right-nav-panel-tabs) {
     height: calc(100% - 40px);
     overflow-y: auto;
@@ -2774,7 +2770,7 @@ label[for="extensions_autoconnect"] {
     margin: 0 auto;
     padding-top: 5px;
     height: 40px;
-    max-width: 800px;
+    max-width: var(--sheldWidth);
     color: white;
     justify-content: center;
     display: grid;
@@ -2915,26 +2911,27 @@ label[for="extensions_autoconnect"] {
     -webkit-backdrop-filter: blur(20px);
 }
 
-.fillRight, .fillLeft {
+.fillRight,
+.fillLeft {
     min-width: unset;
 }
 
-.fillLeft{
+.fillLeft {
     max-width: calc((100vw - var(--sheldWidth) - 2px) /2);
-    max-height: calc(100vh - 55px);
+    height: 100vh;
-    height: calc(100vh - 55px);
+    max-height: 100vh;
     position: fixed;
-    top: 40px;
+    top: 0;
     margin: 0;
     left: 0;
     right: auto;
-    padding: 0 10px;
+    padding: 10px 10px 0 10px;
     border-radius: 0 0 20px 0;
     box-shadow: none;
 }
 
 .width100p {
-    width:100%;
+    width: 100%;
 }
 
 .drawer-content .text_pole {
@@ -3085,7 +3082,7 @@ label[for="extensions_autoconnect"] {
     #character_popup,
     #world_popup {
         /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
-        height: calc(100svh - 55px);
+        height: calc(100svh - 40px);
         width: calc(100vw - 10px);
         margin: 0 auto;
         margin-left: 5px;
@@ -3194,7 +3191,7 @@ label[for="extensions_autoconnect"] {
 /*bubble chat style*/
 
 body.bubblechat #chat {
-    margin-top: 5px;
+    /* margin-top: 5px; */
     overflow-x: hidden;
     padding-bottom: 0;
     overflow-y: scroll;
@@ -3204,7 +3201,7 @@ body.bubblechat #chat {
     scrollbar-width: thin;
     transition: all 1s ease-in-out;
     flex-direction: column;
-    border-radius: 20px;
+    /* border-radius: 20px; */
     z-index: 3;
     border: none;
     backdrop-filter: unset;
@@ -3249,12 +3246,20 @@ body.bubblechat ::-webkit-scrollbar-thumb {
     border-radius: 5px;
 }
 
+body.w1000px #sheld {
+    max-width: 1000px !important;
+}
+
 /*FastUI blur removal*/
 
 body.no-blur * {
     backdrop-filter: unset !important;
 }
 
+#send_form.no-blur-sendtextarea {
+    background-color: var(--black90a) !important;
+}
+
 body.no-blur #bg1,
 body.no-blur #bg2 {
     filter: unset;