Persistence PWV Fixes + Refactor

Author: AttAditya

index.html

@@ -40,8 +40,6 @@
     <span class="pywebview-drag-region"></span>
     <div id="root"></div>
 
-    <script type="module" src="/src/main.tsx"></script>
-
     <script defer>
       let checkCount = 0;
 
@@ -65,5 +63,7 @@
         event.preventDefault();
       });
     </script>
+
+    <script type="module" src="/src/main.tsx" defer></script>
   </body>
 </html>

src/App.tsx

@@ -1,146 +1,26 @@
-import { useEffect } from "react";
-
-import { useNodeFactoryContext } from "@utils/nodeFactory";
-import { useNodeSystemContext } from "@utils/nodeSystem";
-import { useNodeHistoryContext } from "@utils/nodeHistory";
-import { usePromptContext } from "@utils/prompt";
-import { usePalleteContext } from "@utils/pallete";
-import { useVariablesContext } from "@utils/variables";
-import { loadProject, saveProject } from "@utils/engineTools";
-import {
-  getBreadcrumb,
-  getWindowTools,
-  loadActiveProjectId,
-  updatePalleteRegistry,
-} from "@utils/projectTools";
+import { useAppDataContext } from "@utils/appData";
 
 import { AppWindow } from "@components/window/AppWindow";
 import { Canvas } from "@components/engine/Canvas";
 import { Prompt } from "@components/commons/Prompt";
 
 export default function App() {
-  const { newNode } = useNodeFactoryContext()!;
-  
-  const {
-    nodeSystem,
-    isEntry,
-    createEntry,
-    entries,
-    overrideNodeSystem,
-    removeNode,
-  } = useNodeSystemContext()!;
-
-  const {
-    promptComponent,
-    promptState,
-    statesList,
-    customComponents,
-    overrideVariables,
-  } = useVariablesContext()!;
-  
   const {
-    activeNode,
-    openNode,
-    closeNode,
-    nodeHistory,
-  } = useNodeHistoryContext()!;
-
-  const {
-    addSuggestion,
+    windowTools,
+    breadcrumb,
     generateSuggestions,
-  } = usePalleteContext()!;
-
-  const {
-    requestPrompt,
-  } = usePromptContext()!;
-
-  const windowTools = getWindowTools(
-    closeNode,
-    isEntry,
-    activeNode,
-    overrideNodeSystem,
-    overrideVariables,
-    openNode,
-    removeNode,
-    nodeSystem,
-    entries,
-    statesList,
-    customComponents,
-  );
-
-  const windowExtraTitle = getBreadcrumb(
-    nodeHistory,
-    activeNode,
-  );
-
-  useEffect(() => {
-    (async () => {
-      const requireLoading = await loadActiveProjectId();
-      if (!requireLoading) return;
-      
-      loadProject(
-        overrideNodeSystem,
-        overrideVariables,
-        openNode,
-        removeNode,
-      )
-    })();
-  }, [
-    overrideNodeSystem,
-    overrideVariables,
-    openNode,
-    removeNode,
-  ]);
-
-  useEffect(() => {
-    updatePalleteRegistry(
-      addSuggestion,
-      openNode,
-      entries,
-      createEntry,
-      requestPrompt,
-      promptComponent,
-      promptState,
-    )
-  }, [
-    addSuggestion,
-    openNode,
-    entries,
-    createEntry,
-    requestPrompt,
-    promptComponent,
-    promptState,
-  ]);
-
-  useEffect(() => {
-    saveProject(
-      nodeSystem,
-      entries,
-      {
-        states: statesList,
-        customComponents,
-      },
-    );
-  }, [
-    entries,
-    nodeSystem,
-    statesList,
-    customComponents,
-  ]);
+    nodes,
+  } = useAppDataContext()!;
 
   return (<>
     <AppWindow
       tools={windowTools}
-      extraTitle={windowExtraTitle}
+      breadcrumb={breadcrumb}
       generateSuggestions={generateSuggestions}
     >
-      <Canvas
-        nodes={[
-          ...nodeSystem[activeNode]?.nodes || [],
-          newNode
-        ]}
-      />
+      <Canvas nodes={nodes} />
       <Prompt />
     </AppWindow>
   </>);
 }
