Save diagram id in window name to avoid loading latest diagram when not empty

src/components/ControlPanel.jsx

@@ -63,7 +63,12 @@ import { Editor } from "@monaco-editor/react";
 import { db } from "../data/db";
 import { useLiveQuery } from "dexie-react-hooks";
 
-export default function ControlPanel({ diagramId, setDiagramId }) {
+export default function ControlPanel({
+  diagramId,
+  setDiagramId,
+  title,
+  setTitle,
+}) {
   const MODAL = {
     NONE: 0,
     IMG: 1,
@@ -82,7 +87,6 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
   };
   const diagrams = useLiveQuery(() => db.diagrams.toArray());
   const [visible, setVisible] = useState(MODAL.NONE);
-  const [title, setTitle] = useState("Untitled Diagram");
   const [prevTitle, setPrevTitle] = useState(title);
   const [saveAsTitle, setSaveAsTitle] = useState(title);
   const [selectedDiagramId, setSelectedDiagramId] = useState(0);
@@ -703,12 +707,13 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
           setDiagramId(diagram.id);
           setTitle(diagram.name);
           setTables(diagram.tables);
-          setTypes(diagram.types)
+          setTypes(diagram.types);
           setRelationships(diagram.references);
           setAreas(diagram.areas);
           setNotes(diagram.notes);
           setUndoStack([]);
           setRedoStack([]);
+          window.name = `d ${diagram.id}`;
         } else {
           Toast.error("Oops! Something went wrong.");
         }
@@ -1367,7 +1372,7 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
                 description={<div>You have no saved diagrams.</div>}
               />
             ) : (
-              <>
+              <div className="max-h-[360px]">
                 <table className="w-full text-left border-separate border-spacing-x-0">
                   <thead>
                     <tr>
@@ -1416,7 +1421,7 @@ export default function ControlPanel({ diagramId, setDiagramId }) {
                     })}
                   </tbody>
                 </table>
-              </>
+              </div>
             )}
           </div>
         );

src/pages/editor.jsx

@@ -30,6 +30,7 @@ export const TypeContext = createContext();
 
 export default function Editor(props) {
   const [id, setId] = useState(0);
+  const [title, setTitle] = useState("Untitled Diagram");
   const [tables, setTables] = useState([]);
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
@@ -473,6 +474,30 @@ export default function Editor(props) {
             setRelationships(d.references);
             setNotes(d.notes);
             setAreas(d.areas);
+            setTypes(d.types);
+          }
+          window.name = `d ${d.id}`;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    };
+
+    const loadDiagram = async (id) => {
+      await db.diagrams
+        .get(id)
+        .then((diagram) => {
+          if (diagram) {
+            setId(diagram.id);
+            setTitle(diagram.name);
+            setTables(diagram.tables);
+            setTypes(diagram.types);
+            setRelationships(diagram.references);
+            setAreas(diagram.areas);
+            setNotes(diagram.notes);
+            setUndoStack([]);
+            setRedoStack([]);
+            window.name = `d ${diagram.id}`;
           }
         })
         .catch((error) => {
@@ -482,7 +507,13 @@ export default function Editor(props) {
 
     const args = localStorage.getItem("args");
     if (!args || args === "-1") {
-      loadLatestDiagram();
+      if (window.name === "") {
+        console.log("Loading the latest diagram");
+        loadLatestDiagram();
+      } else {
+        const did = parseInt(window.name.split(" ")[1]);
+        loadDiagram(did);
+      }
     } else {
       console.log("Loading template with id", args);
       localStorage.setItem("args", "-1");
@@ -589,7 +620,12 @@ export default function Editor(props) {
                         }}
                       >
                         <div className="h-[100vh] overflow-hidden theme">
-                          <ControlPanel diagramId={id} setDiagramId={setId} />
+                          <ControlPanel
+                            diagramId={id}
+                            setDiagramId={setId}
+                            title={title}
+                            setTitle={setTitle}
+                          />
                           <div
                             className={
                               layout.header