move isZen to nanostore

+ correctly parse non strings in store

packages/react/src/components/CodeMirror6.jsx

@@ -136,7 +136,7 @@ export default function CodeMirror({
     return staticExtensions;
   }, [keybindings]);
   return (
-    <div style={{ fontSize: parseInt(fontSize), fontFamily }} className="w-full">
+    <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
         value={value}
         theme={theme || strudelTheme}

website/src/repl/Footer.jsx

@@ -10,10 +10,9 @@ import { themes } from './themes.mjs';
 import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../settings.mjs';
 
 export function Footer({ context }) {
-  const { isZen } = context;
   const footerContent = useRef();
   const [log, setLog] = useState([]);
-  const { activeFooter } = useSettings();
+  const { activeFooter, isZen } = useSettings();
 
   useLayoutEffect(() => {
     if (footerContent.current && activeFooter === 'console') {

website/src/repl/Header.jsx

@@ -6,6 +6,7 @@ import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import { cx } from '@strudel.cycles/react';
 import React, { useContext } from 'react';
+import { useSettings, setIsZen } from '../settings.mjs';
 // import { ReplContext } from './Repl';
 import './Repl.css';
 
@@ -21,11 +22,9 @@ export function Header({ context }) {
     handleUpdate,
     handleShuffle,
     handleShare,
-    isZen,
-    setIsZen,
   } = context;
   const isEmbedded = embedded || window.location !== window.parent.location;
-  // useContext(ReplContext)
+  const { isZen } = useSettings();
 
   return (
     <header
@@ -53,7 +52,11 @@ export function Header({ context }) {
         >
           <div
             className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
-            onClick={() => !isEmbedded && setIsZen((z) => !z)}
+            onClick={() => {
+              if (!isEmbedded) {
+                setIsZen(!isZen);
+              }
+            }}
           >
             🌀
           </div>

website/src/repl/Repl.jsx

@@ -26,7 +26,6 @@ import { themes } from './themes.mjs';
 import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
 
 const { latestCode } = settingsMap.get();
-console.log('latestCode', latestCode);
 
 initAudioOnFirstClick();
 
@@ -115,7 +114,6 @@ export function Repl({ embedded = false }) {
   const isEmbedded = embedded || window.location !== window.parent.location;
   const [view, setView] = useState(); // codemirror view
   const [lastShared, setLastShared] = useState();
-  const [isZen, setIsZen] = useState(false);
   const [pending, setPending] = useState(false);
 
   const { theme, keybindings, fontSize, fontFamily } = useSettings();
@@ -254,8 +252,6 @@ export function Repl({ embedded = false }) {
     handleUpdate,
     handleShuffle,
     handleShare,
-    isZen,
-    setIsZen,
   };
   return (
     // bg-gradient-to-t from-blue-900 to-slate-900

website/src/settings.mjs

@@ -8,14 +8,21 @@ export const defaultSettings = {
   fontFamily: 'monospace',
   fontSize: 18,
   latestCode: '',
+  isZen: false,
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
 
 export function useSettings() {
-  return useStore(settingsMap);
+  const state = useStore(settingsMap);
+  return {
+    ...state,
+    isZen: [true, 'true'].includes(state.isZen) ? true : false,
+    fontSize: Number(state.fontSize),
+  };
 }
 
 export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
 
 export const setLatestCode = (code) => settingsMap.setKey('latestCode', code);
+export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);