making things consistent

website/src/repl/Repl.jsx

@@ -80,6 +80,7 @@ export function Repl({ embedded = false }) {
         const data = { code };
         let id = getViewingPattern();
         window.location.hash = '#' + code2hash(code);
+
         const examplePatternData = examplePattern.getPatternData(id);
         const isExamplePattern = examplePatternData != null;
 

website/src/repl/panel/PatternsTab.jsx

@@ -1,13 +1,8 @@
 import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 
 import {
-
   $featuredPatterns,
   $publicPatterns,
-  clearUserPatterns,
-  deleteActivePattern,
-  duplicateActivePattern,
-
   exportPatterns,
   importPatterns,
   useActivePattern,
@@ -23,72 +18,113 @@ import * as tunes from '../tunes.mjs';
 import { useStore } from '@nanostores/react';
 import { getMetadata } from '../../metadata_parser';
 
-
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
 }
 
-function PatternButton({ showOutline, onClick, label, showHiglight }) {
+function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
+  const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
+  return (
+    <>{`${pattern.id}: ${meta.title ?? pattern.hash ?? 'unnamed'} by ${
+      Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous'
+    }`}</>
+  );
+}
+
+const getPatternLabel = (pattern) => {
+  return `${pattern.id}: ${meta.title ?? pattern.hash ?? 'unnamed'} by ${
+    Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous'
+  }`;
+};
+
+function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
   return (
     <a
       className={classNames(
-        'mr-4 hover:opacity-50 cursor-pointer inline-block',
+        'mr-4 hover:opacity-50 cursor-pointer block',
         showOutline && 'outline outline-1',
         showHiglight && 'bg-selection',
       )}
       onClick={onClick}
     >
-      {label}
+      <PatternLabel pattern={pattern} />
     </a>
   );
 }
 
