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"
@@ -7,78 +8,178 @@ export let MenuOptionsOpen = false
 
 
 export function OpenMenuOptions() {
-    var container = document.getElementById("container")
+  var container = document.getElementById("container")
-    var menu = document.getElementById("menu")
+  var menu = document.getElementById("menu")
 
-    if (settingsState.defaultmenuorder.length == 0) {
+  if (settingsState.defaultmenuorder.length == 0) {
-      let childnodes = menu!.firstChild!.childNodes
+    let childnodes = menu!.firstChild!.childNodes
-      let newdefaultmenuorder = []
+    let newdefaultmenuorder = []
-      for (let i = 0; i < childnodes.length; i++) {
+    for (let i = 0; i < childnodes.length; i++) {
-        const element = childnodes[i]
+      const element = childnodes[i]
+      newdefaultmenuorder.push((element as HTMLElement).dataset.key)
+      settingsState.defaultmenuorder = newdefaultmenuorder
+    }
+  }
+  let childnodes = menu!.firstChild!.childNodes
+  if (settingsState.defaultmenuorder.length != childnodes.length) {
+    for (let i = 0; i < childnodes.length; i++) {
+      const element = childnodes[i]
+      if (
+        !settingsState.defaultmenuorder.indexOf(
+          (element as HTMLElement).dataset.key,
+        )
+      ) {
+        let newdefaultmenuorder = settingsState.defaultmenuorder
         newdefaultmenuorder.push((element as HTMLElement).dataset.key)
         settingsState.defaultmenuorder = newdefaultmenuorder
       }
     }
-    let childnodes = menu!.firstChild!.childNodes
+  }
-    if (settingsState.defaultmenuorder.length != childnodes.length) {
+
-      for (let i = 0; i < childnodes.length; i++) {
+  MenuOptionsOpen = true
-        const element = childnodes[i]
+
-        if (
+  var cover = document.createElement("div")
-          !settingsState.defaultmenuorder.indexOf(
+  cover.classList.add("notMenuCover")
-            (element as HTMLElement).dataset.key,
+  menu!.style.zIndex = "20"
-          )
+  menu!.style.setProperty("--menuHidden", "flex")
-        ) {
+  container!.append(cover)
-          let newdefaultmenuorder = settingsState.defaultmenuorder
+
-          newdefaultmenuorder.push((element as HTMLElement).dataset.key)
+  var menusettings = document.createElement("div")
-          settingsState.defaultmenuorder = newdefaultmenuorder
+  menusettings.classList.add("editmenuoption-container")
-        }
+
-      }
+  var defaultbutton = document.createElement("div")
+  defaultbutton.classList.add("editmenuoption")
+  defaultbutton.innerText = "Restore Default"
+  defaultbutton.id = "restoredefaultoption"
+
+  var savebutton = document.createElement("div")
+  savebutton.classList.add("editmenuoption")
+  savebutton.innerText = "Save"
+  savebutton.id = "restoredefaultoption"
+
+  menusettings.appendChild(defaultbutton)
+  menusettings.appendChild(savebutton)
+
+  menu!.appendChild(menusettings)
+
+  var ListItems = menu!.firstChild!.childNodes
+  for (let i = 0; i < ListItems.length; i++) {
+    const element1 = ListItems[i]
+    const element = element1 as HTMLElement
+
+    ;(element as HTMLElement).classList.add("draggable")
+    if ((element as HTMLElement).classList.contains("hasChildren")) {
+      (element as HTMLElement).classList.remove("active")
+      ;(element.firstChild as HTMLElement).classList.remove("noscroll")
     }
 
-    MenuOptionsOpen = true
+    let MenuItemToggle = stringToHTML(
+      `<div class="onoffswitch" style="margin: auto 0;"><input class="onoffswitch-checkbox notification menuitem" type="checkbox" id="${(element as HTMLElement).dataset.key}"><label for="${(element as HTMLElement).dataset.key}" class="onoffswitch-label"></label>`,
+    ).firstChild
+    ;(element as HTMLElement).append(MenuItemToggle!)
 
-    var cover = document.createElement("div")
+    if (!element.dataset.betterseqta) {
-    cover.classList.add("notMenuCover")
+      const a = document.createElement("section")
-    menu!.style.zIndex = "20"
+      a.innerHTML = element.innerHTML
-    menu!.style.setProperty("--menuHidden", "flex")
+      cloneAttributes(a, element)
-    container!.append(cover)
+      menu!.firstChild!.insertBefore(a, element)
+      element.remove()
+    }
+  }
 
-    var menusettings = document.createElement("div")
+  if (Object.keys(settingsState.menuitems).length == 0) {
-    menusettings.classList.add("editmenuoption-container")
+    menubuttons = menu!.firstChild!.childNodes
+    let menuItems = {} as any
+    for (var i = 0; i < menubuttons.length; i++) {
+      var id = (menubuttons[i] as HTMLElement).dataset.key
+      const element: any = {}
+      element.toggle = true
+      ;(menuItems[id as keyof typeof menuItems] as any) = element
+    }
+    settingsState.menuitems = menuItems
+  }
 
-    var defaultbutton = document.createElement("div")
+  var menubuttons: any = document.getElementsByClassName("menuitem")
-    defaultbutton.classList.add("editmenuoption")
-    defaultbutton.innerText = "Restore Default"
-    defaultbutton.id = "restoredefaultoption"
 
-    var savebutton = document.createElement("div")
+  let menuItems = settingsState.menuitems as any
-    savebutton.classList.add("editmenuoption")
+  let buttons = document.getElementsByClassName("menuitem")
-    savebutton.innerText = "Save"
+  for (let i = 0; i < buttons.length; i++) {
-    savebutton.id = "restoredefaultoption"
+    let id = buttons[i].id as string | undefined
+    if (menuItems[id as keyof typeof menuItems]) {
+      (buttons[i] as HTMLInputElement).checked =
+        menuItems[id as keyof typeof menuItems].toggle
+    } else {
+      (buttons[i] as HTMLInputElement).checked = true
+    }
+    (buttons[i] as HTMLInputElement).checked = true
+  }
 
-    menusettings.appendChild(defaultbutton)
+  try {
-    menusettings.appendChild(savebutton)
+    var el = document.querySelector("#menu > ul")
+    var sortable = Sortable.create(el as HTMLElement, {
+      draggable: ".draggable",
+      dataIdAttr: "data-key",
+      animation: 150,
+      easing: "cubic-bezier(.5,0,.5,1)",
+      onEnd: function () {
+        saveNewOrder(sortable)
+      },
+    })
+  } catch (err) {
+    console.error(err)
+  }
 
-    menu!.appendChild(menusettings)
+  function changeDisplayProperty(element: any) {
+    if (!element.checked) {
+      element.parentNode.parentNode.style.display = "var(--menuHidden)"
+    }
+    if (element.checked) {
+      element.parentNode.parentNode.style.setProperty(
+        "display",
+        "flex",
+        "important",
+      )
+    }
+  }
+
+  function StoreMenuSettings() {
+    let menu = document.getElementById("menu")
+    const menuItems: any = {}
+    let menubuttons = menu!.firstChild!.childNodes
+    const button = document.getElementsByClassName("menuitem")
+    for (let i = 0; i < menubuttons.length; i++) {
+      const id = (menubuttons[i] as HTMLElement).dataset.key
+      const element: any = {}
+      element.toggle = (button[i] as HTMLInputElement).checked
+
+      menuItems[id as keyof typeof menuItems] = element
+    }
+    settingsState.menuitems = menuItems
+  }
+
+  for (let i = 0; i < menubuttons.length; i++) {
+    const element = menubuttons[i]
+    element.addEventListener("change", () => {
+      element.parentElement.parentElement.getAttribute("data-key")
+      StoreMenuSettings()
+      changeDisplayProperty(element)
+    })
+  }
+
+  function closeAll() {
+    menusettings?.remove()
+    cover?.remove()
+    MenuOptionsOpen = false
+    menu!.style.setProperty("--menuHidden", "none")
 
-    var ListItems = menu!.firstChild!.childNodes
     for (let i = 0; i < ListItems.length; i++) {
       const element1 = ListItems[i]
       const element = element1 as HTMLElement
-  
+      element.classList.remove("draggable")
-      ;(element as HTMLElement).classList.add("draggable")
+      element.setAttribute("draggable", "false")
-      if ((element as HTMLElement).classList.contains("hasChildren")) {
-        (element as HTMLElement).classList.remove("active")
-        ;(element.firstChild as HTMLElement).classList.remove("noscroll")
-      }
-  
-      let MenuItemToggle = stringToHTML(
-        `<div class="onoffswitch" style="margin: auto 0;"><input class="onoffswitch-checkbox notification menuitem" type="checkbox" id="${(element as HTMLElement).dataset.key}"><label for="${(element as HTMLElement).dataset.key}" class="onoffswitch-label"></label>`,
-      ).firstChild
-      ;(element as HTMLElement).append(MenuItemToggle!)
 
       if (!element.dataset.betterseqta) {
-        const a = document.createElement("section")
+        const a = document.createElement("li")
         a.innerHTML = element.innerHTML
         cloneAttributes(a, element)
         menu!.firstChild!.insertBefore(a, element)
@@ -86,171 +187,73 @@ export function OpenMenuOptions() {
       }
     }
 
-    if (Object.keys(settingsState.menuitems).length == 0) {
+    let switches = menu!.querySelectorAll(".onoffswitch")
-      menubuttons = menu!.firstChild!.childNodes
+    for (let i = 0; i < switches.length; i++) {
-      let menuItems = {} as any
+      switches[i].remove()
-      for (var i = 0; i < menubuttons.length; i++) {
-        var id = (menubuttons[i] as HTMLElement).dataset.key
-        const element: any = {}
-        element.toggle = true
-        ;(menuItems[id as keyof typeof menuItems] as any) = element
-      }
-      settingsState.menuitems = menuItems
     }
+  }
 
-    var menubuttons: any = document.getElementsByClassName("menuitem")
+  cover?.addEventListener("click", closeAll)
+  savebutton?.addEventListener("click", closeAll)
 
-    let menuItems = settingsState.menuitems as any
+  defaultbutton?.addEventListener("click", function () {
-    let buttons = document.getElementsByClassName("menuitem")
+    const options = settingsState.defaultmenuorder
-    for (let i = 0; i < buttons.length; i++) {
+    settingsState.menuorder = options
-      let id = buttons[i].id as string | undefined
-      if (menuItems[id as keyof typeof menuItems]) {
-        (buttons[i] as HTMLInputElement).checked =
-          menuItems[id as keyof typeof menuItems].toggle
-      } else {
-        (buttons[i] as HTMLInputElement).checked = true
-      }
-      (buttons[i] as HTMLInputElement).checked = true
-    }
 
-    try {
+    ChangeMenuItemPositions(options)
-      var el = document.querySelector("#menu > ul")
-      var sortable = Sortable.create(el as HTMLElement, {
-        draggable: ".draggable",
-        dataIdAttr: "data-key",
-        animation: 150,
-        easing: "cubic-bezier(.5,0,.5,1)",
-        onEnd: function () {
-          saveNewOrder(sortable)
-        },
-      })
-    } catch (err) {
-      console.error(err)
-    }
-  
-    function changeDisplayProperty(element: any) {
-      if (!element.checked) {
-        element.parentNode.parentNode.style.display = "var(--menuHidden)"
-      }
-      if (element.checked) {
-        element.parentNode.parentNode.style.setProperty(
-          "display",
-          "flex",
-          "important",
-        )
-      }
-    }
-  
-    function StoreMenuSettings() {
-      let menu = document.getElementById("menu")
-      const menuItems: any = {}
-      let menubuttons = menu!.firstChild!.childNodes
-      const button = document.getElementsByClassName("menuitem")
-      for (let i = 0; i < menubuttons.length; i++) {
-        const id = (menubuttons[i] as HTMLElement).dataset.key
-        const element: any = {}
-        element.toggle = (button[i] as HTMLInputElement).checked
-  
-        menuItems[id as keyof typeof menuItems] = element
-      }
-      settingsState.menuitems = menuItems
-    }
 
     for (let i = 0; i < menubuttons.length; i++) {
       const element = menubuttons[i]
-      element.addEventListener("change", () => {
+      element.checked = true
-        element.parentElement.parentElement.getAttribute("data-key")
+      element.parentNode.parentNode.style.setProperty(
-        StoreMenuSettings()
+        "display",
-        changeDisplayProperty(element)
+        "flex",
-      })
+        "important",
+      )
     }
+    saveNewOrder(sortable)
+  })
+}
 
-    function closeAll() {
-      menusettings?.remove()
-      cover?.remove()
-      MenuOptionsOpen = false
-      menu!.style.setProperty("--menuHidden", "none")
 
-      for (let i = 0; i < ListItems.length; i++) {
-        const element1 = ListItems[i]
-        const element = element1 as HTMLElement
-        element.classList.remove("draggable")
-        element.setAttribute("draggable", "false")
 
-        if (!element.dataset.betterseqta) {
+function saveNewOrder(sortable: any) {
-          const a = document.createElement("li")
+  var order = sortable.toArray()
-          a.innerHTML = element.innerHTML
+  settingsState.menuorder = order
-          cloneAttributes(a, element)
+}
-          menu!.firstChild!.insertBefore(a, element)
-          element.remove()
-        }
-      }
 
-      let switches = menu!.querySelectorAll(".onoffswitch")
+function cloneAttributes(target: any, source: any) {
-      for (let i = 0; i < switches.length; i++) {
+  [...source.attributes].forEach((attr) => {
-        switches[i].remove()
+    target.setAttribute(attr.nodeName, attr.nodeValue)
-      }
+  })
-    }
+}
 
-    cover?.addEventListener("click", closeAll)
-    savebutton?.addEventListener("click", closeAll)
 
-    defaultbutton?.addEventListener("click", function () {
-      const options = settingsState.defaultmenuorder
-      settingsState.menuorder = options
 
-      ChangeMenuItemPositions(options)
+export function ChangeMenuItemPositions(menuorder: SettingsState["menuorder"]) {
+  var menuList = document.querySelector("#menu")!.firstChild!.childNodes
 
-      for (let i = 0; i < menubuttons.length; i++) {
+  let listorder = []
-        const element = menubuttons[i]
+  for (let i = 0; i < menuList.length; i++) {
-        element.checked = true
+    const menu = menuList[i] as HTMLElement
-        element.parentNode.parentNode.style.setProperty(
+
-          "display",
+    let a = menuorder.indexOf(menu.dataset.key)
-          "flex",
+
-          "important",
+    listorder.push(a)
-        )
-      }
-      saveNewOrder(sortable)
-    })
   }
 
-  function saveNewOrder(sortable: any) {
+  var newArr = []
-    var order = sortable.toArray()
+  for (var i = 0; i < listorder.length; i++) {
-    settingsState.menuorder = order
+    newArr[listorder[i]] = menuList[i]
   }
 
-  function cloneAttributes(target: any, source: any) {
+  let listItemsDOM = document.getElementById("menu")!.firstChild
-    [...source.attributes].forEach((attr) => {
+  for (let i = 0; i < newArr.length; i++) {
-      target.setAttribute(attr.nodeName, attr.nodeValue)
+    const element = newArr[i]
-    })
+    if (element) {
-  }
+      const elem = element as HTMLElement
-
+      elem.setAttribute("data-checked", "true")
-  export function ChangeMenuItemPositions(storage: any) {
+      listItemsDOM!.appendChild(element)
-    let menuorder = storage
-  
-    var menuList = document.querySelector("#menu")!.firstChild!.childNodes
-  
-    let listorder = []
-    for (let i = 0; i < menuList.length; i++) {
-      const menu = menuList[i] as HTMLElement
-  
-      let a = menuorder.indexOf(menu.dataset.key)
-  
-      listorder.push(a)
-    }
-  
-    var newArr = []
-    for (var i = 0; i < listorder.length; i++) {
-      newArr[listorder[i]] = menuList[i]
-    }
-  
-    let listItemsDOM = document.getElementById("menu")!.firstChild
-    for (let i = 0; i < newArr.length; i++) {
-      const element = newArr[i]
-      if (element) {
-        const elem = element as HTMLElement
-        elem.setAttribute("data-checked", "true")
-        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();
     }
   }
 }