feat: Added visual separation between global and node or handle specific warnings

ref: N25B-450

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

@@ -82,26 +82,6 @@ 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>
       <div className={"warningGroup"}>
@@ -110,6 +90,7 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
           {splitWarnings.global.map((warning) => (
             <WarningListItem warning={warning} />
           ))}
+          {splitWarnings.global.length === 0 && "No global warnings!"}
         </div>
       </div>
       <div className={"warningGroup"}>
@@ -118,6 +99,7 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
           {splitWarnings.other.map((warning) => (
             <WarningListItem warning={warning} />
           ))}
+          {splitWarnings.other.length === 0 && "No other warnings!"}
         </div>
       </div>
     </div>