+// function ListButton() {
+//   return (
+//     <a
+//       key={pattern.id}
+//       className={classNames(
+//         'mr-4 hover:opacity-50 cursor-pointer block',
+//         pattern.hash === activePattern ? 'outline outline-1' : '',
+//       )}
+//       onClick={() => {
+//         setActivePattern(pattern.hash);
+//         context.handleUpdate(pattern.code, true);
+//       }}
+//     >
+//       <PatternLabel pattern={pattern} />
+//     </a>
+//   );
+// }
+
 function PatternButtons({ patterns, activePattern, onClick, viewingPattern, started }) {
   return (
     <div className="font-mono text-sm">
-      {Object.entries(patterns).map(([id]) => (
+      {Object.values(patterns).map((pattern) => {
-        <PatternButton
+        const id = pattern.id;
-          key={id}
+        return (
-          label={id}
+          <PatternButton
-          showHiglight={id === viewingPattern}
+            pattern={pattern}
-          showOutline={id === activePattern && started}
+            key={id}
-          onClick={() => onClick(id)}
+            showHiglight={id === viewingPattern}
-        />
+            showOutline={id === activePattern && started}
-      ))}
+            onClick={() => onClick(id)}
+          />
+        );
+      })}
     </div>
   );
 }
 
 export function PatternsTab({ context }) {
   const { userPatterns } = useSettings();
-  const examplePatterns = useMemo(() => examplePattern.getAll(), []);
   const activePattern = useActivePattern();
 
+  const featuredPatterns = useStore($featuredPatterns);
+  const publicPatterns = useStore($publicPatterns);
+
+  // const otherPatterns = [
+  //   {source: 'Stock Examples', patterns: examplePatterns }
+  // ]
+
+  const otherPatterns = useMemo(() => {
+    const pats = new Map();
+    pats.set('Featured', featuredPatterns);
+    pats.set('Last Creations', publicPatterns);
+    pats.set('Stock Examples', examplePattern.getAll());
+    return pats;
+  }, [featuredPatterns, publicPatterns]);
+
   const viewingPattern = useViewingPattern();
   const updateCodeWindow = (id, code, reset = false) => {
     context.handleUpdate(id, code, reset);
   };
-  const onPatternBtnClick = (id, isExample = false) => {
-    const code = isExample ? examplePatterns[id].code : userPatterns[id].code;
 
-    // display selected pattern code in the window
+  const isUserPattern = userPatterns[viewingPattern] != null;
-    updateCodeWindow(id, code, isExample);
-  };
 
-  const isExample = examplePatterns[viewingPattern] != null;
+  // const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
-
-  const featuredPatterns = useStore($featuredPatterns);
-  const publicPatterns = useStore($publicPatterns);
-  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>
         {viewingPattern && (
           <div className="flex items-center mb-2 space-x-2 overflow-auto">
-            <h1 className="text-xl">{viewingPattern}</h1>
+            <h1 className="text-xl">{`${viewingPattern}`}</h1>
             <div className="space-x-4 flex w-min">
-              {!isExample && (
+              {/* {!isExample && (
                 <button
                   className="hover:opacity-50"
                   onClick={() => {
@@ -99,7 +135,7 @@ export function PatternsTab({ context }) {
                 >
                   <PencilSquareIcon className="w-5 h-5" />
                 </button>
-              )}
+              )} */}
               <button
                 className="hover:opacity-50"
                 onClick={() => {
@@ -110,7 +146,7 @@ export function PatternsTab({ context }) {
               >
                 <DocumentDuplicateIcon className="w-5 h-5" />
               </button>
-              {!isExample && (
+              {isUserPattern && (
                 <button
                   className="hover:opacity-50"
                   onClick={() => {
@@ -126,7 +162,7 @@ export function PatternsTab({ context }) {
           </div>
         )}
         <PatternButtons
-          onClick={onPatternBtnClick}
+          onClick={(id) => updateCodeWindow(id, userPatterns[id]?.code, false)}
           patterns={userPatterns}
           started={context.started}
           activePattern={activePattern}
@@ -166,90 +202,24 @@ export function PatternsTab({ context }) {
           </button>
         </div>
       </section>
-      {featuredPatterns && (
+      {Array.from(otherPatterns.keys()).map((key) => {
-        <section>
+        const patterns = otherPatterns.get(key);
-          <h2 className="text-xl mb-2">Featured Patterns</h2>
-          <div className="font-mono text-sm">
-            {featuredPatterns.map((pattern) => (
-              <a
-                key={pattern.id}
-                className={classNames(
-                  'mr-4 hover:opacity-50 cursor-pointer block',
-                  pattern.hash === activePattern ? 'outline outline-1' : '',
-                )}
-                onClick={() => {
-                  setActivePattern(pattern.hash);
-                  context.handleUpdate(pattern.code, true);
-                }}
-              >
-                <PatternLabel pattern={pattern} />
-              </a>
-            ))}
-          </div>
-        </section>
-      )}
-      {publicPatterns && (
-        <section>
-          <h2 className="text-xl mb-2">Last Creations</h2>
-          <div className="font-mono text-sm">
-            {publicPatterns.map((pattern) => (
-              <a
-                key={'public-' + pattern.id}
-                className={classNames(
-                  'mr-4 hover:opacity-50 cursor-pointer block', // inline-block
-                  pattern.hash === activePattern ? 'outline outline-1' : '',
-                )}
-                onClick={() => {
-                  setActivePattern(pattern.hash);
-                  context.handleUpdate(pattern.code, true);
-                }}
-              >
-                <PatternLabel pattern={pattern} />
-              </a>
-            ))}
-          </div>
-        </section>
-      )}
-      <section>
 
-        <h2 className="text-xl mb-2">Examples</h2>
+        return (
-        <PatternButtons
+          <section key={key}>
-          onClick={(id) => onPatternBtnClick(id, true)}
+            <h2 className="text-xl mb-2">{key}</h2>
-          started={context.started}
+            <div className="font-mono text-sm">
-          patterns={examplePatterns}
+              <PatternButtons
-          activePattern={activePattern}
+                onClick={(id) => updateCodeWindow(id, patterns[id]?.code, true)}
-          viewingPattern={viewingPattern}
+                started={context.started}
-        />
+                patterns={patterns}
-
+                activePattern={activePattern}
-        <h2 className="text-xl mb-2">Stock Examples</h2>
+                viewingPattern={viewingPattern}
-        <div className="font-mono text-sm">
+              />
-          {Object.entries(tunes).map(([key, tune]) => (
+            </div>
-            <a
+          </section>
-              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>
   );
 }
-
-export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
-  const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
-  return (
-    <>
-      {pattern.id}. {meta.title || pattern.hash} by {Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous'}
-    </>
-  );
-}

website/src/repl/util.mjs

@@ -29,8 +29,12 @@ async function loadDBPatterns() {
   try {
     const { data: publicPatterns } = await loadPublicPatterns();
     const { data: featuredPatterns } = await loadFeaturedPatterns();
-    $publicPatterns.set(publicPatterns);
+    const featured = {};
-    $featuredPatterns.set(featuredPatterns);
+    const pub = {};
+    publicPatterns?.forEach((data, key) => (pub[data.id ?? key] = data));
+    featuredPatterns?.forEach((data, key) => (featured[data.id ?? key] = data));
+    $publicPatterns.set(pub);
+    $featuredPatterns.set(featured);
   } catch (err) {
     console.error('error loading patterns');
   }

website/src/settings.mjs

@@ -4,7 +4,7 @@ import { useStore } from '@nanostores/react';
 import { register } from '@strudel.cycles/core';
 import * as tunes from './repl/tunes.mjs';
 import { logger } from '@strudel.cycles/core';
-
+import { nanoid } from 'nanoid';
 export let $publicPatterns = atom([]);
 export let $featuredPatterns = atom([]);
 
@@ -70,6 +70,14 @@ export function initUserCode(code) {
 
 export function useSettings() {
   const state = useStore(settingsMap);
+
+  const userPatterns = JSON.parse(state.userPatterns);
+  Object.keys(userPatterns).forEach((key) => {
+    const data = userPatterns[key];
+    data.id = data.id ?? key;
+    data.date = data.date ?? 0;
+    userPatterns[key] = data;
+  });
   return {
     ...state,
     isZen: [true, 'true'].includes(state.isZen) ? true : false,
@@ -82,7 +90,7 @@ export function useSettings() {
     isFlashEnabled: [true, 'true'].includes(state.isFlashEnabled) ? true : false,
     fontSize: Number(state.fontSize),
     panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
-    userPatterns: JSON.parse(state.userPatterns),
+    userPatterns: userPatterns,
   };
 }
 
@@ -108,35 +116,23 @@ export const fontSize = patternSetting('fontSize');
 
 export const settingPatterns = { theme, fontFamily, fontSize };
 
-export function getUserPatterns() {
+function getUserPatterns() {
   return JSON.parse(settingsMap.get().userPatterns);
 }
-function getSetting(key) {
-  return settingsMap.get()[key];
-}
 
-export function setUserPatterns(obj) {
+function setUserPatterns(obj) {
   return settingsMap.setKey('userPatterns', JSON.stringify(obj));
 }
 
 export const createPatternID = () => {
-  const userPatterns = getUserPatterns();
+  return nanoid(12);
-  const date = new Date().toISOString().split('T')[0];
-  const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date));
-  const num = String(todays.length + 1).padStart(3, '0');
-  const id = date + '_' + num;
-  return id;
 };
 
 export const getNextCloneID = (id) => {
-  const patterns = { ...userPattern.getAll(), ...examplePattern.getAll() };
+  return createPatternID();
-  const clones = Object.entries(patterns).filter(([patID]) => patID.startsWith(id));
-  const num = String(clones.length + 1).padStart(3, '0');
-  const newID = id + '_' + num;
-  return newID;
 };
 
-const examplePatterns = Object.fromEntries(Object.entries(tunes).map(([id, code]) => [id, { code }]));
+const examplePatterns = Object.fromEntries(Object.entries(tunes).map(([key, code], i) => [i, { id: i, code }]));
 
 export const examplePattern = {
   getAll() {
@@ -154,7 +150,8 @@ export const examplePattern = {
 // break
 export const userPattern = {
   getAll() {
-    return JSON.parse(settingsMap.get().userPatterns);
+    const patterns = JSON.parse(settingsMap.get().userPatterns);
+    return patterns;
   },
   getPatternData(id) {
     const userPatterns = this.getAll();
@@ -163,10 +160,13 @@ export const userPattern = {
   exists(id) {
     return this.getPatternData(id) != null;
   },
+
   create() {
     const newID = createPatternID();
     const code = defaultCode;
-    const data = { code };
+
+    // const meta = getMetadata
+    const data = { code, created_at: Date.now(), id: newID };
     this.update(newID, data);
     return { id: newID, data };
   },
@@ -221,44 +221,6 @@ export const userPattern = {
       alert('Name already taken!');
       return { id, data };
     }
-// break
-export function updateUserCode(code) {
-  const userPatterns = getUserPatterns();
-  let activePattern = getActivePattern();
-  // check if code is that of an example tune
-  const [example] = Object.entries(tunes).find(([_, tune]) => tune === code) || [];
-  if (example && (!activePattern || activePattern === example)) {
-    // select example
-    setActivePattern(example);
-    return;
-  }
-  const publicPattern = $publicPatterns.get().find((pat) => pat.code === code);
-  if (publicPattern) {
-    setActivePattern(publicPattern.hash);
-    return;
-  }
-  const featuredPattern = $featuredPatterns.get().find((pat) => pat.code === code);
-  if (featuredPattern) {
-    setActivePattern(featuredPattern.hash);
-    return;
-  }
-  if (!activePattern) {
-    // create new user pattern
-    activePattern = newUserPattern();
-    setActivePattern(activePattern);
-  } else if (
-    (!!tunes[activePattern] && code !== tunes[activePattern]) || // fork example tune?
-    $publicPatterns.get().find((p) => p.hash === activePattern) || // fork public pattern?
-    $featuredPatterns.get().find((p) => p.hash === activePattern) // fork featured pattern?
-  ) {
-    // fork example
-    activePattern = getNextCloneName(activePattern);
-    setActivePattern(activePattern);
-  }
-  setUserPatterns({ ...userPatterns, [activePattern]: { code } });
-}
-// break
-
     userPatterns[newID] = data; // copy code
     delete userPatterns[id];
 
@@ -270,6 +232,42 @@ export function updateUserCode(code) {
   },
 };
 
+// export function updateUserCode(code) {
+//   const userPatterns = getUserPatterns();
+//   let activePattern = getActivePattern();
+//   // check if code is that of an example tune
+//   const [example] = Object.entries(tunes).find(([_, tune]) => tune === code) || [];
+//   if (example && (!activePattern || activePattern === example)) {
+//     // select example
+//     setActivePattern(example);
+//     return;
+//   }
+//   const publicPattern = $publicPatterns.get().find((pat) => pat.code === code);
+//   if (publicPattern) {
+//     setActivePattern(publicPattern.hash);
+//     return;
+//   }
+//   const featuredPattern = $featuredPatterns.get().find((pat) => pat.code === code);
+//   if (featuredPattern) {
+//     setActivePattern(featuredPattern.hash);
+//     return;
+//   }
+//   if (!activePattern) {
+//     // create new user pattern
+//     activePattern = newUserPattern();
+//     setActivePattern(activePattern);
+//   } else if (
+//     (!!tunes[activePattern] && code !== tunes[activePattern]) || // fork example tune?
+//     $publicPatterns.get().find((p) => p.hash === activePattern) || // fork public pattern?
+//     $featuredPatterns.get().find((p) => p.hash === activePattern) // fork featured pattern?
+//   ) {
+//     // fork example
+//     activePattern = getNextCloneName(activePattern);
+//     setActivePattern(activePattern);
+//   }
+//   setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+// }
+
 export async function importPatterns(fileList) {
   const files = Array.from(fileList);
   await Promise.all(