feat: added visibility toggle with autoHide option

ref: N25B-450

src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx

@@ -11,23 +11,64 @@ import styles from "./WarningSidebar.module.css";
 
 export function WarningsSidebar() {
   const warnings = useFlowStore.getState().getWarnings();
-
+  const [hide, setHide] = useState(false);
   const [severityFilter, setSeverityFilter] = useState<WarningSeverity | 'ALL'>('ALL');
+  const [autoHide, setAutoHide] = useState(false);
+
+  // let autohide change hide status only when autohide is toggled
+  // and allow for user to change the hide state even if autohide is enabled
+  const hasWarnings = warnings.length > 0;
+  useEffect(() => {
+    if (autoHide) {
+      setHide(!hasWarnings);
+    }
+  }, [autoHide, hasWarnings]);
 
-  useEffect(() => {}, [warnings]);
   const filtered = severityFilter === 'ALL'
     ? warnings
     : warnings.filter(w => w.severity === severityFilter);
 
-  return (
-    <aside id="warningSidebar" className={styles.warningsSidebar}>
-      <WarningsHeader
-        severityFilter={severityFilter}
-        onChange={setSeverityFilter}
-      />
 
-      <WarningsList warnings={filtered} />
+  const summary = warningSummary();
+  // Finds the first key where the count > 0
+  const getHighestSeverity = () => {
+    if (summary.error > 0) return styles.error;
+    if (summary.warning > 0) return styles.warning;
+    if (summary.info > 0) return styles.info;
+    return '';
+  };
+
+  return (
+    <aside className={`flex-row`} >
+      <div
+        className={`${styles.warningsToggleBar} ${getHighestSeverity()}`}
+        onClick={() => setHide(!hide)}
+        title={"toggle warnings"}
+      >
+        <div className={`${hide ? styles.arrowRight : styles.arrowLeft}`}></div>
+      </div>
+      <div 
+        id="warningSidebar" 
+        className={styles.warningsContent} 
+        style={hide ? {display: "none"} : {display: "flex"}}
+      >
+        <WarningsHeader
+          severityFilter={severityFilter}
+          onChange={setSeverityFilter}
+        />
+
+        <WarningsList warnings={filtered} />
+        <div className={styles.autoHide}>
+          <input
+            id="autoHideSwitch"
+            type={"checkbox"}
+            checked={autoHide}
+            onChange={(e) => setAutoHide(e.target.checked)}
+          /><label>Hide if there are no warnings</label>
+        </div>
+      </div>
     </aside>
+
   );
 }
 
@@ -43,7 +84,6 @@ function WarningsHeader({
   return (
     <div className={styles.warningsHeader}>
       <h3>Warnings</h3>
-
       <div className={styles.severityTabs}>
         {(['ALL', 'ERROR', 'WARNING', 'INFO'] as const).map(severity => (
           <button
@@ -71,7 +111,6 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
     global: props.warnings.filter(w => w.scope.id === globalWarning),
     other: props.warnings.filter(w => w.scope.id !== globalWarning),
   }
-  console.log(splitWarnings);
   if (props.warnings.length === 0) {
     return (
       <div className={styles.warningsEmpty}>
@@ -80,10 +119,9 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
     )
   }
   return (
-    <div style={{overflowY: 'auto'}}>
-      <div className={"warningGroup"}>
+    <div className={styles.warningsList}>
         <div className={styles.warningGroupHeader}>global:</div>
-        <div className={styles.warningsList}>
+        <div className={styles.warningsGroup}>
           {splitWarnings.global.map((warning) => (
             <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
               ? `:${warning.scope.handleId}`
@@ -92,10 +130,8 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
           ))}
           {splitWarnings.global.length === 0 && "No global warnings!"}
         </div>
-      </div>
-      <div className={"warningGroup"}>
         <div className={styles.warningGroupHeader}>other:</div>
-        <div className={styles.warningsList}>
+        <div className={styles.warningsGroup}>
           {splitWarnings.other.map((warning) => (
             <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
               ? `:${warning.scope.handleId}`
@@ -104,7 +140,6 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
           ))}
           {splitWarnings.other.length === 0 && "No other warnings!"}
         </div>
-      </div>
     </div>
   );
 }