configuration simplification

src/App.vue

@@ -3,11 +3,10 @@
 
 	import { computed, provide } from "vue";
 	import { isIOSIonicMode } from "./lib/mode";
-	import { getConfigEntry } from "./lib/config";
-	import { AccessibilityConfig } from "./lib/config/types";
+	import { accessibilityConfig } from "./lib/config";
 
 	provide("isIOS", computed(isIOSIonicMode));
-	provide("reducedMotion", (getConfigEntry("accessibility") as AccessibilityConfig).reducedMotion)
+	provide("reducedMotion", accessibilityConfig.reducedMotion)
 </script>
 
 <template>

src/components/frontingEntry/FrontingEntryLabel.vue

@@ -9,15 +9,15 @@
 	import LocalizedFormat from "dayjs/plugin/localizedFormat";
 	import { onMounted, onUnmounted, ref } from "vue";
 	import { formatWrittenTime } from "../../lib/util/misc";
-	import { getConfig } from "../../lib/config";
+	import { appConfig } from "../../lib/config";
 	dayjs.extend(RelativeTime);
 	dayjs.extend(LocalizedFormat);
 
 	const props = defineProps<{
 		entry: FrontingEntryComplete,
 	}>();
 
-	const twelveHour = getConfig().app.locale.TwelveHourClock;
+	const twelveHour = appConfig.locale.twelveHourClock;
 
 	const interval = ref(props.entry.endTime
 		? formatWrittenTime(props.entry.endTime, props.entry.startTime)

src/lib/config/index.ts

@@ -1,41 +1,46 @@
-import { getCompound, setCompound } from "../util/localStorage";
-import { Config } from "./types";
+import { reactive, watch } from "vue";
+import { get, set } from "./localStorage";
+import { AccessibilityConfig, AppConfig, SecurityConfig } from "./types";
+import { updateAccessibility, updateDarkMode } from "../mode";
+import { updateMaterialColors } from "../theme";
 
-export const defaultConfig: Config = {
-	app: {
-		locale: {
-			language: "en",
-			firstWeekOfDayIsSunday: false,
-			TwelveHourClock: false,
-		},
-		view: "members",
-		filterQueryMembers: "",
-		filterQueryJournal: ""
+const defaultAppConfig: AppConfig = {
+	locale: {
+		language: "en",
+		firstWeekOfDayIsSunday: false,
+		twelveHourClock: false,
 	},
-	accessibility: {
-		highLegibility: false,
-		highLegibilityType: "atkinson",
-		theme: "auto",
-		useAccentColor: false,
-		accentColor: undefined,
-		reducedMotion: false,
-		fontScale: 1,
-		chatFontScale: 1
-	},
-	security: {
-		pinCode: undefined,
-		useBiometrics: false
-	}
+	view: "members",
+	filterQueryMembers: "",
+	filterQueryJournal: ""
 };
 
-export function getConfig(): Config {
-	return Object.assign({}, defaultConfig, getCompound("config"));
+const defaultAccessibilityConfig: AccessibilityConfig = {
+	highLegibility: false,
+	highLegibilityType: "atkinson",
+	theme: "auto",
+	useAccentColor: false,
+	accentColor: undefined,
+	reducedMotion: false,
+	fontScale: 1,
+	chatFontScale: 1
 }
 
-export function getConfigEntry(entryKey: keyof Config): Config[keyof Config] {
-	return getConfig()[entryKey];
+const defaultSecurityConfig: SecurityConfig = {
+	usePin: false,
+	pinCode: undefined,
+	useBiometrics: false
 }
 
-export function saveConfig(config: Partial<Config>) {
-	return setCompound("config", config);
-}
+export const appConfig = reactive<AppConfig>({...defaultAppConfig, ...get("appConfig") });
+export const accessibilityConfig = reactive<AccessibilityConfig>({ ...defaultAccessibilityConfig, ...get("accessibilityConfig") });
+export const securityConfig = reactive<SecurityConfig>({ ...defaultSecurityConfig, ...get("securityConfig") });
+
+watch(appConfig, () => set("appConfig", {...appConfig}));
+watch(accessibilityConfig, () => {
+	set("accessibilityConfig", { ...accessibilityConfig });
+	updateDarkMode();
+	updateMaterialColors();
+	updateAccessibility();
+});
+watch(securityConfig, () => set("securityConfig", { ...securityConfig }));

src/lib/config/localStorage.ts

@@ -0,0 +1,35 @@
+import { Typeson } from "typeson";
+import { blob, file, filelist, map, typedArrays, undef, set as Tset, imagebitmap, imagedata } from "typeson-registry";
+
+const typeson = new Typeson({
+	sync: true
+}).register([
+	file,
+	filelist,
+	blob,
+	typedArrays,
+	undef,
+	map,
+	Tset,
+	imagebitmap,
+	imagedata
+]);
+
+export function set(key: string, value: any){
+	return window.localStorage.setItem(key, JSON.stringify(typeson.encapsulate(value)));
+}
+
+export function get(key: string): any {
+	const value = window.localStorage.getItem(key);
+
+	try{
+		if (value !== "undefined" && value !== null) {
+			const obj = JSON.parse(value);
+			return typeson.revive(obj);
+		}
+	}catch(e){
+		console.error(e, value?.split(""));
+	}
+
+	return undefined;
+}

src/lib/config/types.ts

@@ -1,14 +1,8 @@
-export type Config = {
-	app: AppConfig,
-	accessibility: AccessibilityConfig,
-	security: SecurityConfig,
-};
-
 export type AppConfig = {
 	locale: {
 		language: string,
 		firstWeekOfDayIsSunday: boolean,
-		TwelveHourClock: boolean
+		twelveHourClock: boolean
 	},
 	view: ViewName,
 	filterQueryMembers: string,
@@ -29,6 +23,7 @@ export type AccessibilityConfig = {
 }
 
 export type SecurityConfig = {
+	usePin: boolean,
 	pinCode?: string,
 	useBiometrics: boolean
 }

src/lib/mode.ts

@@ -1,5 +1,4 @@
-import { getConfigEntry } from "./config";
-import { AccessibilityConfig } from "./config/types";
+import { accessibilityConfig } from "./config";
 
 export function getIonicMode(): "ios" | "md" {
 	if (typeof (window as any) !== "undefined") {
@@ -16,8 +15,7 @@ export function isIOSIonicMode(): boolean {
 }
 
 export function isDarkMode() {
-	const accessibility = getConfigEntry("accessibility") as AccessibilityConfig;
-	switch (accessibility.theme) {
+	switch (accessibilityConfig.theme) {
 		case "dark":
 			return true;
 		case "light":
@@ -32,18 +30,18 @@ export function updateDarkMode() {
 }
 
 export function updateAccessibility() {
-	const highLegibility = (getConfigEntry("accessibility") as AccessibilityConfig).highLegibility;
+	const highLegibility = accessibilityConfig.highLegibility;
 	if (highLegibility) {
 		document.documentElement.classList.add("high-legibility");
 
-		const highLegibilityType = (getConfigEntry("accessibility") as AccessibilityConfig).highLegibilityType;
+		const highLegibilityType = accessibilityConfig.highLegibilityType;
 
 		document.documentElement.classList.remove(...[...document.documentElement.classList.values()].filter(x => x.startsWith("hl-")));
 		document.documentElement.classList.add("hl-" + highLegibilityType);
 	} else
 		document.documentElement.classList.remove("high-legibility", ...[...document.documentElement.classList.values()].filter(x => x.startsWith("hl-")));
 
-	const fontScale = (getConfigEntry("accessibility") as AccessibilityConfig).fontScale;
+	const fontScale = accessibilityConfig.fontScale;
 	if (fontScale !== 1)
 		document.documentElement.style.setProperty("font-size", `${fontScale}em`);
 	else

src/lib/theme/index.ts

@@ -1,6 +1,5 @@
 import { argbFromHex, blueFromArgb, greenFromArgb, redFromArgb, themeFromSourceColor } from "@material/material-color-utilities";
-import { getConfigEntry } from "../config";
-import { AccessibilityConfig } from "../config/types";
+import { accessibilityConfig } from "../config";
 
 function rgbFromArgb(argb: number){
 	return [
@@ -11,8 +10,8 @@ function rgbFromArgb(argb: number){
 }
 
 export function updateMaterialColors(target?: HTMLElement){
-	const useAccentColor = (getConfigEntry("accessibility") as AccessibilityConfig).useAccentColor;
-	const accentColor = (getConfigEntry("accessibility") as AccessibilityConfig).accentColor;
+	const useAccentColor = accessibilityConfig.useAccentColor;
+	const accentColor = accessibilityConfig.accentColor;
 	if (useAccentColor && accentColor)
 		addMaterialColors(accentColor, target);
 	else

src/modals/FrontingEntryEdit.vue

@@ -36,12 +36,12 @@
 	import UTC from "dayjs/plugin/utc";
 	import Timezone from "dayjs/plugin/timezone";
 	import { Member } from "../lib/db/entities/members";
-	import { getConfig } from "../lib/config";
+	import { appConfig } from "../lib/config";
 	dayjs.extend(UTC);
 	dayjs.extend(Timezone);
 
-	const twelveHourClock = getConfig().app.locale.TwelveHourClock;
-	const firstWeekOfDayIsSunday = getConfig().app.locale.firstWeekOfDayIsSunday;
+	const twelveHourClock = appConfig.locale.twelveHourClock;
+	const firstWeekOfDayIsSunday = appConfig.locale.firstWeekOfDayIsSunday;
 
 	const isOpen = inject<Ref<boolean>>("isOpen")!;
 	const frontingEntry = inject<Ref<FrontingEntryComplete>>("frontingEntry")!;

src/modals/MemberSelect.vue

@@ -12,24 +12,18 @@
 		CheckboxCustomEvent,
 	} from "@ionic/vue";
 
-	import { inject, Ref, ref, ShallowReactive } from "vue";
+	import { inject, ref, ShallowReactive } from "vue";
 	import { getFilteredMembers } from "../lib/db/liveQueries";
 	import MemberAvatar from "../components/member/MemberAvatar.vue";
 	import MemberLabel from "../components/member/MemberLabel.vue";
 	import { Member } from "../lib/db/entities/members";
 
 	const isIOS = inject<boolean>("isIOS");
-	const isMemberSelectionOpen = inject<Ref<boolean>>("isMemberSelectionOpen");
 	const selectedMembers = inject<ShallowReactive<Member[]>>("selectedMembers")!;
 
 	const props = defineProps<{
 		onlyOne?: boolean
 	}>();
-	
-	async function dismiss(){
-		if(isMemberSelectionOpen)
-			isMemberSelectionOpen.value = false;
-	}
 
 	function check(ev: CheckboxCustomEvent){
 		if(ev.detail.checked){
@@ -49,7 +43,7 @@
 </script>
 
 <template>
-	<IonModal class="member-select-modal" @didDismiss="dismiss" :breakpoints="[0,0.25,0.5,1]" initialBreakpoint="0.25">
+	<IonModal class="member-select-modal" :breakpoints="[0,0.25,0.5,1]" initialBreakpoint="0.25">
 		<IonHeader>
 			<IonToolbar>
 				<IonTitle>{{ $t("other:memberSelect.header") }}</IonTitle>