feat: added visibility toggle with autoHide option

ref: N25B-450

src/pages/VisProgPage/VisProg.tsx

@@ -7,6 +7,7 @@ import {
   MarkerType, getOutgoers
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import warningStyles from './visualProgrammingUI/components/WarningSidebar.module.css'
 import {type CSSProperties, useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
 import orderPhaseNodeArray from "../../utils/orderPhaseNodes.ts";
@@ -114,8 +115,6 @@ const VisProgUI = () => {
     }
   },[edges, registerWarning, unregisterWarning])
 
-
-
   return (
     <div className={`${styles.innerEditorContainer} round-lg border-lg flex-row`} style={({'--flow-zoom': zoom} as CSSProperties)}>
       <ReactFlow
@@ -152,10 +151,13 @@ const VisProgUI = () => {
 
           <button onClick={() => redo()}>Redo</button>
         </Panel>
+        <Panel position="center-right" className={warningStyles.warningsSidebar}>
+          <WarningsSidebar/>
+        </Panel>
         <Controls/>
         <Background/>
       </ReactFlow>
-      <WarningsSidebar/>
+
     </div>
   );
 };
@@ -221,7 +223,6 @@ const checkPhaseChain = (): boolean => {
 
     const next = outgoingPhases.map(node => checkForCompleteChain(node.id))
       .find(result => result);
-    console.log(next);
     return !!next;
   }
 
@@ -246,7 +247,6 @@ function VisProgPage() {
     // however this would cause unneeded updates
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [severityIndex]);
-  console.log(severityIndex);
   return (
     <>
       <VisualProgrammingUI/>