Create testing specific vite config, add multi font support, bugfixes

src/lib/components/settings/DisplaySettings.svelte

@@ -20,14 +20,19 @@
 
 	const setTextColor = () => {
 		$settings.invertedColor = !$settings.invertedColor;
-		$settings.fgColor = $settings.invertedColor ? 65535 : 0;
-		$settings.bgColor = $settings.invertedColor ? 0 : 65535;
 	};
 
 	const textColorOptions: [string, boolean][] = [
 		[$_('colors.black') + ' on ' + $_('colors.white'), false],
 		[$_('colors.white') + ' on ' + $_('colors.black'), true]
 	];
+
+	const fontPreferenceOptions: [string, string][] = $settings.availableFonts?.map((font) => [
+		$_(`fonts.${font}`) !== `fonts.${font}`
+			? $_(`fonts.${font}`)
+			: font.charAt(0).toUpperCase() + font.slice(1),
+		font
+	]);
 </script>
 
 <Row>
@@ -45,6 +50,14 @@
 			on:change={setTextColor}
 		/>
 
+		<SettingsSelect
+			id="fontName"
+			label={$_('section.settings.fontName')}
+			bind:value={$settings.fontName}
+			options={fontPreferenceOptions}
+			size={$uiSettings.inputSize}
+		/>
+
 		<SettingsInput
 			id="timePerScreen"
 			label={$_('section.settings.timePerScreen')}

src/lib/locales/de.json

@@ -67,7 +67,8 @@
 			"dataSource": {
 				"nostr": "Nostr-Verlag",
 				"custom": "Benutzerdefinierter dataquelle"
-			}
+			},
+			"fontName": "Schriftart"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",

src/lib/locales/en.json

@@ -84,7 +84,8 @@
 			},
 			"thirdPartySource": "Use mempool.space/coincap.io",
 			"ceDisableSSL": "Disable SSL",
-			"ceEndpoint": "Endpoint hostname"
+			"ceEndpoint": "Endpoint hostname",
+			"fontName": "Font"
 		},
 		"control": {
 			"systemInfo": "System info",

src/lib/locales/es.json

@@ -66,7 +66,8 @@
 			"dataSource": {
 				"nostr": "editorial nostr",
 				"custom": "Punto final personalizado"
-			}
+			},
+			"fontName": "Fuente"
 		},
 		"control": {
 			"turnOff": "Apagar",

src/lib/locales/nl.json

@@ -58,7 +58,8 @@
 			"hideAll": "Alles verbergen",
 			"flOffWhenDark": "Displaylicht uit als het donker is",
 			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
-			"verticalDesc": "Verticale schermbeschrijving"
+			"verticalDesc": "Verticale schermbeschrijving",
+			"fontName": "Lettertype"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",

src/routes/+page.svelte

@@ -105,7 +105,6 @@
 		setupObserver();
 
 		const connectEventSource = () => {
-			console.log('Connecting to EventSource');
 			const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
 
 			evtSource.addEventListener('status', (e) => {

src/routes/Settings.svelte

@@ -114,9 +114,13 @@
 		<CardHeader>
 			<div class="float-end">
 				<small>
-					<button type="button" on:click={showAll}>{$_('section.settings.showAll')}</button>
+					<button type="button" on:click={showAll} id="showAllBtn"
+						>{$_('section.settings.showAll')}</button
+					>
 					|
-					<button type="button" on:click={hideAll}>{$_('section.settings.hideAll')}</button>
+					<button type="button" on:click={hideAll} id="hideAllBtn"
+						>{$_('section.settings.hideAll')}</button
+					>
 				</small>
 			</div>
 			<CardTitle>{$_('section.settings.title')}</CardTitle>

src/routes/Status.svelte

@@ -158,7 +158,7 @@
 					<hr />
 					{#if $status.data}
 						<section class={lightMode ? 'lightMode' : 'darkMode'} style="position: relative;">
-							{#if $status.isUpdating === false && $status.isFake === false}
+							{#if $status.isUpdating === false && ($status.isFake ?? false) === false}
 								<div class="connection-lost-overlay">
 									<div class="overlay-content">
 										<i class="bi bi-wifi-off"></i>