- move console logic to console tab

- colorize logs when color is set

website/src/repl/components/panel/ConsoleTab.jsx

@@ -1,18 +1,51 @@
+import { logger } from '@strudel/core';
+import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
+import { nanoid } from 'nanoid';
+import { useCallback, useState } from 'react';
 
-export function ConsoleTab({ log }) {
+export function ConsoleTab() {
+  const [log, setLog] = useState([]);
+  useLogger(
+    useCallback((e) => {
+      const { message, type, data } = e.detail;
+      setLog((l) => {
+        const lastLog = l.length ? l[l.length - 1] : undefined;
+        const id = nanoid(12);
+        // if (type === 'loaded-sample' && lastLog.type === 'load-sample' && lastLog.url === data.url) {
+        if (type === 'loaded-sample') {
+          // const loadIndex = l.length - 1;
+          const loadIndex = l.findIndex(({ data: { url }, type }) => type === 'load-sample' && url === data.url);
+          l[loadIndex] = { message, type, id, data };
+        } else if (lastLog && lastLog.message === message) {
+          l = l.slice(0, -1).concat([{ message, type, count: (lastLog.count ?? 1) + 1, id, data }]);
+        } else {
+          l = l.concat([{ message, type, id, data }]);
+        }
+        return l.slice(-20);
+      });
+    }, []),
+  );
   return (
-    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm py-2">
+    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm py-2 space-y-1">
-      <pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
+      {!log.length && (
+        <pre aria-hidden="true">{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
 ██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
 ███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
 ╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     
 ███████║   ██║   ██║  ██║╚██████╔╝██████╔╝███████╗███████╗
 ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝`}</pre>
+      )}
       {log.map((l, i) => {
         const message = linkify(l.message);
+        const color = l.data?.hap?.value?.color;
+        console.log('color', color);
         return (
-          <div key={l.id} className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}>
+          <div
+            key={l.id}
+            className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}
+            style={color ? { color } : {}}
+          >
             <span dangerouslySetInnerHTML={{ __html: message }} />
             {l.count ? ` (${l.count})` : ''}
           </div>
@@ -42,3 +75,7 @@ function linkify(inputText) {
 
   return replacedText;
 }
+
+function useLogger(onTrigger) {
+  useEvent(logger.key, onTrigger);
+}

website/src/repl/components/panel/Panel.jsx

@@ -1,8 +1,4 @@
-import { logger } from '@strudel/core';
-import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
-import { nanoid } from 'nanoid';
-import { useCallback, useState } from 'react';
 import { setPanelPinned, setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
@@ -119,33 +115,12 @@ function PanelNav({ children, className, settings, ...props }) {
 }
 
 function PanelContent({ context, tab }) {
-  const [log, setLog] = useState([]);
-  useLogger(
-    useCallback((e) => {
-      const { message, type, data } = e.detail;
-      setLog((l) => {
-        const lastLog = l.length ? l[l.length - 1] : undefined;
-        const id = nanoid(12);
-        // if (type === 'loaded-sample' && lastLog.type === 'load-sample' && lastLog.url === data.url) {
-        if (type === 'loaded-sample') {
-          // const loadIndex = l.length - 1;
-          const loadIndex = l.findIndex(({ data: { url }, type }) => type === 'load-sample' && url === data.url);
-          l[loadIndex] = { message, type, id, data };
-        } else if (lastLog && lastLog.message === message) {
-          l = l.slice(0, -1).concat([{ message, type, count: (lastLog.count ?? 1) + 1, id, data }]);
-        } else {
-          l = l.concat([{ message, type, id, data }]);
-        }
-        return l.slice(-20);
-      });
-    }, []),
-  );
 
   switch (tab) {
     case tabNames.patterns:
       return <PatternsTab context={context} />;
     case tabNames.console:
-      return <ConsoleTab log={log} />;
+      return <ConsoleTab />;
     case tabNames.sounds:
       return <SoundsTab />;
     case tabNames.reference:
@@ -237,6 +212,3 @@ function CloseButton({ onClick }) {
   );
 }
 
-function useLogger(onTrigger) {
-  useEvent(logger.key, onTrigger);
-}