From a21b3d788f3851d571e5ee93bdbfb737d0dc2929 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 19 Feb 2023 22:32:28 +0100
Subject: [PATCH] add settings reset button

---
 website/public/store.mjs    |  6 +++++-
 website/src/repl/Footer.jsx | 14 +++++++++++++-
 website/src/useStore.mjs    |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/website/public/store.mjs b/website/public/store.mjs
index 19166810..b2e0b4e6 100644
--- a/website/public/store.mjs
+++ b/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;
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 56bca99d..f816df92 100644
--- a/website/src/repl/Footer.jsx
+++ b/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>
   );
 }
diff --git a/website/src/useStore.mjs b/website/src/useStore.mjs
index 065be3d1..1b358c6b 100644
--- a/website/src/useStore.mjs
+++ b/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