feat(ui): add app settings screen and refactor map settings

Author: oatmealproblem

src-tauri/Cargo.lock

@@ -23,7 +23,7 @@ base64 = "0.21.7"
 image_dds = { version = "0.4.0", default-features = false, features = ["ddsfile", "image", "decode"] }
 ddsfile = "0.5.2"
 logos = "0.14.0"
-tauri = { version = "1.6", features = ["dialog-open", "dialog-save", "fs-write-file", "os-all", "path-all", "shell-open"] }
+tauri = { version = "1.6", features = [ "fs-read-file", "fs-exists", "fs-create-dir", "dialog-open", "dialog-save", "fs-write-file", "os-all", "path-all", "shell-open"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/Cargo.toml

@@ -22,8 +22,11 @@
         "save": true
       },
       "fs": {
-        "scope": ["$PICTURE/*"],
-        "writeFile": true
+        "scope": ["$PICTURE/*", "$APPCONFIG", "$APPCONFIG/*"],
+        "exists": true,
+        "createDir": true,
+        "writeFile": true,
+        "readFile": true
       },
       "os": {
         "all": true

src-tauri/tauri.conf.json

@@ -24,10 +24,20 @@ const api: StellarMapsAPI = {
 	path: {
 		join: (...paths: string[]) => Promise.resolve(path.join(...paths)),
 		pictureDir: () => platformPaths.pictures(),
+		appConfigDir: () =>
+			platformPaths.home().then((home) => `${home}/.config/games.michaelmakes.stellarmaps`),
 	},
 	fs: {
 		writeFile: (path, content) => fs.writeFile(path, content, { encoding: 'utf-8' }),
 		writeBinaryFile: (path, content) => fs.writeFile(path, new DataView(content)),
+		createDir: (path, options) =>
+			fs.mkdir(path, options.recursive ? options : undefined).then(() => {}),
+		exists: (path) =>
+			fs
+				.lstat(path)
+				.then(() => true)
+				.catch(() => false),
+		readTextFile: (path) => fs.readFile(path, { encoding: 'utf-8' }),
 	},
 	revealFile: (path) => Promise.resolve(shell.showItemInFolder(path)),
 };

src/preload/index.ts

@@ -5,23 +5,28 @@
 		AppShell,
 		Modal,
 		Toast,
+		getModalStore,
 		initializeStores,
 		storePopup,
 	} from '@skeletonlabs/skeleton';
 	import './app.postcss';
 	import { t } from './intl';
+	import AppSettingsModal from './lib/AppSettingsModal.svelte';
 	import ExportModal from './lib/ExportModal.svelte';
 	import Sidebar from './lib/Sidebar.svelte';
 	import VersionInfo from './lib/VersionInfo.svelte';
 	import Discord from './lib/icons/Discord.svelte';
+	import HeroiconCog6ToothSolid from './lib/icons/HeroiconCog6ToothSolid.svelte';
 	import MapContainer from './lib/map/MapContainer.svelte';
 
 	initializeStores();
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+	const modalStore = getModalStore();
 </script>
 
 <Toast position="t" background="variant-filled-error" />
-<Modal components={{ export: { ref: ExportModal } }} />
+<Modal components={{ export: { ref: ExportModal }, settings: { ref: AppSettingsModal } }} />
 <AppShell slotPageContent="h-full" regionPage="h-full">
 	<svelte:fragment slot="header">
 		<AppBar>
@@ -33,6 +38,13 @@
 				<a class="anchor" href="https://discord.gg/72kaXW782b" target="_blank" rel="noopener">
 					<Discord />
 				</a>
+				<div class="mx-2 h-6 border-r border-r-surface-500"></div>
+				<button
+					type="button"
+					on:click={() => modalStore.trigger({ type: 'component', component: 'settings' })}
+				>
+					<HeroiconCog6ToothSolid />
+				</button>
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>

src/renderer/src/App.svelte

@@ -30,6 +30,7 @@ export default {
 		enabled: 'Enabled',
 		disabled: 'Disabled',
 		cancel_button: 'Cancel',
+		close_button: 'Close',
 		loading: 'Loading...',
 		confirmation: 'Are you sure?',
 	},
@@ -83,6 +84,11 @@ export default {
 		export_png_button: 'Export PNG',
 		processing: 'Processing...',
 	},
+	// messages in the app settings popup
+	app_settings: {
+		title: 'Settings',
+		description: 'All changes are automatically saved and applied.',
+	},
 	// labels for various types of setting controls
 	// (shared by multiple settings)
 	control: {
@@ -291,11 +297,12 @@ export default {
 		hyperlaneSensitiveBorders_tooltip: `<ul>
 			<li>When enabled, borders will follow hyperlanes.</li>
 			<li>When disabled, only solar systems affect borders.</li>
-			<li>Not supported if the following are enabled:</li>
-			<li><ul>
-				<li>Metro-style Hyperlanes</li>
-				<li>Align Solar Systems to Grid</li>
-			</ul></li>
+			<li>Not supported if the following are enabled:
+				<ul>
+					<li>Metro-style Hyperlanes</li>
+					<li>Align Solar Systems to Grid</li>
+				</ul>
+			</li>
 		</ul>`,
 		voronoiGridSize: 'Voronoi Grid Size',
 		voronoiGridSize_tooltip: `<ul>
@@ -328,5 +335,8 @@ export default {
 		starScapeStars: 'Stars',
 		starScapeStarsColor: 'Stars Color',
 		starScapeStarsCount: 'Star Count',
+		appLocale: 'StellarMaps Language',
+		appStellarisLanguage: 'Stellaris Language',
+		appTranslatorMode: 'Translator Mode',
 	},
 };

src/renderer/src/intl/en-US.ts

@@ -23,12 +23,12 @@ function flattenMessages(messages: UnflattenedMessages, prefix = ''): Record<str
 
 const locales = {
 	'en-US': flattenMessages(enUS) as Record<MessageID, string>,
-	placeholder: flattenMessages(enUS) as Partial<Record<MessageID, string>>,
+	ENGLISH: Object.fromEntries(
+		Object.entries(flattenMessages(enUS)).map(([k, v]) => [k, v.toUpperCase()]),
+	) as Partial<Record<MessageID, string>>,
 };
 type Locale = keyof typeof locales;
 
-console.warn(locales);
-
 function getBestLocale(): Locale {
 	const keys = Object.keys(locales) as [Locale, ...Locale[]];
 	return (
@@ -41,7 +41,7 @@ function getBestLocale(): Locale {
 	);
 }
 
-const locale = writable<Locale>(getBestLocale());
+export const locale = writable<Locale>(getBestLocale());
 
 export const t = derived(locale, (localeKey) => {
 	const messages: Record<string, IntlMessageFormat> = {};
@@ -55,9 +55,6 @@ export const t = derived(locale, (localeKey) => {
 				locales[localeKey][messageId] ?? locales['en-US'][messageId],
 				localeKey,
 			);
-		if (values) {
-			console.warn(message.format(values));
-		}
 		return `${message.format(values)}`;
 	};
 });

src/renderer/src/intl/index.ts

@@ -0,0 +1,23 @@
+<script>
+	import { t } from '../intl';
+	import SettingControl from './SettingControl/index.svelte';
+	import { appSettings, appSettingsConfig, asUnknownSettingConfig } from './settings';
+</script>
+
+<form
+	class="bg-surface-100-800-token modal block h-auto w-[32rem] space-y-4 overflow-y-auto p-4 shadow-xl rounded-container-token"
+	role="dialog"
+	aria-modal="true"
+	novalidate
+>
+	<header class="modal-header text-2xl font-bold">{$t('app_settings.title')}</header>
+	<p>{$t('app_settings.description')}</p>
+	<div class="flex flex-col gap-4">
+		{#each appSettingsConfig as config}
+			<SettingControl config={asUnknownSettingConfig(config)} settings={appSettings} />
+		{/each}
+	</div>
+	<footer class="modal-footer flex justify-end space-x-2">
+		<button class="variant-ghost-surface btn" type="button">{$t('generic.close_button')}</button>
+	</footer>
+</form>

src/renderer/src/lib/AppSettingsModal.svelte

@@ -2,17 +2,20 @@
 	import { t } from '../intl';
 	import HeroiconPaintBrushMini from './icons/HeroiconPaintBrushMini.svelte';
 	import {
+		asUnknownSettingConfig,
 		editedMapSettings,
-		mapSettingConfig,
 		mapSettings,
+		mapSettingsConfig,
 		settingsAreDifferent,
 		validateSetting,
-	} from './mapSettings';
+	} from './settings';
 
 	$: shouldShow = settingsAreDifferent($editedMapSettings, $mapSettings);
-	$: valid = mapSettingConfig
+	$: valid = mapSettingsConfig
 		.flatMap((category) => category.settings)
-		.every((config) => validateSetting($editedMapSettings[config.id], config)[0]);
+		.every(
+			(config) => validateSetting($editedMapSettings[config.id], asUnknownSettingConfig(config))[0],
+		);
 </script>
 
 {#if shouldShow}

src/renderer/src/lib/ApplyChangesButton.svelte

@@ -12,7 +12,7 @@
 	import type { MapData } from './map/data/processMapData';
 	import { getBackgroundColor, getFillColorAttributes, resolveColor } from './map/mapUtils';
 	import processStarScape from './map/starScape/renderStarScape';
-	import { mapSettings } from './mapSettings';
+	import { mapSettings } from './settings';
 	import stellarMapsApi from './stellarMapsApi';
 	import { toastError } from './utils';