make popup reset state on close

interface/src/App.tsx

@@ -11,7 +11,6 @@ import Themes from './pages/Themes';
 //import About from './pages/About';
 
 const App: React.FC = () => {
-
   const { standalone, setStandalone } = useSettingsContext();
 
   useEffect(() => {
@@ -35,7 +34,7 @@ const App: React.FC = () => {
       title: 'Themes',
       content: <Themes />
     }
-  ];
+  ];  
 
   return (
     <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } h-[600px] overflow-clip dark:bg-zinc-800 dark:text-white`}>

interface/src/components/Picker.tsx

@@ -4,10 +4,28 @@ import { useSettingsContext } from '../SettingsContext';
 import { motion } from "framer-motion";
 
 import "./Picker.css";
+import { useEffect } from 'react';
 
 export default function Picker() {
   const { settingsState, setSettingsState, showPicker, setShowPicker } = useSettingsContext();
 
+  const handleMessage = (event: MessageEvent) => {
+    if (event.data === "popupClosed") {
+      setShowPicker(false);
+    }
+  };
+
+  useEffect(() => {
+    // Add event listener for 'message' event
+    window.addEventListener("message", handleMessage);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const colorChange = (color: string) => {
     setSettingsState({
       ...settingsState,

interface/src/components/TabbedContainer.tsx

@@ -11,6 +11,26 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
   const positionRef = useRef(position);
   const themeColor = useSettingsContext().settingsState.customThemeColor;
 
+
+    // Function to handle message
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data === "popupClosed") {  
+        setActiveTab(0);
+      }
+    };
+  
+    useEffect(() => {
+      // Add event listener for 'message' event
+      window.addEventListener("message", handleMessage);
+  
+      // Cleanup
+      return () => {
+        window.removeEventListener("message", handleMessage);
+      };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+
   useEffect(() => {
     const newPosition = -activeTab * 100;
     setPosition(newPosition);

src/SEQTA.js

@@ -788,6 +788,7 @@ function addExtensionSettings() {
 
   let iframe = document.createElement("iframe");
   iframe.src = chrome.runtime.getURL("interface/index.html");
+  iframe.id = "ExtensionIframe";
   iframe.allowTransparency = "true";
   iframe.style.width = "384px";
   iframe.style.height = "600px";
@@ -798,11 +799,18 @@ function addExtensionSettings() {
 
   var container = document.getElementById("container");
   var extensionsettings = document.getElementById("ExtensionPopup");
-  container.onclick = function () {
+  var extensionIframe = document.getElementById("ExtensionIframe");
-    if (!SettingsClicked) {
+  
-      extensionsettings.classList.add("hide");
+  container.onclick = function (event) {
+    if (event.target.id !== "AddedSettings") {
+      if (!SettingsClicked) {
+        extensionsettings.classList.add("hide");
+        extensionIframe.contentWindow.postMessage("popupClosed", "*");
+      }
+      SettingsClicked = false;
+    } else {
+      SettingsClicked = false;
     }
-    SettingsClicked = false;
   };
 }
 
@@ -1329,9 +1337,8 @@ async function AddBetterSEQTAElements(toggle) {
 
       var AddedSettings = document.getElementById("AddedSettings");
       var extensionsettings = document.getElementById("ExtensionPopup");
-
+      
       AddedSettings.addEventListener("click", function () {
-        extensionsettings.contentWindow.postMessage("popupClosed", "*");
         extensionsettings.classList.toggle("hide");
         SettingsClicked = true;
       });