Show a message on no errors or warnings (#93)

* Show a message on no errors or warnings

* Remove test console.log

* darken the green

Author: rwblair

web/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import "./App.css"
 import { directoryOpen } from "https://esm.sh/[email protected]"
+import confetti, { create } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.module.mjs';
 import { fileListToTree, validate } from "../dist/validator/main.js"
 import type { ValidationResult } from "../../src/types/validation-result.ts"
 import { Collapse } from "./Collapse.tsx"
@@ -61,6 +62,7 @@ function App() {
   if (validation) {
     const errorList = []
     const warningList = []
+    let success = ""
     for (const [code, issues] of validation.issues.filter({ severity: 'error' }).groupBy('code')) {
       if (code === 'None') {
         continue
@@ -73,13 +75,28 @@ function App() {
       }
       warningList.push(...Issue({ data: issues }))
     }
+    if (errorList.length === 0 && warningList.length === 0) {
+      success = (
+      <div className="success">
+        <Collapse label="No Issues Detected!">
+          <div>Thanks for Everything. I Have No Complaints Whatsoever.</div>
+        </Collapse>
+      </div>
+      )
+      confetti({
+        particleCount: 500,
+        spread: 180,
+        ticks: 400
+      });
+    }
     validatorOutput = (
       <>
         <button onClick={validateDir}>Reselect Files</button>
         <div>
           <ul className="issues-list">
             {errorList}
             {warningList}
+            {success}
           </ul>
           <Summary data={validation.summary} />
           <a
@@ -92,7 +109,10 @@ function App() {
         </div>
       </>
     )
+    if (errorList.length === 0) {
+    }
   } else {
+
     validatorOutput = (
       <>
         <h2>
@@ -106,7 +126,6 @@ function App() {
       </>
     )
   }
-
   return (
     <>
       <h1>BIDS Validator</h1>

web/src/Collapse.css

@@ -40,6 +40,10 @@ input[type='checkbox'] {
   background: #D55E00;
 }
 
+.success .lbl-toggle {
+  background: #49E048;
+}
+
 @media (prefers-color-scheme: light) {
   .lbl-toggle {
     color: #000;
@@ -57,6 +61,9 @@ input[type='checkbox'] {
   .error .lbl-toggle {
     background: #D55E00;
   }
+  .success .lbl-toggle {
+    background: #49E048;
+  }
 }
 
 .lbl-toggle::before {
@@ -98,4 +105,4 @@ input[type='checkbox'] {
   border-bottom-right-radius: 7px;
   padding: .5rem 1rem;
   text-align: left;
-}
+}