✨ remember last used scale

src/front-end/scripts/components/darkmode.vue

@@ -21,7 +21,7 @@ const DarkMode = defineComponent({
 		toggle() {
 			const val = document.body.classList.toggle("dark-mode");
 
-			this.$store.commit("session.settings.darkMode", val);
+			this.$store.commit("session.settings", { darkMode: val });
 		},
 	},
 });

src/front-end/scripts/components/newstory.vue

@@ -24,11 +24,16 @@ const NewStory = defineComponent({
 		}
 
 		return {
-			scale: opts[0],
+			scale: this.$store.state.session.settings.scale,
 			scales: opts,
 			title: "",
 		};
 	},
+	watch: {
+		scale() {
+			this.$store.commit("session.settings", { scale: this.scale });
+		},
+	},
 	methods: {
 		async submit() {
 			const storyRepo = remult.repo(Story);

src/front-end/scripts/components/profile.vue

@@ -40,15 +40,15 @@ const Profile = defineComponent({
 
 			const session: SessionState = JSON.parse(await file.text());
 
-			this.$store.commit("session.settings", session);
+			this.$store.commit("session", session);
 			this.name = session.name;
 			requestAnimationFrame(() => {
 				this.upToDate = true;
 				alert("Profile imported successfully");
 			});
 		},
 		submit() {
-			this.$store.commit("session.settings.name", this.name);
+			this.$store.commit("session", { name: this.name });
 			this.upToDate = true;
 			alert("Profile updated");
 		},

src/front-end/scripts/store/session.ts

@@ -1,33 +1,45 @@
 import { v4 } from "uuid";
 import { Module } from "vuex";
+import scales from "../../../scales";
 import { LOCALSTORAGE_GLOBAL_PREFIX } from "../constants";
-import { SessionState, StoreState } from "./types";
+import { SessionSettings, SessionState, StoreState } from "./types";
 
 const SESSION_PREFIX = `${LOCALSTORAGE_GLOBAL_PREFIX}session.`;
 
 const keys = {
 	darkMode: `${SESSION_PREFIX}darkMode`,
 	name: `${SESSION_PREFIX}name`,
+	scale: `${SESSION_PREFIX}scale`,
 	sessionId: `${SESSION_PREFIX}sessionId`,
 };
 
 const session: Module<SessionState, StoreState> = {
 	mutations: {
-		"session.settings"(state, payload: SessionState) {
-			state.id = payload.id;
-			state.name = payload.name;
-			state.settings = payload.settings;
-			localStorage.setItem(keys.darkMode, payload.settings.darkMode.toString());
-			localStorage.setItem(keys.sessionId, payload.id);
-			localStorage.setItem(keys.name, payload.name.toString());
-		},
-		"session.settings.darkMode"(state, payload: boolean) {
-			state.settings.darkMode = payload;
-			localStorage.setItem(keys.darkMode, payload.toString());
+		session(state, payload: Partial<SessionState>) {
+			state = {
+				...state,
+				...payload,
+			};
+
+			payload.id && localStorage.setItem(keys.sessionId, payload.id);
+			payload.name && localStorage.setItem(keys.name, payload.name.toString());
+
+			if (payload.settings) {
+				localStorage.setItem(
+					keys.darkMode,
+					payload.settings.darkMode.toString(),
+				);
+				localStorage.setItem(keys.scale, payload.settings.scale);
+			}
 		},
-		"session.settings.name"(state, payload: string) {
-			state.name = payload;
-			localStorage.setItem(keys.name, payload);
+		"session.settings"(state, payload: Partial<SessionSettings>) {
+			state.settings = {
+				...state.settings,
+				...payload,
+			};
+			payload.darkMode &&
+				localStorage.setItem(keys.darkMode, payload.darkMode.toString());
+			payload.scale && localStorage.setItem(keys.scale, payload.scale);
 		},
 	},
 	state() {
@@ -43,6 +55,7 @@ const session: Module<SessionState, StoreState> = {
 			name: localStorage.getItem(keys.name) ?? "User",
 			settings: {
 				darkMode: JSON.parse(localStorage.getItem(keys.darkMode) ?? "false"),
+				scale: localStorage.getItem(keys.scale) ?? scales.keys().next().value,
 			},
 		};
 	},

src/front-end/scripts/store/types.ts

@@ -2,6 +2,7 @@ import { Story } from "../../../models/story";
 
 export type SessionSettings = {
 	darkMode: boolean;
+	scale: string;
 };
 
 export type SessionState = {