Make logprobs draggable, fix conflicts between moving UI and maximization, fix z-fighting

public/css/logprobs.css

@@ -44,6 +44,7 @@
     margin-left: 5px;
     opacity: 0.5;
     transition: all 250ms;
+    position: unset !important;
 }
 
 .logprobs_panel_control_button:hover {

public/index.html

@@ -5255,7 +5255,7 @@
         </div>
         <div id="cfgConfig" class="drawer-content flexGap5">
             <div class="panelControlBar flex-container flexGap10">
-                <div id="cfgConfigHeader" class="fa-solid fa-grip drag-grabber"></div>
+                <div id="cfgConfigheader" class="fa-solid fa-grip drag-grabber"></div>
                 <div id="cfgConfigMaximize" class="inline-drawer-maximize fa-solid">
                     <i class="floating_panel_maximize fa-solid fa-window-maximize"></i>
                 </div>
@@ -5425,6 +5425,9 @@
                     <b data-i18n="Token Probabilities">Token Probabilities</b>
                 </div>
                 <div class="logprobs_panel_controls">
+                    <div id="logprobsViewerheader" class="logprobs_panel_control_button drag-grabber">
+                        <i class="custom-drawer-icon fa-solid fa-grip"></i>
+                    </div>
                     <div id="logprobsMaximizeToggle" class="logprobs_panel_control_button inline-drawer-maximize fa-solid">
                         <i class="inline-drawer-icon fa-solid fa-window-maximize"></i>
                     </div>

public/script.js

@@ -81,6 +81,7 @@ import {
     switchSimpleMode,
     flushEphemeralStoppingStrings,
     context_presets,
+    resetMovableStyles,
 } from './scripts/power-user.js';
 
 import {
@@ -9793,7 +9794,10 @@ jQuery(async function () {
     $(document).on('click', '.inline-drawer-maximize', function () {
         const icon = $(this).find('.inline-drawer-icon, .floating_panel_maximize');
         icon.toggleClass('fa-window-maximize fa-window-restore');
-        $(this).closest('.drawer-content').toggleClass('maximized');
+        const drawerContent = $(this).closest('.drawer-content');
+        drawerContent.toggleClass('maximized');
+        const drawerId = drawerContent.attr('id');
+        resetMovableStyles(drawerId);
     });
 
     $(document).on('click', '.mes .avatar', function () {

public/scripts/RossAscends-mods.js

@@ -652,9 +652,9 @@ export async function initMovingUI() {
         dragElement($('#left-nav-panel'));
         dragElement($('#right-nav-panel'));
         dragElement($('#WorldInfo'));
-        await delay(1000);
-        console.debug('loading AN draggable function');
         dragElement($('#floatingPrompt'));
+        dragElement($('#logprobsViewer'));
+        dragElement($('#cfgConfig'));
     }
 }
 

public/scripts/power-user.js

@@ -945,6 +945,9 @@ function peekSpoilerMode() {
 
 
 function switchMovingUI() {
+    $('.drawer-content.maximized').each(function () {
+        $(this).find('.inline-drawer-maximize').trigger('click');
+    });
     const movingUI = localStorage.getItem(storage_keys.movingUI);
     power_user.movingUI = movingUI === null ? false : movingUI == 'true';
     $('body').toggleClass('movingUI', power_user.movingUI);
@@ -2162,6 +2165,22 @@ async function saveMovingUI() {
     }
 }
 
+/**
+ * Resets the movable styles of the given element to their unset values.
+ * @param {string} id Element ID
+ */
+export function resetMovableStyles(id) {
+    const panelStyles = ['top', 'left', 'right', 'bottom', 'height', 'width', 'margin'];
+
+    const panel = document.getElementById(id);
+
+    if (panel) {
+        panelStyles.forEach((style) => {
+            panel.style[style] = '';
+        });
+    }
+}
+
 async function resetMovablePanels(type) {
     const panelIds = [
         'sheld',
@@ -2173,6 +2192,8 @@ async function resetMovablePanels(type) {
         'groupMemberListPopout',
         'summaryExtensionPopout',
         'gallery',
+        'logprobsViewer',
+        'cfgConfig',
     ];
 
     const panelStyles = ['top', 'left', 'right', 'bottom', 'height', 'width', 'margin'];

public/style.css

@@ -460,7 +460,7 @@ body.reduced-motion #bg_custom {
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
     -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
-    z-index: 3000;
+    z-index: 3005;
 }
 
 #sheld {
@@ -3355,7 +3355,7 @@ a {
     margin: 0 auto;
     height: var(--topBarBlockSize);
     justify-content: center;
-    z-index: 3000;
+    z-index: 3005;
     position: relative;
     width: var(--sheldWidth);
 
@@ -3459,7 +3459,11 @@ a {
     /* z-index: 1000 !important; */
 }
 
-.drawer-content.maximized {
+body.movingUI .inline-drawer-maximize {
+    display: none;
+}
+
+body:not(.movingUI) .drawer-content.maximized {
     width: var(--sheldWidth) !important;
     top: var(--topBarBlockSize) !important;
     margin: 0 auto !important;