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
-        <button onClick={() => clearUserPatterns()}>clear user patterns</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);
           }}
         >

website/src/settings.mjs

@@ -1,6 +1,7 @@
 import { persistentMap } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { register } from '@strudel.cycles/core';
+import * as tunes from './repl/tunes.mjs';
 
 export const defaultSettings = {
   activeFooter: 'intro',
@@ -16,6 +17,7 @@ export const defaultSettings = {
   soundsFilter: 'all',
   panelPosition: 'bottom',
   userPatterns: '{}',
+  activePattern: '',
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
@@ -59,6 +61,10 @@ export const settingPatterns = { theme, fontFamily, fontSize };
 function getUserPatterns() {
   return JSON.parse(settingsMap.get().userPatterns);
 }
+function getSetting(key) {
+  return settingsMap.get()[key];
+}
+
 function setUserPatterns(obj) {
   settingsMap.setKey('userPatterns', JSON.stringify(obj));
 }
@@ -80,9 +86,68 @@ export function newUserPattern() {
   const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date));
   const num = String(todays.length + 1).padStart(3, '0');
   const defaultNewPattern = 's("hh")';
-  addUserPattern(date + '_' + num, { code: defaultNewPattern });
+  const name = date + '_' + num;
+  addUserPattern(name, { code: defaultNewPattern });
+  setActivePattern(name);
+  return name;
 }
 
 export function clearUserPatterns() {
   setUserPatterns({});
 }
+
+export function getNextCloneName(key) {
+  const userPatterns = getUserPatterns();
+  const clones = Object.entries(userPatterns).filter(([name]) => name.startsWith(key));
+  const num = String(clones.length + 1).padStart(3, '0');
+  return key + '_' + num;
+}
+
+export function getUserPattern(key) {
+  const userPatterns = getUserPatterns();
+  return userPatterns[key];
+}
+
+export function updateUserPattern(code) {
+  const userPatterns = getUserPatterns();
+  let activePattern = getSetting('activePattern');
+  console.log('update', activePattern, code);
+  if (!activePattern) {
+    activePattern = newUserPattern();
+    setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+    setActivePattern(activePattern);
+  } else if (!!tunes[activePattern] && code !== tunes[activePattern]) {
+    // is example / system pattern
+    activePattern = getNextCloneName(activePattern);
+    setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+    setActivePattern(activePattern);
+  }
+}
+
+export function deleteActivePattern() {
+  let activePattern = getSetting('activePattern');
+  if (!activePattern) {
+    console.warn('cannot delete: no pattern selected');
+    return;
+  }
+  const userPatterns = getUserPatterns();
+  setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== activePattern)));
+  setActivePattern('');
+}
+
+export function duplicateActivePattern() {
+  let activePattern = getSetting('activePattern');
+  let latestCode = getSetting('latestCode');
+  if (!activePattern) {
+    console.warn('cannot duplicate: no pattern selected');
+    return;
+  }
+  const userPatterns = getUserPatterns();
+  activePattern = getNextCloneName(activePattern);
+  setUserPatterns({ ...userPatterns, [activePattern]: { latestCode } });
+  setActivePattern(activePattern);
+}
+
+export function setActivePattern(key) {
+  settingsMap.setKey('activePattern', key);
+}