From 20bbda30f8aa9d8d56c9cf65c98dc51ccc78f8a2 Mon Sep 17 00:00:00 2001
From: moumar <moumar@noreply.codeberg.org>
Date: Thu, 23 Oct 2025 23:15:21 +0200
Subject: [PATCH] Add setting to toggle pattern auto-start on pattern change

---
 website/src/repl/components/panel/PatternsTab.jsx | 12 ++++++------
 website/src/repl/components/panel/SettingsTab.jsx |  6 ++++++
 website/src/settings.mjs                          |  1 +
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 8e2b75b96..519461442 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -79,13 +79,11 @@ const updateCodeWindow = (context, patternData, reset = false) => {
   context.handleUpdate(patternData, reset);
 };
 
-const autoResetPatternOnChange = !isUdels();
-
 function UserPatterns({ context }) {
   const activePattern = useActivePattern();
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
-  const { userPatterns, patternFilter } = useSettings();
+  const { userPatterns, patternFilter, patternAutoStart } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
   return (
     <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">
@@ -139,7 +137,7 @@ function UserPatterns({ context }) {
             updateCodeWindow(
               context,
               { ...userPatterns[id], collection: userPattern.collection },
-              autoResetPatternOnChange,
+              patternAutoStart,
             )
           }
           patterns={userPatterns}
@@ -188,6 +186,7 @@ function FeaturedPatterns({ context }) {
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
   const patterns = collections.get(patternFilterName.featured);
+  const { patternAutoStart } = useSettings();
   return (
     <PatternPageWithPagination
       patterns={patterns}
@@ -197,7 +196,7 @@ function FeaturedPatterns({ context }) {
         updateCodeWindow(
           context,
           { ...patterns[id], collection: patternFilterName.featured },
-          autoResetPatternOnChange,
+          patternAutoStart,
         );
       }}
       paginationOnChange={async (pageNum) => {
@@ -213,13 +212,14 @@ function LatestPatterns({ context }) {
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
   const patterns = collections.get(patternFilterName.public);
+  const { patternAutoStart } = useSettings();
   return (
     <PatternPageWithPagination
       patterns={patterns}
       context={context}
       initialPage={latestPageNum}
       patternOnClick={(id) => {
-        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, autoResetPatternOnChange);
+        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, patternAutoStart);
       }}
       paginationOnChange={async (pageNum) => {
         await loadAndSetPublicPatterns(pageNum - 1);
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 80daef018..c898609d2 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -112,6 +112,7 @@ export function SettingsTab({ started }) {
     multiChannelOrbits,
     isTabIndentationEnabled,
     isMultiCursorEnabled,
+    patternAutoStart
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -304,6 +305,11 @@ export function SettingsTab({ started }) {
           onChange={(cbEvent) => settingsMap.setKey('isCSSAnimationDisabled', cbEvent.target.checked)}
           value={isCSSAnimationDisabled}
         />
+        <Checkbox
+          label="Auto-start pattern on pattern change"
+          onChange={(cbEvent) => settingsMap.setKey('patternAutoStart', cbEvent.target.checked)}
+          value={patternAutoStart}
+        />
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 9365a6db5..bbf893551 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -96,6 +96,7 @@ export function useSettings() {
     isPanelOpen: parseBoolean(state.isPanelOpen),
     userPatterns: userPatterns,
     multiChannelOrbits: parseBoolean(state.multiChannelOrbits),
+    patternAutoStart: isUdels() ? false : parseBoolean(state.patternAutoStart)
   };
 }