From 3f6d95683dbf620e391b75a9d1dfa7ad5a14b5af Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Tue, 20 Jan 2026 12:50:29 +0100
Subject: [PATCH] feat: Added visual separation between global and node or
 handle specific warnings

ref: N25B-450
---
 .../components/WarningSidebar.module.css      |  4 ++
 .../components/WarningSidebar.tsx             | 49 +++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
index 2a8241e..a3a60de 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
@@ -38,6 +38,10 @@
     border: 2px solid currentColor;
 }
 
+.warning-group-header {
+    background: ButtonFace;
+}
+
 .warnings-list {
     flex: 1;
     overflow-y: auto;
diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
index fc3b347..da64e89 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
@@ -19,6 +19,9 @@ export function WarningsSidebar() {
     ? warnings
     : warnings.filter(w => w.severity === severityFilter);
 
+
+
+
   return (
     <aside className={styles.warningsSidebar}>
       <WarningsHeader
@@ -67,6 +70,11 @@ function WarningsHeader({
 
 
 function WarningsList(props: { warnings: EditorWarning[] }) {
+  const splitWarnings = {
+    global: props.warnings.filter(w => w.scope.id === globalWarning),
+    other: props.warnings.filter(w => w.scope.id !== globalWarning),
+  }
+
   if (props.warnings.length === 0) {
     return (
       <div className={styles.warningsEmpty}>
@@ -74,11 +82,44 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
       </div>
     )
   }
+  if (splitWarnings.global.length === 0) {
+    return (
+      <div>
+        <div className={"warningGroup"}>
+          <div className={styles.warningGroupHeader}>global:</div>
+          <div className={styles.warningsEmpty}>
+            No global warnings!
+          </div>
+        </div>
+        <div className={"warningGroup"}>
+          <div className={styles.warningGroupHeader}>other:</div>
+          <div className={styles.warningsList}>
+            {splitWarnings.other.map((warning) => (
+              <WarningListItem warning={warning} />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
   return (
-    <div className={styles.warningsList}>
-      {props.warnings.map((warning) => (
-        <WarningListItem warning={warning} />
-      ))}
+    <div>
+      <div className={"warningGroup"}>
+        <div className={styles.warningGroupHeader}>global:</div>
+        <div className={styles.warningsList}>
+          {splitWarnings.global.map((warning) => (
+            <WarningListItem warning={warning} />
+          ))}
+        </div>
+      </div>
+      <div className={"warningGroup"}>
+        <div className={styles.warningGroupHeader}>other:</div>
+        <div className={styles.warningsList}>
+          {splitWarnings.other.map((warning) => (
+            <WarningListItem warning={warning} />
+          ))}
+        </div>
+      </div>
     </div>
   );
 }