playwright.screenshot.config.ts

@@ -34,17 +34,9 @@ export default defineConfig({
 			}
 		},
 		{
-			name: 'MacBook Pro 14 inch NL locale',
+			name: 'MacBook Pro 14 inch',
 			use: {
-				viewport: { width: 1512, height: 982 },
+				viewport: { width: 1512, height: 982 }
-				locale: 'nl'
-			}
-		},
-		{
-			name: 'MacBook Pro 14 inch nl-NL locale',
-			use: {
-				viewport: { width: 1512, height: 982 },
-				locale: 'nl-NL'
 			}
 		},
 		{

src/lib/components/index.ts

@@ -1,5 +0,0 @@
-export { default as SettingsSwitch } from './SettingsSwitch.svelte';
-export { default as SettingsInput } from './SettingsInput.svelte';
-export { default as SettingsSelect } from './SettingsSelect.svelte';
-export { default as ToggleHeader } from './ToggleHeader.svelte';
-export { default as ColorSchemeSwitcher } from './ColorSchemeSwitcher.svelte';

src/lib/i18n/index.ts

@@ -8,23 +8,11 @@ register('nl', () => import('../locales/nl.json'));
 register('es', () => import('../locales/es.json'));
 register('de', () => import('../locales/de.json'));
 
-const getInitialLocale = () => {
-	if (!browser) return defaultLocale;
-
-	// Check localStorage first
-	const storedLocale = localStorage.getItem('locale');
-	if (storedLocale) return storedLocale;
-
-	// Get browser locale and normalize it
-	const browserLocale = window.navigator.language;
-	const normalizedLocale = browserLocale.split('-')[0].toLowerCase();
-
-	// Check if we support this locale
-	const supportedLocales = ['en', 'nl', 'es', 'de'];
-	return supportedLocales.includes(normalizedLocale) ? normalizedLocale : defaultLocale;
-};
-
 init({
 	fallbackLocale: defaultLocale,
-	initialLocale: getInitialLocale()
+	initialLocale: browser
+		? browser && localStorage.getItem('locale')
+			? localStorage.getItem('locale')
+			: window.navigator.language.slice(0, 2)
+		: defaultLocale
 });

src/routes/+layout.svelte

@@ -16,8 +16,7 @@
 
 	import { page } from '$app/stores';
 	import { locale, locales, isLoading } from 'svelte-i18n';
-	import { ColorSchemeSwitcher } from '$lib/components';
+	import ColorSchemeSwitcher from '../components/ColorSchemeSwitcher.svelte';
-	import { derived } from 'svelte/store';
 
 	export const setLocale = (lang: string) => () => {
 		locale.set(lang);
@@ -46,14 +45,13 @@
 
 	let languageNames = {};
 
-	const currentLocale = derived(locale, ($locale) => $locale || 'en');
-
 	locale.subscribe(() => {
-		const localeToUse = $locale || 'en';
+		if ($locale) {
-		let newLanguageNames = new Intl.DisplayNames([localeToUse], { type: 'language' });
+			let newLanguageNames = new Intl.DisplayNames([$locale], { type: 'language' });
 
-		for (let l of $locales) {
+			for (let l of $locales) {
-			languageNames[l] = newLanguageNames.of(l) || l;
+				languageNames[l] = newLanguageNames.of(l);
+			}
 		}
 	});
 
@@ -97,10 +95,7 @@
 		</Nav>
 		{#if !$isLoading}
 			<Dropdown id="nav-language-dropdown" inNavbar class="me-3">
-				<DropdownToggle nav caret
+				<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$locale]}</DropdownToggle>
-					>{getFlagEmoji($currentLocale)}
-					{languageNames[$currentLocale] || 'English'}</DropdownToggle
-				>
 				<DropdownMenu end>
 					{#each $locales as locale}
 						<DropdownItem on:click={setLocale(locale)}

src/routes/+layout.ts

@@ -6,15 +6,10 @@ import { locale, waitLocale } from 'svelte-i18n';
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async () => {
-	if (browser) {
+	if (browser && localStorage.getItem('locale')) {
-		if (localStorage.getItem('locale')) {
+		locale.set(localStorage.getItem('locale'));
-			locale.set(localStorage.getItem('locale'));
+	} else if (browser) {
-		} else {
+		locale.set(window.navigator.language);
-			// Normalize the browser locale
-			const browserLocale = window.navigator.language.split('-')[0].toLowerCase();
-			const supportedLocales = ['en', 'nl', 'es', 'de'];
-			locale.set(supportedLocales.includes(browserLocale) ? browserLocale : 'en');
-		}
 	}
 	await waitLocale();
 };

src/routes/Settings.svelte

@@ -3,6 +3,8 @@
 	import { PUBLIC_BASE_URL } from '$lib/config';
 	import { uiSettings } from '$lib/uiSettings';
 	import { createEventDispatcher } from 'svelte';
+	import SettingsSwitch from '../components/SettingsSwitch.svelte';
+
 	import { _ } from 'svelte-i18n';
 	import {
 		Button,
@@ -14,10 +16,14 @@
 		Form,
 		Row
 	} from '@sveltestrap/sveltestrap';
+
 	import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
 	import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
+
 	import { derived } from 'svelte/store';
-	import { SettingsSwitch, SettingsInput, SettingsSelect, ToggleHeader } from '$lib/components';
+	import ToggleHeader from '../components/ToggleHeader.svelte';
+	import SettingsInput from '../components/SettingsInput.svelte';
+	import SettingsSelect from '../components/SettingsSelect.svelte';
 
 	export let settings;
 

tests/screenshots/viewport-screenshots.spec.ts

@@ -4,47 +4,11 @@ import { initMock, settingsJson, statusJson } from '../shared';
 
 test.beforeEach(initMock);
 
-// Define the translations for the headings
-const headings = {
-	en: {
-		control: 'Control',
-		status: 'Status',
-		settings: 'Settings',
-		language: 'English'
-	},
-	de: {
-		control: 'Steuerung',
-		status: 'Status',
-		settings: 'Einstellungen',
-		language: 'Deutsch'
-	},
-	nl: {
-		control: 'Besturing',
-		status: 'Status',
-		settings: 'Instellingen',
-		language: 'Nederlands'
-	},
-	es: {
-		control: 'Control',
-		status: 'Estado',
-		settings: 'Ajustes',
-		language: 'Español'
-	}
-};
-
 test('capture screenshots across devices', async ({ page }, testInfo) => {
-	// Get the locale from the browser or default to 'en'
-	const locale = testInfo.project.use?.locale?.split('-')[0].toLowerCase() || 'en';
-	const translations = headings[locale] || headings.en;
-
 	await page.goto('/');
-	await expect(page.getByRole('heading', { name: translations.control })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.status })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.settings })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
-
-	if (await page.locator('#nav-language-dropdown').isVisible()) {
-		await expect(page.getByRole('link', { name: translations.language })).toBeVisible();
-	}
 
 	const screenshot = await page.screenshot({
 		path: `./test-results/screenshots/default-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
@@ -57,9 +21,6 @@ test('capture screenshots across devices', async ({ page }, testInfo) => {
 });
 
 test('capture screenshots across devices with bitaxe screens', async ({ page }, testInfo) => {
-	const locale = testInfo.project.use?.locale?.split('-')[0].toLowerCase() || 'en';
-	const translations = headings[locale] || headings.en;
-
 	settingsJson.screens = [
 		{
 			id: 0,
@@ -112,14 +73,9 @@ test('capture screenshots across devices with bitaxe screens', async ({ page },
 	statusJson.rendered = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
 
 	await page.goto('/');
-
+	await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.control })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.status })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.settings })).toBeVisible();
-
-	if (await page.locator('#nav-language-dropdown').isVisible()) {
-		await expect(page.getByRole('link', { name: translations.language })).toBeVisible();
-	}
 
 	await page.screenshot({
 		path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`

vite.config.ts

@@ -1,5 +1,5 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 import GithubActionsReporter from 'vitest-github-actions-reporter';
 // import { visualizer } from 'rollup-plugin-visualizer';
 
@@ -102,8 +102,5 @@ export default defineConfig({
 		globals: true,
 		environment: 'jsdom',
 		reporters: process.env.GITHUB_ACTIONS ? ['default', new GithubActionsReporter()] : 'default'
-	},
-	define: {
-		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 	}
 });