Merge branch 'feat/editor-user-feedback' into demo

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}>
@@ -75,10 +83,25 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
     )
   }
   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} />
+          ))}
+          {splitWarnings.global.length === 0 && "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} />
+          ))}
+          {splitWarnings.other.length === 0 && "No other warnings!"}
+        </div>
+      </div>
     </div>
   );
 }