From 3a8aac4630bbe271a5fd7f241d49e5f1b8766c58 Mon Sep 17 00:00:00 2001
From: Henry-Cat <57220048+Henry-Cat@users.noreply.github.com>
Date: Mon, 4 Sep 2023 17:40:30 -0400
Subject: [PATCH 1/5] Field Notes basic setup

---
 app/components/FieldNotes.tsx | 32 ++++++++++++++++++++++++++++++++
 app/components/InfoPanel.tsx  |  6 +++++-
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 app/components/FieldNotes.tsx
diff --git a/app/components/FieldNotes.tsx b/app/components/FieldNotes.tsx
new file mode 100644
index 00000000..ae464d99
--- /dev/null
+++ b/app/components/FieldNotes.tsx
@@ -0,0 +1,32 @@
+import { Body } from "./Primitives/Body";
+import { useState } from "react";
+
+export function FieldNotes() {
+
+    const [value, setValue] = useState("");
+
+    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+        setValue(event.target.value);
+    }
+
+    return (
+        <div>
+            <Body>Test</Body>
+            <textarea
+                value={value}
+                onChange={handleChange}
+                style={{
+                    fontFamily: "monospace",
+                    color: "white",
+                    backgroundColor: "#101728",
+                    border: "1px solid #FF0000",
+                    width: "100%",
+                    height: "200px",
+                    padding: "10px",
+                    outline: "none"
+                }}
+            />
+        </div>
+    );
+}
+ 
diff --git a/app/components/InfoPanel.tsx b/app/components/InfoPanel.tsx
index af3f9827..1ead30e5 100644
--- a/app/components/InfoPanel.tsx
+++ b/app/components/InfoPanel.tsx
@@ -6,6 +6,7 @@ import { ContainerInfo } from "./ContainerInfo";
 import { useSelectedInfo } from "~/hooks/useSelectedInfo";
 import { useRelatedPaths } from "~/hooks/useRelatedPaths";
 import { useJsonDoc } from "~/hooks/useJsonDoc";
+import { FieldNotes } from "./FieldNotes";
 
 export function InfoPanel() {
   const { minimal } = useJsonDoc();
@@ -31,8 +32,11 @@ export function InfoPanel() {
         <PropertiesValue />
 
         <ContainerInfo />
-
+        
         <RelatedValues relatedPaths={relatedPaths} />
+
+        <FieldNotes />
+        
       </div>
     </>
   );

From de71b97fce268352281e5b4225928beb4a419bf4 Mon Sep 17 00:00:00 2001
From: Henry-Cat <57220048+Henry-Cat@users.noreply.github.com>
Date: Tue, 5 Sep 2023 11:11:25 -0400
Subject: [PATCH 2/5] Field Notes styling complete

---
 app/components/FieldNotes.tsx | 44 ++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/app/components/FieldNotes.tsx b/app/components/FieldNotes.tsx
index ae464d99..ff301f7c 100644
--- a/app/components/FieldNotes.tsx
+++ b/app/components/FieldNotes.tsx
@@ -1,32 +1,28 @@
-import { Body } from "./Primitives/Body";
+import { Title } from "./Primitives/Title";
 import { useState } from "react";
 
 export function FieldNotes() {
 
-    const [value, setValue] = useState("");
+  const [value, setValue] = useState("");
 
-    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-        setValue(event.target.value);
-    }
+  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    setValue(event.target.value);
+  }
 
-    return (
-        <div>
-            <Body>Test</Body>
-            <textarea
-                value={value}
-                onChange={handleChange}
-                style={{
-                    fontFamily: "monospace",
-                    color: "white",
-                    backgroundColor: "#101728",
-                    border: "1px solid #FF0000",
-                    width: "100%",
-                    height: "200px",
-                    padding: "10px",
-                    outline: "none"
-                }}
-            />
-        </div>
-    );
+  return (
+    <div className="my-4">
+      <Title className="mb-2 text-slate-700 transition dark:text-slate-400">
+        Notes
+      </Title>
+
+      <textarea
+        value={value}
+        onChange={handleChange}
+        className="w-full h-48 px-3 py-2 text-base placeholder-gray-600 border text-white bg-slate-900 border-slate-600 focus:ring-1 focus:ring-indigo-600 focus:border-indigo-600"
+        style={{resize: "none"}}
+        placeholder="Add some notes here... (not saved across refreshes or between devices)"
+      />
+    </div>
+  );
 }
  

From 19e43ac2b372ee91377add206ca4d662472f0211 Mon Sep 17 00:00:00 2001
From: Henry-Cat <57220048+Henry-Cat@users.noreply.github.com>
Date: Wed, 6 Sep 2023 15:42:05 -0400
Subject: [PATCH 3/5] Notes are persistent within session

---
 app/components/FieldNotes.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/components/FieldNotes.tsx b/app/components/FieldNotes.tsx
index ff301f7c..0c5342be 100644
--- a/app/components/FieldNotes.tsx
+++ b/app/components/FieldNotes.tsx
@@ -1,12 +1,32 @@
 import { Title } from "./Primitives/Title";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useJsonColumnViewState } from "~/hooks/useJsonColumnView";
