feat: added a Warnings sidebar

warnings are now displayed in the sidebar

ref: N25B-450

src/pages/VisProgPage/VisProg.tsx

@@ -12,6 +12,7 @@ import {useShallow} from 'zustand/react/shallow';
 import orderPhaseNodeArray from "../../utils/orderPhaseNodes.ts";
 import useProgramStore from "../../utils/programStore.ts";
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
+import {WarningsSidebar} from "./visualProgrammingUI/components/WarningSidebar.tsx";
 import type {PhaseNode} from "./visualProgrammingUI/nodes/PhaseNode.tsx";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
@@ -93,7 +94,7 @@ const VisProgUI = () => {
 
 
   return (
-    <div className={`${styles.innerEditorContainer} round-lg border-lg`} style={({'--flow-zoom': zoom} as CSSProperties)}>
+    <div className={`${styles.innerEditorContainer} round-lg border-lg flex-row`} style={({'--flow-zoom': zoom} as CSSProperties)}>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -113,6 +114,7 @@ const VisProgUI = () => {
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}
+        style={{flexGrow: 3}}
       >
         <Panel position="top-center" className={styles.dndPanel}>
           <DndToolbar/> {/* contains the drag and drop panel for nodes */}
@@ -128,6 +130,7 @@ const VisProgUI = () => {
         <Controls/>
         <Background/>
       </ReactFlow>
+      <WarningsSidebar/>
     </div>
   );
 };
@@ -190,10 +193,8 @@ function graphReducer() {
  */
 function VisProgPage() {
   const [programValidity, setProgramValidity] = useState<boolean>(true);
-
   const {isProgramValid, severityIndex} = useFlowStore();
 
-
   useEffect(() => {
     setProgramValidity(isProgramValid);
     // the following eslint disable is required as it wants us to use all possible dependencies for the useEffect statement,