- replace top bar toggle animations with opacity fades - refactor MovingUI - refactor getWorldEntry

edbc257e8167c13e4642dbb3e74425fcdc9a4802

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: e08d1b522c6a23017d3c2e2bd44860affbba2e6f

public/script.js+96 -60 Viewed

     doNavbarIconClick.call(drawerToggle);
+}
+// Helper for animating open/close (opacity only)
+async function animateDrawer($el, open, displayStyle = 'block', onEnd) {
+    //const slideOptions = getSlideToggleOptions();
+    const duration = 250;
+    const easing = 'swing';
+    $el.stop(true, true);
+    if (open) {
+        $el.css({ display: displayStyle, opacity: 0 });
+        $el.animate(
+            { opacity: 1 },
+            {
+                duration,
+                easing,
+                complete: function () {
+                    $el.css({ opacity: '', display: displayStyle });
+                    if (typeof onEnd === 'function') onEnd(this);
+                },
+            },
+        );
+    } else {
+        $el.animate(
+            { opacity: 0 },
+            {
+                duration,
+                easing,
+                complete: function () {
+                    $el.css({ display: 'none', opacity: '0' });
+                    if (typeof onEnd === 'function') onEnd(this);
+                },
+            },
+        );
+    }
+}
 /**
  * Event handler to open or close a navbar drawer when a navbar icon is clicked.
  * Handles click events on .drawer-toggle elements.
  * @returns {void}
  */
