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;

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}>
+    <div>
-      {props.warnings.map((warning) => (
+      <div className={"warningGroup"}>
-        <WarningListItem warning={warning} />
+        <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>
   );
 }