added toggle for movingUI

public/index.html

@@ -1209,6 +1209,10 @@
                                     <input id="waifuMode" type="checkbox" />
                                     ♡ Waifu Mode ♡
                                 </label>
+                                <label for="movingUImode" class="checkbox_label">
+                                    <input id="movingUImode" type="checkbox" />
+                                    Movable UI Panels
+                                </label>
                             </div>
                         </div>
 
@@ -1822,7 +1826,7 @@
     </div>
     <div id="sheld">
         <div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
-        <div class="pull-tab"></div>
+        <!-- <div class="pull-tab"></div> -->
         <div id="chat">
         </div>
         <div id="form_sheld">

public/scripts/extensions/expressions/style.css

@@ -15,7 +15,7 @@
     padding: 0;
     filter: drop-shadow(2px 2px 2px #51515199);
     z-index: 3;
-    resize: both;
+    /* resize: both; */
     overflow: hidden;
 
 }

public/scripts/power-user.js

@@ -70,6 +70,7 @@ let power_user = {
     blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
 
     waifuMode: false,
+    movingUI: false,
     theme: 'Default (Dark)',
 };
 
@@ -89,6 +90,7 @@ const storage_keys = {
     blur_strength: "TavernAI_blur_strength",
 
     waifuMode: "TavernAI_waifuMode",
+    movingUI: "TavernAI_movingUI",
 };
 
 const chat = document.getElementById('chat');
@@ -130,6 +132,13 @@ function switchWaifuMode() {
     scrollChatToBottom();
 }
 
+function switchMovingUI() {
+    const movingUI = localStorage.getItem(storage_keys.movingUI);
+    power_user.movingUI = movingUI === null ? false : movingUI == "true";
+    $("body").toggleClass("movingUI", power_user.movingUI);
+    scrollChatToBottom();
+}
+
 function applyAvatarStyle() {
     power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
     $("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR);
@@ -255,6 +264,7 @@ applyAvatarStyle();
 applyBlurStrength();
 applyChatDisplay();
 switchWaifuMode()
+switchMovingUI();
 
 function loadPowerUserSettings(settings, data) {
     // Load from settings.json
@@ -269,8 +279,10 @@ function loadPowerUserSettings(settings, data) {
     // These are still local storage
     const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
     const waifuMode = localStorage.getItem(storage_keys.waifuMode);
+    const movingUI = localStorage.getItem(storage_keys.movingUI);
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
     power_user.waifuMode = waifuMode === null ? false : waifuMode == "true";
+    power_user.movingUI = movingUI === null ? false : movingUI == "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);
@@ -289,6 +301,7 @@ function loadPowerUserSettings(settings, data) {
     $("#custom_chat_separator").val(power_user.custom_chat_separator);
     $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
     $("#waifuMode").prop("checked", power_user.waifuMode);
+    $("#movingUImode").prop("checked", power_user.movingUI);
     $("#multigen").prop("checked", power_user.multigen);
     $("#multigen_first_chunk").val(power_user.multigen_first_chunk);
     $("#multigen_next_chunks").val(power_user.multigen_next_chunks);
@@ -408,6 +421,12 @@ $(document).ready(() => {
         switchWaifuMode();
     });
 
+    $("#movingUImode").change(function () {
+        power_user.movingUI = $(this).prop("checked");
+        localStorage.setItem(storage_keys.movingUI, power_user.movingUI);
+        switchMovingUI();
+    });
+
     $(`input[name="avatar_style"]`).on('input', function (e) {
         power_user.avatar_style = Number(e.target.value);
         localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);

public/style.css

@@ -208,7 +208,7 @@ code {
     top: 41px;
     /* margin: 0 auto; */
     z-index: 2;
-    resize: both;
+    /* resize: both; */
     min-height: 100px;
     min-width: 100px;
     width: var(--sheldWidth);
@@ -230,6 +230,7 @@ code {
     border: 1px solid var(--white30a);
     cursor: -moz-grab;
     cursor: -webkit-grab;
+    display: none;
 }
 
 #sheldheader:active {
@@ -3044,7 +3045,7 @@ label[for="extensions_autoconnect"] {
     margin: 35px auto 0 auto;
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-    resize: both;
+    /* resize: both; */
     z-index: 9999 !important;
 }
 
@@ -3327,13 +3328,23 @@ body.waifuMode .expression-holder {
     bottom: 0;
     filter: drop-shadow(2px 2px 2px #51515199);
     z-index: 1;
-    resize: both;
+    /* resize: both; */
 }
 
 body.waifuMode img.expression {
     /* height: 90vh; */
 }
 
+body.movingUI .drag-grabber {
+    display: inline;
+}
+
+body.movingUI #sheld,
+body.movingUI .drawer-content,
+body.movingUI #expression-holder {
+    resize: both;
+}
+
 /* ---------- @media queries must always go at the bottom ------------*/
 
 /*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/