add settings reset button

website/public/store.mjs

@@ -20,7 +20,7 @@ export function set(next) {
   localStorage.setItem(storeKey, JSON.stringify(next));
 }
 
-export function updateState(func) {
+export function update(func) {
   const prev = get();
   const next = func(prev);
   set(next);
@@ -31,6 +31,10 @@ export function updateState(func) {
   );
 }
 
+export function reset() {
+  update(() => defaults);
+}
+
 export function watch(func, prop) {
   document.addEventListener(storeKey, (e) => {
     const { prev, next } = e.detail;

website/src/repl/Footer.jsx

@@ -275,7 +275,7 @@ function FormItem({ label, children }) {
 const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k]));
 
 function SettingsTab() {
-  const { state, update } = useStore();
+  const { state, update, reset } = useStore();
   const { theme, keybindings, fontSize } = state;
   return (
     <div className="text-foreground p-4 space-y-4">
@@ -304,6 +304,18 @@ function SettingsTab() {
           items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
         ></ButtonGroup>
       </FormItem>
+      <FormItem label="Reset Settings">
+        <button
+          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
+          onClick={() => {
+            if (confirm('Sure?')) {
+              reset();
+            }
+          }}
+        >
+          restore default settings
+        </button>
+      </FormItem>
     </div>
   );
 }

website/src/useStore.mjs

@@ -6,7 +6,7 @@ import {} from 'react';
 function useStore() {
   const [state, setState] = useState(Store.get());
   useEvent(Store.storeKey, (e) => setState(e.detail.next));
-  return { state, update: Store.updateState };
+  return { state, ...Store };
 }
 
 // TODO: dedupe