make popup reset state on close

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);