Feature (app): save user settings across sessions.

app/package.json

@@ -46,6 +46,8 @@
 		"json5": "^2.2.3",
 		"tauri-plugin-fs-extra-api": "github:tauri-apps/tauri-plugin-fs-extra",
 		"tauri-plugin-fs-watch-api": "github:tauri-apps/tauri-plugin-fs-watch",
-		"tinycolor2": "^1.6.0"
+		"tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
+		"tinycolor2": "^1.6.0",
+		"zod": "^3.21.4"
 	}
 }

app/src-tauri/Cargo.toml

@@ -20,6 +20,7 @@ serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "1.2.4", features = ["fs-exists", "fs-read-dir", "fs-read-file", "path-all", "shell-open", "window-close", "window-hide", "window-maximize", "window-minimize", "window-set-always-on-top", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
 tauri-plugin-fs-watch = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
+tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 window-shadows = "0.2.1"
 
 [features]

app/src-tauri/src/main.rs

@@ -15,6 +15,7 @@ fn main() {
         })
         .plugin(tauri_plugin_fs_watch::init())
         .plugin(tauri_plugin_fs_extra::init())
+        .plugin(tauri_plugin_store::Builder::default().build())
         // rust-ignore
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

app/src/lib/stores/settings.ts

@@ -1,14 +1,55 @@
-import { parseTheme } from '$lib/themes';
-import { defaultDarkThemeString } from '$lib/themes/default';
-import { writable } from 'svelte/store';
+import { z } from 'zod';
+const settingsSchema = z.object({
+	showMeseta: z.boolean(),
+	isAlwaysOnTop: z.boolean(),
+	amountToDisplay: z.number()
+});
 
-const defaultSettings = {
+const defaultSettings: z.infer<typeof settingsSchema> = {
 	showMeseta: true,
 	isAlwaysOnTop: false,
 	amountToDisplay: 25
 };
 
-export const settings = writable(defaultSettings);
+import { writable } from 'svelte/store';
+import { Store } from 'tauri-plugin-store-api';
+const store = new Store('.settings.dat');
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function createTauriWritable<T>(key: string, defaultValue: T, schema: z.ZodType) {
+	const { subscribe, set } = writable<T>(defaultValue);
+	store.get(key).then((value: unknown) => {
+		if (value === undefined) {
+			console.log('No value found for key', key, 'setting to default', defaultValue);
+			store.set(key, defaultValue);
+		}
+		const parsed = schema.safeParse(value);
+		if (parsed.success) {
+			console.log('Value found for key', key, 'setting to', parsed.data);
+			set(parsed.data);
+		} else {
+			console.log('Value found for key', key, 'is invalid', parsed.error);
+		}
+	});
+	return {
+		subscribe,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		set: (value: T) => {
+			store.set(key, value);
+			set(value);
+		},
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		reset: () => {
+			store.set(key, defaultValue);
+			set(defaultValue);
+		}
+	};
+}
+
+import { parseTheme, themeSchema } from '$lib/themes';
+import { defaultDarkThemeString } from '$lib/themes/default';
+
+export const settings = createTauriWritable('settings', defaultSettings, settingsSchema);
 
-export const theme = writable(parseTheme(defaultDarkThemeString));
-export const themeString = writable(defaultDarkThemeString);
+export const theme = createTauriWritable('theme', parseTheme(defaultDarkThemeString), themeSchema);
+export const themeString = createTauriWritable('themeString', defaultDarkThemeString, z.string());

app/src/lib/themes/index.ts

@@ -1,6 +1,7 @@
 import JSON5 from 'json5';
+import { z } from 'zod';
 
-type Theme = {
+export type Theme = {
 	id: string;
 	name: string;
 	author: string;
@@ -9,6 +10,15 @@ type Theme = {
 	props: Record<string, string>;
 };
 
+export const themeSchema = z.object({
+	id: z.string().optional(),
+	name: z.string().optional(),
+	author: z.string().optional(),
+	desc: z.string().optional(),
+	base: z.union([z.literal('dark'), z.literal('light')]),
+	props: z.record(z.string())
+});
+
 export const baseDarkThemeString = `// ダークテーマのベーステーマ
 // このテーマが直接使われることは無い
 {

app/src/routes/ThemeInput.svelte

@@ -8,11 +8,15 @@
 	import { onMount } from 'svelte';
 	let themeInput = '';
 	let error: string | null = null;
+	let ready = false;
 
 	// Theme validation.
 	$: try {
-		parseTheme(themeInput);
-		error = null;
+		(() => {
+			if (!ready) return;
+			parseTheme(themeInput);
+			error = null;
+		})(); // Hack to make Svelte happy.
 	} catch (err) {
 		console.log(err);
 		if (err instanceof SyntaxError) {
@@ -27,6 +31,7 @@
 	// Initialize text input to current theme.
 	onMount(() => {
 		themeInput = $themeString;
+		ready = true;
 	});
 
 	async function handleApply() {
@@ -74,7 +79,7 @@
 <button
 	on:click={handleApply}
 	disabled={!!error}
-	class="transition-colors  rounded-md px-4 py-2 text-sm disabled:opacity-50 w-full mt-2 bg-mk-accent hover:bg-mk-accentLighten font-semibold text-mk-fgOnAccent"
+	class="transition-colors rounded-md px-4 py-2 text-sm disabled:opacity-50 w-full mt-2 bg-mk-accent hover:bg-mk-accentLighten font-semibold text-mk-fgOnAccent"
 	>Apply Theme</button
 >
 <p class="text-mk-fgTransparentWeak text-sm italic font-light text-center">