add mqtt config options

README.md

@@ -30,11 +30,7 @@ Make sure the postinstall script is ran, because otherwise the filenames are to
 
 ## Deploying
 
-To upload the firmware to the BTClock, you need to GZIP all the files. You can use the python script `gzip_build.py` for that:
+To upload the firmware to the BTClock, you need to GZIP all the files. You can use the python script `gzip_build.py` for that.
-
-```bash
-python3 gzip_build.py
-```
 
 Then you can make a `LittleFS.bin` with mklittlefs:
 

package.json

@@ -13,7 +13,6 @@
 		"postinstall": "patch-package",
 		"test": "npm run test:integration && npm run test:unit",
 		"test:integration": "playwright test",
-		"test:screenshots": "playwright test -c playwright.screenshot.config.ts",
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
@@ -33,7 +32,6 @@
 		"jsdom": "^25.0.0",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
-		"rollup-plugin-visualizer": "^5.12.0",
 		"sass": "^1.79.3",
 		"svelte": "^4.2.19",
 		"svelte-check": "^4.0.2",

patches/@sveltejs+kit+2.7.5.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/@sveltejs/kit/src/exports/vite/index.js b/node_modules/@sveltejs/kit/src/exports/vite/index.js
-index ad519c9..bee1516 100644
+index 40fa4c6..738cabf 100644
 --- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
 +++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
-@@ -644,9 +644,9 @@ async function kit({ svelte_config }) {
+@@ -655,9 +655,9 @@ async function kit({ svelte_config }) {
  							input,
  							output: {
  								format: 'esm',
@@ -13,18 +13,5 @@ index ad519c9..bee1516 100644
 +								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
 +								assetFileNames: `${prefix}/assets/[hash][extname]`,
  								hoistTransitiveImports: false,
- 								sourcemapIgnoreList,
+ 								sourcemapIgnoreList
- 								manualChunks:
+ 							},
-@@ -661,9 +661,9 @@ async function kit({ svelte_config }) {
- 					worker: {
- 						rollupOptions: {
- 							output: {
--								entryFileNames: `${prefix}/workers/[name]-[hash].js`,
--								chunkFileNames: `${prefix}/workers/chunks/[name]-[hash].js`,
--								assetFileNames: `${prefix}/workers/assets/[name]-[hash][extname]`,
-+								entryFileNames: `${prefix}/workers/[hash].js`,
-+								chunkFileNames: `${prefix}/workers/chunks/[hash].js`,
-+								assetFileNames: `${prefix}/workers/assets/[hash][extname]`,
- 								hoistTransitiveImports: false
- 							}
- 						}

patches/@sveltejs+kit+2.8.5.patch

@@ -0,0 +1,17 @@
+diff --git a/node_modules/@sveltejs/kit/src/exports/vite/index.js b/node_modules/@sveltejs/kit/src/exports/vite/index.js
+index e6521e9..f31c28b 100644
+--- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
++++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
+@@ -639,9 +639,9 @@ async function kit({ svelte_config }) {
+ 							input,
+ 							output: {
+ 								format: 'esm',
+-								entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].${ext}`,
+-								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].${ext}`,
+-								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
++								entryFileNames: ssr ? '[name].js' : `${prefix}/[hash].${ext}`,
++								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
++								assetFileNames: `${prefix}/assets/[hash][extname]`,
+ 								hoistTransitiveImports: false,
+ 								sourcemapIgnoreList
+ 							},

playwright.config.ts

@@ -10,7 +10,7 @@ const config: PlaywrightTestConfig = {
 		port: 4173
 	},
 	reporter: process.env.CI ? 'github' : 'list',
-	testDir: 'tests/playwright',
+	testDir: 'tests',
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/
 };
 

playwright.screenshot.config.ts

@@ -1,59 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-	reporter: 'html',
-	use: {
-		locale: 'en-GB',
-		timezoneId: 'Europe/Amsterdam'
-	},
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	},
-	testDir: './tests/screenshots',
-	outputDir: './test-results/screenshots',
-	projects: [
-		{
-			name: 'MacBook Air 13 inch',
-			use: {
-				viewport: { width: 1440, height: 900 }
-			}
-		},
-		{
-			name: 'iPhone 14 Pro',
-			use: { ...devices['iPhone 14 Pro'] }
-		},
-		{
-			name: 'iPhone 15 Pro Landscape',
-			use: { ...devices['iPhone 15 Pro Landscape'] }
-		},
-		{
-			name: 'MacBook Pro 14 inch',
-			use: {
-				viewport: { width: 1512, height: 982 }
-			}
-		},
-		{
-			name: 'MacBook Pro 14 inch NL locale',
-			use: {
-				viewport: { width: 1512, height: 982 },
-				locale: 'nl'
-			}
-		},
-		{
-			name: 'MacBook Pro 14 inch nl-NL locale',
-			use: {
-				viewport: { width: 1512, height: 982 },
-				locale: 'nl-NL'
-			}
-		},
-		{
-			name: 'MacBook Pro 14 inch Firefox HiDPI',
-			use: { ...devices['Desktop Firefox HiDPI'], viewport: { width: 1512, height: 982 } }
-		},
-		{
-			name: 'MacBook Pro 14 inch Safari',
-			use: { ...devices['Desktop Safari'], viewport: { width: 1512, height: 982 } }
-		}
-	]
-});