+

src/components/engine/Node/style.css

@@ -137,3 +137,7 @@
   width: 100%;
 }
 
+.node-base-input input::placeholder {
+  color: #ffffff66;
+}
+

src/components/window/AppBar/index.tsx

@@ -1,18 +1,20 @@
+import type { Suggestion, ToolButtonData } from "@defs/UI";
+
 import { isDesktop } from "@utils/desktopTools";
 
 import { WindowActions } from "@components/window/WindowActions";
-import { ToolBar, type ToolButtonData } from "@components/window/ToolBar";
-import { Pallete, type Suggestion } from "@components/window/Pallete";
+import { ToolBar  } from "@components/window/ToolBar";
+import { Pallete  } from "@components/window/Pallete";
 
 import "./style.css";
 
 export function AppBar({
   tools=[],
-  extraTitle = "",
+  breadcrumb = "",
   generateSuggestions = () => [],
 }: {
   tools?: ToolButtonData[];
-  extraTitle?: string;
+  breadcrumb?: string;
   generateSuggestions?: (query: string) => Suggestion[];
 }) {
   const title: string = "GraphScript Engine";
@@ -35,7 +37,7 @@ export function AppBar({
 
       <div className="root-app-extra-title">
         <span>
-          {extraTitle}
+          {breadcrumb}
         </span>
       </div>
     </div>

src/components/window/AppWindow/index.tsx

@@ -1,21 +1,22 @@
 import type { ReactNode } from "react";
+
+import type { Suggestion, ToolButtonData } from "@defs/UI";
+
 import { isDesktop } from "@utils/desktopTools";
 
 import { AppBar } from "@components/window/AppBar";
-import type { ToolButtonData } from "@components/window/ToolBar";
-import type { Suggestion } from "@components/window/Pallete";
 
 import "./style.css";
 
 export function AppWindow({
   children,
   tools = [],
-  extraTitle = "",
+  breadcrumb = "",
   generateSuggestions = () => [],
 }: {
   children?: ReactNode;
   tools?: ToolButtonData[];
-  extraTitle?: string;
+  breadcrumb?: string;
   generateSuggestions?: (query: string) => Suggestion[];
 }) {
   return (<>
@@ -24,7 +25,7 @@ export function AppWindow({
     }`}>
       <AppBar
         tools={tools}
-        extraTitle={extraTitle}
+        breadcrumb={breadcrumb}
         generateSuggestions={generateSuggestions}
       />
 

src/components/window/Pallete/index.tsx

@@ -1,16 +1,12 @@
 import { useEffect, useState } from "react";
 
+import type { Suggestion } from "@defs/UI";
+
 import { Input } from "@components/commons/Input";
 import { DynamicIcon } from "@components/commons/DynamicIcon";
 
 import "./style.css";
 
-export type Suggestion = {
-  name: string;
-  icon: string;
-  action: () => void;
-}
-
 export function Pallete({
   generateSuggestions,
 }: {

src/components/window/ToolBar/index.tsx

@@ -1,14 +1,9 @@
+import type { ToolButtonData } from "@defs/UI";
+
 import { DynamicIcon } from "@components/commons/DynamicIcon";
 
 import "./style.css";
 
-export type ToolButtonData = {
-  name: string;
-  icon: string;
-  action: () => void;
-  disabled?: boolean;
-};
-
 export function ToolBar({ tools }: {
   tools: ToolButtonData[];
 }) {

src/defs/UI.tsx

@@ -0,0 +1,13 @@
+export type ToolButtonData = {
+  name: string;
+  icon: string;
+  action: () => void;
+  disabled?: boolean;
+};
+
+export type Suggestion = {
+  name: string;
+  icon: string;
+  action: () => void;
+}
+