-function doNavbarIconClick() {
+// ...existing code...
+export async function doNavbarIconClick() {
+    //console.warn('called for, ', $(this));
     const icon = $(this).find('.drawer-icon');
     const drawer = $(this).parent().find('.drawer-content');
     if (drawer.hasClass('resizing')) { return; }

     const targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
     const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
-    if (!drawerWasOpenAlready) { //to open the drawer
+    if (!drawerWasOpenAlready) { // to open the drawer
-        $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
+        // Close all open drawers except pinned ones
-            slideToggle(el, {
+        const $openDrawers = $('.openDrawer:not(.pinnedOpen)');
-                ...getSlideToggleOptions(),
+        for (const el of $openDrawers) {
-                onAnimationEnd: function (el) {
+            $(el).addClass('resizing');
-                    el.closest('.drawer-content').classList.remove('resizing');
+            await animateDrawer($(el), false, undefined, function (el) {
-                },
+                $(el).closest('.drawer-content').removeClass('resizing');
             });
-        });
+        }
-        $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
-        $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
+        // Toggle icon and drawer classes
+        const $openIcons = $('.openIcon:not(.drawerPinnedOpen)');
+        for (const iconEl of $openIcons) {
+            $(iconEl).toggleClass('closedIcon openIcon');
+        }
+        for (const el of $openDrawers) {
+            $(el).toggleClass('closedDrawer openDrawer');
+        }
         icon.toggleClass('openIcon closedIcon');
         drawer.toggleClass('openDrawer closedDrawer');
-        //console.log(targetDrawerID);
+        // Open the target drawer
-        if (targetDrawerID === 'right-nav-panel') {
+        const $drawerContents = $(this).closest('.drawer').find('.drawer-content');
-            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').each((_, el) => {
+        for (const el of $drawerContents) {
-                slideToggle(el, {
+            $(el).addClass('resizing');
-                    ...getSlideToggleOptions(),
+            if (targetDrawerID === 'right-nav-panel') {
-                    elementDisplayStyle: 'flex',
+                await animateDrawer($(el), true, 'flex', function (el) {
-                    onAnimationEnd: function (el) {
+                    $(el).closest('.drawer-content').removeClass('resizing');
-                        el.closest('.drawer-content').classList.remove('resizing');
+                    favsToHotswap();
-                        favsToHotswap();
+                    $('#rm_print_characters_block').trigger('scroll');
-                        $('#rm_print_characters_block').trigger('scroll');
-                    },
                 });
-            });
+            } else {
-        } else {
+                await animateDrawer($(el), true, undefined, function (el) {
-            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').each((_, el) => {
+                    $(el).closest('.drawer-content').removeClass('resizing');
-                slideToggle(el, {
-                    ...getSlideToggleOptions(),
-                    onAnimationEnd: function (el) {
-                        el.closest('.drawer-content').classList.remove('resizing');
-                    },
                 });
-            });
+            }
+        }
         // Set the height of "autoSetHeight" textareas within the drawer to their scroll height
         if (!CSS.supports('field-sizing', 'content')) {
-            $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(async function () {
+            const textareas = $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight');
-                await resetScrollHeight($(this));
+            for (const textarea of textareas) {
+                await resetScrollHeight($(textarea));
                 return;
-            });
+            }
+        }
-    } else if (drawerWasOpenAlready) { //to close manually
+    } else if (drawerWasOpenAlready) { // to close manually
+        console.warn('saw drawer was already open');
         icon.toggleClass('closedIcon openIcon');
         if (pinnedDrawerClicked) {
             $(drawer).addClass('resizing').each((_, el) => {
-                slideToggle(el, {
+                animateDrawer($(el), false, undefined, function (el) {
-                    ...getSlideToggleOptions(),
+                    el.classList.remove('resizing');
-                    onAnimationEnd: function (el) {
-                        el.classList.remove('resizing');
-                    },
                 });
             });
+        }
         else {
+            console.warn('not pinned drawer');
             $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
-                slideToggle(el, {
+                animateDrawer($(el), false, undefined, function (el) {
-                    ...getSlideToggleOptions(),
+                    el.closest('.drawer-content').classList.remove('resizing');
-                    onAnimationEnd: function (el) {
-                        el.closest('.drawer-content').classList.remove('resizing');
-                    },
                 });
             });
+        }

@@ -10403,7 +10438,7 @@ function doNavbarIconClick() {
10403	drawer.toggleClass('closedDrawer openDrawer');	10438	drawer.toggleClass('closedDrawer openDrawer');
10404	}	10439	}
10405	}	10440	}
10406		10441	// ...existing code...
10407	function addDebugFunctions() {	10442	function addDebugFunctions() {
10408	const doBackfill = async () => {	10443	const doBackfill = async () => {
10409	for (const message of chat) {	10444	for (const message of chat) {

     $('.drawer-toggle').on('click', doNavbarIconClick);
-    $('html').on('touchstart mousedown', function (e) {
+    $('html').on('touchstart mousedown', async function (e) {
         var clickTarget = $(e.target);
         if (isExportPopupOpen

+            }
+        }
+        // This autocloses open drawers that are not pinned if a click happens inside the app which does not target them.
         var targetParentHasOpenDrawer = clickTarget.parents('.openDrawer').length;
-        if (clickTarget.hasClass('drawer-icon') == false && !clickTarget.hasClass('openDrawer')) {
+        if (!clickTarget.hasClass('drawer-icon') && !clickTarget.hasClass('openDrawer')) {
-            if ($('.openDrawer').length !== 0) {
+            const $openDrawers = $('.openDrawer').not('.pinnedOpen');
-                if (targetParentHasOpenDrawer === 0) {
+            if ($openDrawers.length && targetParentHasOpenDrawer === 0) {
-                    //console.log($('.openDrawer').not('.pinnedOpen').length);
+                // Animate close for each open drawer
-                    $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
+                for (const el of $openDrawers) {
-                        slideToggle(el, {
+                    $(el).addClass('resizing');
-                            ...getSlideToggleOptions(),
+                    // Use the same animateDrawer helper as in doNavbarIconClick
-                            onAnimationEnd: (el) => {
+                    await animateDrawer($(el), false, undefined, function (el) {
-                                el.closest('.drawer-content').classList.remove('resizing');
+                        $(el).closest('.drawer-content').removeClass('resizing');
-                            },
-                        });
                     });
-                    $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
-                    $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
+                }
+                // Toggle icon and drawer classes after animation
+                $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
+                $openDrawers.toggleClass('closedDrawer openDrawer');
+            }
+        }
     });

public/scripts/RossAscends-mods.js+136 -184 Viewed

     menu_type,
     substituteParams,
     sendTextareaMessage,
-    getSlideToggleOptions,
+    doNavbarIconClick,
 } from '../script.js';
 import {

 // Make the DIV element draggable:
-export function dragElement(elmnt) {
+/**
-    var isHeaderBeingDragged = false;
+ * Make the given element draggable. This is used for Moving UI.
-    var isMouseDown = false;
+ * @param {JQuery} $elmnt - The element to make draggable.
+ */
+export function dragElement($elmnt) {
+    let actionType = null; // "drag" or "resize"
+    let isMouseDown = false;
-    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    var height, width, top, left, right, bottom,
+    let height, width, top, left, right, bottom,
         maxX, maxY, winHeight, winWidth,
         topbar, topBarFirstX, topBarLastY;
-    var elmntName = elmnt.attr('id');
+    const elmntName = $elmnt.attr('id');
-    console.debug(`dragElement called for ${elmntName}`);
     const elmntNameEscaped = $.escapeSelector(elmntName);
-    const elmntHeader = $(`#${elmntNameEscaped}header`);
+    const $elmntHeader = $(`#${elmntNameEscaped}header`);
-    if (elmntHeader.length) {
+    // Helper: Save position/size to state and emit events
-        elmntHeader.off('mousedown').on('mousedown', (e) => { //listener for drag handle repositioning
+    function savePositionAndSize() {
-            isHeaderBeingDragged = true;
+        if (!power_user.movingUIState[elmntName]) power_user.movingUIState[elmntName] = {};
-            isMouseDown = true;
+        power_user.movingUIState[elmntName].top = top;
-            observer.observe(elmnt.get(0), { attributes: true, attributeFilter: ['style'] });
+        power_user.movingUIState[elmntName].left = left;
-            dragMouseDown(e);
+        power_user.movingUIState[elmntName].right = right;
-        });
+        power_user.movingUIState[elmntName].bottom = bottom;
-        $(elmnt).off('mousedown').on('mousedown', () => { //listener for resize
+        power_user.movingUIState[elmntName].margin = 'unset';
-            isMouseDown = true;
+        if (actionType === 'resize') {
-            observer.observe(elmnt.get(0), { attributes: true, attributeFilter: ['style'] });
+            power_user.movingUIState[elmntName].width = width;
-        });
+            power_user.movingUIState[elmntName].height = height;
+            eventSource.emit('resizeUI', elmntName);
+        }
+        saveSettingsDebounced();
+    }
+    // Helper: Clamp element within viewport
+    function clampToViewport() {
+        if (top <= 0) $elmnt.css('top', '0px');
+        else if (maxY >= winHeight) $elmnt.css('top', winHeight - maxY + top - 1 + 'px');
+        if (left <= 0) $elmnt.css('left', '0px');
+        else if (maxX >= winWidth) $elmnt.css('left', winWidth - maxX + left - 1 + 'px');
+    }
+    // Observer for style changes (position/size)
     const observer = new MutationObserver((mutations) => {
-        const target = mutations[0].target;
+        const $target = $(mutations[0].target);
-        if (!$(target).is(':visible') //abort if element is invisible
+        if (
-            || $(target).hasClass('resizing') //being auto-resized by other JS code
+            !$target.is(':visible') ||
-            || Number((String(target.height).replace('px', ''))) < 50 //too short
+            $target.hasClass('resizing') ||
-            || Number((String(target.width).replace('px', ''))) < 50 //too narrow
+            $target.height() < 50 ||
-            || power_user.movingUI === false // if MUI is not turned on
+            $target.width() < 50 ||
-            || isMobile() // if it's a mobile screen
+            power_user.movingUI === false ||
+            isMobile() ||
+            !isMouseDown
         ) {
+            observer.disconnect();
             return;
+        }
-        const style = getComputedStyle(target);
+        const style = getComputedStyle($target[0]);
         height = parseInt(style.height);
         width = parseInt(style.width);
         top = parseInt(style.top);
         left = parseInt(style.left);
         right = parseInt(style.right);
         bottom = parseInt(style.bottom);
-        maxX = parseInt(width + left);
+        maxX = width + left;
-        maxY = parseInt(height + top);
+        maxY = height + top;
         winWidth = window.innerWidth;
         winHeight = window.innerHeight;

         topBarFirstX = parseInt(topbarstyle.marginInline);
         topBarLastY = parseInt(topbarstyle.height);
-        //prepare an empty poweruser object for the item being altered if we don't have one already
+        // Prepare state object if missing
-        if (!power_user.movingUIState[elmntName]) {
+        if (!power_user.movingUIState[elmntName]) power_user.movingUIState[elmntName] = {};
-            console.debug(`adding config property for ${elmntName}`);
-            power_user.movingUIState[elmntName] = {};
-        }
-        //handle resizing
+        if (actionType === 'resize') {
-        if (!isHeaderBeingDragged && isMouseDown) { //if user is dragging the resize handle (not in header)
-            let imgHeight, imgWidth, imageAspectRatio;
             let containerAspectRatio = height / width;
+            if ($elmnt.attr('id').startsWith('zoomFor_')) {
-            //force aspect ratio for zoomed avatars
+                const zoomedAvatarImage = $elmnt.find('.zoomed_avatar_img');
-            if ($(elmnt).attr('id').startsWith('zoomFor_')) {
+                const imgHeight = zoomedAvatarImage.height();
-                let zoomedAvatarImage = $(elmnt).find('.zoomed_avatar_img');
+                const imgWidth = zoomedAvatarImage.width();
-                imgHeight = zoomedAvatarImage.height();
+                const imageAspectRatio = imgHeight / imgWidth;
-                imgWidth = zoomedAvatarImage.width();
-                imageAspectRatio = imgHeight / imgWidth;
-                // Maintain aspect ratio
                 if (containerAspectRatio !== imageAspectRatio) {
-                    elmnt.css('width', elmnt.width());
+                    $elmnt.css('width', $elmnt.width());
-                    elmnt.css('height', elmnt.width() * imageAspectRatio);
+                    $elmnt.css('height', $elmnt.width() * imageAspectRatio);
+                }
+                if (top + $elmnt.height() >= winHeight) {
-                // Prevent resizing offscreen
+                    $elmnt.css('height', winHeight - top - 1 + 'px');
-                if (top + elmnt.height() >= winHeight) {
+                    $elmnt.css('width', (winHeight - top - 1) / imageAspectRatio + 'px');
-                    elmnt.css('height', winHeight - top - 1 + 'px');
-                    elmnt.css('width', (winHeight - top - 1) / imageAspectRatio + 'px');
+                }
+                if (left + $elmnt.width() >= winWidth) {
-                if (left + elmnt.width() >= winWidth) {
+                    $elmnt.css('width', winWidth - left - 1 + 'px');
-                    elmnt.css('width', winWidth - left - 1 + 'px');
+                    $elmnt.css('height', (winWidth - left - 1) * imageAspectRatio + 'px');
-                    elmnt.css('height', (winWidth - left - 1) * imageAspectRatio + 'px');
-                }
-            } else { //prevent divs that are not zoomedAvatars from resizing offscreen
-                if (top + elmnt.height() >= winHeight) {
-                    elmnt.css('height', winHeight - top - 1 + 'px');
-                }
-                if (left + elmnt.width() >= winWidth) {
-                    elmnt.css('width', winWidth - left - 1 + 'px');
+                }
+            } else {
+                if (top + $elmnt.height() >= winHeight) $elmnt.css('height', winHeight - top - 1 + 'px');
+                if (left + $elmnt.width() >= winWidth) $elmnt.css('width', winWidth - left - 1 + 'px');
+            }
-            //prevent resizing from top left into the top bar
             if (top < topBarLastY && maxX >= topBarFirstX && left <= topBarFirstX) {
-                elmnt.css('width', width - 1 + 'px');
+                $elmnt.css('width', width - 1 + 'px');
+            }
+            $elmnt.css({ left, top });
-            //set css to prevent weird resize behavior (does not save)
+            $elmnt.off('mouseup').on('mouseup', () => {
-            elmnt.css('left', left);
+                if (
-            elmnt.css('top', top);
+                    power_user.movingUIState[elmntName].width === $elmnt.width() &&
+                    power_user.movingUIState[elmntName].height === $elmnt.height()
-            //set a listener for mouseup to save new width/height
+                ) return;
-            $(window).off('mouseup').on('mouseup', () => {
+                savePositionAndSize();
-                console.log(`Saving ${elmntName} Height/Width`);
+                observer.disconnect();
-                // check if the height or width actually changed
-                if (power_user.movingUIState[elmntName].width === elmnt.width() && power_user.movingUIState[elmntName].height === elmnt.height()) {
-                    console.log('no change detected, aborting save');
-                    return;
-                }
-                power_user.movingUIState[elmntName].width = width;
-                power_user.movingUIState[elmntName].height = height;
-                eventSource.emit('resizeUI', elmntName);
-                saveSettingsDebounced();
-                imgHeight = null;
-                imgWidth = null;
-                height = null;
-                width = null;
-                containerAspectRatio = null;
-                imageAspectRatio = null;
-                $(window).off('mouseup');
             });
+        } else if (actionType === 'drag') {
+            clampToViewport();
+        }
-        //only record position changes if header is being dragged
+        // Always update position in state
-        power_user.movingUIState[elmntName].top = top;
+        savePositionAndSize();
-        power_user.movingUIState[elmntName].left = left;
-        power_user.movingUIState[elmntName].right = right;
-        power_user.movingUIState[elmntName].bottom = bottom;
-        power_user.movingUIState[elmntName].margin = 'unset';
-        //handle dragging hit detection to prevent dragging offscreen
-        if (isHeaderBeingDragged && isMouseDown) {
-            if (top <= 0) {
-                elmnt.css('top', '0px');
-            } else if (maxY >= winHeight) {
-                elmnt.css('top', winHeight - maxY + top - 1 + 'px');
-            }
-            if (left <= 0) {
-                elmnt.css('left', '0px');
-            } else if (maxX >= winWidth) {
-                elmnt.css('left', winWidth - maxX + left - 1 + 'px');
-            }
-        }
-        // Check if the element header exists and set the reposition listener on the grabber in the header
-        if (elmntHeader.length) {
-            elmntHeader.off('mousedown').on('mousedown', (e) => {
-                dragMouseDown(e);
-            });
-        } else { //if no header, put the listener on the elmnt itself.
-            elmnt.off('mousedown').on('mousedown', dragMouseDown);
-        }
     });
+    // Mouse event handlers
     function dragMouseDown(e) {
         if (e) {
-            isHeaderBeingDragged = true;
+            actionType = 'drag';
+            isMouseDown = true;
             e.preventDefault();
-            pos3 = e.clientX; //mouse X at click
+            pos3 = e.clientX;
-            pos4 = e.clientY; //mouse Y at click
+            pos4 = e.clientY;
+        }
         $(document).on('mouseup', closeDragElement);
         $(document).on('mousemove', elementDrag);
+    }
     function elementDrag(e) {
-        if (!power_user.movingUIState[elmntName]) {
+        if (!power_user.movingUIState[elmntName]) power_user.movingUIState[elmntName] = {};
-            power_user.movingUIState[elmntName] = {};
-        }
-        e = e || window.event;
         e.preventDefault();
+        pos1 = pos3 - e.clientX;
-        pos1 = pos3 - e.clientX;    //X change amt (-1 or 1)
+        pos2 = pos4 - e.clientY;
-        pos2 = pos4 - e.clientY;    //Y change amt (-1 or 1)
+        pos3 = e.clientX;
-        pos3 = e.clientX;   //new mouse X
+        pos4 = e.clientY;
-        pos4 = e.clientY;   //new mouse Y
+        $elmnt.attr('data-dragged', 'true');
+        $elmnt.css('left', ($elmnt.offset().left - pos1) + 'px');
-        elmnt.attr('data-dragged', 'true');
+        $elmnt.css('top', ($elmnt.offset().top - pos2) + 'px');
+        $elmnt.css('margin', 'unset');
-        //first set css to computed values to avoid CSS NaN results from 'auto', etc
+        $elmnt.css('height', height);
-        elmnt.css('left', (elmnt.offset().left) + 'px');
+        $elmnt.css('width', width);
-        elmnt.css('top', (elmnt.offset().top) + 'px');
-        //then update element position styles to account for drag changes
-        elmnt.css('margin', 'unset');
-        elmnt.css('left', (elmnt.offset().left - pos1) + 'px');
-        elmnt.css('top', (elmnt.offset().top - pos2) + 'px');
-        /*         elmnt.css('right', ((winWidth - maxX) + 'px'));
-                elmnt.css('bottom', ((winHeight - maxY) + 'px')); */
-        // Height/Width here are for visuals only, and are not saved to settings.
-        // This is required because some divs do hot have a set width/height
-        // and will default to shrink to min value of 100px set in CSS file
-        elmnt.css('height', height);
-        elmnt.css('width', width);
-        return;
+    }
     function closeDragElement() {
-        console.debug('drag finished');
-        isHeaderBeingDragged = false;
         isMouseDown = false;
+        actionType = null;
         $(document).off('mouseup', closeDragElement);
         $(document).off('mousemove', elementDrag);
-        $('body').css('overflow', '');
+        $elmnt.attr('data-dragged', 'false');
-        // Clear the "data-dragged" attribute
-        elmnt.attr('data-dragged', 'false');
         observer.disconnect();
-        console.debug(`Saving ${elmntName} UI position`);
+        savePositionAndSize();
-        saveSettingsDebounced();
+    }
-        top = null;
-        left = null;
+    // Setup event listeners
-        right = null;
+    if ($elmntHeader.length) {
-        bottom = null;
+        $elmntHeader.off('mousedown').on('mousedown', (e) => {
-        maxX = null;
+            if ($(e.target).hasClass('drag-grabber')) {
-        maxY = null;
+                actionType = 'drag';
+                isMouseDown = true;
+                observer.observe($elmnt[0], { attributes: true, attributeFilter: ['style'] });
+                dragMouseDown(e);
+            }
+        });
+    }
+    $elmnt.off('mousedown').on('mousedown', (e) => {
+        const rect = $elmnt[0].getBoundingClientRect();
+        const resizeMargin = 16;
+        const isNearRight = e.clientX > rect.right - resizeMargin;
+        const isNearBottom = e.clientY > rect.bottom - resizeMargin;
+        if (isNearRight && isNearBottom) {
+            actionType = 'resize';
+            isMouseDown = true;
+            observer.observe($elmnt[0], { attributes: true, attributeFilter: ['style'] });
+        }
+    });
+    $elmnt.off('mouseup').on('mouseup', () => {
+        isMouseDown = false;
+        actionType = null;
+        observer.disconnect();
+    });
+}
 export async function initMovingUI() {

@@ -775,9 +730,8 @@ export function initRossMods() {
775	$(RightNavDrawerIcon).removeClass('drawerPinnedOpen');	730	$(RightNavDrawerIcon).removeClass('drawerPinnedOpen');
776		731
777	if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {	732	if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
778	slideToggle(RightNavPanel, getSlideToggleOptions());	733	const toggle = $('#unimportantYes');
779	$(RightNavDrawerIcon).toggleClass('closedIcon openIcon');	734	doNavbarIconClick.call(toggle);
780	$(RightNavPanel).toggleClass('openDrawer closedDrawer');
781	}	735	}
782	}	736	}
783	});	737	});

             $(LeftNavDrawerIcon).removeClass('drawerPinnedOpen');
             if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
-                slideToggle(LeftNavPanel, getSlideToggleOptions());
+                const toggle = $('#ai-config-button>.drawer-toggle');
-                $(LeftNavDrawerIcon).toggleClass('closedIcon openIcon');
+                doNavbarIconClick.call(toggle);
-                $(LeftNavPanel).toggleClass('openDrawer closedDrawer');
+            }
+        }
     });
-    $(WIPanelPin).on('click', function () {
+    $(WIPanelPin).on('click', async function () {
         accountStorage.setItem('WINavLockOn', $(WIPanelPin).prop('checked'));
         if ($(WIPanelPin).prop('checked') == true) {
             console.debug('adding pin class to WI');

@@ -813,9 +766,8 @@ export function initRossMods() {
813		766
814	if ($(WorldInfo).hasClass('openDrawer') && $('.openDrawer').length > 1) {	767	if ($(WorldInfo).hasClass('openDrawer') && $('.openDrawer').length > 1) {
815	console.debug('closing WI after lock removal');	768	console.debug('closing WI after lock removal');
816	slideToggle(WorldInfo, getSlideToggleOptions());	769	const toggle = $('#WI-SP-button>.drawer-toggle');
817	$(WIDrawerIcon).toggleClass('closedIcon openIcon');	770	doNavbarIconClick.call(toggle);
818	$(WorldInfo).toggleClass('openDrawer closedDrawer');
819	}	771	}
820	}	772	}
821	});	773	});

public/scripts/world-info.js+448 -633 Viewed

@@ -966,6 +966,7 @@ export function reloadEditor(file, loadIfNotSelected = false) {
966	}	966	}
967	}	967	}
968		968
		969	//MARK: regWISlashCommands
969	function registerWorldInfoSlashCommands() {	970	function registerWorldInfoSlashCommands() {
970	/**	971	/**
971	* Gets a rough approximation of the current chat context.	972	* Gets a rough approximation of the current chat context.

     console.timeEnd('clearEntryList');
+}
+//MARK: displayWorldEntries
 async function displayWorldEntries(name, data, navigation = navigation_option.none, flashOnNav = true) {
     updateEditor = async (navigation, flashOnNav = true) => await displayWorldEntries(name, data, navigation, flashOnNav);

+    }
+}
-export async function getWorldEntry(name, data, entry) {
+//MARK: getWorldEntry
-    if (!data.entries[entry.uid]) {
+function enableKeysInputHelper({ template, entry, entryPropName, originalDataValueName, name, data }) {
-        return;
+    const isFancyInput = !isMobile() && !power_user.wi_key_input_plaintext;
+    const input = isFancyInput ? template.find(`select[name="${entryPropName}"]`) : template.find(`textarea[name="${entryPropName}"]`);
+    input.data('uid', entry.uid);
+    input.on('click', function (event) {
+        event.stopPropagation();
+    });
+    function templateStyling(item, { searchStyle = false } = {}) {
+        const content = $('<span>').addClass('item').text(item.text).attr('title', `${item.text}\n\nClick to edit`);
+        const isRegex = isValidRegex(item.text);
+        if (isRegex) {
+            content.html(highlightRegex(item.text));
+            content.addClass('regex_item').prepend($('<span>').addClass('regex_icon').text('•*').attr('title', 'Regex'));
+        }
+        if (searchStyle && item.count) {
+            const wrapper = $('<span>').addClass('result_block').append(content);
+            wrapper.append($('<span>').addClass('item_count').text(item.count).attr('title', `Used as a key ${item.count} ${item.count != 1 ? 'times' : 'time'} in this lorebook`));
+            return wrapper;
+        }
+        return content;
+    }
+    if (isFancyInput) {
+        select2ModifyOptions(input, entry[entryPropName], { select: true, changeEventArgs: { skipReset: true, noSave: true } });
+        input.select2({
+            ajax: dynamicSelect2DataViaAjax(() => worldEntryKeyOptionsCache),
+            tags: true,
+            tokenSeparators: [','],
+            tokenizer: customTokenizer,
+            placeholder: input.attr('placeholder'),
+            templateResult: item => templateStyling(item, { searchStyle: true }),
+            templateSelection: item => templateStyling(item),
+        });
+        // TypeScript-safe event handler
+        /**
+         * @param {Event} _event
+         * @param {{ skipReset?: boolean, noSave?: boolean }} [arg]
+         */
+        input.on('change', async function (_event, arg) {
+            const uid = $(this).data('uid');
+            const keys = ($(this).select2('data')).map(x => x.text);
+            const skipReset = arg?.skipReset ?? false;
+            const noSave = arg?.noSave ?? false;
+            if (!skipReset) await resetScrollHeight(this);
+            if (!noSave) {
+                data.entries[uid][entryPropName] = keys;
+                setWIOriginalDataValue(data, uid, originalDataValueName, data.entries[uid][entryPropName]);
+                await saveWorldInfo(name, data);
+            }
+            $(this).toggleClass('empty', !data.entries[uid][entryPropName].length);
+        });
+        input.toggleClass('empty', !entry[entryPropName].length);
+        input.on('select2:select', event => updateWorldEntryKeyOptionsCache([event.params.data]));
+        input.on('select2:unselect', event => updateWorldEntryKeyOptionsCache([event.params.data], { remove: true }));
+        select2ChoiceClickSubscribe(input, target => {
+            const key = $(target.closest('.regex-highlight, .item')).text();
+            const selected = input.val();
+            if (!Array.isArray(selected)) return;
+            var index = selected.indexOf(getSelect2OptionId(key));
+            if (index > -1) selected.splice(index, 1);
+            input.val(selected).trigger('change');
+            updateWorldEntryKeyOptionsCache([key], { remove: true });
+            input.next('span.select2-container').find('textarea').val(key).trigger('input');
+        }, { openDrawer: true });
+    } else {
+        template.find(`select[name="${entryPropName}"]`).hide();
+        input.show();
+        /**
+        * @param {Event} _event
+        * @param {{ skipReset?: boolean, noSave?: boolean }} [arg]
+        */
+        input.on('change', async function (_event, arg) {
+            const uid = $(this).data('uid');
+            const value = String($(this).val());
+            const skipReset = arg?.skipReset ?? false;
+            const noSave = arg?.noSave ?? false;
+            if (!skipReset) await resetScrollHeight(this);
+            if (!noSave) {
+                data.entries[uid][entryPropName] = splitKeywordsAndRegexes(value);
+                setWIOriginalDataValue(data, uid, originalDataValueName, data.entries[uid][entryPropName]);
+                await saveWorldInfo(name, data);
+                $(this).toggleClass('empty', !data.entries[uid][entryPropName].length);
+            }
+        });
+        input.val(entry[entryPropName].join(', ')).trigger('input', { skipReset: true });
+    }
+    return { isFancy: isFancyInput, control: input };
+}
-    const template = WI_ENTRY_EDIT_TEMPLATE.clone();
+/**
-    template.data('uid', entry.uid);
+ * Helper to handle match checkboxes for WI entries.
-    template.attr('uid', entry.uid);
+ */
+function handleMatchCheckboxHelper({ template, entry, fieldName, data, name }) {
+    const key = originalWIDataKeyMap[fieldName];
+    const checkBoxElem = template.find(`input[type="checkbox"][name="${fieldName}"]`);
+    checkBoxElem.data('uid', entry.uid);
+    checkBoxElem.on('input', async function () {
+        const uid = $(this).data('uid');
+        const value = $(this).prop('checked');
+        data.entries[uid][fieldName] = value;
+        setWIOriginalDataValue(data, uid, key, data.entries[uid][fieldName]);
+        await saveWorldInfo(name, data);
+    });
+    checkBoxElem.prop('checked', !!entry[fieldName]).trigger('input');
+}
-    // Init default state of WI Key toggle (=> true)
+/**
-    if (typeof power_user.wi_key_input_plaintext === 'undefined') power_user.wi_key_input_plaintext = true;
+ * Helper to update position/order display.
+ */
+function updatePosOrdDisplayHelper({ template, data, uid }) {
+    let entry = data.entries[uid];
+    let posText = entry.position;
+    switch (entry.position) {
+        case 0: posText = '↑CD'; break;
+        case 1: posText = 'CD↓'; break;
+        case 2: posText = '↑AN'; break;
+        case 3: posText = 'AN↓'; break;
+        case 4: posText = `@D${entry.depth}`; break;
+    }
+    template.find('.world_entry_form_position_value').text(`(${posText} ${entry.order})`);
+}
-    /** Function to build the keys input controls @param {string} entryPropName @param {string} originalDataValueName */
+/**
-    function enableKeysInput(entryPropName, originalDataValueName) {
+ * Helper to initialize character filter select2.
-        const isFancyInput = !isMobile() && !power_user.wi_key_input_plaintext;
+ */
-        const input = isFancyInput ? template.find(`select[name="${entryPropName}"]`) : template.find(`textarea[name="${entryPropName}"]`);
+function initCharacterFilterSelect2Helper(characterFilter, t) {
-        input.data('uid', entry.uid);
+    if (!isMobile()) {
-        input.on('click', function (event) {
+        $(characterFilter).select2({
-            // Prevent closing the drawer on clicking the input
+            width: '100%',
-            event.stopPropagation();
+            placeholder: t`Tie this entry to specific characters or characters with specific tags`,
+            allowClear: true,
+            closeOnSelect: false,
         });
+    }
+}
-        function templateStyling(/** @type {Select2Option} */ item, { searchStyle = false } = {}) {
+/**
-            const content = $('<span>').addClass('item').text(item.text).attr('title', `${item.text}\n\nClick to edit`);
+ * Helper to fill character and tag options for character filter.
-            const isRegex = isValidRegex(item.text);
+ */
-            if (isRegex) {
+function fillCharacterAndTagOptionsHelper({ characterFilter, entry, getContext }) {
-                content.html(highlightRegex(item.text));
+    const characters = getContext().characters;
-                content.addClass('regex_item').prepend($('<span>').addClass('regex_icon').text('•*').attr('title', 'Regex'));
+    characters.forEach((character) => {
-            }
+        const option = document.createElement('option');
+        const name = character.avatar.replace(/\.[^/.]+$/, '') ?? character.name;
+        option.innerText = name;
+        option.selected = entry.characterFilter?.names?.includes(name);
+        option.setAttribute('data-type', 'character');
+        characterFilter.append(option);
+    });
+    const tags = getContext().tags;
+    tags.forEach((tag) => {
+        const option = document.createElement('option');
+        option.innerText = `[Tag] ${tag.name}`;
+        option.selected = entry.characterFilter?.tags?.includes(tag.id);
+        option.value = tag.id;
+        option.setAttribute('data-type', 'tag');
+        characterFilter.append(option);
+    });
+}
+/**
+ * Helper to handle character filter changes.
+ */
+function handleCharacterFilterChangeHelper({ characterFilter, data, entry, name, world_names, getContext, setWIOriginalDataValue, saveWorldInfo, t }) {
+    characterFilter.on('mousedown change', async function (e) {
+        if (world_names.length === 0) {
+            e.preventDefault();
+            return;
+        }
+        const uid = $(this).data('uid');
+        const selected = $(this).find(':selected');
+        if ((!selected || selected?.length === 0) && !data.entries[uid].characterFilter?.isExclude) {
+            delete data.entries[uid].characterFilter;
+        } else {
+            const names = selected.filter('[data-type="character"]').map((_, e) => e instanceof HTMLOptionElement && e.innerText).toArray();
+            const tags = selected.filter('[data-type="tag"]').map((_, e) => e instanceof HTMLOptionElement && e.value).toArray();
+            Object.assign(
+                data.entries[uid],
+                {
+                    characterFilter: {
+                        isExclude: data.entries[uid].characterFilter?.isExclude ?? false,
+                        names: names,
+                        tags: tags,
+                    },
+                },
+            );
+        }
+        setWIOriginalDataValue(data, uid, 'character_filter', data.entries[uid].characterFilter);
+        await saveWorldInfo(name, data);
+    });
+}
-            if (searchStyle && item.count) {
+/**
-                // Build a wrapping element
+ * Helper to handle probability input.
-                const wrapper = $('<span>').addClass('result_block')
+ */
-                    .append(content);
+function handleProbabilityInputHelper({ probabilityInput, data, entry, name, setWIOriginalDataValue, saveWorldInfo }) {
-                wrapper.append($('<span>').addClass('item_count').text(item.count).attr('title', `Used as a key ${item.count} ${item.count != 1 ? 'times' : 'time'} in this lorebook`));
+    probabilityInput.data('uid', entry.uid);
-                return wrapper;
+    probabilityInput.on('input', async function () {
+        const uid = $(this).data('uid');
+        const value = Number($(this).val());
+        data.entries[uid].probability = !isNaN(value) ? value : null;
+        if (data.entries[uid].probability !== null) {
+            data.entries[uid].probability = Math.min(100, Math.max(0, data.entries[uid].probability));
+            if (data.entries[uid].probability !== value) {
+                $(this).val(data.entries[uid].probability);
+            }
+        }
+        setWIOriginalDataValue(data, uid, 'extensions.probability', data.entries[uid].probability);
+        await saveWorldInfo(name, data);
+    });
+    probabilityInput.val(entry.probability).trigger('input');
+    probabilityInput.css('width', 'calc(3em + 15px)');
+}
-            return content;
+/**
+ * Helper to handle probability toggle.
+ */
+function handleProbabilityToggleHelper({ probabilityToggle, data, entry, name, probabilityInput, setWIOriginalDataValue, saveWorldInfo }) {
+    probabilityToggle.data('uid', entry.uid);
+    probabilityToggle.on('input', async function () {
+        const uid = $(this).data('uid');
+        const value = $(this).prop('checked');
+        data.entries[uid].useProbability = value;
+        const probabilityContainer = $(this).closest('.world_entry').find('.probabilityContainer');
+        await saveWorldInfo(name, data);
+        value ? probabilityContainer.show() : probabilityContainer.hide();
+        if (value && data.entries[uid].probability === null) {
+            data.entries[uid].probability = 100;
+        }
+        if (!value) {
+            data.entries[uid].probability = null;
+        }
+        probabilityInput.val(data.entries[uid].probability).trigger('input');
+    });
+    probabilityToggle.prop('checked', true).trigger('input');
+    probabilityToggle.parent().hide();
+}
-        if (isFancyInput) {
+/**
-            // First initialize existing values as options, before initializing select2, to speed up performance
+ * Helper to handle select2 dropdowns for boolean selects.
-            select2ModifyOptions(input, entry[entryPropName], { select: true, changeEventArgs: { skipReset: true, noSave: true } });
+ */
+function handleBooleanSelectHelper({ selectElem, entry, entryKey, data, name, setWIOriginalDataValue, saveWorldInfo }) {
+    selectElem.data('uid', entry.uid);
+    selectElem.on('input', async function () {
+        const uid = $(this).data('uid');
+        const value = $(this).val();
+        data.entries[uid][entryKey] = value === 'null' ? null : value === 'true';
+        setWIOriginalDataValue(data, uid, `extensions.${entryKey.replace(/[A-Z]/g, m => `_${m.toLowerCase()}`)}`, data.entries[uid][entryKey]);
+        await saveWorldInfo(name, data);
+    });
+    selectElem.val((entry[entryKey] === null || entry[entryKey] === undefined) ? 'null' : entry[entryKey] ? 'true' : 'false').trigger('input');
+}
-            input.select2({
+/**
-                ajax: dynamicSelect2DataViaAjax(() => worldEntryKeyOptionsCache),
+ * Helper to handle input fields for numbers.
-                tags: true,
+ */
-                tokenSeparators: [','],
+function handleNumberInputHelper({ inputElem, entry, entryKey, data, name, setWIOriginalDataValue, saveWorldInfo, min, max, clamp = false }) {
-                tokenizer: customTokenizer,
+    inputElem.data('uid', entry.uid);
-                placeholder: input.attr('placeholder'),
+    inputElem.on('input', async function () {
-                templateResult: item => templateStyling(item, { searchStyle: true }),
+        const uid = $(this).data('uid');
-                templateSelection: item => templateStyling(item),
+        let value = Number($(this).val());
-            });
+        if (clamp) {
-            input.on('change', async function (_, { skipReset, noSave } = {}) {
+            if (value < min) {
-                const uid = $(this).data('uid');
+                value = min;
-                /** @type {string[]} */
+                $(this).val(min);
-                const keys = ($(this).select2('data')).map(x => x.text);
+            } else if (value > max) {
+                value = max;
-                !skipReset && await resetScrollHeight(this);
+                $(this).val(max);
-                if (!noSave) {
+            }
-                    data.entries[uid][entryPropName] = keys;
-                    setWIOriginalDataValue(data, uid, originalDataValueName, data.entries[uid][entryPropName]);
-                    await saveWorldInfo(name, data);
-                }
-                $(this).toggleClass('empty', !data.entries[uid][entryPropName].length);
-            });
-            input.toggleClass('empty', !entry[entryPropName].length);
-            input.on('select2:select', /** @type {function(*):void} */ event => updateWorldEntryKeyOptionsCache([event.params.data]));
-            input.on('select2:unselect', /** @type {function(*):void} */ event => updateWorldEntryKeyOptionsCache([event.params.data], { remove: true }));
-            select2ChoiceClickSubscribe(input, target => {
-                const key = $(target.closest('.regex-highlight, .item')).text();
-                console.debug('Editing WI key', key);
-                // Remove the current key from the actual selection
-                const selected = input.val();
-                if (!Array.isArray(selected)) return;
-                var index = selected.indexOf(getSelect2OptionId(key));
-                if (index > -1) selected.splice(index, 1);
-                input.val(selected).trigger('change');
-                // Manually update the cache, that change event is not gonna trigger it
-                updateWorldEntryKeyOptionsCache([key], { remove: true });
-                // We need to "hack" the actual text input into the currently open textarea
-                input.next('span.select2-container').find('textarea')
-                    .val(key).trigger('input');
-            }, { openDrawer: true });
+        }
-        else {
+        data.entries[uid][entryKey] = !isNaN(value) ? value : null;
-            // Compatibility with mobile devices. On mobile we need a text input field, not a select option control, so we need its own event handlers
+        setWIOriginalDataValue(data, uid, `extensions.${entryKey.replace(/[A-Z]/g, m => `_${m.toLowerCase()}`)}`, data.entries[uid][entryKey]);
-            template.find(`select[name="${entryPropName}"]`).hide();
+        await saveWorldInfo(name, data);
-            input.show();
+    });
+    inputElem.val(entry[entryKey] ?? (clamp ? min : '')).trigger('input');
+}
-            input.on('input', async function (_, { skipReset, noSave } = {}) {
+/**
-                const uid = $(this).data('uid');
+ * Helper to handle tri-state selector for constant/normal/vectorized.
-                const value = String($(this).val());
+ */
-                !skipReset && await resetScrollHeight(this);
+function handleEntryStateSelectorHelper({ entryStateSelector, entry, data, name, setWIOriginalDataValue, saveWorldInfo }) {
-                if (!noSave) {
+    entryStateSelector.data('uid', entry.uid);
-                    data.entries[uid][entryPropName] = splitKeywordsAndRegexes(value);
+    entryStateSelector.on('click', function (event) {
-                    setWIOriginalDataValue(data, uid, originalDataValueName, data.entries[uid][entryPropName]);
+        event.stopPropagation();
-                    await saveWorldInfo(name, data);
+    });
-                    $(this).toggleClass('empty', !data.entries[uid][entryPropName].length);
+    entryStateSelector.on('input', async function () {
-                }
+        const uid = entry.uid;
-            });
+        const value = $(this).val();
-            input.val(entry[entryPropName].join(', ')).trigger('input', { skipReset: true });
+        switch (value) {
+            case 'constant':
+                data.entries[uid].constant = true;
+                data.entries[uid].vectorized = false;
+                setWIOriginalDataValue(data, uid, 'constant', true);
+                setWIOriginalDataValue(data, uid, 'extensions.vectorized', false);
+                break;
+            case 'normal':
+                data.entries[uid].constant = false;
+                data.entries[uid].vectorized = false;
+                setWIOriginalDataValue(data, uid, 'constant', false);
+                setWIOriginalDataValue(data, uid, 'extensions.vectorized', false);
+                break;
+            case 'vectorized':
+                data.entries[uid].constant = false;
+                data.entries[uid].vectorized = true;
+                setWIOriginalDataValue(data, uid, 'constant', false);
+                setWIOriginalDataValue(data, uid, 'extensions.vectorized', true);
+                break;
+        }
-        return { isFancy: isFancyInput, control: input };
+        await saveWorldInfo(name, data);
-    }
+    });
+    const entryState = () => entry.constant === true ? 'constant' : entry.vectorized === true ? 'vectorized' : 'normal';
+    entryStateSelector.find(`option[value=${entryState()}]`).prop('selected', true).trigger('input');
+}
+/**
+ * Helper to handle kill switch toggle.
+ */
+function handleEntryKillSwitchHelper({ entryKillSwitch, entry, data, name, setWIOriginalDataValue, saveWorldInfo, template }) {
+    entryKillSwitch.data('uid', entry.uid);
+    entryKillSwitch.on('click', async function () {
+        const uid = entry.uid;
+        data.entries[uid].disable = !data.entries[uid].disable;
+        const isActive = !data.entries[uid].disable;
+        setWIOriginalDataValue(data, uid, 'enabled', isActive);
+        template.toggleClass('disabledWIEntry', !isActive);
+        entryKillSwitch.toggleClass('fa-toggle-off', !isActive);
+        entryKillSwitch.toggleClass('fa-toggle-on', isActive);
+        await saveWorldInfo(name, data);
+    });
+    const isActive = !entry.disable;
+    template.toggleClass('disabledWIEntry', !isActive);
+    entryKillSwitch.toggleClass('fa-toggle-off', !isActive);
+    entryKillSwitch.toggleClass('fa-toggle-on', isActive);
+}
-    // key
+/**
-    const keyInput = enableKeysInput('key', 'keys');
+ * Main function to build the WI entry editor template.
+ */
+export async function getWorldEntry(name, data, entry) {
+    if (!data.entries[entry.uid]) return;
+    const template = WI_ENTRY_EDIT_TEMPLATE.clone();
+    template.data('uid', entry.uid);
+    template.attr('uid', entry.uid);
+    if (typeof power_user.wi_key_input_plaintext === 'undefined') power_user.wi_key_input_plaintext = true;
-    // keysecondary
+    // Key inputs
-    const keySecondaryInput = enableKeysInput('keysecondary', 'secondary_keys');
+    const keyInput = enableKeysInputHelper({ template, entry, entryPropName: 'key', originalDataValueName: 'keys', name, data });
+    const keySecondaryInput = enableKeysInputHelper({ template, entry, entryPropName: 'keysecondary', originalDataValueName: 'secondary_keys', name, data });
-    // draw key input switch button
+    // Key input switch
     template.find('.switch_input_type_icon').on('click', function () {
         power_user.wi_key_input_plaintext = !power_user.wi_key_input_plaintext;
         saveSettingsDebounced();
-        // Just redraw the panel
         const uid = ($(this).parents('.world_entry')).data('uid');
         updateEditor(uid, false);
         $(`.world_entry[uid="${uid}"] .inline-drawer-icon`).trigger('click');
-        // setTimeout(() => {
-        // }, debounce_timeout.standard);
     }).each((_, icon) => {
         $(icon).attr('title', $(icon).data(power_user.wi_key_input_plaintext ? 'tooltip-on' : 'tooltip-off'));
         $(icon).text($(icon).data(power_user.wi_key_input_plaintext ? 'icon-on' : 'icon-off'));
     });
-    // logic AND/NOT
+    // Logic AND/NOT
     const selectiveLogicDropdown = template.find('select[name="entryLogicType"]');
     selectiveLogicDropdown.data('uid', entry.uid);
+    selectiveLogicDropdown.on('click', e => e.stopPropagation());
-    selectiveLogicDropdown.on('click', function (event) {
-        event.stopPropagation();
-    });
     selectiveLogicDropdown.on('input', async function () {
         const uid = $(this).data('uid');
         const value = Number($(this).val());

         setWIOriginalDataValue(data, uid, 'selectiveLogic', data.entries[uid].selectiveLogic);
         await saveWorldInfo(name, data);
     });
+    template.find(`select[name="entryLogicType"] option[value=${entry.selectiveLogic}]`).prop('selected', true).trigger('input');
-    template
-        .find(`select[name="entryLogicType"] option[value=${entry.selectiveLogic}]`)
-        .prop('selected', true)
-        .trigger('input');
     // Character filter
     const characterFilterLabel = template.find('label[for="characterFilter"] > small');
     characterFilterLabel.text(entry.characterFilter?.isExclude ? 'Exclude Character(s)' : 'Filter to Character(s)');
-    // exclude characters checkbox
     const characterExclusionInput = template.find('input[name="character_exclusion"]');
     characterExclusionInput.data('uid', entry.uid);
     characterExclusionInput.on('input', async function () {

                 data.entries[uid].characterFilter.isExclude = value;
+            }
         } else if (value) {
-            Object.assign(
+            Object.assign(data.entries[uid], { characterFilter: { isExclude: true, names: [], tags: [] } });
-                data.entries[uid],
-                {
-                    characterFilter: {
-                        isExclude: true,
-                        names: [],
-                        tags: [],
-                    },
-                },
-            );
+        }
-        // Verify names to exist in the system
         if (data.entries[uid]?.characterFilter?.names?.length > 0) {
             for (const name of [...data.entries[uid].characterFilter.names]) {
                 if (!getContext().characters.find(x => x.avatar.replace(/\.[^/.]+$/, '') === name)) {
-                    console.warn(`World Info: Character ${name} not found. Removing from the entry filter.`, entry);
                     data.entries[uid].characterFilter.names = data.entries[uid].characterFilter.names.filter(x => x !== name);
+                }
+            }
+        }
         setWIOriginalDataValue(data, uid, 'character_filter', data.entries[uid].characterFilter);
         await saveWorldInfo(name, data);
     });

     const characterFilter = template.find('select[name="characterFilter"]');
     characterFilter.data('uid', entry.uid);
+    initCharacterFilterSelect2Helper(characterFilter, t);
-    if (!isMobile()) {
+    fillCharacterAndTagOptionsHelper({ characterFilter, entry, getContext });
-        $(characterFilter).select2({
+    handleCharacterFilterChangeHelper({
-            width: '100%',
+        characterFilter, data, entry, name, world_names, getContext, setWIOriginalDataValue, saveWorldInfo, t,
-            placeholder: t`Tie this entry to specific characters or characters with specific tags`,
-            allowClear: true,
-            closeOnSelect: false,
-        });
-    }
-    const characters = getContext().characters;
-    characters.forEach((character) => {
-        const option = document.createElement('option');
-        const name = character.avatar.replace(/\.[^/.]+$/, '') ?? character.name;
-        option.innerText = name;
-        option.selected = entry.characterFilter?.names?.includes(name);
-        option.setAttribute('data-type', 'character');
-        characterFilter.append(option);
-    });
-    const tags = getContext().tags;
-    tags.forEach((tag) => {
-        const option = document.createElement('option');
-        option.innerText = `[Tag] ${tag.name}`;
-        option.selected = entry.characterFilter?.tags?.includes(tag.id);
-        option.value = tag.id;
-        option.setAttribute('data-type', 'tag');
-        characterFilter.append(option);
-    });
-    characterFilter.on('mousedown change', async function (e) {
-        // If there's no world names, don't do anything
-        if (world_names.length === 0) {
-            e.preventDefault();
-            return;
-        }
-        const uid = $(this).data('uid');
-        const selected = $(this).find(':selected');
-        if ((!selected || selected?.length === 0) && !data.entries[uid].characterFilter?.isExclude) {
-            delete data.entries[uid].characterFilter;
-        } else {
-            const names = selected.filter('[data-type="character"]').map((_, e) => e instanceof HTMLOptionElement && e.innerText).toArray();
-            const tags = selected.filter('[data-type="tag"]').map((_, e) => e instanceof HTMLOptionElement && e.value).toArray();
-            Object.assign(
-                data.entries[uid],
-                {
-                    characterFilter: {
-                        isExclude: data.entries[uid].characterFilter?.isExclude ?? false,
-                        names: names,
-                        tags: tags,
-                    },
-                },
-            );
-        }
-        setWIOriginalDataValue(data, uid, 'character_filter', data.entries[uid].characterFilter);
-        await saveWorldInfo(name, data);
     });
-    // comment
+    // Comment
     const commentInput = template.find('textarea[name="comment"]');
     const commentToggle = template.find('input[name="addMemo"]');
     commentInput.data('uid', entry.uid);

         const value = $(this).val();
         !skipReset && await resetScrollHeight(this);
         data.entries[uid].comment = value;
         setWIOriginalDataValue(data, uid, 'comment', data.entries[uid].comment);
         await saveWorldInfo(name, data);
     });

     commentToggle.on('input', async function () {
         const uid = $(this).data('uid');
         const value = $(this).prop('checked');
-        //console.log(value)
+        const commentContainer = $(this).closest('.world_entry').find('.commentContainer');
-        const commentContainer = $(this)
-            .closest('.world_entry')
-            .find('.commentContainer');
         data.entries[uid].addMemo = value;
         await saveWorldInfo(name, data);
         value ? commentContainer.show() : commentContainer.hide();
     });
     commentInput.val(entry.comment).trigger('input', { skipReset: true });
-    //initScrollHeight(commentInput);
+    commentToggle.prop('checked', true).trigger('input');
-    commentToggle.prop('checked', true /* entry.addMemo */).trigger('input');
     commentToggle.parent().hide();
-    // content
+    // Content
     const counter = template.find('.world_entry_form_token_counter');
     const countTokensDebounced = debounce(async function (counter, value) {
         const numberOfTokens = await getTokenCountAsync(value);
         $(counter).text(numberOfTokens);
     }, debounce_timeout.relaxed);
     const contentInputId = `world_entry_content_${entry.uid}`;
     const contentInput = template.find('textarea[name="content"]');
     contentInput.data('uid', entry.uid);

         const uid = $(this).data('uid');
         const value = $(this).val();
         data.entries[uid].content = value;
         setWIOriginalDataValue(data, uid, 'content', data.entries[uid].content);
         await saveWorldInfo(name, data);
+        if (!skipCount) countTokensDebounced(counter, value);
-        if (skipCount) {
-            return;
-        }
-        // count tokens
-        countTokensDebounced(counter, value);
     });
     contentInput.val(entry.content).trigger('input', { skipCount: true });
+    template.find('.editor_maximize').attr('data-for', contentInputId);
-    const contentExpandButton = template.find('.editor_maximize');
-    contentExpandButton.attr('data-for', contentInputId);
     template.find('.inline-drawer-toggle').on('click', function () {
         if (counter.data('first-run')) {
             counter.data('first-run', false);

+        }
     });
-    // selective
+    // Selective
     const selectiveInput = template.find('input[name="selective"]');
     selectiveInput.data('uid', entry.uid);
     selectiveInput.on('input', async function () {
         const uid = $(this).data('uid');
         const value = $(this).prop('checked');
         data.entries[uid].selective = value;
         setWIOriginalDataValue(data, uid, 'selective', data.entries[uid].selective);
         await saveWorldInfo(name, data);
+        const keysecondary = $(this).closest('.world_entry').find('.keysecondary');
-        const keysecondary = $(this)
+        const keysecondarytextpole = $(this).closest('.world_entry').find('.keysecondarytextpole');
-            .closest('.world_entry')
+        const keyprimaryselect = $(this).closest('.world_entry').find('.keyprimaryselect');
-            .find('.keysecondary');
-        const keysecondarytextpole = $(this)
-            .closest('.world_entry')
-            .find('.keysecondarytextpole');
-        const keyprimaryselect = $(this)
-            .closest('.world_entry')
-            .find('.keyprimaryselect');
         const keyprimaryHeight = keyprimaryselect.outerHeight();
         keysecondarytextpole.css('height', keyprimaryHeight + 'px');
         value ? keysecondary.show() : keysecondary.hide();
     });
-    //forced on, ignored if empty
+    selectiveInput.prop('checked', true).trigger('input');
-    selectiveInput.prop('checked', true /* entry.selective */).trigger('input');
     selectiveInput.parent().hide();
+    // Order
-    // constant
-    /*
-    const constantInput = template.find('input[name="constant"]');
-    constantInput.data("uid", entry.uid);
-    constantInput.on("input", async function () {
-        const uid = $(this).data("uid");
-        const value = $(this).prop("checked");
-        data.entries[uid].constant = value;
-        setOriginalDataValue(data, uid, "constant", data.entries[uid].constant);
-        await saveWorldInfo(name, data);
-    });
-    constantInput.prop("checked", entry.constant).trigger("input");
-    */
-    // order
     const orderInput = template.find('input[name="order"]');
     orderInput.data('uid', entry.uid);
     orderInput.on('input', async function () {
         const uid = $(this).data('uid');
         const value = Number($(this).val());
         data.entries[uid].order = !isNaN(value) ? value : 0;
-        updatePosOrdDisplay(uid);
+        updatePosOrdDisplayHelper({ template, data, uid });
         setWIOriginalDataValue(data, uid, 'insertion_order', data.entries[uid].order);
         await saveWorldInfo(name, data);
     });
     orderInput.val(entry.order).trigger('input');
     orderInput.css('width', 'calc(3em + 15px)');
-    // group
+    // Group
     const groupInput = template.find('input[name="group"]');
     groupInput.data('uid', entry.uid);
     groupInput.on('input', async function () {
         const uid = $(this).data('uid');
         const value = String($(this).val()).trim();
         data.entries[uid].group = value;
         setWIOriginalDataValue(data, uid, 'extensions.group', data.entries[uid].group);
         await saveWorldInfo(name, data);

     groupInput.val(entry.group ?? '').trigger('input');
     setTimeout(() => createEntryInputAutocomplete(groupInput, getInclusionGroupCallback(data), { allowMultiple: true }), 1);
-    // inclusion priority
+    // Inclusion priority
     const groupOverrideInput = template.find('input[name="groupOverride"]');
     groupOverrideInput.data('uid', entry.uid);
     groupOverrideInput.on('input', async function () {

     });
     groupOverrideInput.prop('checked', entry.groupOverride).trigger('input');
-    // group weight
+    // Group weight
-    const groupWeightInput = template.find('input[name="groupWeight"]');
+    handleNumberInputHelper({
-    groupWeightInput.data('uid', entry.uid);
+        inputElem: template.find('input[name="groupWeight"]'),
-    groupWeightInput.on('input', async function () {
+        entry, entryKey: 'groupWeight', data, name, setWIOriginalDataValue, saveWorldInfo,
-        const uid = $(this).data('uid');
+        min: 1, max: 10000, clamp: true,
-        let value = Number($(this).val());
-        const min = Number($(this).attr('min'));
-        const max = Number($(this).attr('max'));
-        // Clamp the value
-        if (value < min) {
-            value = min;
-            $(this).val(min);
-        } else if (value > max) {
-            value = max;
-            $(this).val(max);
-        }
-        data.entries[uid].groupWeight = !isNaN(value) ? Math.abs(value) : 1;
-        setWIOriginalDataValue(data, uid, 'extensions.group_weight', data.entries[uid].groupWeight);
-        await saveWorldInfo(name, data);
     });
-    groupWeightInput.val(entry.groupWeight ?? DEFAULT_WEIGHT).trigger('input');
-    // sticky
-    const sticky = template.find('input[name="sticky"]');
-    sticky.data('uid', entry.uid);
-    sticky.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = Number($(this).val());
-        data.entries[uid].sticky = !isNaN(value) ? value : null;
-        setWIOriginalDataValue(data, uid, 'extensions.sticky', data.entries[uid].sticky);
+    // Sticky, cooldown, delay
-        await saveWorldInfo(name, data);
+    handleNumberInputHelper({
+        inputElem: template.find('input[name="sticky"]'),
+        entry, entryKey: 'sticky', data, name, setWIOriginalDataValue, saveWorldInfo,
+        min: 1, max: 10000, clamp: false,
     });
-    sticky.val(entry.sticky > 0 ? entry.sticky : '').trigger('input');
+    handleNumberInputHelper({
+        inputElem: template.find('input[name="cooldown"]'),
-    // cooldown
+        entry, entryKey: 'cooldown', data, name, setWIOriginalDataValue, saveWorldInfo,
-    const cooldown = template.find('input[name="cooldown"]');
+        min: 1, max: 10000, clamp: false,
-    cooldown.data('uid', entry.uid);
-    cooldown.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = Number($(this).val());
-        data.entries[uid].cooldown = !isNaN(value) ? value : null;
-        setWIOriginalDataValue(data, uid, 'extensions.cooldown', data.entries[uid].cooldown);
-        await saveWorldInfo(name, data);
     });
-    cooldown.val(entry.cooldown > 0 ? entry.cooldown : '').trigger('input');
+    handleNumberInputHelper({
+        inputElem: template.find('input[name="delay"]'),
-    // delay
+        entry, entryKey: 'delay', data, name, setWIOriginalDataValue, saveWorldInfo,
-    const delay = template.find('input[name="delay"]');
+        min: 1, max: 10000, clamp: false,
-    delay.data('uid', entry.uid);
-    delay.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = Number($(this).val());
-        data.entries[uid].delay = !isNaN(value) ? value : null;
-        setWIOriginalDataValue(data, uid, 'extensions.delay', data.entries[uid].delay);
-        await saveWorldInfo(name, data);
     });
-    delay.val(entry.delay > 0 ? entry.delay : '').trigger('input');
-    // probability
+    // Probability
-    if (entry.probability === undefined) {
+    handleProbabilityInputHelper({ probabilityInput: template.find('input[name="probability"]'), data, entry, name, setWIOriginalDataValue, saveWorldInfo });
-        entry.probability = null;
+    handleProbabilityToggleHelper({
-    }
+        probabilityToggle: template.find('input[name="useProbability"]'),
+        data, entry, name,
-    // depth
+        probabilityInput: template.find('input[name="probability"]'),
-    const depthInput = template.find('input[name="depth"]');
+        setWIOriginalDataValue, saveWorldInfo,
-    depthInput.data('uid', entry.uid);
-    depthInput.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = Number($(this).val());
-        data.entries[uid].depth = !isNaN(value) ? value : 0;
-        updatePosOrdDisplay(uid);
-        setWIOriginalDataValue(data, uid, 'extensions.depth', data.entries[uid].depth);
-        await saveWorldInfo(name, data);
     });
-    depthInput.val(entry.depth ?? DEFAULT_DEPTH).trigger('input');
-    depthInput.css('width', 'calc(3em + 15px)');
-    // Hide by default unless depth is specified
-    if (entry.position === world_info_position.atDepth) {
-        //depthInput.parent().hide();
-    }
-    const probabilityInput = template.find('input[name="probability"]');
-    probabilityInput.data('uid', entry.uid);
-    probabilityInput.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = Number($(this).val());
-        data.entries[uid].probability = !isNaN(value) ? value : null;
-        // Clamp probability to 0-100
+    // Depth
-        if (data.entries[uid].probability !== null) {
+    handleNumberInputHelper({
-            data.entries[uid].probability = Math.min(100, Math.max(0, data.entries[uid].probability));
+        inputElem: template.find('input[name="depth"]'),
+        entry, entryKey: 'depth', data, name, setWIOriginalDataValue, saveWorldInfo,
-            if (data.entries[uid].probability !== value) {
+        min: 0, max: MAX_SCAN_DEPTH, clamp: false,
-                $(this).val(data.entries[uid].probability);
-            }
-        }
-        setWIOriginalDataValue(data, uid, 'extensions.probability', data.entries[uid].probability);
-        await saveWorldInfo(name, data);
     });
-    probabilityInput.val(entry.probability).trigger('input');
+    template.find('input[name="depth"]').css('width', 'calc(3em + 15px)');
-    probabilityInput.css('width', 'calc(3em + 15px)');
-    // probability toggle
-    if (entry.useProbability === undefined) {
-        entry.useProbability = false;
-    }
-    const probabilityToggle = template.find('input[name="useProbability"]');
-    probabilityToggle.data('uid', entry.uid);
-    probabilityToggle.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = $(this).prop('checked');
-        data.entries[uid].useProbability = value;
-        const probabilityContainer = $(this)
-            .closest('.world_entry')
-            .find('.probabilityContainer');
-        await saveWorldInfo(name, data);
-        value ? probabilityContainer.show() : probabilityContainer.hide();
-        if (value && data.entries[uid].probability === null) {
-            data.entries[uid].probability = 100;
-        }
-        if (!value) {
-            data.entries[uid].probability = null;
-        }
-        probabilityInput.val(data.entries[uid].probability).trigger('input');
-    });
-    //forced on, 100% by default
-    probabilityToggle.prop('checked', true /* entry.useProbability */).trigger('input');
-    probabilityToggle.parent().hide();
-    // position
-    if (entry.position === undefined) {
-        entry.position = 0;
-    }
+    // Position
+    if (entry.position === undefined) entry.position = 0;
     const positionInput = template.find('select[name="position"]');
-    //initScrollHeight(positionInput);
     positionInput.data('uid', entry.uid);
-    positionInput.on('click', function (event) {
+    positionInput.on('click', e => e.stopPropagation());
-        // Prevent closing the drawer on clicking the input
-        event.stopPropagation();
-    });
     positionInput.on('input', async function () {
         const uid = $(this).data('uid');
         const value = Number($(this).val());
         data.entries[uid].position = !isNaN(value) ? value : 0;
+        const depthInput = template.find('input[name="depth"]');
         if (value === world_info_position.atDepth) {
             depthInput.prop('disabled', false);
             depthInput.css('visibility', 'visible');
-            //depthInput.parent().show();
             const role = Number($(this).find(':selected').data('role'));
             data.entries[uid].role = role;
         } else {
             depthInput.prop('disabled', true);
             depthInput.css('visibility', 'hidden');
             data.entries[uid].role = null;
-            //depthInput.parent().hide();
+        }
-        updatePosOrdDisplay(uid);
+        updatePosOrdDisplayHelper({ template, data, uid });
-        // Spec v2 only supports before_char and after_char
         setWIOriginalDataValue(data, uid, 'position', data.entries[uid].position == 0 ? 'before_char' : 'after_char');
-        // Write the original value as extensions field
         setWIOriginalDataValue(data, uid, 'extensions.position', data.entries[uid].position);
         setWIOriginalDataValue(data, uid, 'extensions.role', data.entries[uid].role);
         await saveWorldInfo(name, data);
     });
     const roleValue = entry.position === world_info_position.atDepth ? String(entry.role ?? extension_prompt_roles.SYSTEM) : '';
-    template
+    template.find(`select[name="position"] option[value="${entry.position}"][data-role="${roleValue}"]`).prop('selected', true).trigger('input');
-        .find(`select[name="position"] option[value="${entry.position}"][data-role="${roleValue}"]`)
-        .prop('selected', true)
-        .trigger('input');
-    //add UID above content box (less important doesn't need to be always visible)
+    // UID display
     template.find('.world_entry_form_uid_value').text(`(UID: ${entry.uid})`);
-    //new tri-state selector for constant/normal/vectorized
+    // Tri-state selector
-    const entryStateSelector = template.find('select[name="entryStateSelector"]');
+    handleEntryStateSelectorHelper({
-    entryStateSelector.data('uid', entry.uid);
+        entryStateSelector: template.find('select[name="entryStateSelector"]'),
-    entryStateSelector.on('click', function (event) {
+        entry, data, name, setWIOriginalDataValue, saveWorldInfo,
-        // Prevent closing the drawer on clicking the input
-        event.stopPropagation();
     });
-    entryStateSelector.on('input', async function () {
-        const uid = entry.uid;
-        const value = $(this).val();
-        switch (value) {
-            case 'constant':
-                data.entries[uid].constant = true;
-                data.entries[uid].vectorized = false;
-                setWIOriginalDataValue(data, uid, 'constant', true);
-                setWIOriginalDataValue(data, uid, 'extensions.vectorized', false);
-                break;
-            case 'normal':
-                data.entries[uid].constant = false;
-                data.entries[uid].vectorized = false;
-                setWIOriginalDataValue(data, uid, 'constant', false);
-                setWIOriginalDataValue(data, uid, 'extensions.vectorized', false);
-                break;
-            case 'vectorized':
-                data.entries[uid].constant = false;
-                data.entries[uid].vectorized = true;
-                setWIOriginalDataValue(data, uid, 'constant', false);
-                setWIOriginalDataValue(data, uid, 'extensions.vectorized', true);
-                break;
-        }
-        await saveWorldInfo(name, data);
-    });
-    const entryKillSwitch = template.find('div[name="entryKillSwitch"]');
-    entryKillSwitch.data('uid', entry.uid);
-    entryKillSwitch.on('click', async function (event) {
-        const uid = entry.uid;
-        data.entries[uid].disable = !data.entries[uid].disable;
-        const isActive = !data.entries[uid].disable;
-        setWIOriginalDataValue(data, uid, 'enabled', isActive);
-        template.toggleClass('disabledWIEntry', !isActive);
-        entryKillSwitch.toggleClass('fa-toggle-off', !isActive);
-        entryKillSwitch.toggleClass('fa-toggle-on', isActive);
-        await saveWorldInfo(name, data);
+    // Kill switch
+    handleEntryKillSwitchHelper({
+        entryKillSwitch: template.find('div[name="entryKillSwitch"]'),
+        entry, data, name, setWIOriginalDataValue, saveWorldInfo, template,
     });
-    const entryState = function () {
+    // Exclude/prevent recursion
-        if (entry.constant === true) {
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'excludeRecursion', data, name });
-            return 'constant';
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'preventRecursion', data, name });
-        } else if (entry.vectorized === true) {
-            return 'vectorized';
-        } else {
-            return 'normal';
-        }
-    };
-    const isActive = !entry.disable;
-    template.toggleClass('disabledWIEntry', !isActive);
-    entryKillSwitch.toggleClass('fa-toggle-off', !isActive);
-    entryKillSwitch.toggleClass('fa-toggle-on', isActive);
-    template
-        .find(`select[name="entryStateSelector"] option[value=${entryState()}]`)
-        .prop('selected', true)
-        .trigger('input');
-    // exclude recursion
-    const excludeRecursionInput = template.find('input[name="exclude_recursion"]');
-    excludeRecursionInput.data('uid', entry.uid);
-    excludeRecursionInput.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = $(this).prop('checked');
-        data.entries[uid].excludeRecursion = value;
-        setWIOriginalDataValue(data, uid, 'extensions.exclude_recursion', data.entries[uid].excludeRecursion);
-        await saveWorldInfo(name, data);
-    });
-    excludeRecursionInput.prop('checked', entry.excludeRecursion).trigger('input');
-    // prevent recursion
-    const preventRecursionInput = template.find('input[name="prevent_recursion"]');
-    preventRecursionInput.data('uid', entry.uid);
-    preventRecursionInput.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = $(this).prop('checked');
-        data.entries[uid].preventRecursion = value;
-        setWIOriginalDataValue(data, uid, 'extensions.prevent_recursion', data.entries[uid].preventRecursion);
-        await saveWorldInfo(name, data);
-    });
-    preventRecursionInput.prop('checked', entry.preventRecursion).trigger('input');
-    // delay until recursion
+    // Delay until recursion
-    // delay until recursion level
     const delayUntilRecursionInput = template.find('input[name="delay_until_recursion"]');
     delayUntilRecursionInput.data('uid', entry.uid);
     const delayUntilRecursionLevelInput = template.find('input[name="delayUntilRecursionLevel"]');

     delayUntilRecursionInput.on('input', async function () {
         const uid = $(this).data('uid');
         const toggled = $(this).prop('checked');
-        // If the value contains a number, we'll take that one (set by the level input), otherwise we can use true/false switch
         const value = toggled ? data.entries[uid].delayUntilRecursion || true : false;
         if (!toggled) delayUntilRecursionLevelInput.val('');
         data.entries[uid].delayUntilRecursion = value;
         setWIOriginalDataValue(data, uid, 'extensions.delay_until_recursion', data.entries[uid].delayUntilRecursion);
         await saveWorldInfo(name, data);

             : content === 1 ? true
                 : !isNaN(Number(content)) ? Number(content)
                     : false;
         data.entries[uid].delayUntilRecursion = value;
         setWIOriginalDataValue(data, uid, 'extensions.delay_until_recursion', data.entries[uid].delayUntilRecursion);
         await saveWorldInfo(name, data);
     });
-    // No need to retrigger inpout event, we'll just set the curret current value. It was edited/saved above already
     delayUntilRecursionLevelInput.val(['number', 'string'].includes(typeof entry.delayUntilRecursion) ? entry.delayUntilRecursion : '').trigger('input');
-    // duplicate button
+    // Duplicate/delete/move buttons
-    const duplicateButton = template.find('.duplicate_entry_button');
+    template.find('.duplicate_entry_button').data('uid', entry.uid).on('click', async function () {
-    duplicateButton.data('uid', entry.uid);
-    duplicateButton.on('click', async function () {
         const uid = $(this).data('uid');
-        const entry = duplicateWorldInfoEntry(data, uid);
+        const entryDup = duplicateWorldInfoEntry(data, uid);
-        if (entry) {
+        if (entryDup) {
             await saveWorldInfo(name, data);
-            updateEditor(entry.uid);
+            updateEditor(entryDup.uid);
+        }
     });
+    template.find('.delete_entry_button').data('uid', entry.uid).on('click', async function (e) {
-    // delete button
-    const deleteButton = template.find('.delete_entry_button');
-    deleteButton.data('uid', entry.uid);
-    deleteButton.on('click', async function (e) {
         e.stopPropagation();
         const uid = $(this).data('uid');
         const deleted = await deleteWorldInfoEntry(data, uid);

         await saveWorldInfo(name, data);
         updateEditor(navigation_option.previous);
     });
+    template.find('.move_entry_button').attr('data-uid', entry.uid).attr('data-current-world', name).on('click', async function (e) {
-    // move button
-    const moveButton = template.find('.move_entry_button');
-    moveButton.attr('data-uid', entry.uid);
-    moveButton.attr('data-current-world', name);
-    moveButton.on('click', async function (e) {
         e.stopPropagation();
         const sourceUid = $(this).attr('data-uid');
         const sourceWorld = $(this).attr('data-current-world');
         const sourceWorldInfo = await loadWorldInfo(sourceWorld);
-        if (!sourceWorldInfo) {
+        if (!sourceWorldInfo) return;
-            return;
-        }
         const sourceName = sourceWorldInfo.entries[sourceUid]?.comment;
-        if (sourceName === undefined) {
+        if (sourceName === undefined) return;
-            return;
-        }
         const select = document.createElement('select');
         select.id = 'move_entry_target_select';
         select.classList.add('text_pole', 'wide100p', 'marginTop10');
         const defaultOption = document.createElement('option');
         defaultOption.value = '';
         defaultOption.textContent = `-- ${t`Select Target Lorebook`} --`;
         select.appendChild(defaultOption);
         let selectableWorldCount = 0;
         world_names.forEach(worldName => {
-            if (worldName !== sourceWorld) { // Exclude current world
+            if (worldName !== sourceWorld) {
                 const option = document.createElement('option');
                 option.value = world_names.indexOf(worldName).toString();
                 option.textContent = worldName;

                 selectableWorldCount++;
+            }
         });
         if (selectableWorldCount === 0) {
             toastr.warning(t`There are no other lorebooks to move to.`);
             return;
+        }
-        // Create wrapper div
         const wrapper = document.createElement('div');
         wrapper.textContent = t`Move '${sourceName}' to:`;
-        // Create container and append elements
         const container = document.createElement('div');
         container.appendChild(wrapper);
         container.appendChild(select);
         let selectedWorldIndex = -1;
         select.addEventListener('change', function () {
             selectedWorldIndex = this.value === '' ? -1 : Number(this.value);
         });
         const popupConfirm = await callGenericPopup(container, POPUP_TYPE.CONFIRM, '', {
             okButton: t`Move`,
             cancelButton: t`Cancel`,
         });
-        if (!popupConfirm) {
+        if (!popupConfirm) return;
-            return;
+        if (selectedWorldIndex === -1) return;
-        }
-        if (selectedWorldIndex === -1) {
-            return;
-        }
         const selectedValue = world_names[selectedWorldIndex];
         if (!selectedValue) {
             toastr.warning(t`Please select a target lorebook.`);
             return;
+        }
         await moveWorldInfoEntry(sourceWorld, selectedValue, sourceUid);
     });
-    // scan depth
+    // Scan depth
     const scanDepthInput = template.find('input[name="scanDepth"]');
     scanDepthInput.data('uid', entry.uid);
     scanDepthInput.on('input', async function () {
         const uid = $(this).data('uid');
         const isEmpty = $(this).val() === '';
         const value = Number($(this).val());
-        // Clamp if necessary
         if (value < 0) {
             $(this).val(0).trigger('input');
             toastr.warning('Scan depth cannot be negative');
             return;
+        }
         if (value > MAX_SCAN_DEPTH) {
             $(this).val(MAX_SCAN_DEPTH).trigger('input');
             toastr.warning(`Scan depth cannot exceed ${MAX_SCAN_DEPTH}`);
             return;
+        }
         data.entries[uid].scanDepth = !isEmpty && !isNaN(value) && value >= 0 && value <= MAX_SCAN_DEPTH ? Math.floor(value) : null;
         setWIOriginalDataValue(data, uid, 'extensions.scan_depth', data.entries[uid].scanDepth);
         await saveWorldInfo(name, data);
     });
     scanDepthInput.val(entry.scanDepth ?? null).trigger('input');
-    // case sensitive select
+    // Boolean selects
-    const caseSensitiveSelect = template.find('select[name="caseSensitive"]');
+    handleBooleanSelectHelper({
-    caseSensitiveSelect.data('uid', entry.uid);
+        selectElem: template.find('select[name="caseSensitive"]'),
-    caseSensitiveSelect.on('input', async function () {
+        entry, entryKey: 'caseSensitive', data, name, setWIOriginalDataValue, saveWorldInfo,
-        const uid = $(this).data('uid');
-        const value = $(this).val();
-        data.entries[uid].caseSensitive = value === 'null' ? null : value === 'true';
-        setWIOriginalDataValue(data, uid, 'extensions.case_sensitive', data.entries[uid].caseSensitive);
-        await saveWorldInfo(name, data);
     });
-    caseSensitiveSelect.val((entry.caseSensitive === null || entry.caseSensitive === undefined) ? 'null' : entry.caseSensitive ? 'true' : 'false').trigger('input');
+    handleBooleanSelectHelper({
+        selectElem: template.find('select[name="matchWholeWords"]'),
-    // match whole words select
+        entry, entryKey: 'matchWholeWords', data, name, setWIOriginalDataValue, saveWorldInfo,
-    const matchWholeWordsSelect = template.find('select[name="matchWholeWords"]');
-    matchWholeWordsSelect.data('uid', entry.uid);
-    matchWholeWordsSelect.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = $(this).val();
-        data.entries[uid].matchWholeWords = value === 'null' ? null : value === 'true';
-        setWIOriginalDataValue(data, uid, 'extensions.match_whole_words', data.entries[uid].matchWholeWords);
-        await saveWorldInfo(name, data);
     });
-    matchWholeWordsSelect.val((entry.matchWholeWords === null || entry.matchWholeWords === undefined) ? 'null' : entry.matchWholeWords ? 'true' : 'false').trigger('input');
+    handleBooleanSelectHelper({
+        selectElem: template.find('select[name="useGroupScoring"]'),
-    // use group scoring select
+        entry, entryKey: 'useGroupScoring', data, name, setWIOriginalDataValue, saveWorldInfo,
-    const useGroupScoringSelect = template.find('select[name="useGroupScoring"]');
-    useGroupScoringSelect.data('uid', entry.uid);
-    useGroupScoringSelect.on('input', async function () {
-        const uid = $(this).data('uid');
-        const value = $(this).val();
-        data.entries[uid].useGroupScoring = value === 'null' ? null : value === 'true';
-        setWIOriginalDataValue(data, uid, 'extensions.use_group_scoring', data.entries[uid].useGroupScoring);
-        await saveWorldInfo(name, data);
     });
-    useGroupScoringSelect.val((entry.useGroupScoring === null || entry.useGroupScoring === undefined) ? 'null' : entry.useGroupScoring ? 'true' : 'false').trigger('input');
-    function handleMatchCheckbox(fieldName) {
+    // Match checkboxes
-        const key = originalWIDataKeyMap[fieldName];
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'matchPersonaDescription', data, name });
-        const checkBoxElem = template.find(`input[type="checkbox"][name="${fieldName}"]`);
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'matchCharacterDescription', data, name });
-        checkBoxElem.data('uid', entry.uid);
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'matchCharacterPersonality', data, name });
-        checkBoxElem.on('input', async function () {
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'matchCharacterDepthPrompt', data, name });
-            const uid = $(this).data('uid');
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'matchScenario', data, name });
-            const value = $(this).prop('checked');
+    handleMatchCheckboxHelper({ template, entry, fieldName: 'matchCreatorNotes', data, name });
-            data.entries[uid][fieldName] = value;
+    // Automation ID
-            setWIOriginalDataValue(data, uid, key, data.entries[uid][fieldName]);
-            await saveWorldInfo(name, data);
-        });
-        checkBoxElem.prop('checked', !!entry[fieldName]).trigger('input');
-    }
-    handleMatchCheckbox('matchPersonaDescription');
-    handleMatchCheckbox('matchCharacterDescription');
-    handleMatchCheckbox('matchCharacterPersonality');
-    handleMatchCheckbox('matchCharacterDepthPrompt');
-    handleMatchCheckbox('matchScenario');
-    handleMatchCheckbox('matchCreatorNotes');
-    // automation id
     const automationIdInput = template.find('input[name="automationId"]');
     automationIdInput.data('uid', entry.uid);
     automationIdInput.on('input', async function () {
         const uid = $(this).data('uid');
         const value = $(this).val();
         data.entries[uid].automationId = value;
         setWIOriginalDataValue(data, uid, 'extensions.automation_id', data.entries[uid].automationId);
         await saveWorldInfo(name, data);

     automationIdInput.val(entry.automationId ?? '').trigger('input');
     setTimeout(() => createEntryInputAutocomplete(automationIdInput, getAutomationIdCallback(data)), 1);
-    template.find('.inline-drawer-content').css('display', 'none'); //entries start collapsed
+    template.find('.inline-drawer-content').css('display', 'none');
-    function updatePosOrdDisplay(uid) {
-        // display position/order info left of keyword box
-        let entry = data.entries[uid];
-        let posText = entry.position;
-        switch (entry.position) {
-            case 0:
-                posText = '↑CD';
-                break;
-            case 1:
-                posText = 'CD↓';
-                break;
-            case 2:
-                posText = '↑AN';
-                break;
-            case 3:
-                posText = 'AN↓';
-                break;
-            case 4:
-                posText = `@D${entry.depth}`;
-                break;
-        }
-        template.find('.world_entry_form_position_value').text(`(${posText} ${entry.order})`);
-    }
     return template;
+}

  * @property {Set<any>} allActivatedEntries All entries.
  * @returns {Promise<WIActivated>} The world info activated.
  */
+//MARK: checkWorldInfo
 export async function checkWorldInfo(chat, maxContext, isDryRun, globalScanData) {
     const context = getContext();
     const buffer = new WorldInfoBuffer(chat, globalScanData);