feat: added a Warnings sidebar

warnings are now displayed in the sidebar ref: N25B-450
2026-01-15 16:03:33 +01:00
parent f62f416af3
commit 022a6708ea
9 changed files with 208 additions and 12 deletions
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
@@ -0,0 +1,99 @@
+import clsx from "clsx";
+import {useEffect, useState} from "react";
+import useFlowStore from "../VisProgStores.tsx";
+import {
+  warningSummary,
+  type WarningSeverity, type EditorWarning
+} from "./EditorWarnings.tsx";
+import styles from "./WarningSidebar.module.css";
+
+export function WarningsSidebar() {
+  const warnings = useFlowStore.getState().getWarnings();
+
+  const [severityFilter, setSeverityFilter] = useState<WarningSeverity | 'ALL'>('ALL');
+
+  useEffect(() => {}, [warnings]);
+  const filtered = severityFilter === 'ALL'
+    ? warnings
+    : warnings.filter(w => w.severity === severityFilter);
+
+  return (
+    <aside className={styles.warningsSidebar}>
+      <WarningsHeader
+        severityFilter={severityFilter}
+        onChange={setSeverityFilter}
+      />
+
+      <WarningsList warnings={filtered} />
+    </aside>
+  );
+}
+
+function WarningsHeader({
+  severityFilter,
+  onChange,
+}: {
+  severityFilter: WarningSeverity | 'ALL';
+  onChange: (severity: WarningSeverity | 'ALL') => void;
+}) {
+  const summary = warningSummary();
+
+  return (
+    <div className={styles.warningsHeader}>
+      <h3>Warnings</h3>
+
+      <div className={styles.severityTabs}>
+        {(['ALL', 'ERROR', 'WARNING', 'INFO'] as const).map(severity => (
+          <button
+            key={severity}
+            className={clsx(styles.severityTab, severityFilter === severity && styles.active)}
+            onClick={() => onChange(severity)}
+          >
+            {severity}
+            {severity !== 'ALL' && (
+              <span className={styles.count}>
+                {summary[severity.toLowerCase() as keyof typeof summary]}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+
+
+function WarningsList(props: { warnings: EditorWarning[] }) {
+  if (props.warnings.length === 0) {
+    return (
+      <div className={styles.warningsEmpty}>
+        No warnings!
+      </div>
+    )
+  }
+  return (
+    <div className={styles.warningsList}>
+      {props.warnings.map((warning) => (
+        <WarningListItem warning={warning} />
+      ))}
+    </div>
+  );
+}
+
+function WarningListItem(props: { warning: EditorWarning }) {
+  return (
+    <div className={clsx(styles.warningItem, styles[`warning-item--${props.warning.severity.toLowerCase()}`],)}>
+      <div className={styles.description}>
+        {props.warning.description}
+      </div>
+
+      <div className={styles.meta}>
+        {props.warning.scope.id}
+        {props.warning.scope.handleId && (
+          <span className={styles.handle}>@{props.warning.scope.handleId}</span>
+        )}
+      </div>
+    </div>
+  );
+}