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