- Added dnd-kit

- Continuing to cleanup project
- Separating components to ensure SRP
- Improving redux store system and cleaning up

Author: BluePixelDev

.ladle/components.tsx

@@ -1,7 +1,7 @@
 import "@/App.css";
 import type { GlobalProvider } from "@ladle/react";
 import { Provider as StoreProvider } from "react-redux";
-import { store } from "@/store";
+import { store } from "@/redux";
 import { ThemeProvider } from "@/features/theme";
 
 export const Provider: GlobalProvider = ({

package.json

@@ -27,6 +27,10 @@
   },
   "dependencies": {
     "@codemirror/lang-markdown": "^6.3.2",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/css": "^11.13.5",
     "@reduxjs/toolkit": "^2.4.0",
     "@tauri-apps/api": "^2",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { store } from "@store";
+import { store } from "@/redux";
 import "./App.css";
 
 import {

src/App.tsx

@@ -10,7 +10,7 @@ import { Titlebar, ToolbarProvider } from "./features/titlebar";
 import { ModalContainer } from "./ui/modal";
 import { ThemeProvider } from "./features/theme";
 import { PluginManager } from "./features/plugins";
-import { useAppDispatch, useAppSelector } from "./store";
+import { useAppDispatch, useAppSelector } from "./redux";
 import { useEffect } from "react";
 import { setupDevProject } from "./dev";
 

src/AppLayout.tsx

@@ -1,25 +1,24 @@
 import KeybindControl from "@/features/keybinds/components/KeybindControl";
-import { BoardView } from "@/features/board/boardview";
-import DotGrid from "@/features/board/grid/DotGrid";
+import DotGrid from "@/features/board/ui/grid/DotGrid";
 import NodesRenderer from "@/features/board/renderer/components/NodesRenderer";
 import { AppDropzone } from "@/features/importing/filedrop";
-import SidebarButton, { Sidebar } from "@/features/sidebar";
-import { isSidebarOpen } from "@/store/app/appSelectors";
+import SidebarButton, { Sidebar } from "@/ui/sidebar";
+import { isSidebarOpen } from "@/redux/app/appSelectors";
 import { useSelector } from "react-redux";
-import { useAppDispatch, useAppSelector } from "@/store";
+import { useAppDispatch, useAppSelector } from "@/redux";
 import {
   addLayer,
+  BoardView,
   selectAllLayers,
   selectLayer,
-  selectSelectedLayerId,
 } from "@/features/board";
 import { v4 as uuidv4 } from "uuid";
+import LayersSidebar from "@/ui/panels/LayerSidebar";
 
 export default function Editor() {
   const dispatch = useAppDispatch();
   const sidebarOpen = useSelector(isSidebarOpen);
   const layers = useAppSelector(selectAllLayers);
-  const selectedLayerId = useAppSelector(selectSelectedLayerId);
 
   const handleAddLayer = () => {
     const newLayer = {
@@ -36,20 +35,12 @@ export default function Editor() {
     <div className="editor-container">
       <KeybindControl />
       <Sidebar isExpanded={sidebarOpen}>
-        {layers.map((layer) => (
-          <SidebarButton
-            key={layer.id}
-            label={layer.name}
-            icon={layer.icon}
-            selected={selectedLayerId === layer.id}
-            onClick={() => dispatch(selectLayer(layer.id))}
-          />
-        ))}
+        <LayersSidebar />
         <SidebarButton
           className="add-layer__button"
           onClick={handleAddLayer}
           label={"+"}
-          selected={true}
+          selected={false}
         />
       </Sidebar>
       <div className="expand-box">

src/Routes/Editor.tsx

@@ -1,6 +1,6 @@
 import { createAndOpenProject } from "@/features/project";
 import { join } from "@tauri-apps/api/path";
-import type { AppDispatch } from "@/store";
+import type { AppDispatch } from "@/redux";
 import os from "os";
 
 /**

src/dev/devProject.ts

@@ -1,2 +1,3 @@
 export { useDrag } from "./useDrag";
 export { useResize } from "./useResize";
+export { useZoom } from "./useZoom";

…/features/board/boardview/hooks/index.ts src/features/board/hooks/index.tssrc/features/board/boardview/hooks/index.ts renamed to src/features/board/hooks/index.ts src/features/board/boardview/hooks/index.ts renamed to src/features/board/hooks/index.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import { GraphNodePosition, BoardNodeSize } from "../../store";
+import { GraphNodePosition, BoardNodeSize } from "../store";
 
 export type Directions = "n" | "s" | "e" | "w" | "se" | "ne" | "sw" | "nw";
 export type ResizeResult = {