fix: displays icons in sidebar

src/App.tsx

@@ -1,19 +1,26 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { ThemeProvider } from "@mui/material/styles";
-import { theme } from "./theme";
 import Box from "@mui/material/Box";
+import { theme } from "./theme";
 import { SideNav } from "./components/SideNav";
 import { Sidebar } from "./components/Sidebars";
 import { ToolMenu } from "./components/ToolMenu";
 import { RendererContainer } from "./components/RendererContainer";
 import { SceneI } from "./validation/SceneSchema";
 import { ModeManagerProvider } from "./contexts/ModeManagerContext";
+import { useGlobalState } from "./hooks/useGlobalState";
 
 interface Props {
   initialScene: SceneI;
 }
 
 const App = ({ initialScene }: Props) => {
+  const setInitialScene = useGlobalState((state) => state.setInitialScene);
+
+  useEffect(() => {
+    setInitialScene(initialScene);
+  }, [initialScene]);
+
   return (
     <ThemeProvider theme={theme}>
       <ModeManagerProvider>
@@ -25,7 +32,7 @@ const App = ({ initialScene }: Props) => {
             overflow: "hidden",
           }}
         >
-          <RendererContainer key="renderer" />
+          <RendererContainer />
           <Sidebar />
           <SideNav />
           <ToolMenu />

src/components/Sidebars/index.tsx

@@ -13,7 +13,7 @@ export const Sidebar = () => {
     (state) => ({
       selectedSideNavItem: state.selectedSideNavItem,
       closeSideNav: state.closeSideNav,
-      icons: state.icons,
+      icons: state.initialScene.icons,
     })
   );
 

src/hooks/useGlobalState.ts

@@ -1,9 +1,10 @@
 import { create } from "zustand";
-import { IconI } from "../validation/SceneSchema";
+import { SceneI } from "../validation/SceneSchema";
 import { Renderer } from "../renderer/Renderer";
 
 interface GlobalState {
-  icons: IconI[];
+  initialScene: SceneI;
+  setInitialScene: (scene: SceneI) => void;
   selectedSideNavItem: number | null;
   setSelectedSideNavItem: (index: number) => void;
   closeSideNav: () => void;
@@ -12,7 +13,15 @@ interface GlobalState {
 }
 
 export const useGlobalState = create<GlobalState>((set) => ({
-  icons: [],
+  initialScene: {
+    icons: [],
+    nodes: [],
+    groups: [],
+    connectors: [],
+  },
+  setInitialScene: (scene) => {
+    set({ initialScene: scene });
+  },
   selectedSideNavItem: null,
   setSelectedSideNavItem: (val) => {
     set({ selectedSideNavItem: val });