very very very basic plugin system works

src/interface/components/themes/ThemeSelector.svelte

@@ -10,7 +10,7 @@
   import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
   import { OpenStorePage } from '@/seqta/ui/renderStore'
   import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
-  import { closeExtensionPopup } from '@/SEQTA'
+  import { closeExtensionPopup } from '@/plugins/monofile'
 
   let themes = $state<ThemeList | null>(null);
   let { isEditMode } = $props<{ isEditMode: boolean }>();

src/interface/pages/settings.svelte

@@ -9,7 +9,7 @@
   import { onMount } from 'svelte'
   import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
 
-  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
+  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/plugins/monofile"
   import ColourPicker from '../components/ColourPicker.svelte'
   import { settingsPopup } from '../hooks/SettingsPopup'
 

src/plugins/index.ts

@@ -0,0 +1 @@
+export { init as Monofile } from './monofile'

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -1,4 +1,5 @@
-import { addExtensionSettings, enableAnimatedBackground, GetThresholdOfColor, loadHomePage, SendNewsPage, setupSettingsButton } from "@/SEQTA";
+import { addExtensionSettings, enableAnimatedBackground, loadHomePage, SendNewsPage, setupSettingsButton } from "@/plugins/monofile";
+import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import { updateBgDurations } from "./Animation";
 import { appendBackgroundToUI } from "./ImageBackgrounds";
 import stringToHTML from "@/seqta/utils/stringToHTML";

src/seqta/ui/colors/Manager.ts

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill'
-import { GetThresholdOfColor } from '@/SEQTA';
+import { GetThresholdOfColor } from '@/seqta/ui/colors/getThresholdColour';
 import { lightenAndPaleColor } from './lightenAndPaleColor';
 import ColorLuminance from './ColorLuminance';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';

src/seqta/ui/colors/getThresholdColour.ts

@@ -0,0 +1,38 @@
+import Color from "color"
+export function GetThresholdOfColor(color: any) {
+    if (!color) return 0
+    // Case-insensitive regular expression for matching RGBA colors
+    const rgbaRegex = /rgba?\(([^)]+)\)/gi
+  
+    // Check if the color string is a gradient (linear or radial)
+    if (color.includes("gradient")) {
+      let gradientThresholds = []
+  
+      // Find and replace all instances of RGBA in the gradient
+      let match
+      while ((match = rgbaRegex.exec(color)) !== null) {
+        // Extract the individual components (r, g, b, a)
+        const rgbaString = match[1]
+        const [r, g, b] = rgbaString.split(",").map((str) => str.trim())
+  
+        // Compute the threshold using your existing algorithm
+        const threshold = Math.sqrt(
+          parseInt(r) ** 2 + parseInt(g) ** 2 + parseInt(b) ** 2,
+        )
+  
+        // Store the computed threshold
+        gradientThresholds.push(threshold)
+      }
+  
+      // Calculate the average threshold
+      const averageThreshold =
+        gradientThresholds.reduce((acc, val) => acc + val, 0) /
+        gradientThresholds.length
+  
+      return averageThreshold
+    } else {
+      // Handle the color as a simple RGBA (or hex, or whatever the Color library supports)
+      const rgb = Color.rgb(color).object()
+      return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2)
+    }
+  }

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
+        }
+      })
+    }
+  }