Code cleanup

eslint.config.mjs

@@ -52,6 +52,7 @@ const jsConfig = defineConfig([
         showContributors: 'readonly',
         initServerInfo: 'readonly',
         createButtonsForExtensions: 'readonly',
+        Split: 'readonly',
       },
     },
   },
@@ -109,8 +110,10 @@ const jsConfig = defineConfig([
       '@stylistic/max-len': [
         'warn',
         {
-          code: 300,
+          code: 240,
           tabWidth: 2,
+          ignoreComments: true,
+          ignoreUrls: true,
         },
       ],
       '@stylistic/max-statements-per-line': 'off',
@@ -257,7 +260,7 @@ export default defineConfig([
     '**/split.js',
     '**/exifr.js',
     '**/iframeResizer.min.js',
-    '**/Vlad-Neomorph.css',
+    '**/Vlad-Neomorph.css', // Waiting on plugin fix https://github.com/eslint/css/pull/411
   ]),
   ...jsConfig,
   // ...typescriptConfig,

javascript/components.js

@@ -32,7 +32,7 @@ function initSplitComponents() {
     // log('splitComponent', ids, initSizes, minSizes, direction, gutterSize);
     const onDragEnd = (evt) => setStored(`${id}-sizes`, evt);
     // log('splitSizes', id, initSizes, minSizes, maxSizes);
-    splitInstances[id] = Split(ids, { // eslint-disable-line no-undef
+    splitInstances[id] = Split(ids, {
       sizes: initSizes,
       minSize: minSizes,
       maxSize: maxSizes,
@@ -155,7 +155,15 @@ function initTabComponents() {
     const tabGroup = elem.getAttribute('tabGroup');
     const tabParent = elem.parentElement;
     const uid = tabGroup || tabParent?.id;
-    const siblingTabs = [...(tabGroup ? appUiUx.querySelectorAll(`[tabGroup="${tabGroup}"]`) : tabParent ? tabParent.children : [])].filter((tab) => tab !== elem); // eslint-disable-line no-nested-ternary
+    let siblingTabs;
+    if (tabGroup) {
+      siblingTabs = [...appUiUx.querySelectorAll(`.xtabs-tab[tabGroup="${tabGroup}"]`)];
+    } else if (tabParent) {
+      siblingTabs = [...tabParent.children];
+    } else {
+      siblingTabs = [];
+    }
+    siblingTabs = siblingTabs.filter((tab) => tab !== elem);
 
     elem.addEventListener('click', () => {
       if (uid) setStored(`tab-${uid}-current`, elem.id);
@@ -303,7 +311,20 @@ async function setupDropdowns() {
 async function createButtonsForExtensions() {
   const other_extensions = document.querySelector('#other_extensions');
   const other_views = document.querySelector('#split-left');
-  const no_button_tabs = ['tab_txt2img', 'tab_img2img', 'tab_control', 'tab_video', 'tab_process', 'tab_caption', 'tab_gallery', 'tab_models', 'tab_extensions', 'tab_system', 'tab_info', 'tab_sdnext_uiux_core'];
+  const no_button_tabs = [
+    'tab_txt2img',
+    'tab_img2img',
+    'tab_control',
+    'tab_video',
+    'tab_process',
+    'tab_caption',
+    'tab_gallery',
+    'tab_models',
+    'tab_extensions',
+    'tab_system',
+    'tab_info',
+    'tab_sdnext_uiux_core',
+  ];
   const snakeToCamel = (str) => str.replace(/(_\w)/g, (match) => match[1].toUpperCase());
   document.querySelectorAll('#tabs > .tabitem').forEach((c) => {
     const cid = c.id;

javascript/sdnext-modernui.js

@@ -14,12 +14,10 @@ window.getUICurrentTabContent = () => gradioApp().querySelector('.xtabs-item:not
 window.getSettingsTabs = () => gradioApp().querySelectorAll('#layout-settings .tabitem');
 
 function functionWaitForFlag(checkFlag) {
-  return async function () { // eslint-disable-line func-names
-    return new Promise((resolve) => {
-      const check = () => (checkFlag() ? resolve() : setTimeout(check));
-      check();
-    });
-  };
+  return async () => new Promise((resolve) => {
+    const check = () => (checkFlag() ? resolve() : setTimeout(check, 50));
+    check();
+  });
 }
 
 let uiFlagInitialized = false;
@@ -34,7 +32,8 @@ function logPrettyPrint() {
   let arg;
   let i;
   const dt = new Date();
-  const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`;
+  const [h, m, s, ms] = [dt.getHours().toString(), dt.getMinutes().toString(), dt.getSeconds().toString(), dt.getMilliseconds().toString()];
+  const ts = `${h.padStart(2, '0')}:${m.padStart(2, '0')}:${s.padStart(2, '0')}.${ms.padStart(3, '0')}`;
   output += `<div class="log-row"><span class="log-date">${ts}</span>`;
 
   for (i = 0; i < arguments.length; i++) {
@@ -254,7 +253,6 @@ async function extraTweaks() {
   // disable spellchecks
   document.querySelectorAll('input[type="text"], textarea').forEach((elem) => { elem.setAttribute('spellcheck', 'false'); });
 }
-extraTweaks = logFn(extraTweaks); // eslint-disable-line no-func-assign
 
 async function uiuxOptionSettings() {
   let el;
@@ -324,7 +322,6 @@ async function uiuxOptionSettings() {
 async function loadAllPortals() {
   appUiUx.querySelectorAll('.portal').forEach((elem, index, array) => movePortal(elem, 1, index, array.length)); // eslint-disable-line no-use-before-define
 }
-loadAllPortals = logFn(loadAllPortals); // eslint-disable-line no-func-assign
 
 function movePortal(portalElem, tries, index, length) {
   const MAX_TRIES = 3;
@@ -504,7 +501,7 @@ async function mainUiUx() {
   createButtonsForExtensions();
   setupAnimationEventListeners();
   initSplitComponents();
-  await loadAllPortals();
+  await logFn(loadAllPortals)();
   initTabComponents();
   initButtonComponents();
   setupToolButtons();
@@ -521,11 +518,10 @@ async function mainUiUx() {
   showContributors();
   switchMobile();
   trackAsideFocus();
-  extraTweaks();
+  logFn(extraTweaks)();
   applyAutoHide();
   initServerInfo();
   uiFlagInitialized = true;
 }
 
-mainUiUx = logFn(mainUiUx); // eslint-disable-line no-func-assign
-onUiReady(mainUiUx);
+onUiReady(logFn(mainUiUx)());

package.json

@@ -9,7 +9,7 @@
   "homepage": "https://github.com/BinaryQuantumSoul/sdnext-modernui",
   "license": "AGPLv3",
   "engines": {
-    "node": ">=22.0.0"
+    "node": "^22.13.0 || >=24"
   },
   "repository": {
     "type": "git",

themes/Default.css

@@ -207,7 +207,7 @@ input[type="checkbox"], input[type="radio"] {
 }
 
 input[type="checkbox"]:hover, input[type="radio"]:hover {
-  /* Known bug with @eslint/css and @eslint/css-tree. Related to https://github.com/eslint/css/issues/246 */
+  /* Known bug causing values to be interpreted as strings. Waiting on https://github.com/eslint/css/pull/411 */
   /* eslint-disable-next-line css/no-invalid-properties */
   background-color: var(--sd-button-selected-color);
 }

themes/Vlad-Blocks.css

@@ -196,7 +196,7 @@ input[type="checkbox"], input[type="radio"] {
 }
 
 input[type="checkbox"]:hover, input[type="radio"]:hover {
-  /* Known bug with @eslint/css and @eslint/css-tree. Related to https://github.com/eslint/css/issues/246 */
+  /* Known bug causing values to be interpreted as strings. Waiting on https://github.com/eslint/css/pull/411 */
   /* eslint-disable-next-line css/no-invalid-properties */
   background-color: var(--sd-button-selected-color);
 }