src/lib/components/SettingsInput.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-	import {
-		Input,
-		InputGroup,
-		InputGroupText,
-		Label,
-		FormText,
-		Col,
-		Row
-	} from '@sveltestrap/sveltestrap';
-
-	export let id: string;
-	export let label: string;
-	export let value: string | number;
-	export let type: string = 'text';
-	export let size: string = 'sm';
-	export let required: boolean = false;
-	export let min: number | undefined = undefined;
-	export let max: number | undefined = undefined;
-	export let step: number | string | undefined = undefined;
-	export let suffix: string | undefined = undefined;
-	export let helpText: string | undefined = undefined;
-	export let disabled: boolean = false;
-	export let valid: boolean | undefined = undefined;
-	export let invalid: boolean | undefined = undefined;
-	export let minlength: string | undefined = undefined;
-	export let onChange: (() => void) | undefined = undefined;
-</script>
-
-<Row>
-	<Label md={6} for={id} {size}>{label}</Label>
-	<Col md="6">
-		<InputGroup {size}>
-			<Input
-				{id}
-				{type}
-				bind:value
-				{required}
-				{min}
-				{max}
-				{step}
-				{disabled}
-				{valid}
-				{invalid}
-				{minlength}
-				bsSize={size}
-				on:change={onChange}
-			/>
-			{#if suffix}
-				<InputGroupText>{suffix}</InputGroupText>
-			{/if}
-			<slot />
-		</InputGroup>
-		{#if helpText}
-			<FormText>{helpText}</FormText>
-		{/if}
-	</Col>
-</Row>

src/lib/components/SettingsSelect.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { Input, Label, FormText, Col, Row } from '@sveltestrap/sveltestrap';
-
-	export let id: string;
-	export let label: string;
-	export let value: string | number;
-	export let options: Array<[string, string | number]>;
-	export let size: string = 'sm';
-	export let helpText: string | undefined = undefined;
-	export let selectClass: string | undefined = undefined;
-	export let onChange: (() => void) | undefined = undefined;
-</script>
-
-<Row>
-	<Label md={6} for={id} {size}>{label}</Label>
-	<Col md="6">
-		<Input
-			{id}
-			type="select"
-			bind:value
-			name="select"
-			bsSize={size}
-			class={selectClass}
-			on:change={onChange}
-		>
-			{#each options as [key, val]}
-				<option value={val}>{key}</option>
-			{/each}
-		</Input>
-		{#if helpText}
-			<FormText>{helpText}</FormText>
-		{/if}
-	</Col>
-</Row>

src/lib/components/SettingsSwitch.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { Input, Col } from '@sveltestrap/sveltestrap';
-
-	// Props
-	export let id: string;
-	export let checked: boolean;
-	export let label: string;
-	export let size: string = 'sm';
-	export let disabled: boolean = false;
-	export let col: { [key: string]: string } = { md: '6', xl: '12', xxl: '6' };
-</script>
-
-<Col {...col}>
-	<Input {id} bind:checked type="switch" bsSize={size} {label} {disabled} />
-</Col>

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/lib/locales/de.json

@@ -55,10 +55,7 @@
 			"ledFlashOnZap": "LED blinkt bei Nostr Zap",
 			"flFlashOnZap": "Displaybeleuchting bei Nostr Zap",
 			"showAll": "Alle anzeigen",
-			"hideAll": "Alles ausblenden",
+			"hideAll": "Alles ausblenden"
-			"flOffWhenDark": "Displaybeleuchtung aus, wenn es dunkel ist",
-			"luxLightToggleText": "Zum Deaktivieren auf 0 setzen",
-			"verticalDesc": "Vrtikale Bildschirmbeschreibung"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",

src/lib/locales/en.json

@@ -44,9 +44,6 @@
 			"useNostr": "Use Nostr data source",
 			"bitaxeHostname": "BitAxe hostname or IP",
 			"bitaxeEnabled": "Enable BitAxe",
-			"miningPoolStats": "Enable Mining Pool Stats",
-			"miningPoolName": "Mining Pool",
-			"miningPoolUser": "Mining Pool username or api key",
 			"nostrZapPubkey": "Nostr Zap pubkey",
 			"invalidNostrPubkey": "Invalid Nostr pubkey, note that your pubkey does NOT start with npub.",
 			"convertingValidNpub": "Converting valid npub to pubkey",
@@ -69,11 +66,11 @@
 			},
 			"ledFlashOnZap": "LED flash on Nostr Zap",
 			"flFlashOnZap": "Frontlight flash on Nostr Zap",
+			"mqttEnabled": "Enable MQTT",
+			"mqttHost": "MQTT hostname or IP",
+			"mqttRootTopic": "MQTT root topic",
 			"showAll": "Show all",
-			"hideAll": "Hide all",
+			"hideAll": "Hide all"
-			"flOffWhenDark": "Frontlight off when dark",
-			"luxLightToggleText": "Set to 0 to disable",
-			"verticalDesc": "Use vertical screen description"
 		},
 		"control": {
 			"systemInfo": "System info",

src/lib/locales/es.json

@@ -54,10 +54,7 @@
 			"ledFlashOnZap": "LED parpadeante con Nostr Zap",
 			"flFlashOnZap": "Flash de luz frontal con Nostr Zap",
 			"showAll": "Mostrar todo",
-			"hideAll": "Ocultar todo",
+			"hideAll": "Ocultar todo"
-			"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
-			"luxLightToggleText": "Establecer en 0 para desactivar",
-			"verticalDesc": "Descripción de pantalla vertical"
 		},
 		"control": {
 			"turnOff": "Apagar",

src/lib/locales/nl.json

@@ -55,10 +55,7 @@
 			"ledFlashOnZap": "Knipper LED bij Nostr Zap",
 			"flFlashOnZap": "Knipper displaylicht bij Nostr Zap",
 			"showAll": "Toon alles",
-			"hideAll": "Alles verbergen",
+			"hideAll": "Alles verbergen"
-			"flOffWhenDark": "Displaylicht uit als het donker is",
-			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
-			"verticalDesc": "Verticale schermbeschrijving"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",

src/lib/style/app.scss

@@ -1,23 +1,11 @@
-@use '@fontsource/ubuntu/scss/mixins' as Ubuntu;
-@use '@fontsource/antonio/scss/mixins' as Antonio;
-
 @import '../node_modules/bootstrap/scss/functions';
+@import '../node_modules/bootstrap/scss/variables';
+@import '../node_modules/bootstrap/scss/variables-dark';
 
 //@import "@fontsource/antonio/latin-400.css";
-
+@import '@fontsource/ubuntu/latin-400.css';
-@include Ubuntu.faces(
+//@import '@fontsource/oswald/latin-400.css';
-	$subsets: latin,
+@import '@fontsource/antonio/latin-400.css';
-	$weights: 400,
-	$formats: 'woff2',
-	$directory: '@fontsource/ubuntu/files'
-);
-
-@include Antonio.faces(
-	$subsets: latin,
-	$weights: 400,
-	$formats: 'woff2',
-	$directory: '@fontsource/antonio/files'
-);
 
 @import './satsymbol';
 
@@ -26,8 +14,6 @@ $font-family-base: 'Ubuntu';
 $font-size-base: 0.9rem;
 $input-font-size-sm: $font-size-base * 0.875;
 
-@import '../node_modules/bootstrap/scss/variables';
-@import '../node_modules/bootstrap/scss/variables-dark';
 // $border-radius:               .675rem;
 
 @import '../node_modules/bootstrap/scss/mixins';
@@ -57,40 +43,6 @@ $input-font-size-sm: $font-size-base * 0.875;
 @import '../node_modules/bootstrap/scss/helpers';
 @import '../node_modules/bootstrap/scss/utilities/api';
 
-/* Default state (xs) - sticky */
-.sticky-xs-top {
-	position: sticky;
-	top: 0;
-	z-index: 1020;
-}
-
-@media (max-width: 576px) {
-	main {
-		margin-top: 25px;
-	}
-}
-
-/* Remove sticky behavior for larger screens */
-@media (min-width: 576px) {
-	.sticky-xs-top {
-		position: relative;
-	}
-}
-
-@include color-mode(dark) {
-	.navbar {
-		--bs-navbar-color: $light;
-		background-color: $dark;
-	}
-}
-
-@include color-mode(light) {
-	.navbar {
-		--bs-navbar-color: $dark;
-		background-color: $light;
-	}
-}
-
 nav {
 	margin-bottom: 15px;
 }
@@ -101,23 +53,6 @@ nav {
 
 .btn-group-sm .btn {
 	font-size: 0.8rem;
-	// text-overflow: ellipsis;
-	// white-space: nowrap;
-	// overflow: hidden;
-	// width: 4rem;
-}
-
-.btn-group-sm {
-	display: flex !important;
-	flex-wrap: wrap !important;
-	gap: 0.25rem !important;
-}
-
-/* Remove the border radius override that Bootstrap applies */
-.btn-group-sm > .btn {
-	border-radius: 0.25rem !important;
-	margin: 0 !important;
-	position: relative !important;
 }
 
 #customText {
@@ -128,7 +63,7 @@ nav {
 	.btclock {
 		background: #000;
 		display: flex;
-		font-size: calc(2vw + 2vh);
+		font-size: calc(3vw + 3vh);
 		font-family: 'Antonio', sans-serif;
 		font-weight: 400;
 		padding: 10px;
@@ -169,25 +104,19 @@ nav {
 			flex-direction: column; /* Stack the text and line vertically */
 			align-items: center;
 			justify-content: space-around; /* Distribute items with space between */
-			padding: 5px;
+			padding: 10px;
 		}
 
-		&.verticalDesc > .splitText:first-child {
+		.splitText div:first-child::after {
-			.textcontainer {
-				transform: rotate(-90deg);
-			}
-		}
-
-		.splitText .textcontainer :first-child::after {
 			display: block;
 			content: '';
 			margin-top: 0px;
 			border-bottom: 2px solid;
-			// margin-bottom: 3px;
+			margin-bottom: 3px;
 		}
 
 		.splitText {
-			font-size: calc(0.3vw + 1vh);
+			font-size: calc(0.5vw + 1vh);
 
 			.top-text,
 			.bottom-text {
@@ -313,7 +242,3 @@ nav {
 input[type='number'] {
 	text-align: right;
 }
-
-.lightMode .bitaxelogo {
-	filter: brightness(0) saturate(100%);
-}

src/lib/style/satsymbol.scss

@@ -1,6 +1,8 @@
 @font-face {
 	font-family: 'Satoshi Symbol';
-	src: url('/fonts/Satoshi_Symbol.woff2') format('woff2');
+	src:
+		url('/fonts/Satoshi_Symbol.woff2') format('woff2'),
+		url('/fonts/Satoshi_Symbol.woff') format('woff');
 	font-weight: normal;
 	font-style: normal;
 	font-display: swap;

src/routes/+layout.svelte

@@ -12,12 +12,10 @@
 		NavbarBrand,
 		NavbarToggler
 	} from '@sveltestrap/sveltestrap';
-	import { _ } from 'svelte-i18n';
 
 	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);
@@ -40,20 +38,19 @@
 			return flagMap[lowercaseCode];
 		} else {
 			// Return null for unsupported language codes
-			return flagMap['en'];
+			return null;
 		}
 	};
 
 	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) {
-			languageNames[l] = newLanguageNames.of(l) || l;
+				languageNames[l] = newLanguageNames.of(l);
+			}
 		}
 	});
 
@@ -64,23 +61,8 @@
 	};
 </script>
 
-<Navbar expand="md" sticky="xs-top" theme="auto">
+<Navbar expand="md">
-	<NavbarBrand class="d-none d-sm-block">&#8383;TClock</NavbarBrand>
+	<NavbarBrand>&#8383;TClock</NavbarBrand>
-	<Nav class="d-md-none" pills>
-		<NavItem>
-			<NavLink href="#control" active>{$_('section.control.title', { default: 'Control' })}</NavLink
-			>
-		</NavItem>
-		<NavItem>
-			<NavLink href="#status">{$_('section.status.title', { default: 'Status' })}</NavLink>
-		</NavItem>
-		<NavItem>
-			<NavLink class="nav-link" href="#settings"
-				>{$_('section.settings.title', { default: 'Settings' })}</NavLink
-			>
-		</NavItem>
-	</Nav>
-
 	<NavbarToggler on:click={toggle} />
 
 	<Collapse {isOpen} navbar expand="sm">
@@ -97,10 +79,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)}
@@ -115,6 +94,4 @@
 </Navbar>
 
 <!-- +layout.svelte -->
