Improve Save/Load stability

src/App.tsx

@@ -64,9 +64,9 @@ const App = () => {
   const [deleting, setDeleting] = useState(false);
   const [hidden, setHidden] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
-  const [widgets, setWidgets] = useState<WidgetState<any>[]>([]);
-  const [templates, setTemplates] = useState<Template[]>([]);
-  const [activeTemplate, setActiveTemplate] = useState(0);
+  let [widgets, setWidgets] = useState<WidgetState<any>[]>([]);
+  let [templates, setTemplates] = useState<Template[]>([]);
+  let [activeTemplate, setActiveTemplate] = useState(0);
 
   const gridRef = useRef(null);
 
@@ -84,10 +84,14 @@ const App = () => {
     if (name === null || name === undefined) {
       const _templates = [...templates];
       _templates[activeTemplate] = template;
-      setTemplates([..._templates]);
+
+      templates = [..._templates];
+      setTemplates(templates);
     } else {
-      setTemplates([...templates, template]);
-      setActiveTemplate(templates.length);
+      templates = [...templates, template];
+      activeTemplate = templates.length;
+      setTemplates(templates);
+      setActiveTemplate(activeTemplate);
     }
 
     writeTemplates();
@@ -96,8 +100,11 @@ const App = () => {
   function loadTemplate(index?: number) {
     const i = index ?? activeTemplate;
     if (i >= templates.length) return;
-    setWidgets(templates[i].widgets);
-    setActiveTemplate(i);
+
+    widgets = structuredClone(templates[i].widgets);
+    activeTemplate = i;
+    setWidgets(widgets);
+    setActiveTemplate(activeTemplate);
     localStorage.setItem("activeTemplate", JSON.stringify(i));
   }
 
@@ -116,10 +123,13 @@ const App = () => {
       });
     }
 
-    setTemplates(_templates);
-    setActiveTemplate(_activeTemplate);
+    templates = _templates;
+    activeTemplate = _activeTemplate;
+    setTemplates(templates);
+    setActiveTemplate(activeTemplate);
 
-    setWidgets(_templates[_activeTemplate].widgets);
+    widgets = _templates[_activeTemplate].widgets;
+    setWidgets(widgets);
   }
 
   function writeTemplates() {
@@ -157,7 +167,10 @@ const App = () => {
     <div
       className={styles.content}
       onClick={(e) => {
-        if (e.target === e.currentTarget) setMenuOpen(false);
+        if (e.target === e.currentTarget) {
+          setMenuOpen(false);
+          setHidden(false);
+        }
       }}
     >
       <AppContext.Provider

src/Header.tsx

@@ -119,6 +119,7 @@ export default function Header() {
         <button
           className={[styles.container, styles.button].join(" ")}
           onClick={() => {
+            if (!menuOpen) setDeleting(false);
             setMenuOpen(!menuOpen);
           }}
         >

src/Menu.tsx

@@ -183,7 +183,7 @@ function TemplateList() {
                   onClick={(e) => {
                     e.stopPropagation();
                     template.pinned = !template.pinned;
-                    setTemplates([...templates]);
+                    setTemplates(structuredClone(templates));
                   }}
                 >
                   {template.pinned ? (
@@ -193,13 +193,13 @@ function TemplateList() {
                   )}
                 </button>
 
-                <button
+                {/*<button
                   className={[globalStyles.container, globalStyles.button].join(
                     " ",
                   )}
                 >
                   <XIcon size={14} weight={"bold"}></XIcon>
-                </button>
+                </button>*/}
               </div>
             </div>
             {showImage && (
@@ -229,7 +229,7 @@ enum MenuTab {
   Add,
   General,
   Theme,
-  Template,
+  Templates,
 }
 
 export default function Menu({ active }: { active: boolean }) {
@@ -264,10 +264,10 @@ export default function Menu({ active }: { active: boolean }) {
       </div>
       {activeTab === MenuTab.Widget && <WidgetSettings></WidgetSettings>}
       {activeTab === MenuTab.Add && active && <WidgetList></WidgetList>}
-      {activeTab === MenuTab.Template && <TemplateList></TemplateList>}
-      {![MenuTab.Widget, MenuTab.Add, MenuTab.Template].includes(activeTab) && (
-        <span>No Settings Available</span>
-      )}
+      {activeTab === MenuTab.Templates && <TemplateList></TemplateList>}
+      {![MenuTab.Widget, MenuTab.Add, MenuTab.Templates].includes(
+        activeTab,
+      ) && <span>No Settings Available</span>}
     </div>
   );
 }