chore: enable eslint in svelte files and fix lint errors

package.json

@@ -9,7 +9,7 @@
 		"vite:build": "vite build",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
-		"lint": "eslint . --ext .ts",
+		"lint": "eslint . --ext .ts,.svelte",
 		"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
 		"svelte-check": "svelte-check --tsconfig ./tsconfig.json",
 		"typecheck": "npm run typecheck:node && npm run svelte-check",
@@ -68,6 +68,7 @@
 		"svelte-eslint-parser": "^0.34.1",
 		"tailwindcss": "^3.4.3",
 		"typescript": "^5.4.5",
+		"utility-types": "^3.11.0",
 		"vite": "^5.2.8"
 	},
 	"dependencies": {

src/renderer/src/App.svelte

@@ -1,24 +1,26 @@
 <script>
+	import './app.postcss';
+
 	import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 	import {
 		AppBar,
 		AppShell,
-		Modal,
-		Toast,
 		getModalStore,
 		initializeStores,
+		Modal,
 		storePopup,
+		Toast,
 	} 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 GitHub from './lib/icons/GitHub.svelte';
 	import HeroiconCog6ToothSolid from './lib/icons/HeroiconCog6ToothSolid.svelte';
 	import MapContainer from './lib/map/MapContainer.svelte';
+	import Sidebar from './lib/Sidebar.svelte';
+	import VersionInfo from './lib/VersionInfo.svelte';
 
 	initializeStores();
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });

src/renderer/src/lib/AppSettingsModal.svelte

@@ -1,11 +1,13 @@
 <script>
 	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
+
 	import { t, translatorModeExtraMessageIDs, translatorModeUntranslatedMessageIDs } from '../intl';
 	import SettingControl from './SettingControl/index.svelte';
 	import { appSettings, appSettingsConfig, asUnknownSettingConfig } from './settings';
 	import { selectTranslatorModeFile, translatorModeFilePath } from './translatorMode';
 
-	const _props = $$props; // this suppresses warning about unknown prop 'parent'
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- this suppresses warning about unknown prop 'parent'
+	const _props = $$props;
 
 	const modalStore = getModalStore();
 	const toastStore = getToastStore();
@@ -38,7 +40,7 @@
 			{:else}
 				<small>{$t('app_settings.translator_mode_no_file')}</small>
 			{/if}
