style: added comments to code and changed name of Sidebar to DndToolbar

BREAKING: renamed Sidebar to DndToolbar.

ref: N25B-114

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -8,6 +8,10 @@ import {
 
 import {type FlowState} from './VisProgTypes.tsx';
 
+/**
+ * contains the nodes that are created when the editor is loaded,
+ * should contain at least a start and an end node
+ */
 const initialNodes = [
   {
     id: 'start',
@@ -29,6 +33,9 @@ const initialNodes = [
   }
 ];
 
+/**
+ * contains the initial edges that are created when the editor is loaded
+ */
 const initialEdges = [
   {
     id: 'start-end',
@@ -37,7 +44,11 @@ const initialEdges = [
   }
 ];
 
-// this is our useStore hook that we can use in our components to get parts of the store and call actions
+/**
+ * The useFlowStore hook contains the implementation for editor functionality and state
+ * we can use this inside our editor component to access the current state
+ * and use any implemented functionality
+ */
 const useFlowStore = create<FlowState>((set, get) => ({
     nodes: initialNodes,
     edges: initialEdges,