- Major code cleanup and refactor

- Broke down and renamed Interactive Rect into Draggable, Resizable and Fram components
- Centralized redux slices for easier access and import
- Split Logic from UI
- Added plugin-sdk for future sdk plugin builds
- Moved board hooks to root
- Removed type dependencies from hooks and other components
-  Simplified Node system by using ids to fetch data, decreasing re-renders and improving extendability.

Author: BluePixelDev

src/AppLayout.tsx

@@ -9,10 +9,8 @@ import CSSSnippets from "./features/snippets/Snippets";
 import { Titlebar, ToolbarProvider } from "./features/titlebar";
 import { ModalContainer } from "./ui/modal";
 import { ThemeProvider } from "./features/theme";
-import { PluginManager } from "./features/plugins";
+import { PluginManager } from "./core/plugins";
 import { useAppDispatch, useAppSelector } from "./redux";
-import { useEffect } from "react";
-import { setupDevProject } from "./dev";
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -22,10 +20,6 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
   const settingsOpen = useAppSelector(isSettingsModalOpen);
   const dispatch = useAppDispatch();
 
-  useEffect(() => {
-    setupDevProject(dispatch);
-  }, [dispatch]);
-
   return (
     <PluginManager>
       <ThemeProvider>

src/Routes/Editor.tsx

@@ -1,19 +1,17 @@
-import KeybindControl from "@/features/keybinds/components/KeybindControl";
-import DotGrid from "@/features/board/ui/grid/DotGrid";
-import NodesRenderer from "@/features/board/renderer/components/NodesRenderer";
-import { AppDropzone } from "@/features/importing/filedrop";
+import DotGrid from "@/features/board/grid/DotGrid";
 import SidebarButton, { Sidebar } from "@/ui/sidebar";
-import { isSidebarOpen } from "@/redux/app/appSelectors";
+import { isSidebarOpen } from "@/redux/selectors/appSelectors";
 import { useSelector } from "react-redux";
 import { useAppDispatch, useAppSelector } from "@/redux";
-import {
-  addLayer,
-  BoardView,
-  selectAllLayers,
-  selectLayer,
-} from "@/features/board";
 import { v4 as uuidv4 } from "uuid";
-import LayersSidebar from "@/ui/panels/LayerSidebar";
+import LayersSidebar from "@/features/board/layers/LayerSidebar";
+import { KeybindControl } from "@/features/keybinds";
+import NodesRenderer from "../features/board/nodes/NodesRenderer";
+import { FileDropzone } from "@/ui/dropzone";
+import { FallbackNode } from "../features/board/nodes/FallbackNode";
+import { selectAllLayers } from "@/redux/selectors/layersSelectors";
+import { BoardView } from "@/features/board";
+import { addLayer, selectLayer } from "@/redux/slices/layersSlice";
 
 export default function Editor() {
   const dispatch = useAppDispatch();
@@ -44,9 +42,13 @@ export default function Editor() {
         />
       </Sidebar>
       <div className="expand-box">
-        <AppDropzone />
+        <FileDropzone />
         <BoardView grid={<DotGrid />}>
-          <NodesRenderer />
+          <NodesRenderer
+            fallback={(nodeId) => {
+              return <FallbackNode key={nodeId} nodeId={nodeId} />;
+            }}
+          />
         </BoardView>
       </div>
     </div>

…tures/importing/ImporterRegistry.test.ts …/core/importers/ImporterRegistry.test.tssrc/features/importing/ImporterRegistry.test.ts renamed to src/core/importers/ImporterRegistry.test.ts src/features/importing/ImporterRegistry.test.ts renamed to src/core/importers/ImporterRegistry.test.ts

@@ -1,8 +1,8 @@
 import { AppThunk } from "@/redux";
 import { importerRegistry, NoSuitableImporterError } from "./ImporterRegistry";
 import { ImportEvent } from "./types";
-import { showErrorToast } from "../notifications";
 import { error } from "@tauri-apps/plugin-log";
+import { showErrorToast } from "@/features/notifications";
 
 export const importFile =
   (path: string, position: { x: number; y: number }, file: File): AppThunk =>

…c/features/importing/ImporterRegistry.ts src/core/importers/ImporterRegistry.tssrc/features/importing/ImporterRegistry.ts renamed to src/core/importers/ImporterRegistry.ts src/features/importing/ImporterRegistry.ts renamed to src/core/importers/ImporterRegistry.ts

@@ -1,10 +1,6 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { error, info } from "@tauri-apps/plugin-log";
-import { PluginDefinition } from "../types";
-
-type PluginModule = {
-  default: PluginDefinition;
-};
+import { PluginDefinition, PluginModule } from "./types";
 
 interface PluginContextType {
   plugins: Map<string, PluginDefinition>;

src/features/importing/importAction.ts src/core/importers/importAction.tssrc/features/importing/importAction.ts renamed to src/core/importers/importAction.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./PluginManager";

src/features/importing/index.ts src/core/importers/index.tssrc/features/importing/index.ts renamed to src/core/importers/index.ts

@@ -8,3 +8,7 @@ export interface PluginDefinition {
 
   [key: string]: unknown;
 }
+
+export type PluginModule = {
+  default: PluginDefinition;
+};