Add graph view

Frontend/src/App.jsx

@@ -6,6 +6,7 @@ import PreviewPane from "./Components/PreviewPane.jsx";
 import DirectoryPane from "./Components/DirectoryPane.jsx";
 import TagPanel from "./Components/TagPanel.jsx";
 import SettingsPanel from "./Components/SettingsPanel.jsx";
+import GraphPane from "./Components/GraphPane.jsx";
 import LoginScreen from "./Components/LoginScreen.jsx";
 import ErrorToast from "./Components/ErrorToast.jsx";
 import {
@@ -70,6 +71,7 @@ export default function App() {
   const [SidebarKey, SetSidebarKey] = useState(0);
   const [Settings, SetSettings] = useState(null);
   const [IsSettingsOpen, SetIsSettingsOpen] = useState(false);
+  const [IsGraphOpen, SetIsGraphOpen] = useState(false);
   const [ErrorMessage, SetErrorMessage] = useState(null);
 
   useEffect(() => {
@@ -254,6 +256,15 @@ export default function App() {
     }
   }
 
+  function HandleOpenGraphNode(Node) {
+    SetIsGraphOpen(false);
+    if (Node.IsDirectory) {
+      HandleBreadcrumbNavigate(Node.Id);
+    } else {
+      HandleSelectFile(Node.Id, Node.FileType);
+    }
+  }
+
   function HandleEntrySelect(EntryPath, IsDirectory, FileType, Note) {
     if (IsDirectory) {
       OpenDirectoryNote(EntryPath, Note);
@@ -328,6 +339,8 @@ export default function App() {
         OnEntryRenamed={HandleEntryRenamed}
         OnEntryDeleted={HandleEntryDeleted}
         OnOpenSettings={() => SetIsSettingsOpen(true)}
+        OnToggleGraph={() => SetIsGraphOpen(!IsGraphOpen)}
+        IsGraphOpen={IsGraphOpen}
         OnRequestLogin={HandleRequestLogin}
         OnEntryCreated={RefreshSidebar}
         UseHyphenBullets={Settings ? Settings.UseHyphenBullets : true}
@@ -365,7 +378,14 @@ export default function App() {
           </div>
         )}
         <div className="MainBody">
-          {ViewIsDirectory ? (
+          {IsGraphOpen ? (
+            <GraphPane
+              RootName={ActiveRoot}
+              DirectoryPath={CurrentDirectoryPath}
+              OnOpenNode={HandleOpenGraphNode}
+              OnClose={() => SetIsGraphOpen(false)}
+            />
+          ) : ViewIsDirectory ? (
             <DirectoryPane
               RootName={ActiveRoot}
               DirectoryPath={ViewPath}
@@ -391,7 +411,7 @@ export default function App() {
               IsGuest={IsGuest}
             />
           )}
-          {!ViewIsDirectory && !ViewNoteFilePath && (
+          {!IsGraphOpen && !ViewIsDirectory && !ViewNoteFilePath && (
             <TagPanel RootName={ActiveRoot} FilePath={ViewPath} />
           )}
         </div>