feat: save config in indexeddb (#487)

package.json

@@ -77,6 +77,7 @@
 		"geo-coordinates-parser": "^1.7.0",
 		"graphql": "^16.9.0",
 		"html-to-image": "^1.11.11",
+		"idb": "^8.0.0",
 		"immer": "^10.0.2",
 		"klona": "^2.0.6",
 		"leaflet": "^1.9.4",

src/adapter/browser.tsx

@@ -1,11 +1,14 @@
-import type { Platform, UrlTarget } from "~/types";
 import type {
 	OpenedBinaryFile,
 	OpenedTextFile,
 	SurrealistAdapter,
 	SurrealistAdapterType,
 } from "./base";
 
+import type { Platform, UrlTarget } from "~/types";
+import * as idxdb from "~/util/idxdb";
+import { CONFIG_KEY } from "~/util/storage";
+
 /**
  * Base adapter for running as web app
  */
@@ -39,18 +42,32 @@ export abstract class BaseBrowserAdapter implements SurrealistAdapter {
 	}
 
 	public async loadConfig() {
-		const config = localStorage.getItem("surrealist:config") || "{}";
-		const parsed = JSON.parse(config);
+		const localStorageValue = localStorage.getItem(CONFIG_KEY);
+		if (localStorageValue) {
+			const config = localStorageValue || "{}";
+			const parsed = JSON.parse(config);
+
+			if (parsed.configVersion === undefined && Object.keys(parsed).length > 0) {
+				return {};
+			}
 
-		if (parsed.configVersion === undefined && Object.keys(parsed).length > 0) {
-			return {};
+			return parsed;
 		}
 
-		return parsed;
+		return (await idxdb.getConfig()) || {};
 	}
 
 	public async saveConfig(config: any) {
-		localStorage.setItem("surrealist:config", JSON.stringify(config));
+		const objConfig: any = {};
+
+		for (const key in config) {
+			if (typeof config[key] !== "function") {
+				objConfig[key] = config[key];
+			}
+		}
+
+		await idxdb.setConfig(objConfig);
+		localStorage.removeItem(CONFIG_KEY);
 	}
 
 	public async startDatabase() {

src/util/idxdb.ts

@@ -0,0 +1,21 @@
+import { openDB } from "idb";
+import { CONFIG_KEY } from "./storage";
+
+const dbName = "surrealist";
+const indexedDbVersion = 1;
+const keyValueStore = "store";
+
+const dbPromise = openDB(dbName, indexedDbVersion, {
+	upgrade(db) {
+		db.createObjectStore(keyValueStore);
+	},
+});
+
+async function getConfig() {
+	return (await dbPromise).get(keyValueStore, CONFIG_KEY);
+}
+async function setConfig(value: any) {
+	return (await dbPromise).put(keyValueStore, value, CONFIG_KEY);
+}
+
+export { getConfig, setConfig };

src/util/storage.tsx

@@ -3,3 +3,4 @@ export const STATE_RES_KEY = "surrealist:oauth_response_state";
 export const VERIFIER_KEY = "surrealist:oauth_verifier";
 export const REFRESH_TOKEN_KEY = "surrealist:oauth_refresh_token";
 export const STATE_KEY = "surrealist:oauth_state";
+export const CONFIG_KEY = "surrealist:config";