-<main>
+<slot />
-	<slot />
-</main>

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'));
-		} else {
+	} else if (browser) {
-			// Normalize the browser locale
+		locale.set(window.navigator.language);
-			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/+page.svelte

@@ -3,7 +3,6 @@
 	import { screenSize, updateScreenSize } from '$lib/screen';
 
 	import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
-	import { replaceState } from '$app/navigation';
 
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
@@ -17,6 +16,12 @@
 		bgColor: '0'
 	});
 
+	// let uiSettings = writable({
+	// 	inputSize: 'sm',
+	// 	selectClass: '',
+	// 	btnSize: 'lg'
+	// });
+
 	let status = writable({
 		data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
 		espFreeHeap: 0,
@@ -55,43 +60,7 @@
 			});
 	};
 
-	let sections: (HTMLElement | null)[];
-	let observer: IntersectionObserver;
-	const SM_BREAKPOINT = 576;
-
-	const setupObserver = () => {
-		if (window.innerWidth < SM_BREAKPOINT) {
-			observer = new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
-							const id = entry.target.id;
-							replaceState(`#${id}`);
-
-							// Update nav pills
-							document.querySelectorAll('.nav-link').forEach((link) => {
-								link.classList.remove('active');
-								if (link.getAttribute('href') === `#${id}`) {
-									link.classList.add('active');
-								}
-							});
-						}
-					});
-				},
-				{
-					threshold: 0.25 // Trigger when section is 50% visible
-				}
-			);
-
-			sections = ['control', 'status', 'settings'].map((id) => document.getElementById(id));
-
-			sections.forEach((section) => observer.observe(section!));
-		}
-	};
-
 	onMount(() => {
-		setupObserver();
-
 		fetchSettingsData();
 		fetchStatusData();
 
@@ -103,11 +72,6 @@
 		});
 
 		function handleResize() {
-			if (observer) {
-				observer.disconnect();
-			}
-			setupObserver();
-
 			updateScreenSize();
 		}
 