+
+let notes: Record<string, string> = {};
 
 export function FieldNotes() {
 
-  const [value, setValue] = useState("");
+  const [note, setNote] = useState("");
+
+  function getSelectedNodeId(): string {
+    const { selectedNodeId } = useJsonColumnViewState();
+    if (!selectedNodeId) {
+      return "defaultNodeId";
+    }
+    return selectedNodeId;
+  }
+
+  const selectedNodeId: string = getSelectedNodeId();
+
+  useEffect(() => {
+    console.log("New node selected!!!!");
+    setNote(notes[selectedNodeId] || "");
+  }, [selectedNodeId]);
 
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    setValue(event.target.value);
+    notes[selectedNodeId] = event.target.value;
+    console.log(notes);
+    setNote(event.target.value);
   }
 
   return (
@@ -16,7 +36,7 @@ export function FieldNotes() {
       </Title>
 
       <textarea
-        value={value}
+        value={note}
         onChange={handleChange}
         className="w-full h-48 px-3 py-2 text-base placeholder-gray-600 border text-white bg-slate-900 border-slate-600 focus:ring-1 focus:ring-indigo-600 focus:border-indigo-600"
         style={{resize: "none"}}
@@ -24,5 +44,4 @@ export function FieldNotes() {
       />
     </div>
   );
-}
- 
+}
\ No newline at end of file

From 8681571f93882f8f76bcd5c90a9dc8d7a5be3b20 Mon Sep 17 00:00:00 2001
From: Henry-Cat <57220048+Henry-Cat@users.noreply.github.com>
Date: Mon, 11 Sep 2023 09:55:47 -0400
Subject: [PATCH 4/5] Notes importing/exporting

---
 app/components/FieldNotes.tsx | 62 +++++++++++++++++++++++++++++++++--
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/app/components/FieldNotes.tsx b/app/components/FieldNotes.tsx
index 0c5342be..16357b03 100644
--- a/app/components/FieldNotes.tsx
+++ b/app/components/FieldNotes.tsx
@@ -1,4 +1,5 @@
 import { Title } from "./Primitives/Title";
+import { Body } from "./Primitives/Body";
 import { useState, useEffect } from "react";
 import { useJsonColumnViewState } from "~/hooks/useJsonColumnView";
 
@@ -19,16 +20,54 @@ export function FieldNotes() {
   const selectedNodeId: string = getSelectedNodeId();
 
   useEffect(() => {
-    console.log("New node selected!!!!");
     setNote(notes[selectedNodeId] || "");
   }, [selectedNodeId]);
 
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     notes[selectedNodeId] = event.target.value;
-    console.log(notes);
     setNote(event.target.value);
   }
 
+  function exportNotes() {
+    const jsonData = JSON.stringify(notes);
+    const blob = new Blob([jsonData], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "jsonheroSavedNotes.json";
+    link.click();
+
+    URL.revokeObjectURL(url);
+  }
+
+  function importNotes() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = (event) => {
+      const target = event.target as HTMLInputElement;
+      const files = target.files;
+      if (!files || files.length === 0) {
+        return;
+      }
+      const file = files[0];
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const result = event.target?.result;
+        if (!result) {
+          return;
+        }
+        notes = JSON.parse(result as string);
+        console.log(notes[selectedNodeId] || "");
+        setNote(notes[selectedNodeId] || "");
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  }
+
+
   return (
     <div className="my-4">
       <Title className="mb-2 text-slate-700 transition dark:text-slate-400">
@@ -42,6 +81,25 @@ export function FieldNotes() {
         style={{resize: "none"}}
         placeholder="Add some notes here... (not saved across refreshes or between devices)"
       />
+
+      {/* Notes exporting */}
+      <div className="flex flex-row bg-slate-700 text-white rounded focus:outline-none focus:shadow-outline w-fit">
+        <div className="px-1 my-1 border-r-slate-800 border-r-2">
+          <button className="p-1 hover:bg-slate-600"
+            onClick={exportNotes}
+          >
+            <Body>Export Notes</Body>
+          </button>
+        </div>
+
+        <button className="p-1 m-1 hover:bg-slate-600"
+          onClick={importNotes}
+        >
+          <Body>Import Notes</Body>
+        </button>
+
+        
+      </div>
     </div>
   );
 }
\ No newline at end of file

From 15cb2921dcda5dd5433719f79764a5a0e80c0d02 Mon Sep 17 00:00:00 2001
From: Henry-Cat <57220048+Henry-Cat@users.noreply.github.com>
Date: Fri, 15 Sep 2023 21:54:22 -0400
Subject: [PATCH 5/5] Minor formatting change

---
 app/components/InfoPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/InfoPanel.tsx b/app/components/InfoPanel.tsx
index 1ead30e5..06de2f68 100644
--- a/app/components/InfoPanel.tsx
+++ b/app/components/InfoPanel.tsx
@@ -32,7 +32,7 @@ export function InfoPanel() {
         <PropertiesValue />
 
         <ContainerInfo />
-        
+
         <RelatedValues relatedPaths={relatedPaths} />
 
         <FieldNotes />
