start modularisation and breaking down the monofile

src/seqta/utils/Adders/AddExtensionSettings.ts

@@ -0,0 +1,36 @@
+import { SettingsClicked, changeSettingsClicked, closeExtensionPopup } from "../Closers/closeExtensionPopup"
+import renderSvelte from "@/interface/main"
+import { SettingsResizer } from "@/seqta/ui/SettingsResizer"
+import Settings from "@/interface/pages/settings.svelte"
+
+export function addExtensionSettings() {
+    const extensionPopup = document.createElement("div")
+    extensionPopup.classList.add("outside-container", "hide")
+    extensionPopup.id = "ExtensionPopup"
+  
+    const extensionContainer = document.querySelector(
+      "#container",
+    ) as HTMLDivElement
+    if (extensionContainer) extensionContainer.appendChild(extensionPopup)
+  
+    // create shadow dom and render svelte app
+    try {
+      const shadow = extensionPopup.attachShadow({ mode: "open" })
+      requestIdleCallback(() => renderSvelte(Settings, shadow))
+    } catch (err) {
+      console.error(err)
+    }
+  
+    const container = document.getElementById("container")
+  
+    new SettingsResizer()
+  
+    container!.onclick = (event) => {
+      if (!SettingsClicked) return
+  
+      if (!(event.target as HTMLElement).closest("#AddedSettings")) {
+        if (event.target == extensionPopup) return
+        changeSettingsClicked(closeExtensionPopup())
+      }
+    }
+  }

src/seqta/utils/Adders/AddShortcuts.ts

@@ -0,0 +1,46 @@
+import ShortcutLinks from "@/seqta/content/links.json"
+import stringToHTML from "../stringToHTML"
+
+export function addShortcuts(shortcuts: any) {
+  for (let i = 0; i < shortcuts.length; i++) {
+    const currentShortcut = shortcuts[i]
+
+    if (currentShortcut?.enabled) {
+      const Itemname = (currentShortcut?.name ?? "").replace(/\s/g, "")
+
+      const linkDetails =
+        ShortcutLinks?.[Itemname as keyof typeof ShortcutLinks]
+      if (linkDetails) {
+        createNewShortcut(
+          linkDetails.link,
+          linkDetails.icon,
+          linkDetails.viewBox,
+          currentShortcut?.name,
+        )
+      } else {
+        console.warn(`No link details found for '${Itemname}'`)
+      }
+    }
+  }
+}
+
+function createNewShortcut(link: any, icon: any, viewBox: any, title: any) {
+  // Creates the stucture and element information for each seperate shortcut
+  let shortcut = document.createElement("a")
+  shortcut.setAttribute("href", link)
+  shortcut.setAttribute("target", "_blank")
+  let shortcutdiv = document.createElement("div")
+  shortcutdiv.classList.add("shortcut")
+
+  let image = stringToHTML(
+    `<svg style="width:39px;height:39px" viewBox="${viewBox}"><path fill="currentColor" d="${icon}" /></svg>`,
+  ).firstChild
+  ;(image! as HTMLElement).classList.add("shortcuticondiv")
+  let text = document.createElement("p")
+  text.textContent = title
+  shortcutdiv.append(image as HTMLElement)
+  shortcutdiv.append(text)
+  shortcut.append(shortcutdiv)
+
+  document.getElementById("shortcuts")!.appendChild(shortcut)
+}