From a750490eeada9c269df3cc59739c6f5fe1ce01d9 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 08:49:03 +0100
Subject: [PATCH 01/15] begin pattern import button

---
 website/src/repl/panel/PatternsTab.jsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 1b19c8e0..fba6fbc9 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -44,6 +44,20 @@ export function PatternsTab({ context }) {
           <button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
             clear
           </button>
+          <label className="hover:opacity-50 cursor-pointer">
+            <input
+              style={{ display: 'none' }}
+              type="file"
+              directory=""
+              webkitdirectory=""
+              multiple
+              accept="audio/*"
+              onChange={(e) => {
+                console.log('change', e.target.files);
+              }}
+            />
+            import
+          </label>
         </div>
         {Object.entries(userPatterns).map(([key, up]) => (
           <a
@@ -83,11 +97,3 @@ export function PatternsTab({ context }) {
     </div>
   );
 }
-
-/*
-selectable examples
-if example selected
-  type character -> create new user pattern with exampleName_n
-  even if 
-clicking (+) opens the "new" example with same behavior as above
-*/

From b03bf9ec3def256b2f643153fcafc56a3fa43919 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:17:43 +0100
Subject: [PATCH 02/15] remove log

---
 website/src/settings.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 67d386cf..eaed555b 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -187,6 +187,5 @@ export function duplicateActivePattern() {
 }
 
 export function setActivePattern(key) {
-  console.log('set', key);
   settingsMap.setKey('activePattern', key);
 }

From cec8553fb5e1eb03518bbddd8aea671d7cc39a41 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:18:33 +0100
Subject: [PATCH 03/15] clear sounds + cps on pattern change + similar to
 shuffle

---
 website/src/repl/Repl.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 3d3117ae..7813ae98 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -247,9 +247,15 @@ export function Repl({ embedded = false }) {
       stop();
     }
   };
-  const handleUpdate = (newCode) => {
+  const handleUpdate = async (newCode, reset = false) => {
+    if (reset) {
+      clearCanvas();
+      resetLoadedSounds();
+      scheduler.setCps(1);
+      await prebake(); // declare default samples
+    }
     (newCode || isDirty) && activateCode(newCode);
-    logger('[repl] code updated! tip: you can also update the code by pressing ctrl+enter', 'highlight');
+    logger('[repl] code updated!');
   };
 
   const handleShuffle = async () => {

From 10d86ff83522d3eef3df06247f52a0685dfd1ed3 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:18:55 +0100
Subject: [PATCH 04/15] more style + set reset flag

---
 website/src/repl/panel/PatternsTab.jsx | 91 +++++++++++++++-----------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index fba6fbc9..5cbfc3b3 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -9,7 +9,9 @@ import {
   duplicateActivePattern,
   getUserPattern,
   renameActivePattern,
+  addUserPattern,
 } from '../../settings.mjs';
+import { logger } from '@strudel.cycles/core';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -18,16 +20,16 @@ function classNames(...classes) {
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
   return (
-    <div className="px-4 w-full text-foreground space-y-4">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-4">
       <section>
         <h2 className="text-xl mb-2">Pattern Collection</h2>
-        <div className="space-x-4 border-b border-foreground mb-1">
+        <div className="space-x-4 border-b border-foreground mb-2 pb-1">
           <button
             className="hover:opacity-50"
             onClick={() => {
               const name = newUserPattern();
               const { code } = getUserPattern(name);
-              context.handleUpdate(code);
+              context.handleUpdate(code, true);
             }}
           >
             new
@@ -48,51 +50,62 @@ export function PatternsTab({ context }) {
             <input
               style={{ display: 'none' }}
               type="file"
-              directory=""
-              webkitdirectory=""
               multiple
-              accept="audio/*"
-              onChange={(e) => {
-                console.log('change', e.target.files);
+              accept="text/plain"
+              onChange={async (e) => {
+                const files = Array.from(e.target.files);
+                await Promise.all(
+                  files.map(async (file, i) => {
+                    const code = await file.text();
+                    const name = file.name.replace(/\.[^/.]+$/, '');
+                    console.log(i, name, code);
+                    addUserPattern(name, { code });
+                  }),
+                );
+                logger(`import done!`);
               }}
             />
             import
           </label>
         </div>
-        {Object.entries(userPatterns).map(([key, up]) => (
-          <a
-            key={key}
-            className={classNames(
-              'mr-4 hover:opacity-50 cursor-pointer inline-block',
-              key === activePattern ? 'underline' : '',
-            )}
-            onClick={() => {
-              const { code } = up;
-              setActivePattern(key);
-              context.handleUpdate(code);
-            }}
-          >
-            {key}
-          </a>
-        ))}
+        <div className="font-mono text-sm">
+          {Object.entries(userPatterns).map(([key, up]) => (
+            <a
+              key={key}
+              className={classNames(
+                'mr-4 hover:opacity-50 cursor-pointer inline-block',
+                key === activePattern ? 'outline outline-1' : '',
+              )}
+              onClick={() => {
+                const { code } = up;
+                setActivePattern(key);
+                context.handleUpdate(code, true);
+              }}
+            >
+              {key}
+            </a>
+          ))}
+        </div>
       </section>
       <section>
         <h2 className="text-xl mb-2">Examples</h2>
-        {Object.entries(tunes).map(([key, tune]) => (
-          <a
-            key={key}
-            className={classNames(
-              'mr-4 hover:opacity-50 cursor-pointer inline-block',
-              key === activePattern ? 'underline' : '',
-            )}
-            onClick={() => {
-              setActivePattern(key);
-              context.handleUpdate(tune);
-            }}
-          >
-            {key}
-          </a>
-        ))}
+        <div className="font-mono text-sm">
+          {Object.entries(tunes).map(([key, tune]) => (
+            <a
+              key={key}
+              className={classNames(
+                'mr-4 hover:opacity-50 cursor-pointer inline-block',
+                key === activePattern ? 'outline outline-1' : '',
+              )}
+              onClick={() => {
+                setActivePattern(key);
+                context.handleUpdate(tune, true);
+              }}
+            >
+              {key}
+            </a>
+          ))}
+        </div>
       </section>
     </div>
   );

From 8dd0e9600d51030dba058ae6947cb0cd67e65f7e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:20:42 +0100
Subject: [PATCH 05/15] add some padding

---
 website/src/repl/panel/PatternsTab.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 5cbfc3b3..880134ce 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -20,7 +20,7 @@ function classNames(...classes) {
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
   return (
-    <div className="px-4 w-full dark:text-white text-stone-900 space-y-4">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
         <h2 className="text-xl mb-2">Pattern Collection</h2>
         <div className="space-x-4 border-b border-foreground mb-2 pb-1">

From 31cd626820ea8b9b87ddba31082a490b06756f9d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:30:06 +0100
Subject: [PATCH 06/15] style sounds and patterns tab more consistently

---
 website/src/repl/panel/PatternsTab.jsx | 3 +--
 website/src/repl/panel/SoundsTab.jsx   | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 880134ce..37cac6f7 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -22,8 +22,7 @@ export function PatternsTab({ context }) {
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
-        <h2 className="text-xl mb-2">Pattern Collection</h2>
-        <div className="space-x-4 border-b border-foreground mb-2 pb-1">
+        <div className="px-4 space-x-4 border-b border-foreground mb-2 h-8">
           <button
             className="hover:opacity-50"
             onClick={() => {
diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/panel/SoundsTab.jsx
index aeda4f6d..fe32212d 100644
--- a/website/src/repl/panel/SoundsTab.jsx
+++ b/website/src/repl/panel/SoundsTab.jsx
@@ -42,8 +42,8 @@ export function SoundsTab() {
     });
   });
   return (
-    <div id="sounds-tab" className="flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="px-2 pb-2 flex-none">
+    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
+      <div className="pb-2 flex-none">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -55,7 +55,7 @@ export function SoundsTab() {
           }}
         ></ButtonGroup>
       </div>
-      <div className="p-2 min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
+      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
         {soundEntries.map(([name, { data, onTrigger }]) => (
           <span
             key={name}

From 63a01088a0366392b4afc14a76f434cd77b5ef74 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 11:42:15 +0100
Subject: [PATCH 07/15] hotfix: dont overwrite user pattern on shuffle

---
 website/src/repl/Repl.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 7813ae98..a5bfffd4 100644
--- a/website/src/repl/Repl.jsx
+++ b/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, updateUserCode } from '../settings.mjs';
+import { settingsMap, useSettings, setLatestCode, updateUserCode, setActivePattern } from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
@@ -261,6 +261,7 @@ export function Repl({ embedded = false }) {
   const handleShuffle = async () => {
     const { code, name } = getRandomTune();
     logger(`[repl] ✨ loading random tune "${name}"`);
+    setActivePattern(name);
     clearCanvas();
     resetLoadedSounds();
     scheduler.setCps(1);

From 0ca4c1de0f9adc17511f94d457eb0712c42b53b0 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:21:26 +0100
Subject: [PATCH 08/15] make sure new recent patterns are on top

---
 website/src/settings.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index eaed555b..d660b396 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -81,7 +81,7 @@ export function addUserPattern(name, config) {
     throw new Error('addUserPattern expected code as property of second param');
   }
   const userPatterns = getUserPatterns();
-  setUserPatterns({ ...userPatterns, [name]: config });
+  setUserPatterns({ [name]: config, ...userPatterns });
 }
 
 export function newUserPattern() {
@@ -152,7 +152,7 @@ export function updateUserCode(code) {
     activePattern = getNextCloneName(activePattern);
     setActivePattern(activePattern);
   }
-  setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+  setUserPatterns({ [activePattern]: { code }, ...userPatterns });
 }
 
 export function deleteActivePattern() {
@@ -182,7 +182,7 @@ export function duplicateActivePattern() {
   }
   const userPatterns = getUserPatterns();
   activePattern = getNextCloneName(activePattern);
-  setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } });
+  setUserPatterns({ [activePattern]: { code: latestCode }, ...userPatterns });
   setActivePattern(activePattern);
 }
 

From c1b7476f433d96ad204960f65991a333862a9e98 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:22:07 +0100
Subject: [PATCH 09/15] + show active pattern at the top + move active pattern
 functions to top

---
 website/src/repl/panel/PatternsTab.jsx | 80 ++++++++++++++++----------
 1 file changed, 51 insertions(+), 29 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 37cac6f7..124ba400 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import * as tunes from '../tunes.mjs';
 import {
   useSettings,
@@ -12,6 +12,7 @@ import {
   addUserPattern,
 } from '../../settings.mjs';
 import { logger } from '@strudel.cycles/core';
+import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -19,10 +20,50 @@ function classNames(...classes) {
 
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
+  const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
-        <div className="px-4 space-x-4 border-b border-foreground mb-2 h-8">
+        {activePattern && (
+          <div className="flex items-center mb-2 space-x-2 overflow-auto">
+            <h1 className="text-xl">{activePattern}</h1>
+            <div className="space-x-4 flex w-min">
+              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
+                <DocumentDuplicateIcon className="w-5 h-5" />
+              </button>
+              {!isExample && (
+                <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
+                  <PencilSquareIcon className="w-5 h-5" />
+                  {/* <PencilIcon className="w-5 h-5" /> */}
+                </button>
+              )}
+              {!isExample && (
+                <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
+                  <TrashIcon className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+        <div className="font-mono text-sm">
+          {Object.entries(userPatterns).map(([key, up]) => (
+            <a
+              key={key}
+              className={classNames(
+                'mr-4 hover:opacity-50 cursor-pointer inline-block',
+                key === activePattern ? 'outline outline-1' : '',
+              )}
+              onClick={() => {
+                const { code } = up;
+                setActivePattern(key);
+                context.handleUpdate(code, true);
+              }}
+            >
+              {key}
+            </a>
+          ))}
+        </div>
+        <div className="pr-4 space-x-4 border-b border-foreground mb-2 h-8 flex overflow-auto max-w-full items-center">
           <button
             className="hover:opacity-50"
             onClick={() => {
@@ -33,15 +74,6 @@ export function PatternsTab({ context }) {
           >
             new
           </button>
-          <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
-            duplicate
-          </button>
-          <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
-            rename
-          </button>
-          <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
-            delete
-          </button>
           <button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
             clear
           </button>
@@ -66,24 +98,14 @@ export function PatternsTab({ context }) {
             />
             import
           </label>
-        </div>
-        <div className="font-mono text-sm">
-          {Object.entries(userPatterns).map(([key, up]) => (
-            <a
-              key={key}
-              className={classNames(
-                'mr-4 hover:opacity-50 cursor-pointer inline-block',
-                key === activePattern ? 'outline outline-1' : '',
-              )}
-              onClick={() => {
-                const { code } = up;
-                setActivePattern(key);
-                context.handleUpdate(code, true);
-              }}
-            >
-              {key}
-            </a>
-          ))}
+          <button
+            className="hover:opacity-50"
+            onClick={() => {
+              console.log('export');
+            }}
+          >
+            export
+          </button>
         </div>
       </section>
       <section>

From a6f969614e9e080e28f6f2a6a8ae77149763e151 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:24:49 +0100
Subject: [PATCH 10/15] fix: rename cancel

---
 website/src/settings.mjs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index d660b396..620fb890 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -123,6 +123,10 @@ export function renameActivePattern() {
     return;
   }
   const newName = prompt('Enter new name', activePattern);
+  if (newName === null) {
+    // canceled
+    return;
+  }
   if (userPatterns[newName]) {
     alert('Name already taken!');
     return;

From 5116bf74ad267a244383ddf9474f7539820f8d96 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:25:05 +0100
Subject: [PATCH 11/15] reorder pattern action buttons

---
 website/src/repl/panel/PatternsTab.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 124ba400..def6cef1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -28,15 +28,15 @@ export function PatternsTab({ context }) {
           <div className="flex items-center mb-2 space-x-2 overflow-auto">
             <h1 className="text-xl">{activePattern}</h1>
             <div className="space-x-4 flex w-min">
-              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
-                <DocumentDuplicateIcon className="w-5 h-5" />
-              </button>
               {!isExample && (
                 <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
                   <PencilSquareIcon className="w-5 h-5" />
                   {/* <PencilIcon className="w-5 h-5" /> */}
                 </button>
               )}
+              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
+                <DocumentDuplicateIcon className="w-5 h-5" />
+              </button>
               {!isExample && (
                 <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
                   <TrashIcon className="w-5 h-5" />

From 8c89938eafd6499d2f5e9c4e1505033b0a281180 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 23:07:30 +0100
Subject: [PATCH 12/15] pattern json export + import

---
 website/src/repl/panel/PatternsTab.jsx | 25 +++++++++++++++++++------
 website/src/settings.mjs               |  6 ++++--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index def6cef1..4b1dfcf1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -8,8 +8,10 @@ import {
   deleteActivePattern,
   duplicateActivePattern,
   getUserPattern,
+  getUserPatterns,
   renameActivePattern,
   addUserPattern,
+  setUserPatterns,
 } from '../../settings.mjs';
 import { logger } from '@strudel.cycles/core';
 import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
@@ -82,15 +84,19 @@ export function PatternsTab({ context }) {
               style={{ display: 'none' }}
               type="file"
               multiple
-              accept="text/plain"
+              accept="text/plain,application/json"
               onChange={async (e) => {
                 const files = Array.from(e.target.files);
                 await Promise.all(
                   files.map(async (file, i) => {
-                    const code = await file.text();
-                    const name = file.name.replace(/\.[^/.]+$/, '');
-                    console.log(i, name, code);
-                    addUserPattern(name, { code });
+                    const content = await file.text();
+                    if (file.type === 'application/json') {
+                      const userPatterns = getUserPatterns() || {};
+                      setUserPatterns({ ...userPatterns, ...JSON.parse(content) });
+                    } else if (file.type === 'text/plain') {
+                      const name = file.name.replace(/\.[^/.]+$/, '');
+                      addUserPattern(name, { code: content });
+                    }
                   }),
                 );
                 logger(`import done!`);
@@ -101,7 +107,14 @@ export function PatternsTab({ context }) {
           <button
             className="hover:opacity-50"
             onClick={() => {
-              console.log('export');
+              const blob = new Blob([JSON.stringify(userPatterns)], { type: 'application/json' });
+              const downloadLink = document.createElement('a');
+              downloadLink.href = window.URL.createObjectURL(blob);
+              const date = new Date().toISOString().split('T')[0];
+              downloadLink.download = `strudel_patterns_${date}.json`;
+              document.body.appendChild(downloadLink);
+              downloadLink.click();
+              document.body.removeChild(downloadLink);
             }}
           >
             export
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 620fb890..cf8a7cee 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -62,14 +62,14 @@ export const fontSize = patternSetting('fontSize');
 
 export const settingPatterns = { theme, fontFamily, fontSize };
 
-function getUserPatterns() {
+export function getUserPatterns() {
   return JSON.parse(settingsMap.get().userPatterns);
 }
 function getSetting(key) {
   return settingsMap.get()[key];
 }
 
-function setUserPatterns(obj) {
+export function setUserPatterns(obj) {
   settingsMap.setKey('userPatterns', JSON.stringify(obj));
 }
 
@@ -193,3 +193,5 @@ export function duplicateActivePattern() {
 export function setActivePattern(key) {
   settingsMap.setKey('activePattern', key);
 }
+
+export function importUserPatternJSON(jsonString) {}

From 37a13d1a00197a132da22688dae109b638334dd2 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 23:09:24 +0100
Subject: [PATCH 13/15] add tooltips

---
 website/src/repl/panel/PatternsTab.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 4b1dfcf1..175ed887 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -31,16 +31,16 @@ export function PatternsTab({ context }) {
             <h1 className="text-xl">{activePattern}</h1>
             <div className="space-x-4 flex w-min">
               {!isExample && (
-                <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
+                <button className="hover:opacity-50" onClick={() => renameActivePattern()} title="Rename">
                   <PencilSquareIcon className="w-5 h-5" />
                   {/* <PencilIcon className="w-5 h-5" /> */}
                 </button>
               )}
-              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
+              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()} title="Duplicate">
                 <DocumentDuplicateIcon className="w-5 h-5" />
               </button>
               {!isExample && (
-                <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
+                <button className="hover:opacity-50" onClick={() => deleteActivePattern()} title="Delete">
                   <TrashIcon className="w-5 h-5" />
                 </button>
               )}

From 6969800192ae2e34974f44ff616375991e866aef Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 9 Dec 2023 17:23:24 +0100
Subject: [PATCH 14/15] fix: update button bug

---
 website/src/repl/Header.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 5e991f8a..b6f13060 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -87,7 +87,7 @@ export function Header({ context }) {
             )}
           </button>
           <button
-            onClick={handleUpdate}
+            onClick={() => handleUpdate()}
             title="update"
             className={cx(
               'flex items-center space-x-1',

From 845571a7161a47361324e9b1c1cdd805442677db Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 9 Dec 2023 23:54:49 +0100
Subject: [PATCH 15/15] hotfix: pattern save was broken :-/

---
 website/src/settings.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index cf8a7cee..98d3fe50 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -81,7 +81,7 @@ export function addUserPattern(name, config) {
     throw new Error('addUserPattern expected code as property of second param');
   }
   const userPatterns = getUserPatterns();
-  setUserPatterns({ [name]: config, ...userPatterns });
+  setUserPatterns({ ...userPatterns, [name]: config });
 }
 
 export function newUserPattern() {
@@ -156,7 +156,7 @@ export function updateUserCode(code) {
     activePattern = getNextCloneName(activePattern);
     setActivePattern(activePattern);
   }
-  setUserPatterns({ [activePattern]: { code }, ...userPatterns });
+  setUserPatterns({ ...userPatterns, [activePattern]: { code } });
 }
 
 export function deleteActivePattern() {
@@ -186,7 +186,7 @@ export function duplicateActivePattern() {
   }
   const userPatterns = getUserPatterns();
   activePattern = getNextCloneName(activePattern);
-  setUserPatterns({ [activePattern]: { code: latestCode }, ...userPatterns });
+  setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } });
   setActivePattern(activePattern);
 }