floating error message

repl/README.md

@@ -46,6 +46,6 @@ currently broken / buggy:
 - [x] scheduler.getPhase is quantized to clock interval
   - => draw was choppy + that also caused useHighlighting bugs
 - [x] pianoroll keeps rolling when pressing stop
-- [ ] find a way to display errors when console is closed / another tab selected
+- [x] find a way to display errors when console is closed / another tab selected
 - [ ] highlighting out of range error is back (delete large chunk at the top while highlighting below is triggered)
 - [ ] idea: interpolate between running and evaluated code!

repl/src/App.jsx

@@ -109,21 +109,22 @@ function App() {
   const [isZen, setIsZen] = useState(false);
   const [pending, setPending] = useState(false);
 
-  const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop } = useStrudel({
+  const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
-    initialCode: '// LOADING',
+    useStrudel({
-    defaultOutput: webaudioOutput,
+      initialCode: '// LOADING',
-    getTime,
+      defaultOutput: webaudioOutput,
-    autolink: true,
+      getTime,
-    beforeEval: () => {
+      autolink: true,
-      cleanupUi();
+      beforeEval: () => {
-      cleanupDraw();
+        cleanupUi();
-      setPending(true);
+        cleanupDraw();
-    },
+        setPending(true);
-    afterEval: () => {
+      },
-      setPending(false);
+      afterEval: () => {
-    },
+        setPending(false);
-    onToggle: (play) => !play && cleanupDraw(false),
+      },
-  });
+      onToggle: (play) => !play && cleanupDraw(false),
+    });
 
   // init code
   useEffect(() => {
@@ -264,6 +265,9 @@ function App() {
             }}
           />
         </section>
+        {error && (
+          <div className="text-red-500 p-4 bg-lineblack animate-pulse">{error.message || 'Unknown Error :-/'}</div>
+        )}
         <Footer />
       </div>
     </AppContext.Provider>

repl/src/Footer.jsx

@@ -30,9 +30,6 @@ export function Footer() {
   useLogger(
     useCallback((e) => {
       const { message, type, data } = e.detail;
-      if (type === 'error') {
-        setActiveFooter('console');
-      }
       setLog((l) => {
         const lastLog = l.length ? l[l.length - 1] : undefined;
         const id = nanoid(12);