very very very basic plugin system works

src/seqta/utils/listeners/ClickListeners.ts

@@ -1,4 +1,4 @@
-import { waitForElm } from "@/SEQTA";
+import { waitForElm } from "@/seqta/utils/waitForElm"
 import ReactFiber from "../ReactFiber";
 
 const handleNotificationClick = async (target: HTMLElement) => {

src/seqta/utils/listeners/MessageListener.ts

@@ -1,6 +1,6 @@
 import browser from 'webextension-polyfill'
 
-import { closeExtensionPopup, MenuOptionsOpen, OpenMenuOptions } from '../../../SEQTA';
+import { closeExtensionPopup, MenuOptionsOpen, OpenMenuOptions } from '@/plugins/monofile';
 import { deleteTheme } from '@/seqta/ui/themes/deleteTheme';
 import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes';
 import { saveTheme } from '@/seqta/ui/themes/saveTheme';

src/seqta/utils/listeners/StorageChanges.ts

@@ -9,7 +9,7 @@ import {
   FilterUpcomingAssessments,
   RemoveBackground,
   RemoveShortcutDiv,
-} from '@/SEQTA';
+} from '@/plugins/monofile';
 import { updateBgDurations } from '@/seqta/ui/Animation';
 import browser from 'webextension-polyfill';
 import type { CustomShortcut } from '@/types/storage';

src/seqta/utils/waitForElm.ts

@@ -0,0 +1,64 @@
+import { eventManager } from "@/seqta/utils/listeners/EventManager"
+import { delay } from "@/seqta/utils/delay"
+
+export async function waitForElm(
+    selector: string,
+    usePolling: boolean = false,
+    interval: number = 100,
+  ): Promise<Element> {
+    if (usePolling) {
+      return new Promise((resolve) => {
+        const checkForElement = () => {
+          const element = document.querySelector(selector)
+          if (element) {
+            resolve(element)
+          } else {
+            setTimeout(checkForElement, interval)
+          }
+        }
+  
+        if (document.readyState === "loading") {
+          document.addEventListener("DOMContentLoaded", checkForElement)
+        } else {
+          checkForElement()
+        }
+      })
+    } else {
+      return new Promise((resolve) => {
+        const registerObserver = () => {
+          const { unregister } = eventManager.register(
+            `${selector}`,
+            {
+              customCheck: (element) => element.matches(selector),
+            },
+            async (element) => {
+              resolve(element)
+              await delay(1)
+              unregister() // Remove the listener once the element is found
+            },
+          )
+          return unregister
+        }
+  
+        let unregister = null
+  
+        if (document.readyState === "loading") {
+          // DOM is still loading, wait for it to be ready
+          document.addEventListener("DOMContentLoaded", () => {
+            unregister = registerObserver()
+          })
+        } else {
+          unregister = registerObserver()
+        }
+  
+        const querySelector = () => document.querySelector(selector)
+        const element = querySelector()
+  
+        if (element) {
+          if (unregister) unregister()
+          resolve(element)
+          return
+        }
+      })
+    }
+  }