fix: do not sync activePattern between tabs

+ only deselect activePattern if code in url differs

website/src/repl/Repl.jsx

@@ -17,7 +17,15 @@ 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, setActivePattern } from '../settings.mjs';
+import {
+  settingsMap,
+  useSettings,
+  setLatestCode,
+  updateUserCode,
+  setActivePattern,
+  getActivePattern,
+  getUserPattern,
+} from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
@@ -131,7 +139,6 @@ export function Repl({ embedded = false }) {
     isLineWrappingEnabled,
     panelPosition,
     isZen,
-    activePattern,
   } = useSettings();
 
   const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
@@ -177,7 +184,12 @@ export function Repl({ embedded = false }) {
       let msg;
       if (decoded) {
         setCode(decoded);
-        setActivePattern('');
+        const activePattern = getActivePattern();
+        if (getUserPattern(activePattern)?.code !== decoded) {
+          // code in url is not the last active patterns code => must be something else
+          // deselect last active pattern to not overwrite it on next evaluation
+          setActivePattern('');
+        }
         msg = `I have loaded the code from the URL.`;
       } else if (latestCode) {
         setCode(latestCode);

website/src/repl/panel/PatternsTab.jsx

@@ -10,6 +10,7 @@ import {
   newUserPattern,
   renameActivePattern,
   setActivePattern,
+  useActivePattern,
   useSettings,
 } from '../../settings.mjs';
 import * as tunes from '../tunes.mjs';
@@ -19,7 +20,8 @@ function classNames(...classes) {
 }
 
 export function PatternsTab({ context }) {
-  const { userPatterns, activePattern } = useSettings();
+  const { userPatterns } = useSettings();
+  const activePattern = useActivePattern();
   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">