@@ -161,9 +125,7 @@
 <Container fluid>
 	<Row>
 		<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
-
 		<Status bind:settings bind:status lg="6" xxl="4"></Status>
-
 		<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
 		></Settings>
 	</Row>

src/routes/Control.svelte

@@ -105,8 +105,8 @@
 	export let xxl = xl;
 </script>
 
-<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+<Col {xs} {sm} {md} {lg} {xl} {xxl}>
-	<Card id="control">
+	<Card>
 		<CardHeader>
 			<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
 		</CardHeader>

src/routes/FirmwareUpdater.svelte

@@ -200,7 +200,7 @@
 	<p>Loading...</p>
 {/if}
 <section class="row row-cols-lg-auto align-items-end">
-	<div class="col flex-fill">
+	<div class="col-12">
 		<label for="firmwareFile" class="form-label">Firmware file ({getFirmwareBinaryName()})</label>
 		<input
 			type="file"
@@ -216,7 +216,7 @@
 			>Update firmware</Button
 		>
 	</div>
-	<div class="col flex-fill">
+	<div class="col mt-2">
 		<label for="webuiFile" class="form-label">WebUI file (littlefs.bin)</label>
 		<input
 			type="file"

src/routes/Rendered.svelte

@@ -9,7 +9,7 @@
 	};
 
 	export let className = 'btclock-wrapper';
