feat: added functionality of saving and loadiing

for supported browsers, using the File System Access API.
otherwise, fallback to download the file and then you can load from download

ref: N25B-189

src/pages/VisProgPage/VisProg.tsx

@@ -20,6 +20,7 @@ import graphReducer from "./visualProgrammingUI/GraphReducer.ts";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
+import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
 
 // --| config starting params for flow |--
 
@@ -100,6 +101,9 @@ const VisProgUI = () => {
           <Panel position="top-center" className={styles.dndPanel}>
             <DndToolbar/> {/* contains the drag and drop panel for nodes */}
           </Panel>
+          <Panel position = "bottom-left" className={styles.saveLoadPanel}>
+            <SaveLoadPanel></SaveLoadPanel>
+            </Panel>
           <Controls/>
           <Background/>
         </ReactFlow>