highlight viewing pattern

website/src/repl/Repl.jsx

@@ -18,7 +18,8 @@ import {
   settingsMap,
   updateUserCode,
   useSettings,
-  useActivePattern,
+  getViewingPattern,
+  setViewingPattern,
 } from '../settings.mjs';
 import { Header } from './Header';
 import Loader from './Loader';
@@ -34,7 +35,7 @@ export const ReplContext = createContext(null);
 
 const { latestCode } = settingsMap.get();
 
-let modulesLoading, presets, drawContext, clearCanvas, isIframe, viewingPatternID;
+let modulesLoading, presets, drawContext, clearCanvas, isIframe;
 if (typeof window !== 'undefined') {
   initAudioOnFirstClick();
   modulesLoading = loadModules();
@@ -76,7 +77,11 @@ export function Repl({ embedded = false }) {
         updateUserCode(code);
         // setPending(false);
         setLatestCode(code);
+        const viewingPatternID = getViewingPattern();
         window.location.hash = '#' + code2hash(code);
+        if (viewingPatternID != null) {
+          setActivePattern(viewingPatternID);
+        }
       },
       bgFill: false,
     });
@@ -144,7 +149,6 @@ export function Repl({ embedded = false }) {
   // payload = {reset?: boolean, code?: string, evaluate?: boolean, patternID?: string }
   const handleUpdate = async (payload) => {
     const { reset = false, code = null, evaluate = true, patternID = null } = payload;
-    console.log(payload);
     if (reset) {
       clearCanvas();
       resetLoadedSounds();
@@ -153,15 +157,10 @@ export function Repl({ embedded = false }) {
     }
     if (code != null) {
       editorRef.current.setCode(code);
-      viewingPatternID = patternID;
+      setViewingPattern(patternID);
     }
-    console.log(isDirty);
     if (evaluate) {
       editorRef.current.evaluate();
-
-      if (viewingPatternID != null) {
-        setActivePattern(viewingPatternID);
-      }
     }
   };
   const handleShuffle = async () => {

website/src/repl/panel/PatternsTab.jsx

@@ -9,8 +9,8 @@ import {
   importPatterns,
   newUserPattern,
   renameActivePattern,
-  setActivePattern,
   useActivePattern,
+  useViewingPattern,
   useSettings,
 } from '../../settings.mjs';
 import * as tunes from '../tunes.mjs';
@@ -19,10 +19,14 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
 }
 
-function PatternButton({ isActive, onClick, label }) {
+function PatternButton({ showOutline, onClick, label, showHiglight }) {
   return (
     <a
-      className={classNames('mr-4 hover:opacity-50 cursor-pointer inline-block', isActive ? 'outline outline-1' : '')}
+      className={classNames(
+        'mr-4 hover:opacity-50 cursor-pointer inline-block',
+        showOutline ? 'outline outline-1' : '',
+        showHiglight ? 'bg-red-500' : '',
+      )}
       onClick={onClick}
     >
       {label}
@@ -30,11 +34,17 @@ function PatternButton({ isActive, onClick, label }) {
   );
 }
 
-function PatternButtons({ patterns, activePattern, onClick }) {
+function PatternButtons({ patterns, activePattern, onClick, viewingPattern }) {
   return (
     <div className="font-mono text-sm">
       {Object.entries(patterns).map(([key, data]) => (
-        <PatternButton key={key} label={key} isActive={key === activePattern} onClick={() => onClick(key, data)} />
+        <PatternButton
+          key={key}
+          label={key}
+          showHiglight={key === viewingPattern}
+          showOutline={key === activePattern}
+          onClick={() => onClick(key, data)}
+        />
       ))}
     </div>
   );
@@ -43,6 +53,7 @@ function PatternButtons({ patterns, activePattern, onClick }) {
 export function PatternsTab({ context }) {
   const { userPatterns } = useSettings();
   const activePattern = useActivePattern();
+  const viewingPattern = useViewingPattern();
   const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
   const onPatternClick = (key, data) => {
     const { code } = data;
@@ -76,7 +87,12 @@ export function PatternsTab({ context }) {
             </div>
           </div>
         )}
-        <PatternButtons onClick={onPatternClick} patterns={userPatterns} activePattern={activePattern} />
+        <PatternButtons
+          onClick={onPatternClick}
+          patterns={userPatterns}
+          activePattern={activePattern}
+          viewingPattern={viewingPattern}
+        />
         <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"

website/src/settings.mjs

@@ -28,6 +28,19 @@ export const defaultSettings = {
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
 
+
+//pattern that the use is currently viewing in the window
+const $viewingPattern = persistentAtom('viewingPattern', '', { listen: false });
+export function setViewingPattern(key) {
+  $viewingPattern.set(key);
+}
+export function getViewingPattern() {
+  return $viewingPattern.get();
+}
+
+export function useViewingPattern() {
+  return useStore($viewingPattern);
+}
 // active pattern is separate, because it shouldn't sync state across tabs
 // reason: https://github.com/tidalcycles/strudel/issues/857
 const $activePattern = persistentAtom('activePattern', '', { listen: false });