feat: added visibility toggle with autoHide option

ref: N25B-450

src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css

@@ -1,12 +1,51 @@
 .warnings-sidebar {
-    min-width: 320px;
-    max-width: 320px;
-    width: 320px;
+    min-width: auto;
+    max-width: 340px;
+    margin-right: 0;
     height: 100%;
     background: canvas;
-    border-left: 2px solid CanvasText;
     display: flex;
+    flex-direction: row;
+}
+
+.warnings-toggle-bar {
+    background-color: ButtonFace;
+    justify-items: center;
+    align-content: center;
+    width: 1rem;
+    cursor: pointer;
+}
+
+.warnings-toggle-bar.error:first-child:has(.arrow-right){
+    background-color: hsl(from red h s 75%);
+}
+.warnings-toggle-bar.warning:first-child:has(.arrow-right) {
+    background-color: hsl(from orange h s 75%);
+}
+.warnings-toggle-bar.info:first-child:has(.arrow-right) {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warnings-toggle-bar:hover {
+    background-color: GrayText !important ;
+    .arrow-left {
+        border-right-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+    .arrow-right {
+        border-left-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+}
+
+
+.warnings-content {
+    width: 320px;
+    flex: 1;
     flex-direction: column;
+    border-left: 2px solid CanvasText;
 }
 
 .warnings-header {
@@ -45,12 +84,14 @@
 
 .warning-group-header {
     background: ButtonFace;
-    padding: 4px;
+    padding: 6px;
+    font-weight: bold;
 }
 
 .warnings-list {
     flex: 1;
-    overflow-y: auto;
+    min-height: 0;
+    overflow-y: scroll;
 }
 
 .warnings-empty {
@@ -131,4 +172,32 @@
 .warning-item .description {
     padding: 5px 10px;
     font-size: 0.8rem;
-}
+}
+
+.auto-hide {
+    background-color: Canvas;
+    border-top: 2px solid CanvasText;
+    margin-top: auto;
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+}
+
+/* arrows for toggleBar */
+.arrow-right {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-left: 0.6rem solid GrayText;
+}
+
+.arrow-left {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-right: 0.6rem solid GrayText;
+}