-	export let verticalDesc = false;
+
 	// Define the currency symbols as constants
 	const CURRENCY_USD = '$';
 	const CURRENCY_EUR = '[';
@@ -44,22 +44,21 @@
 </script>
 
 <div class={className} id={className}>
-	<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
+	<div class="btclock">
 		{#each status.data as char}
 			{#if isSplitText(char)}
 				<div class="splitText">
-					<div class="textcontainer">
 					{#if char.split('/').length}
 						<span class="top-text">{char.split('/')[0]}</span>
+						<hr />
 						<span class="bottom-text">{char.split('/')[1]}</span>
 					{/if}
-					</div>
 					<!-- {#each char.split('/') as part}
 						<div class="flex-items">{part}</div>
 					{/each} -->
 				</div>
 			{:else if char.startsWith('mdi')}
-				<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
+				<div class="digit icon">
 					{#if char.endsWith('rocket')}
 						<RocketIcon></RocketIcon>
 					{/if}
@@ -69,12 +68,6 @@
 					{#if char.endsWith('bolt')}
 						<ZapIcon></ZapIcon>
 					{/if}
-					{#if char.endsWith('bitaxe')}
-						<img src="/bitaxe.webp" class="bitaxelogo" alt="BitAxe logo" />
-					{/if}
-					{#if char.endsWith('miningpool')}
-						<span class="pool-logo">Mining Pool Logo</span>
-					{/if}
 				</div>
 			{:else if char === 'STS'}
 				<div class="digit sats">S</div>
@@ -89,26 +82,8 @@
 	</div>
 </div>
 
-<style lang="scss">
+<style>
 	.icon {
 		fill: currentColor;
 	}
-
-	.btclock-wrapper .btclock .icon.icon-img {
-		// padding: 0 15px;
-		aspect-ratio: 1;
-		width: calc(100 / 7);
-
-		img {
-			max-width: 95%;
-		}
-	}
-
-	.bitaxelogo {
-		transform: rotate(-90deg);
-	}
-
-	.pool-logo {
-		font-size: 0.75rem;
-	}
 </style>

src/routes/Status.svelte

@@ -104,8 +104,8 @@
 	export let xxl = xl;
 </script>
 
-<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+<Col {xs} {sm} {md} {lg} {xl} {xxl}>
-	<Card id="status">
+	<Card>
 		<CardHeader>
 			<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
 		</CardHeader>
@@ -151,11 +151,7 @@
 				<hr />
 				{#if $status.data}
 					<section class={lightMode ? 'lightMode' : 'darkMode'}>
-						<Rendered
+						<Rendered status={$status} className="btclock-wrapper"></Rendered>
-							status={$status}
-							className="btclock-wrapper"
-							verticalDesc={$settings.verticalDesc}
-						></Rendered>
 					</section>
 					{$_('section.status.screenCycle')}:
 					<a

tests/screenshots/viewport-screenshots.spec.ts

@@ -1,132 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-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: translations.status })).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();
-	}
-
-	const screenshot = await page.screenshot({
-		path: `./test-results/screenshots/default-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
-	});
-
-	await testInfo.attach(`default`, {
-		body: screenshot,
-		contentType: 'image/png'
-	});
-});
-
-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,
-			name: 'Block Height',
-			enabled: true
-		},
-		{
-			id: 3,
-			name: 'Time',
-			enabled: true
-		},
-		{
-			id: 4,
-			name: 'Halving countdown',
-			enabled: true
-		},
-		{
-			id: 6,
-			name: 'Block Fee Rate',
-			enabled: true
-		},
-		{
-			id: 10,
-			name: 'Sats per dollar',
-			enabled: true
-		},
-		{
-			id: 20,
-			name: 'Ticker',
-			enabled: true
-		},
-		{
-			id: 30,
-			name: 'Market Cap',
-			enabled: true
-		},
-		{
-			id: 80,
-			name: 'BitAxe Hashrate',
-			enabled: true
-		},
-		{
-			id: 81,
-			name: 'BitAxe Best Difficulty',
-			enabled: true
-		}
-	];
-
-	statusJson.data = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
-	statusJson.rendered = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
-
-	await page.goto('/');
-
-	await expect(page.getByRole('heading', { name: translations.control })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.status })).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`
-	});
-
-	await testInfo.attach(`bitaxe`, {
-		path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`,
-		contentType: 'image/png'
-	});
-});

tests/shared.ts

@@ -1,143 +0,0 @@
-export const statusJson = {
-	currentScreen: 0,
-	numScreens: 7,
-	timerRunning: true,
-	espUptime: 4479,
-	espFreeHeap: 58508,
-	espHeapSize: 342108,
-	connectionStatus: { price: true, blocks: true },
-	rssi: -66,
-	data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
-	rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
-	leds: [
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' }
-	]
-};
-
-export const settingsJson = {
-	numScreens: 7,
-	fgColor: 415029,
-	bgColor: 0,
-	timerSeconds: 1800,
-	timerRunning: true,
-	minSecPriceUpd: 30,
-	fullRefreshMin: 60,
-	wpTimeout: 600,
-	tzOffset: 0,
-	useBitcoinNode: false,
-	mempoolInstance: 'mempool.space',
-	ledTestOnPower: true,
-	ledFlashOnUpd: true,
-	ledBrightness: 128,
-	stealFocus: true,
-	mcapBigChar: true,
-	mdnsEnabled: true,
-	otaEnabled: true,
-	fetchEurPrice: false,
-	hostnamePrefix: 'btclock',
-	hostname: 'btclock-d60b14',
-	ip: '192.168.20.231',
-	txPower: 78,
-	gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
-	gitTag: '3.1.9',
-	bitaxeEnabled: false,
-	bitaxeHostname: 'bitaxe1',
-	miningPoolStats: false,
-	miningPoolName: 'ocean',
-	miningPoolUser: '38Qkkei3SuF1Eo45BaYmRHUneRD54yyTFy',
-	nostrZapNotify: true,
-	hwRev: 'REV_A_EPD_2_13',
-	fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
-	nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
-	lastBuildTime: '1700666677',
-	screens: [
-		{
-			id: 0,
-			name: 'Block Height',
-			enabled: true
-		},
-		{
-			id: 3,
-			name: 'Time',
-			enabled: true
-		},
-		{
-			id: 4,
-			name: 'Halving countdown',
-			enabled: true
-		},
-		{
-			id: 6,
-			name: 'Block Fee Rate',
-			enabled: true
-		},
-		{
-			id: 10,
-			name: 'Sats per dollar',
-			enabled: true
-		},
-		{
-			id: 20,
-			name: 'Ticker',
-			enabled: true
-		},
-		{
-			id: 30,
-			name: 'Market Cap',
-			enabled: true
-		}
-	],
-	actCurrencies: ['USD', 'EUR'],
-	availableCurrencies: ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD']
-};
-
-export const initMock = async ({ page }) => {
-	await page.route('*/**/api/status', async (route) => {
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/1', async (route) => {
-		//if (route.request().url().includes('*/**/api/show/screen/1')) {
-		statusJson.currentScreen = 1;
-		statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
-		statusJson.rendered = statusJson.data;
-		//}
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/2', async (route) => {
-		statusJson.currentScreen = 2;
-		statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
-		statusJson.rendered = statusJson.data;
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/4', async (route) => {
-		statusJson.currentScreen = 4;
-		statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO'];
-		statusJson.rendered = statusJson.data;
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/settings', async (route) => {
-		await route.fulfill({ json: settingsJson });
-	});
-
-	await page.route('**/events', (route) => {
-		const newStatus = statusJson;
-		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
-
-		// Respond with a custom SSE message
-		route.fulfill({
-			status: 200,
-			contentType: 'text/event-stream',
-			json: `${JSON.stringify(newStatus)}\n\n`
-		});
-	});
-};

tests/test.ts

@@ -1,7 +1,115 @@
 import { expect, test } from '@playwright/test';
-import { initMock, settingsJson, statusJson } from '../shared';
 
-test.beforeEach(initMock);
+const statusJson = {
+	currentScreen: 0,
+	numScreens: 7,
+	timerRunning: true,
+	espUptime: 4479,
+	espFreeHeap: 58508,
+	espHeapSize: 342108,
+	connectionStatus: { price: true, blocks: true },
+	rssi: -66,
+	data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
+	rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
+	leds: [
+		{ red: 0, green: 0, blue: 0, hex: '#000000' },
+		{ red: 0, green: 0, blue: 0, hex: '#000000' },
+		{ red: 0, green: 0, blue: 0, hex: '#000000' },
+		{ red: 0, green: 0, blue: 0, hex: '#000000' }
+	]
+};
+
+const settingsJson = {
+	numScreens: 7,
+	fgColor: 415029,
+	bgColor: 0,
+	timerSeconds: 1800,
+	timerRunning: true,
+	minSecPriceUpd: 30,
+	fullRefreshMin: 60,
+	wpTimeout: 600,
+	tzOffset: 0,
+	useBitcoinNode: false,
+	mempoolInstance: 'mempool.space',
+	ledTestOnPower: true,
+	ledFlashOnUpd: true,
+	ledBrightness: 128,
+	stealFocus: true,
+	mcapBigChar: true,
+	mdnsEnabled: true,
+	otaEnabled: true,
+	fetchEurPrice: false,
+	hostnamePrefix: 'btclock',
+	hostname: 'btclock-d60b14',
+	ip: '192.168.20.231',
+	txPower: 78,
+	gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
+	gitTag: '3.1.9',
+	bitaxeEnabled: false,
+	bitaxeHostname: 'bitaxe1',
+	nostrZapNotify: true,
+	mqttEnabled: false,
+	hwRev: 'REV_A_EPD_2_13',
+	fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
+	nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
+	lastBuildTime: '1700666677',
+	screens: [
+		{ id: 0, name: 'Block Height', enabled: true },
+		{ id: 1, name: 'Sats per dollar', enabled: true },
+		{ id: 2, name: 'Ticker', enabled: true },
+		{ id: 3, name: 'Time', enabled: true },
+		{ id: 4, name: 'Halving countdown', enabled: true },
+		{ id: 5, name: 'Market Cap', enabled: true }
+	]
+};
+
+test.beforeEach(async ({ page }) => {
+	await page.route('*/**/api/status', async (route) => {
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/1', async (route) => {
+		//if (route.request().url().includes('*/**/api/show/screen/1')) {
+		statusJson.currentScreen = 1;
+		statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
+		statusJson.rendered = statusJson.data;
+		//}
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/2', async (route) => {
+		statusJson.currentScreen = 2;
+		statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
+		statusJson.rendered = statusJson.data;
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/4', async (route) => {
+		statusJson.currentScreen = 4;
+		statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO'];
+		statusJson.rendered = statusJson.data;
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/settings', async (route) => {
+		await route.fulfill({ json: settingsJson });
+	});
+
+	await page.route('**/events', (route) => {
+		const newStatus = statusJson;
+		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
+
+		// Respond with a custom SSE message
+		route.fulfill({
+			status: 200,
+			contentType: 'text/event-stream',
+			json: `${JSON.stringify(newStatus)}\n\n`
+		});
+	});
+});
 
 test('index page has expected columns control, status, settings', async ({ page }) => {
 	await page.goto('/');
@@ -74,8 +182,6 @@ test('time values can not be zero or negative', async ({ page }) => {
 });
 
 test('info message when fetch eur price is enabled', async ({ page }) => {
-	delete (settingsJson as { actCurrencies?: string[] }).actCurrencies;
-
 	await page.goto('/');
 	await page.getByRole('button', { name: 'Show all' }).click();
 

vite.config.ts

@@ -1,7 +1,6 @@
 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';
 
 import * as fs from 'fs';
 import * as path from 'path';
@@ -66,34 +65,14 @@ export default defineConfig({
 				}
 			}
 		}
-		// visualizer({
-		// 	emitFile: true,
-		// 	filename: "stats.html",
-		//   })
 	],
 	build: {
-		minify: 'esbuild',
+		minify: true,
 		cssCodeSplit: false,
-		chunkSizeWarningLimit: 550,
 		rollupOptions: {
 			output: {
-				// assetFileNames: '[hash][extname]',
+				manualChunks: () => 'app',
-				entryFileNames: `[hash][extname]`,
+				assetFileNames: '[name][extname]'
-				chunkFileNames: `[hash][extname]`,
-				assetFileNames: `[hash][extname]`,
-				preserveModules: false,
-
-				manualChunks: () => {
-					return 'app';
-				}
-			}
-		}
-	},
-	css: {
-		preprocessorOptions: {
-			scss: {
-				quietDeps: true,
-				silenceDeprecations: ['import']
 			}
 		}
 	},
@@ -102,8 +81,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)
 	}
 });