Adjusted functionality and style of class/background/species screens

src/main/wikiServer.ts

@@ -350,7 +350,7 @@ function getDesktopReskinBootstrap(externalImageRoot: string | null): string {
     addCharactersMenu();
     addResetOnboardingMenu();
     bindNativeNavbarSync();
-    postNativeNavbarModel();
+    queueNativeNavbarModelPost({ isForce: true });
   };
 
   const NAVBAR_ACTION_ATTR = "data-5etd-nav-action-id";
@@ -593,17 +593,50 @@ function getDesktopReskinBootstrap(externalImageRoot: string | null): string {
     return groups;
   };
 
-  const postNativeNavbarModel = () => {
+  let navbarModelLastSignature = "";
+  let isNavbarModelPostQueued = false;
+
+  const postNativeNavbarModel = ({ isForce = false } = {}) => {
     if (!window.parent || window.parent === window) return;
+    const groups = buildNativeNavbarGroups();
+    let nextSignature = "";
+    try {
+      nextSignature = JSON.stringify(groups);
+    } catch {
+      nextSignature = \`groups:\${groups.length}:\${Date.now()}\`;
+    }
+
+    if (!isForce && nextSignature === navbarModelLastSignature) {
+      return;
+    }
+    navbarModelLastSignature = nextSignature;
+
     window.parent.postMessage(
       {
         type: "5etd:native-navbar-data",
-        groups: buildNativeNavbarGroups()
+        groups
       },
       "*"
     );
   };
 
+  const queueNativeNavbarModelPost = ({ isForce = false } = {}) => {
+    if (isForce) {
+      isNavbarModelPostQueued = false;
+      postNativeNavbarModel({ isForce: true });
+      return;
+    }
+
+    if (isNavbarModelPostQueued) {
+      return;
+    }
+    isNavbarModelPostQueued = true;
+    window.setTimeout(() => {
+      isNavbarModelPostQueued = false;
+      postNativeNavbarModel();
+    }, 80);
+  };
+
   let navbarSyncObserver = null;
   const bindNativeNavbarSync = () => {
     const navbar = document.getElementById("navbar");
@@ -614,9 +647,9 @@ function getDesktopReskinBootstrap(externalImageRoot: string | null): string {
     navbar.dataset.desktopNavSyncBound = "1";
     navbarSyncObserver?.disconnect?.();
     navbarSyncObserver = new MutationObserver(() => {
-      window.requestAnimationFrame(postNativeNavbarModel);
+      queueNativeNavbarModelPost();
     });
-    navbarSyncObserver.observe(navbar, { childList: true, subtree: true, attributes: true, characterData: true });
+    navbarSyncObserver.observe(navbar, { childList: true, subtree: true });
   };
 
   const runNativeNavbarAction = (actionId) => {
@@ -649,7 +682,7 @@ function getDesktopReskinBootstrap(externalImageRoot: string | null): string {
 
     if (data.type === "5etd:native-navbar-request") {
       bindNativeNavbarSync();
-      postNativeNavbarModel();
+      queueNativeNavbarModelPost({ isForce: true });
       return;
     }
 
@@ -693,7 +726,7 @@ html.desktop-reskin .page__header {
   border: 1px solid rgba(109, 164, 223, 0.32) !important;
   border-radius: 18px;
   background: linear-gradient(115deg, rgba(17, 29, 47, 0.98), rgba(24, 38, 58, 0.96) 64%, rgba(87, 58, 32, 0.88));
-  backdrop-filter: blur(14px);
+  // backdrop-filter: blur(14px);
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
 }