From c67b7a7c56b2535e977dde8d9af2e3d6324aebd2 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Wed, 17 Jul 2024 10:50:32 +0200
Subject: [PATCH] Store global settings in localStorage

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../src/state/localStorageMiddleware.ts       | 18 ++++++++
 web/ui/mantine-ui/src/state/settingsSlice.ts  | 41 +++++++++++++++----
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/web/ui/mantine-ui/src/state/localStorageMiddleware.ts b/web/ui/mantine-ui/src/state/localStorageMiddleware.ts
index fe335fc7c..4751ff684 100644
--- a/web/ui/mantine-ui/src/state/localStorageMiddleware.ts
+++ b/web/ui/mantine-ui/src/state/localStorageMiddleware.ts
@@ -6,6 +6,7 @@ import {
   setCollapsedPools,
   updateTargetFilters,
 } from "./targetsPageSlice";
+import { updateSettings } from "./settingsSlice";
 
 const persistToLocalStorage = <T>(key: string, value: T) => {
   localStorage.setItem(key, JSON.stringify(value));
@@ -31,3 +32,20 @@ startAppListening({
     persistToLocalStorage(localStorageKeyTargetFilters, payload);
   },
 });
+
+startAppListening({
+  actionCreator: updateSettings,
+  effect: ({ payload }) => {
+    Object.entries(payload).forEach(([key, value]) => {
+      switch (key) {
+        case "useLocalTime":
+        case "enableQueryHistory":
+        case "enableAutocomplete":
+        case "enableSyntaxHighlighting":
+        case "enableLinter":
+        case "showAnnotations":
+          return persistToLocalStorage(`settings.${key}`, value);
+      }
+    });
+  },
+});
diff --git a/web/ui/mantine-ui/src/state/settingsSlice.ts b/web/ui/mantine-ui/src/state/settingsSlice.ts
index b315dda7e..a4ccc8cb4 100644
--- a/web/ui/mantine-ui/src/state/settingsSlice.ts
+++ b/web/ui/mantine-ui/src/state/settingsSlice.ts
@@ -1,5 +1,6 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { useAppSelector } from "./hooks";
+import { initializeFromLocalStorage } from "./initializeFromLocalStorage";
 
 interface Settings {
   consolesLink: string | null;
@@ -19,7 +20,15 @@ declare const GLOBAL_CONSOLES_LINK: string;
 declare const GLOBAL_AGENT_MODE: string;
 declare const GLOBAL_READY: string;
 
-const initialState: Settings = {
+export const localStorageKeyUseLocalTime = "settings.useLocalTime";
+export const localStorageKeyEnableQueryHistory = "settings.enableQueryHistory";
+export const localStorageKeyEnableAutocomplete = "settings.enableAutocomplete";
+export const localStorageKeyEnableSyntaxHighlighting =
+  "settings.enableSyntaxHighlighting";
+export const localStorageKeyEnableLinter = "settings.enableLinter";
+export const localStorageKeyShowAnnotations = "settings.showAnnotations";
+
+export const initialState: Settings = {
   consolesLink:
     GLOBAL_CONSOLES_LINK === "CONSOLES_LINK_PLACEHOLDER" ||
     GLOBAL_CONSOLES_LINK === "" ||
@@ -29,12 +38,30 @@ const initialState: Settings = {
   agentMode: GLOBAL_AGENT_MODE === "true",
   ready: GLOBAL_READY === "true",
   pathPrefix: "",
-  useLocalTime: false,
-  enableQueryHistory: false,
-  enableAutocomplete: true,
-  enableSyntaxHighlighting: true,
-  enableLinter: true,
-  showAnnotations: false,
+  useLocalTime: initializeFromLocalStorage<boolean>(
+    localStorageKeyUseLocalTime,
+    false
+  ),
+  enableQueryHistory: initializeFromLocalStorage<boolean>(
+    localStorageKeyEnableQueryHistory,
+    false
+  ),
+  enableAutocomplete: initializeFromLocalStorage<boolean>(
+    localStorageKeyEnableAutocomplete,
+    true
+  ),
+  enableSyntaxHighlighting: initializeFromLocalStorage<boolean>(
+    localStorageKeyEnableSyntaxHighlighting,
+    true
+  ),
+  enableLinter: initializeFromLocalStorage<boolean>(
+    localStorageKeyEnableLinter,
+    true
+  ),
+  showAnnotations: initializeFromLocalStorage<boolean>(
+    localStorageKeyShowAnnotations,
+    true
+  ),
 };
 
 export const settingsSlice = createSlice({