add vim toggle to settings

+ added persistent global state store
+ refactored themes to use the new store

website/src/repl/Footer.jsx

@@ -7,11 +7,12 @@ import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { loadedSamples } from './Repl';
 import { Reference } from './Reference';
 import { themes, themeColors } from './themes.mjs';
+import useStore from '../useStore.mjs';
 
 export function Footer({ context }) {
   // const [activeFooter, setActiveFooter] = useState('console');
   // const { activeFooter, setActiveFooter, isZen } = useContext?.(ReplContext);
-  const { activeFooter, setActiveFooter, isZen, theme, setTheme } = context;
+  const { activeFooter, setActiveFooter, isZen } = context;
   const footerContent = useRef();
   const [log, setLog] = useState([]);
 
@@ -93,7 +94,7 @@ export function Footer({ context }) {
           {activeFooter === 'console' && <ConsoleTab log={log} />}
           {activeFooter === 'samples' && <SamplesTab />}
           {activeFooter === 'reference' && <Reference />}
-          {activeFooter === 'settings' && <SettingsTab theme={theme} setTheme={setTheme} />}
+          {activeFooter === 'settings' && <SettingsTab />}
         </div>
       )}
     </footer>
@@ -205,37 +206,34 @@ function SamplesTab() {
     </div>
   );
 }
-function SettingsTab({ theme, setTheme }) {
-  /*<input type="checkbox" value={vimMode} onChange={(checked)=>{
-              console.log('vim mode toggle', checked)
-              }}/>*/
-
+function SettingsTab() {
+  const { state, update } = useStore();
+  const { theme, vim } = state;
   return (
-    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 p-2">
-      {Object.entries(themes).map(([k, t]) => (
-        <div
-          key={k}
-          className={cx(
-            'border-2 border-transparent cursor-pointer p-4 bg-background bg-opacity-25 rounded-md',
-            theme === k ? '!border-foreground' : '',
-          )}
-          onClick={() => {
-            setTheme(k);
-            document.dispatchEvent(
-              new CustomEvent('strudel-theme', {
-                detail: k,
-              }),
-            );
-          }}
+    <div className="text-foreground grid space-y-4 p-2">
+      <label className="space-x-2">
+        <span>Theme</span>
+        <select
+          className="p-2 bg-background rounded-md text-foreground"
+          value={theme}
+          onChange={(e) => update((current) => ({ ...current, theme: e.target.value }))}
         >
-          <div className="mb-2 w-full text-center text-foreground">{k}</div>
-          <div className="flex justify-stretch overflow-hidden rounded-md">
-            {themeColors(t).map((c, i) => (
-              <div key={i} className="grow h-6" style={{ background: c }} />
-            ))}
-          </div>
-        </div>
-      ))}
+          {Object.entries(themes).map(([k, t]) => (
+            <option key={k} className="bg-background">
+              {k}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="space-x-2">
+        <input
+          className="bg-background w-5 h-5 rounded-md"
+          type="checkbox"
+          checked={vim}
+          onChange={(e) => update((current) => ({ ...current, vim: e.target.checked }))}
+        />
+        <span>Vim Mode</span>
+      </label>
     </div>
   );
 }

website/src/repl/Repl.jsx

@@ -24,6 +24,7 @@ import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
 import useTheme from '../useTheme';
+import useStore from '../useStore.mjs';
 
 const initialTheme = localStorage.getItem('strudel-theme') || 'strudelTheme';
 
@@ -113,12 +114,16 @@ export const ReplContext = createContext(null);
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || window.location !== window.parent.location;
   const [view, setView] = useState(); // codemirror view
-  const [theme, setTheme] = useState(initialTheme);
   const [lastShared, setLastShared] = useState();
   const [activeFooter, setActiveFooter] = useState('');
   const [isZen, setIsZen] = useState(false);
   const [pending, setPending] = useState(false);
 
+  const { theme, themeSettings } = useTheme();
+  const {
+    state: { vim },
+  } = useStore();
+
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
       initialCode: '// LOADING',
@@ -172,15 +177,13 @@ export function Repl({ embedded = false }) {
     ),
   );
 
-  const { settings } = useTheme();
-
   // highlighting
   useHighlighting({
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
-    color: settings?.foreground,
+    color: themeSettings?.foreground,
   });
 
   //
@@ -263,8 +266,6 @@ export function Repl({ embedded = false }) {
     handleShare,
     isZen,
     setIsZen,
-    theme,
-    setTheme,
   };
   return (
     // bg-gradient-to-t from-blue-900 to-slate-900
@@ -281,6 +282,7 @@ export function Repl({ embedded = false }) {
           <CodeMirror
             theme={themes[theme] || themes.strudelTheme}
             value={code}
+            vimMode={vim}
             onChange={handleChangeCode}
             onViewChanged={setView}
             onSelectionChange={handleSelectionChange}