half working user pattern management

website/src/repl/Repl.jsx

@@ -17,7 +17,7 @@ import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
-import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
+import { settingsMap, useSettings, setLatestCode, updateUserPattern } from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
@@ -128,6 +128,7 @@ export function Repl({ embedded = false }) {
     isLineWrappingEnabled,
     panelPosition,
     isZen,
+    activePattern,
   } = useSettings();
 
   const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
@@ -144,6 +145,7 @@ export function Repl({ embedded = false }) {
         cleanupDraw();
       },
       afterEval: ({ code, meta }) => {
+        updateUserPattern(code);
         setMiniLocations(meta.miniLocations);
         setWidgets(meta.widgets);
         setPending(false);

website/src/repl/panel/Panel.jsx

@@ -86,7 +86,7 @@ export function Panel({ context }) {
           <PanelTab name="intro" label="welcome" />
           <PanelTab name="sounds" />
           <PanelTab name="console" />
-          {/* <PanelTab name="patterns" /> */}
+          <PanelTab name="patterns" />
           <PanelTab name="reference" />
           <PanelTab name="settings" />
           {TAURI && <PanelTab name="files" />}
@@ -101,7 +101,7 @@ export function Panel({ context }) {
         <div className="relative overflow-hidden">
           <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
             {activeFooter === 'intro' && <WelcomeTab context={context} />}
-            {/* {activeFooter === 'patterns' && <PatternsTab context={context} />} */}
+            {activeFooter === 'patterns' && <PatternsTab context={context} />}
             {activeFooter === 'console' && <ConsoleTab log={log} />}
             {activeFooter === 'sounds' && <SoundsTab />}
             {activeFooter === 'reference' && <Reference />}

website/src/repl/panel/PatternsTab.jsx

@@ -1,24 +1,57 @@
 import React from 'react';
 import * as tunes from '../tunes.mjs';
-import { useSettings, clearUserPatterns, newUserPattern } from '../../settings.mjs';
+import {
+  useSettings,
+  clearUserPatterns,
+  newUserPattern,
+  setActivePattern,
+  deleteActivePattern,
+  duplicateActivePattern,
+  getUserPattern,
+} from '../../settings.mjs';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
 
 export function PatternsTab({ context }) {
-  const { userPatterns } = useSettings();
+  const { userPatterns, activePattern } = useSettings();
   return (
     <div className="px-4 w-full text-foreground">
       <h2 className="text-xl mb-2">My Patterns</h2>
       <div className="space-x-1">
-        <button onClick={() => newUserPattern()}>add user pattern</button>
-        <button onClick={() => clearUserPatterns()}>clear user patterns</button>
+        <button
+          className="underline"
+          onClick={() => {
+            const name = newUserPattern();
+            const { code } = getUserPattern(name);
+            console.log('code', code);
+            context.handleUpdate(code);
+          }}
+        >
+          new
+        </button>
+        <button className="underline" onClick={() => duplicateActivePattern()}>
+          duplicate
+        </button>
+        <button className="underline" onClick={() => deleteActivePattern()}>
+          delete
+        </button>
+        <button className="underline" onClick={() => clearUserPatterns()}>
+          clear
+        </button>
       </div>
       {Object.entries(userPatterns).map(([key, up]) => (
         <a
           key={key}
-          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          className={classNames(
+            'mr-4 hover:opacity-50 cursor-pointer inline-block',
+            key === activePattern ? 'underline' : '',
+          )}
           onClick={() => {
             const { code } = up;
-            console.log('clikkk', code);
             context.handleUpdate(code);
+            setActivePattern(key);
           }}
         >
           {key}
@@ -28,9 +61,12 @@ export function PatternsTab({ context }) {
       {Object.entries(tunes).map(([key, tune]) => (
         <a
           key={key}
-          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          className={classNames(
+            'mr-4 hover:opacity-50 cursor-pointer inline-block',
+            key === activePattern ? 'underline' : '',
+          )}
           onClick={() => {
-            console.log('clikkk', tune);
+            setActivePattern(key);
             context.handleUpdate(tune);
           }}
         >