Merge branch 'main' into audio_device_selection

website/src/repl/panel/SettingsTab.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs';
-import { themes } from '../themes.mjs';
+import { themes } from '@strudel/codemirror';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 
@@ -79,9 +78,11 @@ export function SettingsTab() {
     theme,
     keybindings,
     isLineNumbersDisplayed,
+    isPatternHighlightingEnabled,
     isActiveLineHighlighted,
     isAutoCompletionEnabled,
     isTooltipEnabled,
+    isFlashEnabled,
     isLineWrappingEnabled,
     fontSize,
     fontFamily,
@@ -91,24 +92,6 @@ export function SettingsTab() {
 
   return (
     <div className="text-foreground p-4 space-y-4">
-      {/* <FormItem label="Tempo">
-        <div className="space-x-4">
-          <button
-            onClick={() => {
-              scheduler.setCps(scheduler.cps - 0.1);
-            }}
-          >
-            slower
-          </button>
-          <button
-            onClick={() => {
-              scheduler.setCps(scheduler.cps + 0.1);
-            }}
-          >
-            faster
-          </button>
-        </div>
-      </FormItem> */}
       {AudioContext.prototype.setSinkId != null && (
         <FormItem label="Audio Output Device">
           <AudioDeviceSelector
@@ -163,6 +146,11 @@ export function SettingsTab() {
           onChange={(cbEvent) => settingsMap.setKey('isActiveLineHighlighted', cbEvent.target.checked)}
           value={isActiveLineHighlighted}
         />
+        <Checkbox
+          label="Highlight events in code"
+          onChange={(cbEvent) => settingsMap.setKey('isPatternHighlightingEnabled', cbEvent.target.checked)}
+          value={isPatternHighlightingEnabled}
+        />
         <Checkbox
           label="Enable auto-completion"
           onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
@@ -178,6 +166,11 @@ export function SettingsTab() {
           onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
           value={isLineWrappingEnabled}
         />
+        <Checkbox
+          label="Enable flashing on evaluation"
+          onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
+          value={isFlashEnabled}
+        />
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">