From 0006d57a4ac1acdd75c167515a4dff2cdc007312 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 22 Feb 2023 22:47:33 +0100
Subject: [PATCH] move isZen to nanostore + correctly parse non strings in
 store

---
 packages/react/src/components/CodeMirror6.jsx |  2 +-
 website/src/repl/Footer.jsx                   |  3 +--
 website/src/repl/Header.jsx                   | 11 +++++++----
 website/src/repl/Repl.jsx                     |  4 ----
 website/src/settings.mjs                      |  9 ++++++++-
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 1bcdc9ce..319fb7f7 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/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}
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 37dfd0c9..07bdd386 100644
--- a/website/src/repl/Footer.jsx
+++ b/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') {
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index b23eebd9..213e336e 100644
--- a/website/src/repl/Header.jsx
+++ b/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>
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 7a72fed1..490166b4 100644
--- a/website/src/repl/Repl.jsx
+++ b/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
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index caabfbe5..82888581 100644
--- a/website/src/settings.mjs
+++ b/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);