start modularisation and breaking down the monofile

src/seqta/utils/setupSettingsButton.ts

@@ -0,0 +1,33 @@
+import { closeExtensionPopup, SettingsClicked, changeSettingsClicked } from "./Closers/closeExtensionPopup"
+import { animate } from "motion"
+import { settingsState } from "./listeners/SettingsState"
+
+export function setupSettingsButton() {
+    var AddedSettings = document.getElementById("AddedSettings")
+    var extensionPopup = document.getElementById("ExtensionPopup")
+  
+    AddedSettings!.addEventListener("click", async () => {
+      if (SettingsClicked) {
+        closeExtensionPopup(extensionPopup as HTMLElement)
+      } else {
+        if (settingsState.animations) {
+          animate(0, 1, {
+            onUpdate: (progress) => {
+              extensionPopup!.style.opacity = progress.toString()
+              extensionPopup!.style.transform = `scale(${progress})`
+            },
+            type: "spring",
+            stiffness: 280,
+            damping: 20,
+          })
+        } else {
+          extensionPopup!.style.opacity = "1"
+          extensionPopup!.style.transform = "scale(1)"
+          extensionPopup!.style.transition =
+            "opacity 0s linear, transform 0s linear"
+        }
+        extensionPopup!.classList.remove("hide")
+        changeSettingsClicked(true)
+      }
+    })
+  }