feat: use input element directly

Previously, a button proxy was used which required the use of complicated reference management. Using the HTML `input` element directly simplifies the implementation.

Also moved some styles.

ref: N25B-189

src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx

@@ -1,7 +1,7 @@
-import { useRef, useState, useEffect } from "react";
+import {type ChangeEvent, useRef, useState} from "react";
 import useFlowStore from "../VisProgStores";
-import styles from "../../VisProg.module.css";
-import { cleanup } from "@testing-library/react";
+import visProgStyles from "../../VisProg.module.css";
+import styles from "./SaveLoadPanel.module.css";
 import { makeProjectBlob, type SavedProject } from "../../../../utils/SaveLoad";
 
 export default function SaveLoadPanel() {
@@ -14,99 +14,55 @@ export default function SaveLoadPanel() {
 
   // ref to the file input
   const inputRef = useRef<HTMLInputElement | null>(null);
-  // ref to hold the resolver for the currently pending load promise
-  const resolverRef = useRef<((p: SavedProject | null) => void) | null>(null);
 
-  useEffect(() => {
-    return () => {
-      if (resolverRef.current) {
-        resolverRef.current(null);
-        resolverRef.current = null;
-      }
-    };
-  }, []);
-
-  const onSave = async () => {
-    const nameGuess = "visual-program";
+  const onSave = async (nameGuess = "visual-program") => {
     const blob = makeProjectBlob(nameGuess, nodes, edges);
     const url = URL.createObjectURL(blob);
     setSaveUrl(url);
   };
 
-  const onLoad = async () => {
+  // input change handler updates the graph with a parsed JSON file
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
     try {
-      const proj = await new Promise<SavedProject | null>((resolve) => {
-        resolverRef.current = resolve;
-        inputRef.current?.click();
-      });
-      // clear stored resolver
-      resolverRef.current = null;
-
-      if (!proj) return;
-
-      cleanup();
-      setNodes(proj.nodes);
-      setEdges(proj.edges);
+      const text = await file.text();
+      const parsed = JSON.parse(text) as SavedProject;
+      if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
+      setNodes(parsed.nodes);
+      setEdges(parsed.edges);
     } catch (e) {
       console.error(e);
       alert("Loading failed. See console.");
-    }
-  };
-
-  // input change handler resolves the onLoad promise with parsed project or null
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    try {
-      const file = e.target.files?.[0];
-      if (!file) {
-        resolverRef.current?.(null);
-        resolverRef.current = null;
-        return;
-      }
-      try {
-        const text = await file.text();
-        const parsed = JSON.parse(text) as SavedProject;
-        resolverRef.current?.(parsed ?? null);
-      } catch {
-        resolverRef.current?.(null);
-      } finally {
-        // allow re-selecting same file next time
-        if (inputRef.current) inputRef.current.value = "";
-        resolverRef.current = null;
-      }
-    } catch  {
-      resolverRef.current?.(null);
-      resolverRef.current = null;
+    } finally {
+      // allow re-selecting same file next time
+      if (inputRef.current) inputRef.current.value = "";
     }
   };
 
   const defaultName = "visual-program";
   return (
-    <div className={`flex-col gap-lg padding-md ${styles.saveLoadPanel}`}>
+    <div className={`flex-col gap-lg padding-md border-lg ${styles.saveLoadPanel}`}>
       <div className="description">You can save and load your graph here.</div>
-      <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
+      <div className={`flex-row gap-lg justify-center`}>
         <a
           href={saveUrl ?? "#"}
-          onClick={() => {
-            onSave();
-          }}
+          onClick={() => onSave(defaultName)}
           download={`${defaultName}.json`}
-          className={styles["save-button-like"]}
+          className={`${visProgStyles.draggableNode} ${styles.saveButton}`}
         >
           Save Graph
         </a>
 
-        <button onClick={onLoad} className={styles.draggableNodeNorm}>
+        <label className={`${visProgStyles.draggableNode} ${styles.fileInputButton}`}>
+          <input
+            ref={inputRef}
+            type="file"
+            accept=".visprog.json,.json,.txt,application/json,text/plain"
+            onChange={handleFileChange}
+          />
           Load Graph
-        </button>
-
-        <input
-          ref={inputRef}
-          type="file"
-          accept=".visprog.json,.json,.txt,application/json,text/plain"
-          onChange={handleFileChange}
-          style={{ display: "none" }}
-          aria-hidden
-        />
+        </label>
       </div>
     </div>
   );