fix: sidebar layout not being applied on pageload #249

src/plugins/monofile.ts

@@ -465,8 +465,6 @@ export function tryLoad() {
   )
 }
 
-
-
 function ReplaceMenuSVG(element: HTMLElement, svg: string) {
   let item = element.firstChild as HTMLElement
   item!.firstChild!.remove()
@@ -477,9 +475,10 @@ function ReplaceMenuSVG(element: HTMLElement, svg: string) {
   item.insertBefore(newsvg as Node, item.firstChild)
 }
 
+const processedSymbol = Symbol('processed')
+
 export async function ObserveMenuItemPosition() {
   await waitForElm("#menu > ul > li")
-  await delay(100)
   
   eventManager.register(
     "menuList",
@@ -488,6 +487,19 @@ export async function ObserveMenuItemPosition() {
     },
     (element: Element) => {
       const node = element as HTMLElement
+
+      // Only process top-level menu items and skip everything else
+      if (!node.classList.contains('item') || 
+          node.nodeName !== 'LI' || 
+          node.parentElement?.parentElement?.id !== 'menu') {
+        return
+      }
+
+      // Early exit if already processed
+      if ((element as any)[processedSymbol]) {
+        return
+      }
+
       if (!node?.dataset?.checked && !MenuOptionsOpen) {
         const key =
           MenuitemSVGKey[node?.dataset?.key! as keyof typeof MenuitemSVGKey]
@@ -511,7 +523,9 @@ export async function ObserveMenuItemPosition() {
             label.replaceChild(span, textNode)
           }
         }
-        ChangeMenuItemPositions(settingsState.menuorder)
+        ChangeMenuItemPositions(settingsState.menuorder);
+        
+        (element as any)[processedSymbol] = true
       }
     },
   )
@@ -584,9 +598,10 @@ export function init() {
 
   if (settingsState.onoff) {
     console.info("[BetterSEQTA+] Enabled")
-    if (settingsState.DarkMode) document.documentElement.classList.add("dark")
+    if (settingsState.DarkMode) document.documentElement.classList.add("dark");
 
     document.querySelector(".legacy-root")?.classList.add("hidden")
+    ObserveMenuItemPosition();
 
     new StorageChangeHandler()
     new MessageHandler()

src/seqta/utils/Openers/OpenMenuOptions.ts

@@ -1,4 +1,5 @@
 
+import type { SettingsState } from "@/types/storage"
 import { settingsState } from "../listeners/SettingsState"
 import stringToHTML from "../stringToHTML"
 import Sortable from "sortablejs"
@@ -212,22 +213,24 @@ export function OpenMenuOptions() {
     }
     saveNewOrder(sortable)
   })
-  }
+}
 
-  function saveNewOrder(sortable: any) {
+
+
+function saveNewOrder(sortable: any) {
   var order = sortable.toArray()
   settingsState.menuorder = order
-  }
+}
 
-  function cloneAttributes(target: any, source: any) {
+function cloneAttributes(target: any, source: any) {
   [...source.attributes].forEach((attr) => {
     target.setAttribute(attr.nodeName, attr.nodeValue)
   })
-  }
+}
 
-  export function ChangeMenuItemPositions(storage: any) {
-    let menuorder = storage
 
+
+export function ChangeMenuItemPositions(menuorder: SettingsState["menuorder"]) {
   var menuList = document.querySelector("#menu")!.firstChild!.childNodes
 
   let listorder = []
@@ -253,4 +256,4 @@ export function OpenMenuOptions() {
       listItemsDOM!.appendChild(element)
     }
   }
-  }
+}

src/seqta/utils/Whatsnew.ts

@@ -2,7 +2,7 @@ import { settingsState } from "./listeners/SettingsState"
 import { animate, stagger } from "motion"
 import stringToHTML from "./stringToHTML"
 import browser from "webextension-polyfill"
-import kofi from "@/resources/kofi.png"
+import kofi from "@/resources/kofi.png?base64"
 
 export async function DeleteWhatsNew() {
   const bkelement = document.getElementById("whatsnewbk")

src/seqta/utils/listeners/MessageListener.ts

@@ -108,7 +108,6 @@ export class MessageHandler {
   editSidebar() {
     if (!MenuOptionsOpen) {
       OpenMenuOptions();
-      closeExtensionPopup();
     }
   }
 }