-			{#if $translatorModeFilePath && $translatorModeUntranslatedMessageIDs.length > 0}
+			{#if $translatorModeFilePath != null && $translatorModeUntranslatedMessageIDs.length > 0}
 				<strong class="block text-warning-400">
 					{$t('app_settings.translator_mode_untranslated_messages', {
 						number: $translatorModeUntranslatedMessageIDs.length,

src/renderer/src/lib/ExportModal.svelte

@@ -1,26 +1,28 @@
 <script lang="ts">
 	import {
-		RangeSlider,
-		SlideToggle,
 		getModalStore,
 		getToastStore,
 		localStorageStore,
+		RangeSlider,
+		SlideToggle,
 	} from '@skeletonlabs/skeleton';
 	import { onDestroy } from 'svelte';
+
 	import { t } from '../intl';
-	import type { GalacticObject, GameState } from './GameState';
 	import convertBlobToDataUrl from './convertBlobToDataUrl';
 	import convertSvgToPng from './convertSvgToPng';
-	import Legend from './map/Legend.svelte';
+	import type { GalacticObject, GameState } from './GameState';
 	import type { MapData } from './map/data/processMapData';
+	import Legend from './map/Legend.svelte';
 	import { getBackgroundColor, getFillColorAttributes, resolveColor } from './map/mapUtils';
 	import SolarSystemMap from './map/solarSystemMap/SolarSystemMap.svelte';
 	import processStarScape from './map/starScape/renderStarScape';
-	import { mapSettings, type MapSettings } from './settings';
+	import { type MapSettings, mapSettings } from './settings';
 	import stellarMapsApi from './stellarMapsApi';
 	import { toastError } from './utils';
 
-	const _props = $$props; // this suppresses warning about unknown prop 'parent'
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- this suppresses warning about unknown prop 'parent'
+	const _props = $$props;
 	const modalStore = getModalStore();
 	const toastStore = getToastStore();
 	const galaxyMapSvg: SVGElement = $modalStore[0]?.meta?.svg;
@@ -52,7 +54,7 @@
 	});
 	onDestroy(() => {
 		solarSystemMap?.$destroy();
-		legend?.$destroy();
+		legend.$destroy();
 	});
 
 	const defaultExportSettings = {
@@ -140,7 +142,7 @@
 
 	async function exportPng() {
 		const backgroundImageUrl =
-			openedSystem || !hasBackgroundImage($mapSettings)
+			openedSystem != null || !hasBackgroundImage($mapSettings)
 				? undefined
 				: await processStarScape(
 						gameState,
@@ -190,7 +192,7 @@
 			),
 			filters: [{ extensions: ['png'], name: 'Image' }],
 		});
-		if (savePath && galaxyMapSvg) {
+		if (savePath != null) {
 			await stellarMapsApi.fs.writeBinaryFile(savePath, new Uint8Array(buffer)).then(() => {
 				toastStore.trigger({
 					background: 'variant-filled-success',
@@ -272,7 +274,7 @@
 				.catch(() => ''),
 			filters: [{ extensions: ['svg'], name: 'Image' }],
 		});
-		if (savePath && svgToExport) {
+		if (savePath != null) {
 			await stellarMapsApi.fs.writeFile(savePath, svgString).then(() => {
 				toastStore.trigger({
 					background: 'variant-filled-success',

src/renderer/src/lib/SettingControl/ColorSettingAdjustmentControl.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { fly } from 'svelte/transition';
+
 	import { t } from '../../intl';
 	import HeroiconTrashMini from '../icons/HeroiconTrashMini.svelte';
 	import {

src/renderer/src/lib/SettingControl/ColorSettingControl.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+
 	import { t } from '../../intl';
 	import {
 		colorDynamicOptions,
@@ -71,7 +72,7 @@
 				{$t('control.color.adjustment.header')}
 				<div class="relative inline-block">
 					<span class="variant-filled-secondary badge-icon absolute left-0 top-[-14px]">
-						{value.colorAdjustments?.length ?? 0}
+						{value.colorAdjustments.length}
 					</span>
 				</div>
 			</svelte:fragment>

src/renderer/src/lib/SettingControl/IconSettingControl.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+
 	import { t } from '../../intl';
 	import {
 		ICON_POSITIONS,

src/renderer/src/lib/SettingControl/StrokeSettingControl.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Accordion, AccordionItem, popup } from '@skeletonlabs/skeleton';
 	import { fade } from 'svelte/transition';
+
 	import { t } from '../../intl';
 	import HeroiconInfoMini from '../icons/HeroiconInfoMini.svelte';
 	import type { SettingConfigStroke, StrokeSetting } from '../settings';

src/renderer/src/lib/SettingControl/index.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-	import { RangeSlider, SlideToggle, popup } from '@skeletonlabs/skeleton';
+	import { popup, RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
 	import { onDestroy } from 'svelte';
 	import type { FormEventHandler } from 'svelte/elements';
 	import { get, type Readable, type Writable } from 'svelte/store';
 	import { slide } from 'svelte/transition';
+
 	import { t } from '../../intl';
 	import HeroiconInfoMini from '../icons/HeroiconInfoMini.svelte';
 	import {
 		asKnownSettingId,
 		emptyOptions,
-		validateSetting,
 		type SelectOption,
 		type UnknownSettingConfig,
+		validateSetting,
 	} from '../settings';
 	import { isDefined } from '../utils';
 	import ColorSettingControl from './ColorSettingControl.svelte';
@@ -53,7 +54,9 @@
 	$: hidden = config.hideIf?.($settings as any);
 
 	const dynamicOptions: Readable<SelectOption[]> =
-		config.type === 'select' && config.dynamicOptions ? config.dynamicOptions : emptyOptions;
+		config.type === 'select' && config.dynamicOptions != null
+			? config.dynamicOptions
+			: emptyOptions;
 
 	$: options = config.type === 'select' ? [...config.options, ...$dynamicOptions] : [];
 	$: groups = Array.from(new Set(options.map((option) => option.group).filter(isDefined)));
@@ -91,6 +94,7 @@
 					class="card variant-filled-secondary z-10 max-w-96 p-2 text-sm"
 					data-popup="{config.id}-tooltip"
 				>
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- this is safe, all tooltip text is provided by the app -->
 					{@html $t(config.tooltip, richTextHandlers)}
 					<div class="variant-filled-secondary arrow" />
 				</div>
@@ -146,7 +150,7 @@
 		{:else if config.type === 'toggle'}
 			<div>
 				<SlideToggle name={config.id} bind:checked={value} active="bg-primary-500">
-					{value ? $t('generic.enabled') : $t('generic.disabled')}
+					{value === true ? $t('generic.enabled') : $t('generic.disabled')}
 				</SlideToggle>
 			</div>
 		{:else if config.type === 'color'}

src/renderer/src/lib/Sidebar.svelte

@@ -2,20 +2,21 @@
 	import {
 		Accordion,
 		AccordionItem,
-		ListBox,
-		ListBoxItem,
 		getModalStore,
 		getToastStore,
+		ListBox,
+		ListBoxItem,
 		localStorageStore,
 		popup,
 	} from '@skeletonlabs/skeleton';
+
 	import { t } from '../intl';
 	import ApplyChangesButton from './ApplyChangesButton.svelte';
-	import { gameStatePromise, gameStateSchema } from './GameState';
-	import SettingControl from './SettingControl/index.svelte';
 	import debug from './debug';
+	import { gameStatePromise, gameStateSchema } from './GameState';
 	import HeroiconTrashMini from './icons/HeroiconTrashMini.svelte';
 	import { localizeText } from './map/data/locUtils';
+	import SettingControl from './SettingControl/index.svelte';
 	import {
 		applyMapSettings,
 		asUnknownSettingConfig,
@@ -26,9 +27,9 @@
 		mapSettings,
 		mapSettingsConfig,
 		presetMapSettings,
+		type SavedMapSettings,
 		settingsAreDifferent,
 		validateAndResetMapSettings,
-		type SavedMapSettings,
 	} from './settings';
 	import { speciesOptions } from './settings/options/speciesOptions';
 	import type { StellarisSaveMetadata } from './stellarMapsApi';
@@ -231,7 +232,7 @@
 		class="p-4"
 		on:submit|preventDefault={() => {
 			loadedSave = selectedSave;
-			if (selectedSave) {
+			if (selectedSave != null) {
 				loadSave(selectedSave.path);
 			}
 		}}
@@ -273,9 +274,9 @@
 		<button
 			type="submit"
 			class="variant-filled-primary btn w-full"
-			disabled={!selectedSave}
-			class:variant-filled-primary={selectedSave && selectedSave !== loadedSave}
-			class:variant-filled-surface={!selectedSave || selectedSave === loadedSave}
+			disabled={selectedSave == null}
+			class:variant-filled-primary={selectedSave != null && selectedSave !== loadedSave}
+			class:variant-filled-surface={selectedSave == null || selectedSave === loadedSave}
 		>
 			{$t('side_bar.load_save_button')}
 		</button>
@@ -336,6 +337,7 @@
 											body: $t('confirmation.delete_setting_profile', { name: saved.name }),
 											buttonTextConfirm: 'Delete',
 											response: (response) => {
+												// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions -- this is a boolean, but TS thinks any
 												if (response) {
 													customSavedSettings.update((prev) =>
 														prev.filter((other) => !(other.name === saved.name)),

src/renderer/src/lib/actions/resizeObserver.ts

@@ -0,0 +1,17 @@
+import type { ActionReturn } from 'svelte/action';
+export default function resizeObserver(
+	node: HTMLElement,
+	callback: () => void,
+): ActionReturn<() => void> {
+	const callbackRef = { callback };
+	const resizeObserver = new ResizeObserver(() => callbackRef.callback());
+	resizeObserver.observe(node);
+	return {
+		update(updatedCallback) {
+			callbackRef.callback = updatedCallback;
+		},
+		destroy() {
+			resizeObserver.disconnect();
+		},
+	};
+}

src/renderer/src/lib/map/BypassLinks.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { mapSettings } from '../settings';
-	import Glow from './Glow.svelte';
 	import type { MapData } from './data/processMapData';
+	import Glow from './Glow.svelte';
 	import { getStrokeAttributes, getStrokeColorAttributes } from './mapUtils';
 	export let data: MapData;
 	export let colors: Record<string, string>;

src/renderer/src/lib/map/CountryBorders.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { match } from 'ts-pattern';
+
 	import { mapSettings } from '../settings';
-	import Glow from './Glow.svelte';
 	import type { SectorBorderPath } from './data/processBorders';
 	import type { MapData } from './data/processMapData';
+	import Glow from './Glow.svelte';
 	import {
 		getFillColorAttributes,
 		getStrokeAttributes,