Add meta settings tab to display info and option to reset settings (#95)

* initial implementation for the meta settings * client:fix * fix small things * change type
Pistonite · Oct 8, 2023 · a98cde3 · a98cde3
1 parent 94aa615
commit a98cde3
Show file tree

Hide file tree

Showing 24 changed files with 431 additions and 218 deletions.
diff --git a/web-client/src/core/doc/settingsReducers.ts b/web-client/src/core/doc/settingsReducers.ts
@@ -1,6 +1,6 @@
 //! Reducers for the document settings
 
-import { ReducerDeclWithPayload, withPayload } from "low/store";
+import { withPayload } from "low/store";
 
 import {
     DocSettingsState,
@@ -10,45 +10,43 @@ import {
 } from "./state";
 
 /// Set the document viewer theme
-export const setDocTheme: ReducerDeclWithPayload<DocSettingsState, string> =
-    withPayload((state, theme) => {
+export const setDocTheme = withPayload<DocSettingsState, string>(
+    (state, theme) => {
         state.theme = theme;
-    });
+    },
+);
 
 /// Set whether to sync map view to doc
-export const setSyncMapToDoc: ReducerDeclWithPayload<
-    DocSettingsState,
-    boolean
-> = withPayload((state: DocSettingsState, syncMapToDoc: boolean) => {
-    state.syncMapToDoc = syncMapToDoc;
-});
+export const setSyncMapToDoc = withPayload<DocSettingsState, boolean>(
+    (state, syncMapToDoc) => {
+        state.syncMapToDoc = syncMapToDoc;
+    },
+);
 
 /// Set whether position should be remembered on close
-export const setRememberDocPosition: ReducerDeclWithPayload<
-    DocSettingsState,
-    boolean
-> = withPayload((state: DocSettingsState, value: boolean) => {
-    state.rememberDocPosition = value;
-});
+export const setRememberDocPosition = withPayload<DocSettingsState, boolean>(
+    (state, value) => {
+        state.rememberDocPosition = value;
+    },
+);
 
 /// Set whether to force notes to be popups
-export const setForcePopupNotes: ReducerDeclWithPayload<
-    DocSettingsState,
-    boolean
-> = withPayload((state: DocSettingsState, value: boolean) => {
-    state.forcePopupNotes = value;
-});
+export const setForcePopupNotes = withPayload<DocSettingsState, boolean>(
+    (state, value) => {
+        state.forcePopupNotes = value;
+    },
+);
 
 /// Set key bindings
-export const setDocKeyBinding: ReducerDeclWithPayload<
+export const setDocKeyBinding = withPayload<
     DocSettingsState,
     {
         /// name of the key binding to set
         name: KeyBindingName;
         /// new value of the key binding
         value: KeyBinding;
     }
-> = withPayload((state: DocSettingsState, { name, value }) => {
+>((state, { name, value }) => {
     state[name] = value;
 });
 
@@ -57,13 +55,13 @@ export const setDocKeyBinding: ReducerDeclWithPayload<
 type PerDocPayload<T> = { docId: string } & T;
 
 /// Set doc initial location
-export const setInitialDocLocation: ReducerDeclWithPayload<
+export const setInitialDocLocation = withPayload<
     DocSettingsState,
     PerDocPayload<{
         section: number;
         line: number;
     }>
-> = withPayload((state: DocSettingsState, { docId, section, line }) => {
+>((state, { docId, section, line }) => {
     if (!state.perDoc[docId]) {
         state.perDoc[docId] = { ...initialPerDocSettings };
     }
@@ -72,25 +70,25 @@ export const setInitialDocLocation: ReducerDeclWithPayload<
 });
 
 /// Set doc excluded diagnostic sources
-export const setExcludedDiagnosticSources: ReducerDeclWithPayload<
+export const setExcludedDiagnosticSources = withPayload<
     DocSettingsState,
     PerDocPayload<{
         value: string[];
     }>
-> = withPayload((state: DocSettingsState, { docId, value }) => {
+>((state, { docId, value }) => {
     if (!state.perDoc[docId]) {
         state.perDoc[docId] = { ...initialPerDocSettings };
     }
     state.perDoc[docId].excludeDiagnosticSources = value;
 });
 
 /// Set tags to not split on
-export const setExcludedSplitTags: ReducerDeclWithPayload<
+export const setExcludedSplitTags = withPayload<
     DocSettingsState,
     PerDocPayload<{
         value: string[];
     }>
-> = withPayload((state: DocSettingsState, { docId, value }) => {
+>((state, { docId, value }) => {
     if (!state.perDoc[docId]) {
         state.perDoc[docId] = { ...initialPerDocSettings };
     }

diff --git a/web-client/src/core/doc/useDocDiagnostics.ts b/web-client/src/core/doc/useDocDiagnostics.ts
@@ -57,6 +57,7 @@ export const useDocDiagnostics = (): DiagnosticSection[] => {
         });
         return output;
     }, [serial]);
+    /* eslint-enable react-hooks/exhaustive-deps*/
 
     return diagnostics;
 };
diff --git a/web-client/src/core/doc/useDocSections.ts b/web-client/src/core/doc/useDocSections.ts
@@ -20,4 +20,5 @@ export const useDocSections = (): string[] => {
         }
         return document.route.map((section) => section.name);
     }, [serial]);
+    /* eslint-enable react-hooks/exhaustive-deps*/
 };
diff --git a/web-client/src/core/editor/settingsReducers.ts b/web-client/src/core/editor/settingsReducers.ts
@@ -1,38 +1,33 @@
 //! Reducers for editor settings
-import { ReducerDeclWithPayload, withPayload } from "low/store";
+import { withPayload } from "low/store";
 
 import { EditorSettingsState } from "./state";
 
 /// Set if the file tree is shown
-export const setShowFileTree: ReducerDeclWithPayload<
-    EditorSettingsState,
-    boolean
-> = withPayload((state: EditorSettingsState, showFileTree: boolean) => {
-    state.showFileTree = showFileTree;
-});
+export const setShowFileTree = withPayload<EditorSettingsState, boolean>(
+    (state, showFileTree) => {
+        state.showFileTree = showFileTree;
+    },
+);
 
 /// Set if auto load is enabled
-export const setAutoLoadEnabled: ReducerDeclWithPayload<
-    EditorSettingsState,
-    boolean
-> = withPayload((state: EditorSettingsState, autoLoadEnabled: boolean) => {
-    state.autoLoadEnabled = autoLoadEnabled;
-});
+export const setAutoLoadEnabled = withPayload<EditorSettingsState, boolean>(
+    (state, autoLoadEnabled) => {
+        state.autoLoadEnabled = autoLoadEnabled;
+    },
+);
 
 /// Set if auto save is enabled
-export const setAutoSaveEnabled: ReducerDeclWithPayload<
-    EditorSettingsState,
-    boolean
-> = withPayload((state: EditorSettingsState, autoSaveEnabled: boolean) => {
-    state.autoSaveEnabled = autoSaveEnabled;
-});
+export const setAutoSaveEnabled = withPayload<EditorSettingsState, boolean>(
+    (state, autoSaveEnabled) => {
+        state.autoSaveEnabled = autoSaveEnabled;
+    },
+);
 
 /// Set the time of inactivity after which auto load is disabled
-export const setDeactivateAutoLoadAfterMinutes: ReducerDeclWithPayload<
+export const setDeactivateAutoLoadAfterMinutes = withPayload<
     EditorSettingsState,
     number
-> = withPayload(
-    (state: EditorSettingsState, deactivateAutoLoadAfterMinutes: number) => {
-        state.deactivateAutoLoadAfterMinutes = deactivateAutoLoadAfterMinutes;
-    },
-);
+>((state, deactivateAutoLoadAfterMinutes) => {
+    state.deactivateAutoLoadAfterMinutes = deactivateAutoLoadAfterMinutes;
+});
diff --git a/web-client/src/core/kernel/Kernel.ts b/web-client/src/core/kernel/Kernel.ts
@@ -4,6 +4,7 @@ import {
     AppStore,
     SettingsState,
     initStore,
+    saveSettings,
     settingsSelector,
     viewActions,
 } from "core/store";
@@ -105,13 +106,8 @@ export class Kernel {
         // persist settings to local storage TODO
         const unwatchSettings = store.subscribe(
             watchSettings((newVal: SettingsState, oldVal: SettingsState) => {
-                // TODO #46: persist settings to local storage
-                // eslint-disable-next-line no-console
-                console.log({
-                    message: "settings changed",
-                    new: newVal,
-                    old: oldVal,
-                });
+                // save settings to local storage
+                saveSettings(newVal);
 
                 // switch theme
                 if (newVal.theme !== oldVal.theme) {

diff --git a/web-client/src/core/layout/settingsReducers.ts b/web-client/src/core/layout/settingsReducers.ts
@@ -1,6 +1,6 @@
 //! Layout store reducers
-
-import { ReducerDecl, ReducerDeclWithPayload, withPayload } from "low/store";
+import { StageMode } from "core/stage";
+import { ReducerDecl, withPayload } from "low/store";
 
 import { LayoutSettingsState, Layout, WidgetType } from "./state";
 import {
@@ -10,61 +10,60 @@ import {
 } from "./utils";
 
 /// Modify the current layout
-export const setCurrentLayout: ReducerDeclWithPayload<
-    LayoutSettingsState,
-    Layout
-> = withPayload((state, layout) => {
-    if (!isCurrentLayoutDefault(state)) {
-        state.savedLayouts[state.currentLayout] = fitLayoutToGrid(layout);
-    }
-});
+export const setCurrentLayout = withPayload<LayoutSettingsState, Layout>(
+    (state, layout) => {
+        if (!isCurrentLayoutDefault(state)) {
+            state.savedLayouts[state.currentLayout] = fitLayoutToGrid(layout);
+        }
+    },
+);
 
 /// Set the toolbar location of the current layout
-export const setCurrentLayoutToolbarLocation: ReducerDeclWithPayload<
+export const setCurrentLayoutToolbarLocation = withPayload<
     LayoutSettingsState,
     WidgetType
-> = withPayload((state: LayoutSettingsState, location: WidgetType) => {
+>((state, location) => {
     if (!isCurrentLayoutDefault(state)) {
         state.savedLayouts[state.currentLayout].toolbar = location;
     }
 });
 
 /// Set the toolbar anchor location of the current layout
-export const setCurrentLayoutToolbarAnchor: ReducerDeclWithPayload<
+export const setCurrentLayoutToolbarAnchor = withPayload<
     LayoutSettingsState,
     "top" | "bottom"
-> = withPayload((state: LayoutSettingsState, location: "top" | "bottom") => {
+>((state, location) => {
     if (!isCurrentLayoutDefault(state)) {
         state.savedLayouts[state.currentLayout].toolbarAnchor = location;
     }
 });
 
 /// Switch to a layout
-export const switchLayout: ReducerDeclWithPayload<LayoutSettingsState, number> =
-    withPayload((state, index) => {
+export const switchLayout = withPayload<LayoutSettingsState, number>(
+    (state, index) => {
         state.currentLayout = index;
-    });
+    },
+);
 
 /// Duplicate the current layout and switch to it
 ///
 /// If the current layout is the default layout, the actual
 /// current layout will be duplicated and switched to.
-export const duplicateLayout: ReducerDeclWithPayload<
-    LayoutSettingsState,
-    "view" | "edit"
-> = withPayload((state: LayoutSettingsState, mode: "view" | "edit") => {
-    if (isCurrentLayoutDefault(state)) {
-        const layout = getDefaultLayout(
-            window.innerWidth,
-            window.innerHeight,
-            mode,
-        );
-        state.savedLayouts.push(layout);
-    } else {
-        state.savedLayouts.push(state.savedLayouts[state.currentLayout]);
-    }
-    state.currentLayout = state.savedLayouts.length - 1;
-});
+export const duplicateLayout = withPayload<LayoutSettingsState, StageMode>(
+    (state, mode) => {
+        if (isCurrentLayoutDefault(state)) {
+            const layout = getDefaultLayout(
+                window.innerWidth,
+                window.innerHeight,
+                mode,
+            );
+            state.savedLayouts.push(layout);
+        } else {
+            state.savedLayouts.push(state.savedLayouts[state.currentLayout]);
+        }
+        state.currentLayout = state.savedLayouts.length - 1;
+    },
+);
 
 /// Delete current layout and switch to default layout
 export const deleteCurrentLayout: ReducerDecl<LayoutSettingsState> = (