feat: Replace timezone offset with timezone selector

Reviewed-on: #48

.eslintignore

@@ -1,14 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-dist
-build_gz
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

.eslintrc.cjs

@@ -1,33 +0,0 @@
-module.exports = {
-	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
-	rules: {
-		'no-empty': ['error', { allowEmptyCatch: true }]
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
-};

.forgejo/workflows/build.yaml

@@ -0,0 +1,132 @@
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  check-changes:
+    runs-on: docker
+    outputs:
+      all_changed_and_modified_files_count: ${{ steps.changed-files.outputs.all_changed_and_modified_files_count }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Get changed files count
+        id: changed-files
+        uses: tj-actions/changed-files@v45
+        with:
+          files_ignore: 'doc/**,README.md,Dockerfile,.*'
+          files_ignore_separator: ','
+      - name: Print changed files count
+        run: >
+          echo "Changed files count: ${{ 
+            steps.changed-files.outputs.all_changed_and_modified_files_count }}"
+
+  build:
+    needs: check-changes
+    runs-on: docker
+    container:
+      image: ghcr.io/catthehacker/ubuntu:js-22.04
+    if: ${{ needs.check-changes.outputs.all_changed_and_modified_files_count >= 1 }}
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v4
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+          node-version: lts/*
+          cache: yarn
+          cache-dependency-path: '**/yarn.lock'
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/pip
+            ~/node_modules
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-pio-playwright-${{ hashFiles('**/yarn.lock') }}
+      - name: Get current date
+        id: dateAndTime
+        run: echo "dateAndTime=$(date +'%Y-%m-%d-%H:%M')" >> $GITHUB_OUTPUT
+      - name: Install mklittlefs
+        run: >
+          git clone https://github.com/earlephilhower/mklittlefs.git /tmp/mklittlefs &&
+          cd /tmp/mklittlefs &&
+          git submodule update --init &&
+          make dist
+      - name: Install yarn
+        run: yarn && yarn postinstall
+      - name: Run linter
+        run: yarn lint
+      - name: Run vitest tests
+        run: yarn vitest run
+      - name: Install Playwright Browsers
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - name: Build WebUI
+        run: yarn build
+
+      # The following steps only run on push to main
+      - name: Get current block
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        id: getBlockHeight
+        run: echo "blockHeight=$(curl -s https://mempool.space/api/blocks/tip/height)" >> $GITHUB_OUTPUT
+
+      - name: Write block height to file
+        env:
+          BLOCK_HEIGHT: ${{ steps.getBlockHeight.outputs.blockHeight }}
+        run: mkdir -p output && echo "$BLOCK_HEIGHT" > output/version.txt
+      - name: gzip build for LittleFS
+        run: find dist -type f ! -name ".*" -exec sh -c 'mkdir -p "build_gz/$(dirname "${1#dist/}")" && gzip -k "$1" -c > "build_gz/${1#dist/}".gz' _ {} \;
+      - name: Write git rev to file
+        run: echo "$GITHUB_SHA" > build_gz/fs_hash.txt && echo "$GITHUB_SHA" > output/commit.txt
+      - name: Check GZipped directory size
+        run: |
+          # Set the threshold size in bytes
+          THRESHOLD=410000
+
+          # Calculate the total size of files in the directory
+          DIRECTORY_SIZE=$(du -b -s build_gz | awk '{print $1}')
+
+          # Fail the workflow if the size exceeds the threshold
+          if [ "$DIRECTORY_SIZE" -gt "$THRESHOLD" ]; then
+            echo "Directory size exceeds the threshold of $THRESHOLD bytes"
+            exit 1
+          else
+            echo "Directory size is within the threshold $DIRECTORY_SIZE"
+          fi
+      - name: Create tarball
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        run: tar czf webui.tgz --strip-components=1 dist
+      - name: Build LittleFS
+        run: |
+          set -e
+          /tmp/mklittlefs/mklittlefs -c build_gz -s 410000 output/littlefs.bin
+      - name: Upload artifacts
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: https://code.forgejo.org/forgejo/upload-artifact@v4
+        with:
+          path: |
+            webui.tgz
+            output/littlefs.bin
+      - name: Create release
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: https://code.forgejo.org/actions/forgejo-release@v2.5.3
+        with:
+          url: 'https://git.btclock.dev/'
+          repo: '${{ github.repository }}'
+          direction: upload
+          tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
+          sha: '${{ github.sha }}'
+          release-dir: output
+          token: ${{ secrets.TOKEN }}
+          override: false
+          verbose: false
+          release-notes-assistant: false

.github/dependabot.yml

@@ -0,0 +1,15 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
+    schedule:
+      interval: 'daily'
+    versioning-strategy: 'increase-if-necessary'
+    ignore:
+      - dependency-name: '*'
+        update-types: ['version-update:semver-major']

.github/workflows/workflow.yml

@@ -16,7 +16,7 @@ jobs:
 
       - name: Get changed files count
         id: changed-files
-        uses: tj-actions/changed-files@v40.1.1
+        uses: tj-actions/changed-files@v45
         with:
           files_ignore: 'doc/**,README.md,Dockerfile,.*'
           files_ignore_separator: ','
@@ -36,18 +36,18 @@ jobs:
       - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: yarn
           cache-dependency-path: '**/yarn.lock'
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: |
             ~/.cache/pip
             ~/node_modules
           key: ${{ runner.os }}-pio
-      - uses: actions/setup-python@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: '3.9'
       - name: Get current date
@@ -63,14 +63,25 @@ jobs:
         run: yarn && yarn postinstall
       - name: Run linter
         run: yarn lint
+      - name: Run vitest tests
+        run: yarn vitest run
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
       - name: Build WebUI
         run: yarn build
-
       - name: Get current block
         id: getBlockHeight
         run: echo "blockHeight=$(curl -s https://mempool.space/api/blocks/tip/height)" >> $GITHUB_OUTPUT
+      - name: Write block height to file
+        env:
+          BLOCK_HEIGHT: ${{ steps.getBlockHeight.outputs.blockHeight }}
+        run: mkdir -p output && echo "$BLOCK_HEIGHT" > output/version.txt
       - name: gzip build for LittleFS
         run: find dist -type f ! -name ".*" -exec sh -c 'mkdir -p "build_gz/$(dirname "${1#dist/}")" && gzip -k "$1" -c > "build_gz/${1#dist/}".gz' _ {} \;
+      - name: Write git rev to file
+        run: echo "$GITHUB_SHA" > build_gz/fs_hash.txt && echo "$GITHUB_SHA" > output/commit.txt
       - name: Check GZipped directory size
         run: |
           # Set the threshold size in bytes
@@ -84,25 +95,42 @@ jobs:
             echo "Directory size exceeds the threshold of $THRESHOLD bytes"
             exit 1
           else
-            echo "Directory size is within the threshold"
+            echo "Directory size is within the threshold $DIRECTORY_SIZE"
           fi
       - name: Create tarball
         run: tar czf webui.tgz --strip-components=1 dist
       - name: Build LittleFS
-        run: /tmp/mklittlefs/mklittlefs -c build_gz -s 409600 littlefs.bin
+        run: |
+          set -e
+          /tmp/mklittlefs/mklittlefs -c build_gz -s 409600 output/littlefs.bin
       - name: Upload artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           path: |
             webui.tgz
-            littlefs.bin
+            output/littlefs.bin
       - name: Create release
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         uses: ncipollo/release-action@v1
         with:
           tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
           commit: main
           name: release-${{ steps.getBlockHeight.outputs.blockHeight }}
-          artifacts: 'littlefs.bin,webui.tgz'
+          artifacts: 'output/littlefs.bin,webui.tgz'
           allowUpdates: true
           removeArtifacts: true
           makeLatest: true
+      - name: Pushes littlefs.bin to web flasher
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          SSH_DEPLOY_KEY: ${{ secrets.SSH_DEPLOY_KEY }}
+        with:
+          source-directory: output/
+          target-directory: webui/
+          destination-github-username: 'btclock'
+          destination-repository-name: 'web-flasher'
+          target-branch: main
+          user-name: ${{github.actor}}
+          user-email: ${{github.actor}}@users.noreply.github.com

.gitignore

@@ -12,3 +12,4 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 yarn-error.log
+test-results/

README.md

@@ -1,10 +1,11 @@
 # BTClock WebUI
 
-[![BTClock CI](https://github.com/btclock/webui/actions/workflows/workflow.yml/badge.svg)](https://github.com/btclock/webui2/actions/workflows/workflow.yml)
+[![Latest release](https://git.btclock.dev/btclock/webui/badges/release.svg)](https://git.btclock.dev/btclock/webui/releases/latest)
+[![BTClock CI](https://git.btclock.dev/btclock/webui/badges/workflows/build.yaml/badge.svg)](https://git.btclock.dev/btclock/webui/actions?workflow=build.yaml&actor=0&status=0)
 
 The web user-interface for the BTClock, based on Svelte-kit. It uses Bootstrap for the lay-out.
 
-![Screenshot](doc/screenshot.webp)
+![Screenshot](doc/screenshot-light.webp)
 ![Screenshot Dark](doc/screenshot-dark.webp)
 
 ## Developing
@@ -30,7 +31,11 @@ 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:
 

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

extra/icons/flash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,2V13H10V22L17,10H13L17,2H7Z" /></svg>

extra/icons/lightning-bolt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15H6L13 1V9H18L11 23V15Z" /></svg>

extra/icons/pickaxe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.79,10.62L3.5,21.9L2.1,20.5L13.38,9.21L14.79,10.62M19.27,7.73L19.86,7.14L19.07,6.35L19.71,5.71L18.29,4.29L17.65,4.93L16.86,4.14L16.27,4.73C14.53,3.31 12.57,2.17 10.47,1.37L9.64,3.16C11.39,4.08 13,5.19 14.5,6.5L14,7L17,10L17.5,9.5C18.81,11 19.92,12.61 20.84,14.36L22.63,13.53C21.83,11.43 20.69,9.47 19.27,7.73Z" /></svg>

extra/icons/rocket.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 22L16.14 20.45C16.84 18.92 17.34 17.34 17.65 15.73L20 22M7.86 20.45L4 22L6.35 15.73C6.66 17.34 7.16 18.92 7.86 20.45M12 2C12 2 17 4 17 12C17 15.1 16.25 17.75 15.33 19.83C15 20.55 14.29 21 13.5 21H10.5C9.71 21 9 20.55 8.67 19.83C7.76 17.75 7 15.1 7 12C7 4 12 2 12 2M12 12C13.1 12 14 11.1 14 10C14 8.9 13.1 8 12 8C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12Z" /></svg>

package.json

@@ -5,43 +5,69 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"build:test": "vite build --config vite.config.test.ts",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"postinstall": "patch-package"
+		"postinstall": "patch-package",
+		"test": "prettier --write . && eslint . && npm run test:integration && npm run test:unit",
+		"test:integration": "playwright test",
+		"test:screenshots": "playwright test -c playwright.screenshot.config.ts",
+		"doc:update-screenshots": "playwright test -c playwright.doc-screenshot.config.ts",
+		"test:unit": "vitest"
 	},
 	"devDependencies": {
 		"@rollup/plugin-json": "^6.0.1",
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/adapter-static": "^3.0.0",
-		"@sveltejs/kit": "^1.27.4",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@testing-library/svelte": "^5.2.1",
 		"@types/swagger-ui": "^3.52.4",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/eslint-plugin": "^8.7.0",
-		"@typescript-eslint/parser": "^6.0.0",
+		"@typescript-eslint/parser": "^8.7.0",
-		"eslint": "^8.28.0",
+		"@vitest/ui": "^2.0.5",
-		"eslint-config-prettier": "^9.0.0",
+		"eslint": "^9.11.0",
-		"eslint-plugin-svelte": "^2.30.0",
+		"eslint-config-prettier": "^9.1.0",
-		"prettier": "^3.0.0",
+		"eslint-plugin-svelte": "^2.36.0",
-		"prettier-plugin-svelte": "^3.0.0",
+		"jsdom": "^25.0.0",
-		"sass": "^1.69.5",
+		"prettier": "^3.3.3",
-		"svelte": "^4.0.5",
+		"prettier-plugin-svelte": "^3.2.6",
-		"svelte-check": "^3.6.0",
+		"rollup-plugin-visualizer": "^5.12.0",
-		"svelte-preprocess": "^5.1.1",
+		"sass": "^1.79.3",
-		"tslib": "^2.4.1",
+		"sharp": "^0.33.5",
-		"typescript": "^5.0.0",
+		"svelte": "^4.2.19",
-		"vite": "^4.4.2"
+		"svelte-check": "^4.0.2",
+		"svelte-preprocess": "^6.0.2",
+		"tslib": "^2.7.0",
+		"typescript": "^5.5.4",
+		"typescript-eslint": "^8.7.0",
+		"vite": "^5.4.7",
+		"vitest": "^2.1.1"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource/antonio": "^5.0.17",
+		"@fontsource/antonio": "^5.1.0",
-		"@fontsource/oswald": "^5.0.17",
+		"@fontsource/oswald": "^5.1.0",
-		"@fontsource/ubuntu": "^5.0.8",
+		"@fontsource/ubuntu": "^5.1.0",
-		"bootstrap": "^5.3.2",
+		"@noble/secp256k1": "^2.1.0",
+		"@playwright/test": "^1.46.0",
+		"@popperjs/core": "^2.11.8",
+		"@sveltestrap/sveltestrap": "^6.2.7",
+		"@testing-library/jest-dom": "^6.5.0",
+		"bootstrap": "^5.3.3",
+		"bootstrap-icons": "^1.11.3",
+		"msgpack-es": "^0.0.5",
+		"nostr-tools": "^2.7.1",
 		"patch-package": "^8.0.0",
-		"svelte-i18n": "^4.0.0",
+		"svelte-bootstrap-icons": "^3.1.1",
-		"sveltestrap": "^5.11.2",
+		"svelte-i18n": "^4.0.0"
-		"swagger-ui": "^5.10.0"
+	},
+	"resolutions": {
+		"es5-ext": ">=0.10.64",
+		"ws": ">=8.18.0",
+		"micromatch": ">=4.0.8"
 	}
 }

patches/@sveltejs+kit+2.16.0+001+initial.patch

@@ -1,17 +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 a7a886d..d3433b5 100644
+index ddbe746..1d926a4 100644
 --- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
 +++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
-@@ -561,9 +561,9 @@ function kit({ svelte_config }) {
+@@ -658,9 +658,9 @@ async function kit({ svelte_config }) {
- 							input,
  							output: {
- 								format: 'esm',
+ 								format: inline ? 'iife' : 'esm',
+ 								name: `__sveltekit_${version_hash}.app`,
 -								entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].${ext}`,
--								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].${ext}`,
+-								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
 -								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
 +								entryFileNames: ssr ? '[name].js' : `${prefix}/[hash].${ext}`,
-+								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
++								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/c[hash].${ext}`,
-+								assetFileNames: `${prefix}/assets/[hash][extname]`,
++								assetFileNames: `${prefix}/a[hash][extname]`,
  								hoistTransitiveImports: false,
- 								sourcemapIgnoreList
+ 								sourcemapIgnoreList,
- 							},
+ 								manualChunks: split ? undefined : () => 'bundle',

playwright.config.ts

@@ -0,0 +1,17 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	use: {
+		locale: 'en-GB',
+		timezoneId: 'Europe/Amsterdam'
+	},
+	webServer: {
+		command: 'npm run build:test && npm run preview',
+		port: 4173
+	},
+	reporter: process.env.CI ? 'github' : 'list',
+	testDir: 'tests/playwright',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;

playwright.doc-screenshot.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	use: {
+		locale: 'en-GB',
+		timezoneId: 'Europe/Amsterdam'
+	},
+	webServer: {
+		command: 'yarn build && yarn preview',
+		port: 4173
+	},
+	testDir: './tests/doc-screenshots',
+	outputDir: './test-results/screenshots',
+	projects: [
+		{
+			name: 'Light Mode',
+			use: {
+				viewport: { width: 1440, height: 900 },
+				colorScheme: 'light'
+			}
+		},
+		{
+			name: 'Dark Mode',
+			use: { viewport: { width: 1440, height: 900 }, colorScheme: 'dark' }
+		}
+	]
+});

playwright.screenshot.config.ts

@@ -0,0 +1,67 @@
+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 } }
+		},
+		{
+			name: 'MacBook Pro 14 inch Safari Dark Mode',
+			use: {
+				...devices['Desktop Safari'],
+				viewport: { width: 1512, height: 982 },
+				colorScheme: 'dark'
+			}
+		}
+	]
+});

renovate.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
+	"extends": ["config:recommended"],
+	"packageRules": [
+		{
+			"matchUpdateTypes": ["major"],
+			"enabled": false,
+			"matchPackageNames": ["*"]
+		}
+	],
+	"npm": {
+		"rangeStrategy": "update-lockfile"
+	}
+}

src/icons/PickaxeIcon.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+	><path
+		d="M14.79,10.62L3.5,21.9L2.1,20.5L13.38,9.21L14.79,10.62M19.27,7.73L19.86,7.14L19.07,6.35L19.71,5.71L18.29,4.29L17.65,4.93L16.86,4.14L16.27,4.73C14.53,3.31 12.57,2.17 10.47,1.37L9.64,3.16C11.39,4.08 13,5.19 14.5,6.5L14,7L17,10L17.5,9.5C18.81,11 19.92,12.61 20.84,14.36L22.63,13.53C21.83,11.43 20.69,9.47 19.27,7.73Z"
+	/></svg
+>

src/icons/RocketIcon.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+	><title>rocket-launch</title><path
+		d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z"
+	/></svg
+>

src/icons/ZapIcon.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+	><title>flash</title><path d="M7,2V13H10V22L17,10H13L17,2H7Z" /></svg
+>

src/lib/components/ColorSchemeSwitcher.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
+
+	type Theme = 'light' | 'dark' | 'auto';
+
+	let theme: Theme = 'auto';
+
+	// Set the theme based on user selection and store it in localStorage
+	function setTheme(newTheme: Theme) {
+		theme = newTheme;
+		localStorage.setItem('theme', newTheme);
+		applyTheme(newTheme);
+	}
+
+	// Apply the selected theme to the document
+	function applyTheme(selectedTheme: Theme) {
+		if (selectedTheme === 'auto') {
+			const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+			document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
+		} else {
+			document.documentElement.setAttribute('data-bs-theme', selectedTheme);
+		}
+	}
+
+	// On component mount, check localStorage and apply the saved theme
+	onMount(() => {
+		const savedTheme = (localStorage.getItem('theme') as Theme) || 'auto';
+		applyTheme(savedTheme);
+		theme = savedTheme;
+
+		// Listen for changes in the system color scheme preference
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		mediaQuery.addEventListener('change', () => {
+			if (theme === 'auto') {
+				applyTheme('auto');
+			}
+		});
+	});
+</script>
+
+<Dropdown inNavbar>
+	<DropdownToggle nav caret>
+		{theme === 'auto' ? '🌗' : theme === 'dark' ? '🌙' : '☀️'}
+	</DropdownToggle>
+	<DropdownMenu end>
+		<DropdownItem active={theme === 'light'} on:click={() => setTheme('light')}
+			>☀️ Light</DropdownItem
+		>
+		<DropdownItem active={theme === 'dark'} on:click={() => setTheme('dark')}>🌙 Dark</DropdownItem>
+		<DropdownItem active={theme === 'auto'} on:click={() => setTheme('auto')}>🌗 Auto</DropdownItem>
+	</DropdownMenu>
+</Dropdown>

src/lib/components/Placeholder.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let value: unknown;
+	export let checkValue: unknown = null;
+	export let width: number = 25;
+
+	$: valueToCheck = checkValue === null ? value : checkValue;
+</script>
+
+<span class:placeholder={!valueToCheck} class={!valueToCheck ? `w-${width}` : ''}>
+	{valueToCheck ? value : ''}
+</span>

src/lib/components/SettingsInput.svelte

@@ -0,0 +1,65 @@
+<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;
+	export let onInput: (() => void) | undefined = undefined;
+
+	const onInputHandler = () => {
+		onInput?.();
+	};
+</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}
+				on:input={onInputHandler}
+				spellcheck={type === 'text' ? 'false' : undefined}
+			/>
+			{#if suffix}
+				<InputGroupText>{suffix}</InputGroupText>
+			{/if}
+			<slot />
+		</InputGroup>
+		{#if helpText}
+			<FormText>{helpText}</FormText>
+		{/if}
+	</Col>
+</Row>

src/lib/components/SettingsSelect.svelte

@@ -0,0 +1,34 @@
+<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

@@ -0,0 +1,15 @@
+<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/ToggleHeader.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Fade } from '@sveltestrap/sveltestrap';
+	import CaretRightFill from 'svelte-bootstrap-icons/lib/CaretRightFill.svelte';
+	import CaretDownFill from 'svelte-bootstrap-icons/lib/CaretDownFill.svelte';
+
+	export let header;
+	export let defaultOpen = false;
+	export let isOpen = defaultOpen;
+</script>
+
+<h4 style="cursor: pointer">
+	<span
+		role="link"
+		on:click={() => (isOpen = !isOpen)}
+		tabindex="0"
+		on:keypress={() => (isOpen = !isOpen)}
+	>
+		{#if isOpen}
+			<CaretDownFill></CaretDownFill>
+		{:else}
+			<CaretRightFill></CaretRightFill>
+		{/if}
+		{header}
+	</span>
+</h4>
+<Fade {isOpen}>
+	<slot></slot>
+</Fade>

src/lib/components/index.ts

@@ -0,0 +1,6 @@
+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';
+export { default as Placeholder } from './Placeholder.svelte';

src/lib/components/settings/DataSourceSettings.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Col, FormGroup, Input, InputGroupText } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { isValidHexPubKey, getPubKey, isValidNpub } from '$lib';
+	import { createEventDispatcher } from 'svelte';
+	import { DataSourceType } from '$lib/types/dataSource';
+
+	const dispatch = createEventDispatcher();
+	export let settings;
+	export let isOpen = false;
+
+	const checkValidNostrPubkey = (key: string) => {
+		$settings[key] = $settings[key].trim();
+		if (isValidNpub($settings[key])) {
+			dispatch('showToast', {
+				color: 'info',
+				text: $_('section.settings.convertingValidNpub')
+			});
+		}
+
+		let ret = getPubKey($settings[key]);
+		if (ret) $settings[key] = ret;
+	};
+</script>
+
+<Row>
+	<ToggleHeader header={$_('section.settings.section.dataSource')} bind:isOpen defaultOpen={false}>
+		<Row>
+			<Col>
+				<h5>Data Source</h5>
+				<FormGroup>
+					<Row>
+						<Col xs="12" xl="6" class="mb-2">
+							<Input
+								type="radio"
+								id="btclock_source"
+								name="dataSource"
+								bind:group={$settings.dataSource}
+								value={DataSourceType.BTCLOCK_SOURCE}
+								label={$_('section.settings.dataSource.btclock')}
+							/>
+						</Col>
+						<Col xs="12" xl="6" class="mb-2">
+							<Input
+								type="radio"
+								id="third_party_source"
+								name="dataSource"
+								bind:group={$settings.dataSource}
+								value={DataSourceType.THIRD_PARTY_SOURCE}
+								label={$_('section.settings.dataSource.thirdParty')}
+							/>
+						</Col>
+						{#if $settings.nostrRelay}
+							<Col xs="12" xl="6" class="mb-2">
+								<Input
+									type="radio"
+									id="nostr_source"
+									name="dataSource"
+									bind:group={$settings.dataSource}
+									value={DataSourceType.NOSTR_SOURCE}
+									label={$_('section.settings.dataSource.nostr')}
+								/>
+							</Col>
+						{/if}
+						<Col xs="12" xl="6" class="mb-2">
+							<Input
+								type="radio"
+								id="custom_source"
+								name="dataSource"
+								bind:group={$settings.dataSource}
+								value={DataSourceType.CUSTOM_SOURCE}
+								label={$_('section.settings.dataSource.custom')}
+							/>
+						</Col>
+					</Row>
+				</FormGroup>
+			</Col>
+		</Row>
+
+		{#if $settings.dataSource === DataSourceType.THIRD_PARTY_SOURCE}
+			<SettingsInput
+				id="mempoolInstance"
+				label={$_('section.settings.mempoolnstance')}
+				bind:value={$settings.mempoolInstance}
+				required={true}
+				size={$uiSettings.inputSize}
+			>
+				<InputGroupText>
+					<Input
+						type="checkbox"
+						bind:checked={$settings.mempoolSecure}
+						bsSize={$uiSettings.inputSize}
+					/>
+					HTTPS
+				</InputGroupText>
+			</SettingsInput>
+		{/if}
+
+		{#if $settings.dataSource === DataSourceType.NOSTR_SOURCE}
+			<SettingsInput
+				id="nostrRelay"
+				label={$_('section.settings.nostrRelay')}
+				bind:value={$settings.nostrRelay}
+				required={true}
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsInput
+				id="nostrPubKey"
+				label={$_('section.settings.nostrPubKey')}
+				bind:value={$settings.nostrPubKey}
+				required={true}
+				minlength="64"
+				invalid={!isValidHexPubKey($settings.nostrPubKey)}
+				helpText={!isValidHexPubKey($settings.nostrPubKey)
+					? $_('section.settings.invalidNostrPubkey')
+					: undefined}
+				size={$uiSettings.inputSize}
+				onChange={() => checkValidNostrPubkey('nostrPubKey')}
+				onInput={() => checkValidNostrPubkey('nostrPubKey')}
+			/>
+		{/if}
+
+		{#if $settings.dataSource === DataSourceType.CUSTOM_SOURCE}
+			<SettingsInput
+				id="ceEndpoint"
+				label={$_('section.settings.ceEndpoint')}
+				bind:value={$settings.ceEndpoint}
+				required={true}
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="ceDisableSSL"
+				bind:checked={$settings.ceDisableSSL}
+				label={$_('section.settings.ceDisableSSL')}
+				size={$uiSettings.inputSize}
+			/>
+		{/if}
+	</ToggleHeader>
+</Row>

src/lib/components/settings/DisplaySettings.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch, SettingsSelect } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { PUBLIC_BASE_URL } from '$lib/config';
+
+	export let settings;
+	export let isOpen = false;
+
+	const onFlBrightnessChange = async () => {
+		await fetch(`${PUBLIC_BASE_URL}/api/frontlight/brightness/${$settings.flMaxBrightness}`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+	};
+
+	const setTextColor = () => {
+		$settings.invertedColor = !$settings.invertedColor;
+	};
+
+	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>
+	<ToggleHeader
+		header={$_('section.settings.section.displaysAndLed')}
+		bind:isOpen
+		defaultOpen={false}
+	>
+		<SettingsSelect
+			id="textColor"
+			label={$_('section.settings.textColor')}
+			bind:value={$settings.invertedColor}
+			options={textColorOptions}
+			size={$uiSettings.inputSize}
+			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')}
+			bind:value={$settings.timePerScreen}
+			type="number"
+			min={1}
+			step={1}
+			required={true}
+			suffix={$_('time.minutes')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="fullRefreshMin"
+			label={$_('section.settings.fullRefreshEvery')}
+			bind:value={$settings.fullRefreshMin}
+			type="number"
+			min={1}
+			step={1}
+			required={true}
+			suffix={$_('time.minutes')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="minSecPriceUpd"
+			label={$_('section.settings.timeBetweenPriceUpdates')}
+			bind:value={$settings.minSecPriceUpd}
+			type="number"
+			min={1}
+			step={1}
+			suffix={$_('time.seconds')}
+			helpText={$_('section.settings.shortAmountsWarning')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="ledBrightness"
+			label={$_('section.settings.ledBrightness')}
+			bind:value={$settings.ledBrightness}
+			type="range"
+			min={0}
+			max={255}
+			step={1}
+			size={$uiSettings.inputSize}
+		/>
+
+		{#if $settings.hasFrontlight && !$settings.flDisable}
+			<SettingsInput
+				id="flMaxBrightness"
+				label={$_('section.settings.flMaxBrightness')}
+				bind:value={$settings.flMaxBrightness}
+				type="range"
+				min={0}
+				max={4095}
+				step={1}
+				size={$uiSettings.inputSize}
+				onChange={onFlBrightnessChange}
+			/>
+
+			<SettingsInput
+				id="flEffectDelay"
+				label={$_('section.settings.flEffectDelay')}
+				bind:value={$settings.flEffectDelay}
+				type="range"
+				min={5}
+				max={300}
+				step={1}
+				size={$uiSettings.inputSize}
+			/>
+		{/if}
+
+		{#if !$settings.flDisable && $settings.hasLightLevel}
+			<SettingsInput
+				id="luxLightToggle"
+				label={`${$_('section.settings.luxLightToggle')} (${$settings.luxLightToggle})`}
+				bind:value={$settings.luxLightToggle}
+				type="range"
+				min={0}
+				max={1000}
+				step={1}
+				helpText={$_('section.settings.luxLightToggleText')}
+				size={$uiSettings.inputSize}
+			/>
+		{/if}
+
+		<Row>
+			<SettingsSwitch
+				id="ledTestOnPower"
+				bind:checked={$settings.ledTestOnPower}
+				label={$_('section.settings.ledPowerOnTest')}
+				size={$uiSettings.inputSize}
+			/>
+
+			<SettingsSwitch
+				id="ledFlashOnUpd"
+				bind:checked={$settings.ledFlashOnUpd}
+				label={$_('section.settings.ledFlashOnBlock')}
+				size={$uiSettings.inputSize}
+			/>
+
+			<SettingsSwitch
+				id="disableLeds"
+				bind:checked={$settings.disableLeds}
+				label={$_('section.settings.disableLeds')}
+				size={$uiSettings.inputSize}
+			/>
+
+			{#if $settings.hasFrontlight}
+				<SettingsSwitch
+					id="flDisable"
+					bind:checked={$settings.flDisable}
+					label={$_('section.settings.flDisable')}
+					size={$uiSettings.inputSize}
+				/>
+			{/if}
+
+			{#if $settings.hasFrontlight && !$settings.flDisable}
+				<SettingsSwitch
+					id="flAlwaysOn"
+					bind:checked={$settings.flAlwaysOn}
+					label={$_('section.settings.flAlwaysOn')}
+					size={$uiSettings.inputSize}
+				/>
+
+				<SettingsSwitch
+					id="flFlashOnUpd"
+					bind:checked={$settings.flFlashOnUpd}
+					label={$_('section.settings.flFlashOnUpd')}
+					size={$uiSettings.inputSize}
+				/>
+
+				{#if $settings.hasLightLevel}
+					<SettingsSwitch
+						id="flOffWhenDark"
+						bind:checked={$settings.flOffWhenDark}
+						label={$_('section.settings.flOffWhenDark')}
+						size={$uiSettings.inputSize}
+					/>
+				{/if}
+			{/if}
+		</Row>
+	</ToggleHeader>
+</Row>

src/lib/components/settings/ExtraFeaturesSettings.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch, SettingsSelect } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Button, Col } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { isValidHexPubKey, getPubKey, isValidNpub } from '$lib';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	export let settings;
+	export let isOpen = false;
+	export let miningPoolMap: Map<string, string>;
+
+	let validBitaxe = false;
+	let validLocalPool = false;
+	const testBitaxe = async () => {
+		try {
+			const response = await fetch(`http://${$settings.bitaxeHostname}/api/system/info`);
+
+			if (!response.ok) {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to BitAxe HTTP error! status: ${response.status}`
+				});
+				validBitaxe = false;
+				throw new Error();
+			}
+
+			const systemInfo = await response.json();
+			dispatch('showToast', {
+				color: 'success',
+				text: `Connected to BitAxe ${systemInfo.ASICModel} (Board version ${systemInfo.boardVersion}) running firmware ${systemInfo.version}.\r\nCurrent hashrate ${Math.round(systemInfo.hashRate)} GH/s`
+			});
+			validBitaxe = true;
+		} catch (error) {
+			if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to BitAxe, make sure you are connected to the same network.`
+				});
+			}
+			console.error('Failed to fetch Bitaxe system info:', error);
+			validBitaxe = false;
+		}
+	};
+
+	const checkValidNostrPubkey = (key: string) => {
+		$settings[key] = $settings[key].trim();
+		if (isValidNpub($settings[key])) {
+			dispatch('showToast', {
+				color: 'info',
+				text: $_('section.settings.convertingValidNpub')
+			});
+		}
+
+		let ret = getPubKey($settings[key]);
+		if (ret) $settings[key] = ret;
+	};
+
+	$: poolOptions = ($settings.availablePools || []).map((pool: string): [string, string] => [
+		miningPoolMap.get(pool) || pool,
+		pool
+	]);
+
+	const testLocalPool = async () => {
+		try {
+			const controller = new AbortController();
+			const timeoutId = setTimeout(() => controller.abort(), 1000);
+
+			const response = await fetch(
+				`http://${$settings.localPoolEndpoint}/api/client/${$settings.miningPoolUser}`,
+				{ signal: controller.signal }
+			);
+			clearTimeout(timeoutId);
+
+			if (!response.ok) {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to local pool! status: ${response.status}`
+				});
+				validLocalPool = false;
+				throw new Error();
+			}
+
+			const poolInfo = await response.json();
+			dispatch('showToast', {
+				color: 'success',
+				text: `Can connect to local public pool, ${poolInfo.workersCount} workers`
+			});
+			validLocalPool = true;
+		} catch (error) {
+			if (error.name === 'AbortError') {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Connection to local pool timed out after 1 second`
+				});
+			} else {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to local pool, check the endpoint and make sure you are connected to the same network.`
+				});
+			}
+			console.error('Failed to fetch local pool info:', error);
+			validLocalPool = false;
+		}
+	};
+</script>
+
+<Row>
+	<ToggleHeader
+		header={$_('section.settings.section.extraFeatures')}
+		bind:isOpen
+		defaultOpen={false}
+	>
+		<!--- Time based do not disturb settings -->
+		<SettingsSwitch
+			id="timeBasedDnd"
+			label={$_('section.settings.timeBasedDnd')}
+			bind:checked={$settings.dnd.timeBasedEnabled}
+			size={$uiSettings.inputSize}
+		/>
+		{#if $settings.dnd.timeBasedEnabled}
+			<Row>
+				<Col>
+					<SettingsInput
+						id="dndStartHour"
+						type="number"
+						min="0"
+						max="23"
+						label={$_('section.settings.dndStartHour')}
+						bind:value={$settings.dnd.startHour}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+				<Col>
+					<SettingsInput
+						id="dndStartMinute"
+						type="number"
+						min="0"
+						max="59"
+						label={$_('section.settings.dndStartMinute')}
+						bind:value={$settings.dnd.startMinute}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+			</Row>
+			<Row>
+				<Col>
+					<SettingsInput
+						id="dndEndHour"
+						type="number"
+						min="0"
+						max="23"
+						label={$_('section.settings.dndEndHour')}
+						bind:value={$settings.dnd.endHour}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+				<Col>
+					<SettingsInput
+						id="dndEndMinute"
+						type="number"
+						min="0"
+						max="59"
+						label={$_('section.settings.dndEndMinute')}
+						bind:value={$settings.dnd.endMinute}
+						size={$uiSettings.inputSize}
+					/>
+				</Col>
+			</Row>
+		{/if}
+
+		<!-- BitAxe Settings -->
+		{#if 'bitaxeEnabled' in $settings}
+			<Row class="mb-3">
+				<Col>
+					<h5>BitAxe</h5>
+					<SettingsSwitch
+						id="bitaxeEnabled"
+						bind:checked={$settings.bitaxeEnabled}
+						label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
+						size={$uiSettings.inputSize}
+						col={{ md: '12', xl: '12', xxl: '12' }}
+					/>
+					{#if $settings.bitaxeEnabled}
+						<SettingsInput
+							id="bitaxeHostname"
+							label={$_('section.settings.bitaxeHostname')}
+							bind:value={$settings.bitaxeHostname}
+							required={true}
+							valid={validBitaxe}
+							size={$uiSettings.inputSize}
+						>
+							<Button type="button" color="success" on:click={testBitaxe}>
+								{$_('test', { default: 'Test' })}
+							</Button>
+						</SettingsInput>
+					{/if}
+				</Col>
+			</Row>
+		{/if}
+
+		<!-- Mining Pool Settings -->
+		{#if 'miningPoolStats' in $settings}
+			<Row class="mb-3">
+				<Col>
+					<h5>Mining Pool stats</h5>
+					<SettingsSwitch
+						id="miningPoolStats"
+						bind:checked={$settings.miningPoolStats}
+						label="{$_('section.settings.miningPoolStats')} ({$_('restartRequired')})"
+						size={$uiSettings.inputSize}
+						col={{ md: '12', xl: '12', xxl: '12' }}
+					/>
+					{#if $settings.miningPoolStats}
+						<SettingsSelect
+							id="miningPoolName"
+							label={$_('section.settings.miningPoolName')}
+							bind:value={$settings.miningPoolName}
+							options={poolOptions}
+							size={$uiSettings.inputSize}
+							selectClass={$uiSettings.selectClass}
+						/>
+						{#if $settings.miningPoolName === 'local_public_pool'}
+							<SettingsInput
+								id="localPoolEndpoint"
+								label={$_('section.settings.localPoolEndpoint', { default: 'Local Pool Endpoint' })}
+								bind:value={$settings.localPoolEndpoint}
+								placeholder="umbrel.local:2019"
+								required={true}
+								valid={validLocalPool}
+								size={$uiSettings.inputSize}
+							>
+								<Button type="button" color="success" on:click={testLocalPool}>
+									{$_('test', { default: 'Test' })}
+								</Button>
+							</SettingsInput>
+						{/if}
+						<SettingsInput
+							id="miningPoolUser"
+							label={$_('section.settings.miningPoolUser')}
+							bind:value={$settings.miningPoolUser}
+							required={true}
+							size={$uiSettings.inputSize}
+						/>
+					{/if}
+				</Col>
+			</Row>
+		{/if}
+
+		<!-- Nostr Settings -->
+		{#if 'nostrZapNotify' in $settings}
+			<Row class="mb-3">
+				<Col>
+					<h5>Nostr</h5>
+					<SettingsInput
+						id="nostrRelay"
+						label={$_('section.settings.nostrRelay')}
+						bind:value={$settings.nostrRelay}
+						required={true}
+						size={$uiSettings.inputSize}
+					/>
+					<SettingsSwitch
+						id="nostrZapNotify"
+						bind:checked={$settings.nostrZapNotify}
+						label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
+						size={$uiSettings.inputSize}
+						col={{ md: '12', xl: '12', xxl: '12' }}
+					/>
+					{#if $settings.nostrZapNotify}
+						<Row>
+							<SettingsSwitch
+								id="ledFlashOnZap"
+								bind:checked={$settings.ledFlashOnZap}
+								label={$_('section.settings.ledFlashOnZap')}
+								size={$uiSettings.inputSize}
+							/>
+							{#if $settings.hasFrontlight && !$settings.flDisable}
+								<SettingsSwitch
+									id="flFlashOnZap"
+									bind:checked={$settings.flFlashOnZap}
+									label={$_('section.settings.flFlashOnZap')}
+									size={$uiSettings.inputSize}
+								/>
+							{/if}
+						</Row>
+						<SettingsInput
+							id="nostrZapPubkey"
+							label={$_('section.settings.nostrZapPubkey')}
+							bind:value={$settings.nostrZapPubkey}
+							required={true}
+							minlength="64"
+							invalid={!isValidHexPubKey($settings.nostrZapPubkey)}
+							helpText={!isValidHexPubKey($settings.nostrZapPubkey)
+								? $_('section.settings.invalidNostrPubkey')
+								: undefined}
+							size={$uiSettings.inputSize}
+							onChange={() => checkValidNostrPubkey('nostrZapPubkey')}
+							onInput={() => checkValidNostrPubkey('nostrZapPubkey')}
+						/>
+					{/if}
+				</Col>
+			</Row>
+		{/if}
+	</ToggleHeader>
+</Row>

src/lib/components/settings/ScreenSpecificSettings.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { SettingsSwitch } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Col } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { DataSourceType } from '$lib/types/dataSource';
+
+	export let settings;
+	export let isOpen = false;
+</script>
+
+<Row>
+	<ToggleHeader
+		header={$_('section.settings.section.screenSettings')}
+		bind:isOpen
+		defaultOpen={true}
+	>
+		<Row>
+			<SettingsSwitch
+				id="stealFocus"
+				bind:checked={$settings.stealFocus}
+				label={$_('section.settings.StealFocusOnNewBlock')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="mcapBigChar"
+				bind:checked={$settings.mcapBigChar}
+				label={$_('section.settings.useBigCharsMcap')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="useBlkCountdown"
+				bind:checked={$settings.useBlkCountdown}
+				label={$_('section.settings.useBlkCountdown')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="useSatsSymbol"
+				bind:checked={$settings.useSatsSymbol}
+				label={$_('section.settings.useSatsSymbol')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="suffixPrice"
+				bind:checked={$settings.suffixPrice}
+				label={$_('section.settings.suffixPrice')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="mowMode"
+				bind:checked={$settings.mowMode}
+				label={$_('section.settings.mowMode')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+				disabled={!$settings.suffixPrice}
+			/>
+			<SettingsSwitch
+				id="suffixShareDot"
+				bind:checked={$settings.suffixShareDot}
+				label={$_('section.settings.suffixShareDot')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+				disabled={!$settings.suffixPrice}
+			/>
+			<SettingsSwitch
+				id="verticalDesc"
+				bind:checked={$settings.verticalDesc}
+				label={$_('section.settings.verticalDesc')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+
+			{#if !$settings.actCurrencies}
+				<SettingsSwitch
+					id="fetchEurPrice"
+					bind:checked={$settings.fetchEurPrice}
+					label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
+					size={$uiSettings.inputSize}
+					col={{ md: '6', xl: '12', xxl: '6' }}
+				/>
+			{/if}
+		</Row>
+		<Row>
+			<h5>{$_('section.settings.screens')}</h5>
+			{#if $settings.screens}
+				{#each $settings.screens as s}
+					<SettingsSwitch
+						id="screens_{s.id}"
+						bind:checked={s.enabled}
+						label={s.name}
+						size={$uiSettings.inputSize}
+						col={{ md: '6', xl: '12', xxl: '6' }}
+					/>
+				{/each}
+			{/if}
+		</Row>
+		{#if $settings.actCurrencies && $settings.dataSource == DataSourceType.BTCLOCK_SOURCE}
+			<Row>
+				<h5>{$_('section.settings.currencies')}</h5>
+				<small>{$_('restartRequired')}</small>
+				{#if $settings.availableCurrencies}
+					{#each $settings.availableCurrencies as c}
+						<Col md="6" xl="12" xxl="6">
+							<div class="form-check form-control-{$uiSettings.inputSize}">
+								<input
+									id="currency_{c}"
+									bind:group={$settings.actCurrencies}
+									value={c}
+									type="checkbox"
+									class="form-check-input"
+								/>
+								<label class="form-check-label" for="currency_{c}">{c}</label>
+							</div>
+						</Col>
+					{/each}
+				{/if}
+			</Row>
+		{/if}
+	</ToggleHeader>
+</Row>

src/lib/components/settings/SystemSettings.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Button } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
+	import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
+	import TimezoneSelector from './TimezoneSelector.svelte';
+
+	export let settings;
+	export let isOpen = false;
+
+	let showPassword = false;
+</script>
+
+<Row>
+	<ToggleHeader header={$_('section.settings.section.system')} bind:isOpen defaultOpen={false}>
+		<TimezoneSelector
+			value={$settings.tzString}
+			onChange={(value) => ($settings.tzString = value)}
+			size={$uiSettings.inputSize}
+		/>
+
+		{#if $settings.httpAuthEnabled}
+			<SettingsInput
+				id="httpAuthUser"
+				label={$_('section.settings.httpAuthUser')}
+				bind:value={$settings.httpAuthUser}
+				required={true}
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsInput
+				id="httpAuthPass"
+				label={$_('section.settings.httpAuthPass')}
+				bind:value={$settings.httpAuthPass}
+				type={showPassword ? 'text' : 'password'}
+				required={true}
+				size={$uiSettings.inputSize}
+			>
+				<Button
+					type="button"
+					on:click={() => (showPassword = !showPassword)}
+					color={showPassword ? 'success' : 'danger'}
+				>
+					{#if !showPassword}<EyeIcon />{:else}<EyeSlashIcon />{/if}
+				</Button>
+			</SettingsInput>
+		{/if}
+
+		<SettingsInput
+			id="hostnamePrefix"
+			label={$_('section.settings.hostnamePrefix')}
+			bind:value={$settings.hostnamePrefix}
+			required={true}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="wpTimeout"
+			label={$_('section.settings.wpTimeout')}
+			bind:value={$settings.wpTimeout}
+			type="number"
+			min={1}
+			step={1}
+			required={true}
+			suffix={$_('time.seconds')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<Row>
+			<SettingsSwitch
+				id="otaEnabled"
+				bind:checked={$settings.otaEnabled}
+				label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="mdnsEnabled"
+				bind:checked={$settings.mdnsEnabled}
+				label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="httpAuthEnabled"
+				bind:checked={$settings.httpAuthEnabled}
+				label="{$_('section.settings.httpAuthEnabled')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="enableDebugLog"
+				bind:checked={$settings.enableDebugLog}
+				label="{$_('section.settings.enableDebugLog')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+		</Row>
+	</ToggleHeader>
+</Row>

src/lib/components/settings/TimezoneSelector.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { Row, Button, Col, Label, InputGroup, Input, FormText } from '@sveltestrap/sveltestrap';
+	import { onMount } from 'svelte';
+
+	export let value: string;
+	export let onChange: (value: string) => void;
+	export let size: string = 'sm';
+
+	let timezones: string[] = [];
+	let selectedTimezone: string = '';
+
+	onMount(async () => {
+		const response = await fetch('/zones.json');
+		const zones = await response.json();
+
+		// Convert zones data into array of {name, offset} objects
+		timezones = Object.keys(zones);
+
+		// Set the selected timezone to the current value
+		selectedTimezone = value;
+	});
+
+	function handleTimezoneChange(event: Event) {
+		const select = event.target as HTMLSelectElement;
+		onChange(select.value);
+	}
+
+	function getTzOffsetFromSystem() {
+		const detectedTzString = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+		onChange(detectedTzString);
+		selectedTimezone = detectedTzString;
+	}
+</script>
+
+<Row>
+	<Label md={6} {size} for="timezone">
+		{$_('section.settings.timezoneOffset')}
+	</Label>
+	<Col md="6" {size}>
+		<InputGroup>
+			<Input type="select" {size} bind:value={selectedTimezone} on:change={handleTimezoneChange}>
+				{#each timezones as tz}
+					<option value={tz}>
+						{tz}
+					</option>
+				{/each}
+			</Input>
+			<Button type="button" color="info" on:click={getTzOffsetFromSystem}>
+				{$_('auto-detect')}
+			</Button>
+		</InputGroup>
+		<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
+	</Col>
+</Row>

src/lib/components/settings/index.ts

@@ -0,0 +1,5 @@
+export { default as ScreenSpecificSettings } from './ScreenSpecificSettings.svelte';
+export { default as DisplaySettings } from './DisplaySettings.svelte';
+export { default as DataSourceSettings } from './DataSourceSettings.svelte';
+export { default as ExtraFeaturesSettings } from './ExtraFeaturesSettings.svelte';
+export { default as SystemSettings } from './SystemSettings.svelte';

src/lib/config.ts

@@ -0,0 +1,5 @@
+import * as publicEnv from '$env/static/public';
+
+export const PUBLIC_BASE_URL: string = Object.hasOwn(publicEnv, 'PUBLIC_BASE_URL')
+	? publicEnv.PUBLIC_BASE_URL
+	: '';

src/lib/i18n/index.ts

@@ -6,12 +6,25 @@ const defaultLocale = 'en';
 register('en', () => import('../locales/en.json'));
 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: browser
+	initialLocale: getInitialLocale()
-		? browser && localStorage.getItem('locale')
-			? localStorage.getItem('locale')
-			: window.navigator.language
-		: defaultLocale
 });

src/lib/index.ts

@@ -1 +1,81 @@
-// place files you want to import through the `$lib` alias in this folder.
+import * as nip19 from 'nostr-tools/nip19';
+import { Relay } from 'nostr-tools';
+
+/**
+ * Validates if the given npub is a valid Nostr Public Key.
+ * @param npub - The npub (Nostr Public Key) to validate.
+ * @returns A boolean indicating if the npub is valid.
+ */
+const isValidNpub = (npub: string): boolean => {
+	try {
+		// Decode the npub using NIP-19
+		const { type, data } = nip19.decode(npub);
+		// Check if the type is 'npub' and the data length is 32 bytes
+		return type === 'npub' && data.length === 64;
+	} catch {
+		// If any error is thrown, the npub is not valid
+		return false;
+	}
+};
+
+/**
+ * Validates if the given URL is a valid Nostr relay.
+ * @param url - The URL of the Nostr relay to validate.
+ * @returns A Promise<boolean> indicating if the URL is a valid Nostr relay.
+ */
+const isValidNostrRelay = async (url: string): Promise<boolean> => {
+	try {
+		const relay: Relay = await Relay.connect(url);
+
+		// If the relay is successfully connected, it's a valid Nostr relay
+		if (relay.connected) {
+			// Close the connection to clean up
+			relay.close();
+			return true;
+		}
+
+		return false;
+	} catch {
+		// If any error is thrown, the URL is not a valid Nostr relay
+		return false;
+	}
+};
+
+/**
+ * Validates if the given parameter is a valid hex public key.
+ * @param pubkey - The public key to validate.
+ * @returns A boolean indicating if the public key is valid.
+ */
+const isValidHexPubKey = (pubkey: string): boolean => {
+	return /^[0-9a-f]{64}$/i.test(pubkey);
+};
+
+/**
+ * Checks if a parameter is a valid pubkey or npub and converts npub to pubkey.
+ * @param input - The input string to check and convert.
+ * @returns The pubkey if valid, otherwise null.
+ */
+
+const getPubKey = (input: string): string | null => {
+	try {
+		// If input is a valid hex public key
+		if (isValidHexPubKey(input)) {
+			return input;
+		}
+
+		// Try to decode the input as npub
+		const { type, data } = nip19.decode(input);
+
+		// Check if the decoded type is 'npub' and the data length is 64 characters (32 bytes in hex)
+		if (type === 'npub' && data.length === 64) {
+			return data;
+		}
+
+		return null;
+	} catch {
+		// If any error is thrown, the input is not valid
+		return null;
+	}
+};
+
+export { isValidNpub, isValidNostrRelay, isValidHexPubKey, getPubKey };

src/lib/locales/de.json

@@ -0,0 +1,151 @@
+{
+	"section": {
+		"settings": {
+			"title": "Einstellungen",
+			"textColor": "Textfarbe",
+			"backgroundColor": "Hintergrundfarbe",
+			"ledPowerOnTest": "LED-Einschalttest",
+			"ledFlashOnBlock": "LED blinkt bei neuem Block",
+			"timePerScreen": "Zeit pro Bildschirm",
+			"ledBrightness": "LED-Helligkeit",
+			"flMaxBrightness": "Displaybeleuchtung Helligkeit",
+			"timezoneOffset": "Zeitzonenoffset",
+			"timeBetweenPriceUpdates": "Zeit zwischen Preisaktualisierungen",
+			"fullRefreshEvery": "Vollständige Aktualisierung alle",
+			"mempoolnstance": "Mempool Instance",
+			"hostnamePrefix": "Hostnamen-Präfix",
+			"StealFocusOnNewBlock": "Steal focus on new block",
+			"useBigCharsMcap": "Verwende große Zeichen für die Marktkapitalisierung",
+			"useBlkCountdown": "Blocks Countdown zur Halbierung",
+			"useSatsSymbol": "Sats-Symbol verwenden",
+			"suffixPrice": "Suffix-Preisformat",
+			"disableLeds": "Alle LED-Effekte deaktivieren",
+			"otaUpdates": "OTA updates",
+			"enableMdns": "mDNS",
+			"fetchEuroPrice": "€-Preis abrufen",
+			"shortAmountsWarning": "Geringe Beträge können die Lebensdauer der Displays verkürzen",
+			"tzOffsetHelpText": "Ein Neustart ist erforderlich, um den TZ-Offset anzuwenden.",
+			"screens": "Bildschirme",
+			"wifiTxPowerText": "In den meisten Fällen muss dies nicht eingestellt werden.",
+			"wifiTxPower": "WiFi-TX-Leistung",
+			"settingsSaved": "Einstellungen gespeichert",
+			"errorSavingSettings": "Fehler beim Speichern der Einstellungen",
+			"ownDataSource": "BTClock-Datenquelle",
+			"flAlwaysOn": "Displaybeleuchtung immer an",
+			"flEffectDelay": "Displaybeleuchtungeffekt Geschwindigkeit",
+			"flFlashOnUpd": "Displaybeleuchting bei neuem Block",
+			"mempoolInstanceHelpText": "Nur wirksam, wenn die BTClock-Datenquelle deaktiviert ist. \nZur Anwendung ist ein Neustart erforderlich.",
+			"luxLightToggle": "Automatisches Umschalten des Frontlichts bei Lux",
+			"wpTimeout": "WiFi-Konfigurationsportal timeout",
+			"useNostr": "Nostr-Datenquelle verwenden",
+			"flDisable": "Displaybeleuchtung deaktivieren",
+			"httpAuthUser": "WebUI-Benutzername",
+			"httpAuthPass": "WebUI-Passwort",
+			"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe.",
+			"currencies": "Währungen",
+			"mowMode": "Mow suffixmodus",
+			"suffixShareDot": "Kompakte Suffix-Notation",
+			"section": {
+				"displaysAndLed": "Anzeigen und LEDs",
+				"screenSettings": "Infospezifisch",
+				"dataSource": "Datenquelle",
+				"extraFeatures": "Zusätzliche Funktionen",
+				"system": "System"
+			},
+			"ledFlashOnZap": "LED blinkt bei Nostr Zap",
+			"flFlashOnZap": "Displaybeleuchting bei Nostr Zap",
+			"showAll": "Alle anzeigen",
+			"hideAll": "Alles ausblenden",
+			"flOffWhenDark": "Displaybeleuchtung aus, wenn es dunkel ist",
+			"luxLightToggleText": "Zum Deaktivieren auf 0 setzen",
+			"verticalDesc": "Vrtikale Bildschirmbeschreibung",
+			"enableDebugLog": "Debug-Protokoll aktivieren",
+			"bitaxeEnabled": "BitAxe-Integration aktivieren",
+			"miningPoolStats": "Mining-Pool-Statistiken Integration Aktivieren",
+			"nostrZapNotify": "Nostr Zap-Benachrichtigungen aktivieren",
+			"thirdPartySource": "mempool.space/coincap.io Verwenden",
+			"dataSource": {
+				"nostr": "Nostr-Verlag",
+				"custom": "Benutzerdefinierter dataquelle"
+			},
+			"fontName": "Schriftart",
+			"timeBasedDnd": "Aktivieren Sie den Zeitplan „Bitte nicht stören“.",
+			"dndStartHour": "Startstunde",
+			"dndStartMinute": "Startminute",
+			"dndEndHour": "Endstunde",
+			"dndEndMinute": "Schlussminute"
+		},
+		"control": {
+			"systemInfo": "Systeminfo",
+			"version": "Version",
+			"buildTime": "Build time",
+			"ledColor": "LED-Farbe",
+			"turnOff": "Ausschalten",
+			"setColor": "Farbe festlegen",
+			"showText": "Text anzeigen",
+			"text": "Text",
+			"title": "Kontrolle",
+			"hostname": "Hostname",
+			"frontlight": "Displaybeleuchtung",
+			"turnOn": "Einschalten",
+			"flashFrontlight": "Blinken"
+		},
+		"status": {
+			"title": "Status",
+			"screenCycle": "Bildschirmzyklus",
+			"memoryFree": "Speicher frei",
+			"wsPriceConnection": "WS-Preisverbindung",
+			"wsMempoolConnection": "WS {instance}-Verbindung",
+			"fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌  since it uses another data source.",
+			"uptime": "Betriebszeit",
+			"wifiSignalStrength": "WiFi-Signalstärke",
+			"wsDataConnection": "BTClock-Datenquelle verbindung",
+			"lightSensor": "Lichtsensor",
+			"nostrConnection": "Nostr Relay-Verbindung",
+			"doNotDisturb": "Bitte nicht stören",
+			"timeBasedDnd": "Zeitbasierter Zeitplan"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Datei erfolgreich hochgeladen, Gerät neu gestartet. WebUI in {countdown} Sekunden neu geladen",
+			"fileUploadFailed": "Das Hochladen der Datei ist fehlgeschlagen. \nStellen Sie sicher, dass Sie die richtige Datei ausgewählt haben, und versuchen Sie es erneut.",
+			"uploading": "Hochladen",
+			"firmwareUpdateText": "Wenn Sie die Firmware-Upload-Funktion verwenden, stellen Sie sicher, dass Sie die richtigen Dateien verwenden. \nDas Hochladen der falschen Dateien kann dazu führen, dass das Gerät nicht mehr funktioniert. \nWenn es schief geht, können Sie die Firmware wiederherstellen, indem Sie das vollständige Image hochladen, nachdem Sie das Gerät in den BOOT-Modus versetzt haben.",
+			"swUpToDate": "Du hast die neueste Version.",
+			"swUpdateAvailable": "Eine neuere Version ist verfügbar!",
+			"latestVersion": "Letzte Version",
+			"releaseDate": "Veröffentlichungsdatum",
+			"viewRelease": "Veröffentlichung anzeigen",
+			"autoUpdate": "Update installieren (experimentell)",
+			"autoUpdateInProgress": "Automatische Aktualisierung läuft, bitte warten..."
+		}
+	},
+	"colors": {
+		"black": "Schwarz",
+		"white": "Weiss"
+	},
+	"time": {
+		"minutes": "Minuten",
+		"seconds": "Sekunden"
+	},
+	"restartRequired": "Neustart erforderlich",
+	"button": {
+		"save": "Speichern",
+		"reset": "Zurücksetzen",
+		"restart": "Neustart",
+		"forceFullRefresh": "Vollständige Aktualisierung erzwingen"
+	},
+	"timer": {
+		"running": "läuft",
+		"stopped": "gestoppt"
+	},
+	"sections": {
+		"control": {
+			"keepSameColor": "Gleiche Farbe beibehalten"
+		}
+	},
+	"rssiBar": {
+		"tooltip": "Werte > -67 dBm gelten als gut. > -30 dBm ist erstaunlich"
+	},
+	"warning": "Achtung",
+	"auto-detect": "Automatische Erkennung"
+}

src/lib/locales/en.json

@@ -15,16 +15,82 @@
 			"hostnamePrefix": "Hostname prefix",
 			"StealFocusOnNewBlock": "Steal focus on new block",
 			"useBigCharsMcap": "Use big characters for market cap",
+			"useBlkCountdown": "Blocks countdown for halving",
+			"useSatsSymbol": "Use sats symbol",
+			"suffixPrice": "Suffix price format",
+			"disableLeds": "Disable all LEDs effects",
 			"otaUpdates": "OTA updates",
 			"enableMdns": "mDNS",
 			"fetchEuroPrice": "Fetch € price",
-			"shortAmountsWarning": "Short amounts might shorten lifespan.",
+			"shortAmountsWarning": "Short amounts might shorten lifespan of the displays",
 			"tzOffsetHelpText": "A restart is required to apply TZ offset.",
 			"screens": "Screens",
 			"wifiTxPowerText": "In most cases this does not need to be set.",
 			"wifiTxPower": "WiFi TX power",
 			"settingsSaved": "Settings saved",
-			"errorSavingSettings": "Error saving settings"
+			"errorSavingSettings": "Error saving settings",
+			"ownDataSource": "BTClock data source",
+			"flMaxBrightness": "Frontlight brightness",
+			"flAlwaysOn": "Frontlight always on",
+			"flEffectDelay": "Frontlight effect speed",
+			"flFlashOnUpd": "Frontlight flash on new block",
+			"mempoolInstanceHelpText": "Only effective when BTClock data-source is disabled. A restart is required to apply.",
+			"luxLightToggle": "Auto toggle frontlight at lux",
+			"wpTimeout": "WiFi-config portal timeout",
+			"nostrPubKey": "Nostr source pubkey",
+			"nostrZapKey": "Nostr zap pubkey",
+			"nostrRelay": "Nostr Relay",
+			"nostrZapNotify": "Enable Nostr Zap Notifications",
+			"useNostr": "Use Nostr data source",
+			"bitaxeHostname": "BitAxe hostname or IP",
+			"bitaxeEnabled": "Enable BitAxe-integration",
+			"miningPoolStats": "Enable Mining Pool Stats integration",
+			"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",
+			"flDisable": "Disable frontlight",
+			"httpAuthEnabled": "Require authentication for WebUI",
+			"httpAuthUser": "WebUI Username",
+			"httpAuthPass": "WebUI Password",
+			"httpAuthText": "Only password-protects WebUI, not API-calls.",
+			"currencies": "Currencies",
+			"customSource": "Use custom data source endpoint",
+			"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications.",
+			"mowMode": "Mow Suffix Mode",
+			"suffixShareDot": "Suffix compact notation",
+			"section": {
+				"displaysAndLed": "Displays and LEDs",
+				"screenSettings": "Screen specific",
+				"dataSource": "Data source",
+				"extraFeatures": "Extra features",
+				"system": "System"
+			},
+			"ledFlashOnZap": "LED flash on Nostr Zap",
+			"flFlashOnZap": "Frontlight flash on Nostr Zap",
+			"showAll": "Show all",
+			"hideAll": "Hide all",
+			"flOffWhenDark": "Frontlight off when dark",
+			"luxLightToggleText": "Set to 0 to disable",
+			"verticalDesc": "Use vertical screen description",
+			"enableDebugLog": "Enable Debug-log",
+			"dataSource": {
+				"label": "Data Source",
+				"btclock": "BTClock Data Source",
+				"thirdParty": "mempool.space/coincap.io",
+				"nostr": "Nostr publisher",
+				"custom": "Custom Endpoint"
+			},
+			"thirdPartySource": "Use mempool.space/coincap.io",
+			"ceDisableSSL": "Disable SSL",
+			"ceEndpoint": "Endpoint hostname",
+			"fontName": "Font",
+			"timeBasedDnd": "Enable Do Not Disturb time schedule",
+			"dndStartHour": "Start hour",
+			"dndStartMinute": "Start minute",
+			"dndEndHour": "End hour",
+			"dndEndMinute": "End minute"
 		},
 		"control": {
 			"systemInfo": "System info",
@@ -36,17 +102,40 @@
 			"showText": "Show text",
 			"text": "Text",
 			"title": "Control",
-			"hostname": "Hostname"
+			"hostname": "Hostname",
+			"frontlight": "Frontlight",
+			"turnOn": "Turn on",
+			"flashFrontlight": "Flash",
+			"firmwareUpdate": "Firmware update",
+			"fwCommit": "Firmware commit"
 		},
 		"status": {
 			"title": "Status",
 			"screenCycle": "Screen cycle",
 			"memoryFree": "Memory free",
 			"wsPriceConnection": "WS Price connection",
-			"wsMempoolConnection": "WS Mempool.space connection",
+			"wsMempoolConnection": "WS {instance} connection",
 			"fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌  since it uses another data source.",
 			"uptime": "Uptime",
-			"wifiSignalStrength": "WiFi Signal strength"
+			"wifiSignalStrength": "WiFi Signal strength",
+			"wsDataConnection": "BTClock data-source connection",
+			"lightSensor": "Light sensor",
+			"nostrConnection": "Nostr Relay connection",
+			"doNotDisturb": "Do not disturb",
+			"timeBasedDnd": "Time-based schedule"
+		},
+		"firmwareUpdater": {
+			"fileUploadFailed": "File upload failed. Make sure you have selected the correct file and try again.",
+			"fileUploadSuccess": "File uploaded successfully, restarting device and reloading WebUI in {countdown} seconds",
+			"uploading": "Uploading",
+			"firmwareUpdateText": "When you use the firmware upload functionality, make sure you use the correct files. Uploading the wrong files can result in a non-working device. If it goes wrong, you can restore firmware by uploading the full image after setting the device in BOOT-mode.",
+			"swUpdateAvailable": "A newer version is available!",
+			"swUpToDate": "You are up to date.",
+			"latestVersion": "Latest Version",
+			"releaseDate": "Release Date",
+			"viewRelease": "View Release",
+			"autoUpdate": "Install update (experimental)",
+			"autoUpdateInProgress": "Auto-update in progress, please wait..."
 		}
 	},
 	"colors": {
@@ -75,5 +164,7 @@
 	},
 	"rssiBar": {
 		"tooltip": "Values > -67 dBm are considered good. > -30 dBm is amazing"
-	}
+	},
+	"warning": "Warning",
+	"auto-detect": "Auto-detect"
 }

src/lib/locales/es.json

@@ -6,7 +6,7 @@
 			"backgroundColor": "Color de fondo",
 			"ledBrightness": "Brillo LED",
 			"screens": "Pantallas",
-			"shortAmountsWarning": "Cantidades pequeñas pueden acortar la vida útil.",
+			"shortAmountsWarning": "Pequeñas cantidades pueden acortar la vida útil de los displays",
 			"fullRefreshEvery": "Actualización completa cada",
 			"timePerScreen": "Tiempo por pantalla",
 			"tzOffsetHelpText": "Es necesario reiniciar para aplicar la compensación.",
@@ -14,16 +14,65 @@
 			"StealFocusOnNewBlock": "Presta atención al nuevo bloque",
 			"ledFlashOnBlock": "El LED parpadea con un bloque nuevo",
 			"useBigCharsMcap": "Utilice caracteres grandes para la market cap",
+			"useBlkCountdown": "Cuenta regresiva en bloques",
+			"useSatsSymbol": "Usar símbolo sats",
 			"fetchEuroPrice": "Obtener precio en €",
 			"timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
 			"ledPowerOnTest": "Prueba de encendido del LED",
 			"enableMdns": "mDNS",
 			"hostnamePrefix": "Prefijo de nombre de host",
 			"mempoolnstance": "Instancia de Mempool",
+			"suffixPrice": "Precio con sufijos",
+			"disableLeds": "Desactivar efectos de LED",
 			"otaUpdates": "Actualización por aire",
 			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto.",
 			"settingsSaved": "Configuración guardada",
-			"errorSavingSettings": "Error al guardar la configuración"
+			"errorSavingSettings": "Error al guardar la configuración",
+			"ownDataSource": "fuente de datos BTClock",
+			"flMaxBrightness": "Brillo de luz de la pantalla",
+			"flAlwaysOn": "Luz de la pantalla siempre encendida",
+			"flEffectDelay": "Velocidad del efecto de luz de la pantalla",
+			"flFlashOnUpd": "Luz de la pantalla parpadea con un nuevo bloque",
+			"mempoolInstanceHelpText": "Solo es efectivo cuando la fuente de datos BTClock está deshabilitada. \nEs necesario reiniciar para aplicar.",
+			"luxLightToggle": "Cambio automático de luz frontal en lux",
+			"wpTimeout": "Portal de configuración WiFi timeout",
+			"useNostr": "Utilice la fuente de datos Nostr",
+			"flDisable": "Desactivar luz de la pantalla",
+			"httpAuthUser": "Nombre de usuario WebUI",
+			"httpAuthPass": "Contraseña WebUI",
+			"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
+			"currencies": "Monedas",
+			"mowMode": "Modo de sufijo Mow",
+			"suffixShareDot": "Notación compacta de sufijo",
+			"section": {
+				"displaysAndLed": "Pantallas y LED",
+				"screenSettings": "Específico de la pantalla",
+				"dataSource": "fuente de datos",
+				"extraFeatures": "Funciones adicionales",
+				"system": "Sistema"
+			},
+			"ledFlashOnZap": "LED parpadeante con Nostr Zap",
+			"flFlashOnZap": "Flash de luz frontal con Nostr Zap",
+			"showAll": "Mostrar todo",
+			"hideAll": "Ocultar todo",
+			"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
+			"luxLightToggleText": "Establecer en 0 para desactivar",
+			"verticalDesc": "Descripción de pantalla vertical",
+			"enableDebugLog": "Habilitar registro de depuración",
+			"bitaxeEnabled": "Habilitar la integración de BitAxe",
+			"miningPoolStats": "Habilitar la integración de estadísticas del grupo minero",
+			"nostrZapNotify": "Habilitar notificaciones de Nostr Zap",
+			"thirdPartySource": "Utilice mempool.space/coincap.io",
+			"dataSource": {
+				"nostr": "editorial nostr",
+				"custom": "Punto final personalizado"
+			},
+			"fontName": "Fuente",
+			"timeBasedDnd": "Habilitar el horario de No molestar",
+			"dndStartHour": "Hora de inicio",
+			"dndStartMinute": "Minuto de inicio",
+			"dndEndHour": "Hora final",
+			"dndEndMinute": "Minuto final"
 		},
 		"control": {
 			"turnOff": "Apagar",
@@ -35,17 +84,38 @@
 			"text": "Texto",
 			"title": "Control",
 			"buildTime": "Tiempo de compilación",
-			"hostname": "Nombre del host"
+			"hostname": "Nombre del host",
+			"turnOn": "Encender",
+			"frontlight": "Luz de la pantalla",
+			"flashFrontlight": "Luz intermitente"
 		},
 		"status": {
 			"memoryFree": "Memoria RAM libre",
 			"wsPriceConnection": "Conexión WebSocket Precio",
-			"wsMempoolConnection": "Conexión WebSocket Mempool.space",
+			"wsMempoolConnection": "Conexión WebSocket {instance}",
 			"screenCycle": "Ciclo de pantalla",
 			"uptime": "Tiempo de funcionamiento",
 			"fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
 			"title": "Estado",
-			"wifiSignalStrength": "Fuerza de la señal WiFi"
+			"wifiSignalStrength": "Fuerza de la señal WiFi",
+			"wsDataConnection": "Conexión de fuente de datos BTClock",
+			"lightSensor": "Sensor de luz",
+			"nostrConnection": "Conexión de relé Nostr",
+			"doNotDisturb": "No molestar",
+			"timeBasedDnd": "Horario basado en el tiempo"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Archivo cargado exitosamente, reiniciando el dispositivo. Recargando WebUI en {countdown} segundos",
+			"fileUploadFailed": "Error al cargar el archivo. \nAsegúrese de haber seleccionado el archivo correcto e inténtelo nuevamente.",
+			"uploading": "Subiendo",
+			"firmwareUpdateText": "Cuando utilice la función de carga de firmware, asegúrese de utilizar los archivos correctos. \nCargar archivos incorrectos puede provocar que el dispositivo no funcione. \nSi sale mal, puede restaurar el firmware cargando la imagen completa después de configurar el dispositivo en modo BOOT.",
+			"swUpToDate": "Tienes la ultima version.",
+			"swUpdateAvailable": "¡Una nueva versión está disponible!",
+			"latestVersion": "Ultima versión",
+			"releaseDate": "Fecha de lanzamiento",
+			"viewRelease": "Ver lanzamiento",
+			"autoUpdate": "Instalar actualización (experimental)",
+			"autoUpdateInProgress": "Actualización automática en progreso, espere..."
 		}
 	},
 	"button": {
@@ -74,5 +144,7 @@
 	},
 	"rssiBar": {
 		"tooltip": "Se consideran buenos valores > -67 dBm. > -30 dBm es increíble"
-	}
+	},
+	"warning": "Aviso",
+	"auto-detect": "Detección automática"
 }

src/lib/locales/nl.json

@@ -9,22 +9,62 @@
 			"ledBrightness": "LED helderheid",
 			"timePerScreen": "Tijd per scherm",
 			"fullRefreshEvery": "Volledig verversen elke",
-			"shortAmountsWarning": "Lage waardes verkorten levensduur",
+			"shortAmountsWarning": "Lage waardes verkorten mogelijk levensduur schermen",
 			"tzOffsetHelpText": "Herstart nodig voor toepassen afwijking.",
 			"enableMdns": "mDNS",
 			"ledPowerOnTest": "LED test bij aanzetten",
 			"StealFocusOnNewBlock": "Pak aandacht bij nieuw blok",
 			"ledFlashOnBlock": "Knipper led bij nieuw blok",
 			"useBigCharsMcap": "Gebruik grote tekens bij market cap",
+			"useBlkCountdown": "Blocks aftellen voor halving",
+			"useSatsSymbol": "Gebruik sats symbol",
 			"fetchEuroPrice": "Toon € prijs",
 			"screens": "Schermen",
 			"hostnamePrefix": "Hostnaam voorvoegsel",
 			"mempoolnstance": "Mempool instantie",
+			"suffixPrice": "Achtervoegsel prijs formaat",
+			"disableLeds": "Alle LEDs effecten uit",
 			"otaUpdates": "OTA updates",
 			"wifiTxPower": "WiFi TX power",
 			"wifiTxPowerText": "Meestal hoeft dit niet aangepast te worden.",
 			"settingsSaved": "Instellingen opgeslagen",
-			"errorSavingSettings": "Fout bij opslaan instellingen"
+			"errorSavingSettings": "Fout bij opslaan instellingen",
+			"ownDataSource": "BTClock-gegevensbron gebruiken",
+			"flMaxBrightness": "Displaylicht helderheid",
+			"flAlwaysOn": "Displaylicht altijd aan",
+			"flEffectDelay": "Displaylicht effect snelheid",
+			"flFlashOnUpd": "Knipper displaylicht bij nieuw blok",
+			"mempoolInstanceHelpText": "Alleen effectief als de BTClock-gegevensbron is uitgeschakeld. \nOm toe te passen is een herstart nodig.",
+			"luxLightToggle": "Schakelen displaylicht op lux",
+			"wpTimeout": "WiFi-config-portal timeout",
+			"useNostr": "Gebruik Nostr-gegevensbron",
+			"flDisable": "Schakel Displaylicht uit",
+			"httpAuthUser": "WebUI-gebruikersnaam",
+			"httpAuthPass": "WebUI-wachtwoord",
+			"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
+			"currencies": "Valuta's",
+			"mowMode": "Mow achtervoegsel",
+			"suffixShareDot": "Achtervoegsel compacte notatie",
+			"section": {
+				"displaysAndLed": "Displays en LED's",
+				"screenSettings": "Schermspecifiek",
+				"dataSource": "Gegevensbron",
+				"extraFeatures": "Extra functies",
+				"system": "Systeem"
+			},
+			"ledFlashOnZap": "Knipper LED bij Nostr Zap",
+			"flFlashOnZap": "Knipper displaylicht bij Nostr Zap",
+			"showAll": "Toon alles",
+			"hideAll": "Alles verbergen",
+			"flOffWhenDark": "Displaylicht uit als het donker is",
+			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
+			"verticalDesc": "Verticale schermbeschrijving",
+			"fontName": "Lettertype",
+			"timeBasedDnd": "Schakel het tijdschema Niet storen in",
+			"dndStartHour": "Begin uur",
+			"dndStartMinute": "Beginminuut",
+			"dndEndHour": "Eind uur",
+			"dndEndMinute": "Einde minuut"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",
@@ -35,17 +75,38 @@
 			"ledColor": "LED kleur",
 			"showText": "Toon tekst",
 			"text": "Tekst",
-			"title": "Besturing"
+			"title": "Besturing",
+			"frontlight": "Displaylicht",
+			"turnOn": "Aanzetten",
+			"flashFrontlight": "Knipper"
 		},
 		"status": {
 			"title": "Status",
 			"memoryFree": "Geheugen vrij",
 			"screenCycle": "Scherm cyclus",
 			"wsPriceConnection": "WS Prijs verbinding",
-			"wsMempoolConnection": "WS Mempool.space verbinding",
+			"wsMempoolConnection": "WS {instance} verbinding",
 			"fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
 			"uptime": "Uptime",
-			"wifiSignalStrength": "WiFi signaalsterkte"
+			"wifiSignalStrength": "WiFi signaalsterkte",
+			"wsDataConnection": "BTClock-gegevensbron verbinding",
+			"lightSensor": "Licht sensor",
+			"nostrConnection": "Nostr Relay-verbinding",
+			"doNotDisturb": "Niet storen",
+			"timeBasedDnd": "Op tijd gebaseerd schema"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Bestand geüpload, apparaat herstart. WebUI opnieuw geladen over {countdown} seconden",
+			"fileUploadFailed": "Bestandsupload mislukt. \nZorg ervoor dat het juiste bestand is geselecteerd en probeer het opnieuw.",
+			"uploading": "Uploaden",
+			"firmwareUpdateText": "Zorg bij het gebruiken van de firmware upload dat de juiste bestanden gebruikt worden. \nHet uploaden van de verkeerde bestanden kan resulteren in een niet-werkend apparaat. \nAls het misgaat, kunt u de firmware herstellen door de volledige afbeelding te uploaden nadat u het apparaat in de BOOT-modus hebt gezet.",
+			"swUpToDate": "Je hebt de nieuwste versie.",
+			"swUpdateAvailable": "Een nieuwere versie is beschikbaar!",
+			"latestVersion": "Laatste versie",
+			"releaseDate": "Datum van publicatie",
+			"viewRelease": "Bekijk publicatie",
+			"autoUpdate": "Update installeren (experimenteel)",
+			"autoUpdateInProgress": "Automatische update wordt uitgevoerd. Even geduld a.u.b...."
 		}
 	},
 	"colors": {
@@ -74,5 +135,7 @@
 	},
 	"rssiBar": {
 		"tooltip": "Waarden > -67 dBm zijn goed. > -30 dBm is verbazingwekkend"
-	}
+	},
+	"warning": "Waarschuwing",
+	"auto-detect": "Automatische detectie"
 }

src/lib/screen.ts

@@ -0,0 +1,18 @@
+import { writable } from 'svelte/store';
+
+// Check if window is available
+let initialWidth: number = 0;
+if (typeof window !== 'undefined') {
+	initialWidth = window.innerWidth;
+}
+
+// Create a writable store to track screen size
+export const screenSize = writable<number>(initialWidth);
+
+// Function to update the screen size
+export const updateScreenSize = (): void => {
+	// Check if window is available before setting the screen size
+	if (typeof window !== 'undefined') {
+		screenSize.set(window.innerWidth);
+	}
+};

src/lib/style/app.scss

@@ -1,21 +1,33 @@
+@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';
-@import '@fontsource/oswald/latin-400.css';
 
-$form-range-track-bg: #fff;
+@include Ubuntu.faces(
-$color-mode-type: media-query;
+	$subsets: latin,
+	$weights: 400,
+	$formats: 'woff2',
+	$directory: '@fontsource/ubuntu/files'
+);
+
+@include Antonio.faces(
+	$subsets: latin,
+	$weights: 400,
+	$formats: 'woff2',
+	$directory: '@fontsource/antonio/files'
+);
+
+@import './satsymbol';
+
+$color-mode-type: data;
 $font-family-base: 'Ubuntu';
 $font-size-base: 0.9rem;
-//$font-size-sm: $font-size-base * .875 !default;
-//$form-label-font-size: $font-size-base * .575 !default;
-//$input-btn-font-size-sm: 0.4rem;
-//$form-label-font-size: 0.4rem;
 $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';
@@ -30,7 +42,7 @@ $input-font-size-sm: $font-size-base * 0.875;
 @import '../node_modules/bootstrap/scss/forms';
 @import '../node_modules/bootstrap/scss/buttons';
 @import '../node_modules/bootstrap/scss/button-group';
-@import '../node_modules/bootstrap/scss/pagination';
+//@import '../node_modules/bootstrap/scss/pagination';
 
 @import '../node_modules/bootstrap/scss/dropdown';
 
@@ -40,31 +52,44 @@ $input-font-size-sm: $font-size-base * 0.875;
 @import '../node_modules/bootstrap/scss/progress';
 @import '../node_modules/bootstrap/scss/tooltip';
 @import '../node_modules/bootstrap/scss/toasts';
+@import '../node_modules/bootstrap/scss/alert';
+@import '../node_modules/bootstrap/scss/placeholders';
+@import '../node_modules/bootstrap/scss/spinners';
 
 @import '../node_modules/bootstrap/scss/helpers';
 @import '../node_modules/bootstrap/scss/utilities/api';
 
-@include media-breakpoint-down(xl) {
+/* Default state (xs) - sticky */
-	html {
+.sticky-xs-top {
-		font-size: 85%;
+	position: sticky;
+	top: 0;
+	z-index: 1020;
 }
 
-	button.btn,
+@media (max-width: 576px) {
-	input[type='button'].btn,
+	main {
-	input[type='submit'].btn,
+		margin-top: 25px;
-	input[type='reset'].btn {
-		@include button-size(
-			$btn-padding-y-sm,
-			$btn-padding-x-sm,
-			$font-size-sm,
-			$btn-border-radius-sm
-		);
 	}
 }
 
-@include media-breakpoint-down(lg) {
+/* Remove sticky behavior for larger screens */
-	html {
+@media (min-width: 576px) {
-		font-size: 75%;
+	.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;
 	}
 }
 
@@ -72,53 +97,161 @@ nav {
 	margin-bottom: 15px;
 }
 
-.splitText div:first-child::after {
+#btclock-wrapper {
-	display: block;
-	content: '';
-	margin-top: 0px;
-	border-bottom: 2px solid;
-	margin-bottom: 3px;
-}
-
-#btcclock-wrapper {
 	margin: 0 auto;
 }
 
+.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 {
+	text-transform: uppercase;
+}
+
+.btclock-wrapper {
 	.btclock {
-	border: 1px solid darkgray;
 		background: #000;
-	border-radius: 5px;
-	padding: 10px;
-	max-width: 700px;
-	margin: 0 auto;
 		display: flex;
-	flex-direction: row;
+		font-size: calc(2vw + 2vh);
-	flex-wrap: nowrap;
+		font-family: 'Antonio', sans-serif;
-	justify-content: space-between;
+		font-weight: 400;
-	align-items: center;
+		padding: 10px;
-	align-content: stretch;
+		gap: 10px;
-	font-family: 'Oswald', sans-serif;
-
-	> div {
-		padding: 5px;
-	}
 
 		.digit,
 		.splitText,
 		.mediumText {
 			border: 2px solid gold;
 			border-radius: 8px;
-
+			display: flex;
-		@include media-breakpoint-up(sm) {
+			align-items: center;
-			min-width: 10px;
+			justify-content: center;
-		}
-
-		@include media-breakpoint-up(xxl) {
-			min-width: 70px;
-		}
-
 			text-align: center;
-		color: #fff;
+			padding: 10px 10px 15px 10px;
+			width: calc(12vw + 12vh); /* Set a dynamic width based on viewport */
+			aspect-ratio: 1 / 1.5; /* Maintain a 1:1 aspect ratio */
+
+			hr {
+				width: 75%; /* Line width relative to digit square */
+				border: 0;
+				border-top: 2px solid #fff;
+				margin: 0; /* Remove default margin */
+				padding: 0;
+				opacity: 1;
+			}
+		}
+
+		.digit.sats {
+			padding-top: 35px;
+		}
+
+		.mediumText {
+			font-size: calc(1.25vw + 1.25vh);
+		}
+
+		.splitText {
+			flex-direction: column; /* Stack the text and line vertically */
+			align-items: center;
+			justify-content: space-around; /* Distribute items with space between */
+			padding: 5px;
+		}
+
+		&.verticalDesc > .splitText:first-child {
+			.textcontainer {
+				transform: rotate(-90deg);
+			}
+		}
+
+		.splitText .textcontainer :first-child::after {
+			display: block;
+			content: '';
+			margin-top: 0px;
+			border-bottom: 2px solid;
+			// margin-bottom: 3px;
+		}
+
+		.splitText {
+			font-size: calc(0.3vw + 1vh);
+
+			.top-text,
+			.bottom-text {
+				margin: 0;
+				line-height: 1;
+			}
+
+			.top-text {
+				margin-bottom: -45px;
+			}
+
+			.bottom-text {
+				margin-top: -45px;
+			}
+		}
+
+		.digit-blank {
+			content: 'abc';
+		}
+
+		.digit.icon {
+			content: 'abc';
+
+			svg {
+				width: 100%;
+			}
+		}
+	}
+
+	.digit.sats {
+		font-family: 'Satoshi Symbol', sans-serif;
+		content: 'a';
+	}
+
+	@media (max-width: 576px) {
+		.btclock {
+			font-size: calc(2vw + 2vh); /* Adjust for small screens if necessary */
+
+			.digit,
+			.splitText,
+			.mediumText {
+				padding: 5px;
+			}
+
+			.splitText {
+				font-size: calc(1.2vw + 1.2vh);
+
+				.top-text,
+				.bottom-text {
+					margin: 0;
+					line-height: 1;
+				}
+
+				.top-text {
+					margin-bottom: -10px;
+				}
+
+				.bottom-text {
+					margin-top: -10px;
+				}
+			}
+		}
 	}
 }
 
@@ -127,60 +260,26 @@ nav {
 	border-color: #fff;
 }
 
-.lightMode .btclock > div {
+.darkMode .btclock > div {
+	background: #000;
+	color: #fff;
+}
+
+.lightMode .btclock {
+	& > div {
 		background: #fff;
+		color: #000;
+	}
+
+	.splitText hr {
+		border-top: 2px solid #000;
+	}
 }
 
 .lightMode .btclock > div {
 	color: #000;
 }
 
-.darkMode .btclock > div {
-	background: #000;
-}
-
-.splitText {
-	@include media-breakpoint-up(sm) {
-		font-size: 1rem;
-		padding-top: 8px !important;
-		padding-bottom: 9px !important;
-	}
-	@include media-breakpoint-up(xxl) {
-		font-size: 1.8rem;
-		padding-top: 19px !important;
-		padding-bottom: 20px !important;
-	}
-
-	text-align: center;
-}
-
-.mediumText {
-	font-size: 3rem;
-	padding-left: 5px;
-	padding-right: 5px;
-	padding-top: 20px !important;
-	padding-bottom: 20px !important;
-}
-
-.digit {
-	font-size: 5rem;
-	@include media-breakpoint-up(sm) {
-		font-size: 2.5rem;
-	}
-	@include media-breakpoint-up(xxl) {
-		font-size: 5rem;
-	}
-	padding-left: 10px;
-	padding-right: 10px;
-}
-
-.digit-blank {
-	content: 'abc';
-}
-
-#customText {
-	text-transform: uppercase;
-}
 .system_info {
 	padding: 0;
 
@@ -197,3 +296,57 @@ nav {
 	font-style: italic;
 	font-weight: 600;
 }
+
+.firmwareUploadStatusAlert,
+#firmwareUploadProgress {
+	@extend .my-2;
+}
+
+.sats {
+	font-family: 'Satoshi Symbol';
+}
+
+.currencyCode {
+	width: 20%;
+	text-align: center;
+	display: inline-block;
+}
+
+input[type='number'] {
+	text-align: right;
+}
+
+.lightMode .bitaxelogo {
+	filter: brightness(0) saturate(100%);
+}
+
+.connection-lost-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.75);
+	z-index: 1050;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.overlay-content {
+		background-color: rgba(255, 255, 255, 0.75);
+
+		padding: 0.5rem;
+		border-radius: 0.5rem;
+		text-align: center;
+
+		i {
+			font-size: 1rem;
+			color: $danger;
+			margin-bottom: 1rem;
+		}
+
+		h4 {
+			margin-bottom: 0.5rem;
+		}
+	}
+}

src/lib/style/satsymbol.scss

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

src/lib/types/dataSource.ts

@@ -0,0 +1,6 @@
+export enum DataSourceType {
+	BTCLOCK_SOURCE = 0,
+	THIRD_PARTY_SOURCE = 1,
+	NOSTR_SOURCE = 2,
+	CUSTOM_SOURCE = 3
+}

src/lib/uiSettings.ts

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+
+export const uiSettings = writable({
+	inputSize: 'sm',
+	selectClass: '',
+	btnSize: 'lg'
+});

src/routes/+layout.svelte

@@ -9,11 +9,15 @@
 		NavItem,
 		NavLink,
 		Navbar,
-		NavbarBrand
+		NavbarBrand,
-	} from 'sveltestrap';
+		NavbarToggler
+	} from '@sveltestrap/sveltestrap';
+	import { _ } from 'svelte-i18n';
 
 	import { page } from '$app/stores';
-	import { locale, locales } from 'svelte-i18n';
+	import { locale, locales, isLoading } from 'svelte-i18n';
+	import { ColorSchemeSwitcher } from '$lib/components';
+	import { derived } from 'svelte/store';
 
 	export const setLocale = (lang: string) => () => {
 		locale.set(lang);
@@ -24,7 +28,8 @@
 		const flagMap: { [key: string]: string } = {
 			en: '🇬🇧', // English flag emoji
 			nl: '🇳🇱', // Dutch flag emoji
-			es: '🇪🇸' // Spanish flag emoji
+			es: '🇪🇸', // Spanish flag emoji
+			de: '🇩🇪' // German flag emoji
 		};
 
 		// Convert the language code to lowercase for case-insensitive matching
@@ -35,48 +40,81 @@
 			return flagMap[lowercaseCode];
 		} else {
 			// Return null for unsupported language codes
-			return null;
+			return flagMap['en'];
 		}
 	};
 
-	export const getLanguageName = (languageCode: string): string | null => {
+	let languageNames = {};
-		const languageNames: { [key: string]: { [key: string]: string } } = {
-			en: { en: 'English', nl: 'English', es: 'English' },
-			nl: { en: 'Nederlands', nl: 'Nederlands', es: 'Neerlandés' },
-			es: { en: 'Español', nl: 'Spaans', es: 'Español' }
-		};
 
-		const lowercaseCode = languageCode.toLowerCase();
+	const currentLocale = derived(locale, ($locale) => $locale || 'en');
 
-		return Object.prototype.hasOwnProperty.call(languageNames, lowercaseCode)
+	locale.subscribe(() => {
-			? languageNames[lowercaseCode][lowercaseCode]
+		const localeToUse = $locale || 'en';
-			: null;
+		let newLanguageNames = new Intl.DisplayNames([localeToUse], { type: 'language' });
+
+		for (let l of $locales) {
+			languageNames[l] = newLanguageNames.of(l) || l;
+		}
+	});
+
+	let isOpen = false;
+
+	const toggle = () => {
+		isOpen = !isOpen;
 	};
 </script>
 
-<Navbar expand="md">
+<Navbar expand="md" sticky="xs-top" theme="auto">
-	<NavbarBrand>&#8383;TClock</NavbarBrand>
+	<NavbarBrand class="d-none d-sm-block">&#8383;TClock</NavbarBrand>
-	<Collapse navbar expand="md">
+	<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">
 		<Nav class="me-auto" navbar>
 			<NavItem>
 				<NavLink href="/" active={$page.url.pathname === '/'}>Home</NavLink>
 			</NavItem>
+			<NavItem>
+				<NavLink href="/convert" active={$page.url.pathname === '/convert'}>Convert</NavLink>
+			</NavItem>
 			<NavItem>
 				<NavLink href="/api" active={$page.url.pathname === '/api'}>API</NavLink>
 			</NavItem>
 		</Nav>
-		<Dropdown inNavbar>
+		{#if !$isLoading}
-			<DropdownToggle nav caret>{getFlagEmoji($locale)} {getLanguageName($locale)}</DropdownToggle>
+			<Dropdown id="nav-language-dropdown" inNavbar class="me-3">
+				<DropdownToggle nav caret
+					>{getFlagEmoji($currentLocale)}
+					{languageNames[$currentLocale] || 'English'}</DropdownToggle
+				>
 				<DropdownMenu end>
 					{#each $locales as locale}
 						<DropdownItem on:click={setLocale(locale)}
-						>{getFlagEmoji(locale)} {getLanguageName(locale)}</DropdownItem
+							>{getFlagEmoji(locale)} {languageNames[locale]}</DropdownItem
 						>
 					{/each}
 				</DropdownMenu>
 			</Dropdown>
+		{/if}
+		<ColorSchemeSwitcher></ColorSchemeSwitcher>
 	</Collapse>
 </Navbar>
 
 <!-- +layout.svelte -->
+<main>
 	<slot />
+</main>

src/routes/+layout.ts

@@ -6,10 +6,15 @@ import { locale, waitLocale } from 'svelte-i18n';
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async () => {
-	if (browser && localStorage.getItem('locale')) {
+	if (browser) {
+		if (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/+page.svelte

@@ -1,16 +1,21 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { PUBLIC_BASE_URL } from '$lib/config';
+	import { screenSize, updateScreenSize } from '$lib/screen';
 
-	import { Container, Row, Toast, ToastBody } from 'sveltestrap';
+	import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
+	import { replaceState } from '$app/navigation';
 
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 	import Control from './Control.svelte';
 	import Settings from './Settings.svelte';
 	import Status from './Status.svelte';
+	import { uiSettings } from '$lib/uiSettings';
 
 	let settings = writable({
-		fgColor: '0'
+		fgColor: '0',
+		bgColor: '0',
+		isLoaded: false
 	});
 
 	let status = writable({
@@ -21,13 +26,33 @@
 			price: false,
 			blocks: false
 		},
-		leds: []
+		leds: [],
+		isUpdating: false
 	});
 
-	onMount(() => {
+	const fetchStatusData = async () => {
-		fetch(PUBLIC_BASE_URL + `/api/settings`)
+		const res = await fetch(`${PUBLIC_BASE_URL}/api/status`, { credentials: 'same-origin' });
-			.then((res) => res.json())
+
-			.then((data) => {
+		if (!res.ok) {
+			console.error('Error fetching status data:', res.statusText);
+			return false;
+		}
+
+		const data = await res.json();
+		status.set(data);
+		return true;
+	};
+
+	const fetchSettingsData = async () => {
+		const res = await fetch(PUBLIC_BASE_URL + `/api/settings`, { credentials: 'same-origin' });
+
+		if (!res.ok) {
+			console.error('Error fetching settings data:', res.statusText);
+			return;
+		}
+
+		const data = await res.json();
+
 		data.fgColor = String(data.fgColor);
 		data.bgColor = String(data.bgColor);
 		data.timePerScreen = data.timerSeconds / 60;
@@ -40,22 +65,122 @@
 			data.bgColor = '65535';
 		}
 		settings.set(data);
-			});
+	};
 
-		fetch(`${PUBLIC_BASE_URL}/api/status`)
+	let sections: (HTMLElement | null)[];
-			.then((res) => res.json())
+	let observer: IntersectionObserver;
-			.then((data) => {
+	const SM_BREAKPOINT = 576;
-				status.set(data);
-			});
 
+	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(async () => {
+		setupObserver();
+
+		const connectEventSource = () => {
 			const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
 
 			evtSource.addEventListener('status', (e) => {
 				let dataObj = JSON.parse(e.data);
+				status.update((s) => ({ ...s, isUpdating: true }));
 				status.set(dataObj);
 			});
+
+			evtSource.addEventListener('message', (e) => {
+				if (e.data == 'closing') {
+					console.log('EventSource closing');
+					status.update((s) => ({ ...s, isUpdating: false }));
+					evtSource.close(); // Close the current connection
+					setTimeout(connectEventSource, 5000);
+				}
 			});
 
+			evtSource.addEventListener('error', (e) => {
+				console.error('EventSource failed:', e);
+				status.update((s) => ({ ...s, isUpdating: false }));
+				evtSource.close(); // Close the current connection
+				setTimeout(connectEventSource, 1000);
+			});
+		};
+
+		try {
+			await fetchSettingsData();
+			if (await fetchStatusData()) {
+				settings.update((s) => ({ ...s, isLoaded: true }));
+				connectEventSource();
+			}
+		} catch (error) {
+			console.log('Error fetching data:', error);
+		}
+
+		function handleResize() {
+			if (observer) {
+				observer.disconnect();
+			}
+			setupObserver();
+
+			updateScreenSize();
+		}
+
+		// Add an event listener to update the screen size when the window is resized
+		window.addEventListener('resize', handleResize);
+
+		// Call the function initially to set the initial screen size
+		updateScreenSize();
+
+		// Cleanup function to remove the event listener when the component is destroyed
+		return () => {
+			window.removeEventListener('resize', handleResize);
+		};
+	});
+
+	$: {
+		const lgBreakpoint = parseInt(
+			getComputedStyle(document.documentElement).getPropertyValue('--bs-breakpoint-lg')
+		);
+
+		if ($screenSize >= lgBreakpoint) {
+			uiSettings.set({
+				inputSize: 'sm',
+				selectClass: 'form-select-sm',
+				btnSize: 'sm'
+			});
+		} else {
+			uiSettings.set({
+				inputSize: 'lg',
+				selectClass: 'form-select-lg',
+				btnSize: 'xl'
+			});
+		}
+	}
+
 	let toastIsOpen = false;
 	let toastColor = 'success';
 	let toastBody = '';
@@ -68,21 +193,24 @@
 </script>
 
 <svelte:head>
-	<title>&#8383;TClock</title>
+	<title>BTClock</title>
 </svelte:head>
 
 <Container fluid>
-	<Row>
+	<Row class="placeholder-glow">
-		<Control bind:settings bind:status></Control>
+		<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
-		<Status bind:settings bind:status></Status>
+
-		<Settings bind:settings on:showToast={showToast}></Settings>
+		<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>
 </Container>
 <div class="position-fixed bottom-0 end-0 p-2">
 	<div class="">
 		<Toast
 			isOpen={toastIsOpen}
-			class="me-1 bg-{toastColor}"
+			class="me-1 bg-{toastColor} text-bg-{toastColor}"
 			autohide
 			on:close={() => (toastIsOpen = false)}
 		>

src/routes/Control.spec.ts

@@ -0,0 +1,30 @@
+import { writable } from 'svelte/store';
+import Control from './Control.svelte';
+import { render } from '@testing-library/svelte';
+import { describe, test, expect, beforeEach } from 'vitest';
+import { addMessages, init, locale } from 'svelte-i18n';
+
+import '$lib/i18n/index.ts';
+import en from '$lib/locales/en.json';
+addMessages('en', en);
+
+describe('Control Component', () => {
+	beforeEach(() => {
+		init({
+			fallbackLocale: 'en',
+			initialLocale: 'en'
+		});
+		locale.set('en');
+	});
+
+	test('should render the component', () => {
+		const host = document.createElement('div');
+		document.body.appendChild(host);
+		const instance = render(Control, {
+			target: host,
+			props: { status: writable([]), settings: writable([]) }
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML).toContain('Control');
+	});
+});

src/routes/Control.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { PUBLIC_BASE_URL } from '$lib/config';
 	import { onDestroy } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import type { Writable } from 'svelte/store';
@@ -14,11 +14,14 @@
 		Input,
 		Label,
 		Row
-	} from 'sveltestrap';
+	} from '@sveltestrap/sveltestrap';
+	import FirmwareUpdater from './FirmwareUpdater.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { Placeholder } from '$lib/components';
 
 	export let settings = {};
+
 	export let customText: string;
-	export let ledColor: string = '#FFCC00';
 	export let status: Writable<{ leds: [] }>;
 	let ledStatus = [];
 	let keepLedsSameColor = false;
@@ -41,8 +44,7 @@
 	};
 
 	const setLEDcolor = () => {
-		console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
+		fetch(`${PUBLIC_BASE_URL}/api/lights/set`, {
-		fetch(`${PUBLIC_BASE_URL}/api/lights`, {
 			headers: {
 				'Content-Type': 'application/json'
 			},
@@ -55,6 +57,18 @@
 		fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(() => {});
 	};
 
+	const turnOnFrontlight = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/frontlight/on`).catch(() => {});
+	};
+
+	const flashFrontlight = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/frontlight/flash`).catch(() => {});
+	};
+
+	const turnOffFrontlight = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/frontlight/off`).catch(() => {});
+	};
+
 	const restartClock = () => {
 		fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(() => {});
 	};
@@ -82,34 +96,53 @@
 	});
 
 	onDestroy(firstLedDataSubscription);
+
+	// You can also add more props if needed
+	export let xs = 12;
+	export let sm = xs;
+	export let md = sm;
+	export let lg = md;
+	export let xl = lg;
+	export let xxl = xl;
 </script>
 
-<Col>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card>
+	<Card id="control">
 		<CardHeader>
 			<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
 			<Form>
 				<Row>
-					<Label md={4} for="customText">{$_('section.control.text')}</Label>
+					<Label md={4} for="customText" size={$uiSettings.inputSize}
+						>{$_('section.control.text')}</Label
+					>
 					<Col md="8">
 						<Input
 							type="text"
 							id="customText"
 							bind:value={customText}
-							bsSize="sm"
+							bsSize="$uiSettings.inputSize"
 							maxLength={$settings.numScreens}
 						/>
 					</Col>
 				</Row>
-				<Button color="primary" on:click={setCustomText}>{$_('section.control.showText')}</Button>
+				<Row>
+					<Col class="d-flex justify-content-end">
+						<Button color="primary" on:click={setCustomText} bsSize={$uiSettings.btnSize}
+							>{$_('section.control.showText')}</Button
+						>
+					</Col>
+				</Row>
 			</Form>
 			<hr />
+			{#if !$settings.disableLeds}
 				<h3>LEDs</h3>
 				<Form>
 					<Row>
-					<Label md={4} for="ledColorPicker" size="sm">{$_('section.control.ledColor')}</Label>
+						<Label md={4} for="ledColorPicker" size={$uiSettings.inputSize}
+							>{$_('section.control.ledColor')}</Label
+						>
 						<Col md="8">
 							<Row class="justify-content-between">
 								{#if ledStatus}
@@ -126,40 +159,90 @@
 									{/each}
 								{/if}
 							</Row>
-						<Row class="justify-content-between">
+							<Row>
-							<Col>
+								<Col class="d-flex justify-content-end">
 									<Input
 										bind:checked={keepLedsSameColor}
 										type="switch"
-									class="mx-auto"
 										label={$_('sections.control.keepSameColor')}
+										bsSize={$uiSettings.inputSize}
 									/>
 								</Col>
 							</Row>
 						</Col>
 					</Row>
-				<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}
+					<Row>
+						<Col class="d-flex justify-content-end">
+							<Button
+								color="secondary"
+								id="turnOffLedsBtn"
+								on:click={turnOffLeds}
+								bsSize={$uiSettings.inputSize}>{$_('section.control.turnOff')}</Button
+							>
+							<div class="mx-2"></div>
+							<Button color="primary" on:click={setLEDcolor} bsSize={$uiSettings.inputSize}
+								>{$_('section.control.setColor')}</Button
+							>
+						</Col>
+					</Row>
+				</Form>
+				<hr />
+			{/if}
+			{#if $settings.hasFrontlight && !$settings.flDisable}
+				<h3>{$_('section.control.frontlight')}</h3>
+				<Row class="d-flex justify-content-between justify-content-md-end">
+					<Col md="auto" class="">
+						<Button color="secondary" id="turnOffFrontlightBtn" on:click={turnOffFrontlight}
 							>{$_('section.control.turnOff')}</Button
 						>
-				<Button color="primary" on:click={setLEDcolor}>{$_('section.control.setColor')}</Button>
+					</Col><Col md="auto" class="">
-			</Form>
+						<Button color="primary" on:click={turnOnFrontlight}
-
+							>{$_('section.control.turnOn')}</Button
+						>
+					</Col><Col md="auto" class="">
+						<Button color="success" id="flashFrontlight" on:click={flashFrontlight}
+							>{$_('section.control.flashFrontlight')}</Button
+						>
+					</Col>
+				</Row>
 				<hr />
+			{/if}
 			<h3>{$_('section.control.systemInfo')}</h3>
 			<ul class="small system_info">
-				<li>{$_('section.control.version')}: {$settings.gitRev}</li>
+				{#if $settings.gitTag}
 					<li>
-					{$_('section.control.buildTime')}: {new Date(
+						{$_('section.control.version')}: {$settings.gitTag}
-						$settings.lastBuildTime * 1000
-					).toLocaleString()}
 					</li>
-				<li>IP: {$settings.ip}</li>
+				{/if}
-				<li>{$_('section.control.hostname')}: {$settings.hostname}</li>
+				<li>
+					{$_('section.control.buildTime')}: <Placeholder
+						value={new Date($settings.lastBuildTime * 1000).toLocaleString()}
+						checkValue={$settings.lastBuildTime}
+					/>
+				</li>
+				<li>IP: <Placeholder value={$settings.ip} /></li>
+				<li>HW revision: <Placeholder value={$settings.hwRev} /></li>
+				<li>{$_('section.control.fwCommit')}: <Placeholder value={$settings.gitRev} /></li>
+				<li>WebUI commit: <Placeholder value={$settings.fsRev} /></li>
+				<li>{$_('section.control.hostname')}: <Placeholder value={$settings.hostname} /></li>
 			</ul>
-			<Button color="danger" id="restartBtn" on:click={restartClock}>{$_('button.restart')}</Button>
+			<Row>
+				<Col class="d-flex justify-content-end">
+					<Button color="danger" id="restartBtn" on:click={restartClock}
+						>{$_('button.restart')}</Button
+					>
+					<div class="mx-2"></div>
+
 					<Button color="warning" id="forceFullRefresh" on:click={forceFullRefresh}
 						>{$_('button.forceFullRefresh')}</Button
 					>
+				</Col>
+			</Row>
+			{#if $settings.otaEnabled}
+				<hr />
+				<h3>{$_('section.control.firmwareUpdate')}</h3>
+				<FirmwareUpdater on:showToast bind:settings bind:status />
+			{/if}
 		</CardBody>
 	</Card>
 </Col>

src/routes/FirmwareUpdater.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+	import { PUBLIC_BASE_URL } from '$lib/config';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { writable } from 'svelte/store';
+	import { Progress, Alert, Button } from '@sveltestrap/sveltestrap';
+	import HourglassSplitIcon from 'svelte-bootstrap-icons/lib/HourglassSplit.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let settings = { hwRev: '' };
+	export let status = writable({ isOTAUpdating: false });
+	let currentVersion: string = $settings.gitTag; // Replace with your current version
+
+	let latestVersion: string = '';
+	let isNewerVersionAvailable: boolean = false;
+	let releaseDate: string = '';
+	let releaseUrl: string = '';
+
+	const countdown = writable(10);
+	let firmwareUploadFile: File | null = null;
+	let firmwareWebUiFile: File | null = null;
+
+	let firmwareUploadProgress = 0;
+	let firmwareUploadSuccess = false;
+	let firmwareUploadError = false;
+
+	const handleFileChange = (event: Event, setFile: (file: File) => void) => {
+		const target = event.target as HTMLInputElement;
+		if (target.files && target.files.length > 0) {
+			setFile(target.files[0]);
+		}
+	};
+
+	function startCountdownToReload(duration: number) {
+		let timeRemaining = duration;
+
+		const interval = setInterval(() => {
+			timeRemaining -= 1;
+			countdown.set(timeRemaining);
+
+			if (timeRemaining <= 0) {
+				clearInterval(interval);
+				location.reload();
+			}
+		}, 1000); // Update every second
+	}
+
+	const uploadFile = async (file: File | null, endpoint: string) => {
+		if (!file) return;
+
+		const formData = new FormData();
+		formData.append('file', file);
+		firmwareUploadSuccess = false;
+		firmwareUploadError = false;
+		try {
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', endpoint);
+
+			xhr.upload.onprogress = (event: ProgressEvent) => {
+				if (event.lengthComputable) {
+					firmwareUploadProgress = Math.round((event.loaded * 100) / event.total);
+				}
+			};
+
+			xhr.onload = () => {
+				if (xhr.status === 200 && xhr.responseText != 'FAIL') {
+					firmwareUploadSuccess = true;
+					startCountdownToReload(10);
+				} else {
+					firmwareUploadError = true;
+				}
+			};
+
+			xhr.onerror = () => {
+				firmwareUploadError = true;
+			};
+
+			xhr.send(formData);
+		} catch (error) {
+			firmwareUploadError = true;
+			console.error(error);
+		}
+	};
+
+	const uploadFirmwareFile = () => {
+		uploadFile(firmwareUploadFile, `${PUBLIC_BASE_URL}/upload/firmware`);
+	};
+
+	const uploadWebUiFile = () => {
+		uploadFile(firmwareWebUiFile, `${PUBLIC_BASE_URL}/upload/webui`);
+	};
+
+	const getFirmwareBinaryName = () => {
+		let binaryFilename = '';
+		switch ($settings.hwRev) {
+			case 'REV_V8_EPD_2_13':
+				binaryFilename = 'btclock_rev_v8_213epd_firmware.bin';
+				break;
+			case 'REV_B_EPD_2_13':
+				binaryFilename = 'btclock_rev_b_213epd_firmware.bin';
+				break;
+			case 'REV_A_EPD_2_13':
+				binaryFilename = 'lolin_s3_mini_213epd_firmware.bin';
+				break;
+			case 'REV_A_EPD_2_9':
+				binaryFilename = 'lolin_s3_mini_29epd_firmware.bin';
+				break;
+			default:
+				binaryFilename = 'Unsupported hardware, unable to determine firmware binary filename';
+		}
+
+		return binaryFilename;
+	};
+
+	const getWebUiBinaryName = () => {
+		let webuiFilename = '';
+		switch ($settings.hwRev) {
+			case 'REV_V8_EPD_2_13':
+				webuiFilename = 'littlefs_16MB.bin';
+				break;
+			case 'REV_B_EPD_2_13':
+				webuiFilename = 'littlefs_8MB.bin';
+				break;
+			case 'REV_A_EPD_2_13':
+				webuiFilename = 'littlefs_4MB.bin';
+				break;
+			default:
+				webuiFilename = 'Unsupported hardware, unable to determine WebUI binary filename';
+		}
+
+		return webuiFilename;
+	};
+
+	const onAutoUpdate = async (e: Event) => {
+		e.preventDefault();
+
+		try {
+			const response = await fetch(`${PUBLIC_BASE_URL}/api/firmware/auto_update`);
+
+			if (!response.ok) {
+				let msg = (await response.json()).msg;
+
+				dispatch('showToast', {
+					color: 'danger',
+					text: msg
+				});
+			} else {
+				let msg = (await response.json()).msg;
+
+				dispatch('showToast', {
+					color: 'info',
+					text: msg
+				});
+			}
+		} catch (error) {
+			dispatch('showToast', {
+				color: 'danger',
+				text: error
+			});
+			console.error('Error fetching latest version:', error);
+		}
+	};
+
+	onMount(async () => {
+		try {
+			const response = await fetch(
+				'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
+			);
+
+			if (!response.ok) {
+				latestVersion = 'error';
+			} else {
+				const data = await response.json();
+				latestVersion = data.tag_name;
+				releaseDate = new Date(data.created_at).toLocaleString();
+				releaseUrl = data.html_url;
+
+				isNewerVersionAvailable = compareVersions(latestVersion, currentVersion) === 1;
+			}
+		} catch (error) {
+			console.error('Error fetching latest version:', error);
+		}
+	});
+
+	function compareVersions(version1: string, version2: string): number {
+		if (!version2) return 0;
+
+		const parts1 = version1.split('.').map((part) => parseInt(part, 10));
+		const parts2 = version2.split('.').map((part) => parseInt(part, 10));
+
+		for (let i = 0; i < 3; i++) {
+			if (parts1[i] > parts2[i]) {
+				return 1;
+			} else if (parts1[i] < parts2[i]) {
+				return -1;
+			}
+		}
+
+		return 0;
+	}
+</script>
+
+{#if latestVersion && latestVersion != 'error'}
+	<p>
+		{$_('section.firmwareUpdater.latestVersion')}: {latestVersion} - {$_(
+			'section.firmwareUpdater.releaseDate'
+		)}: {releaseDate} -
+		<a href={releaseUrl} target="_blank">{$_('section.firmwareUpdater.viewRelease')}</a><br />
+		{#if isNewerVersionAvailable}
+			{#if !$status.isOTAUpdating}
+				{$_('section.firmwareUpdater.swUpdateAvailable')} -
+				<a href="/" on:click={onAutoUpdate}>{$_('section.firmwareUpdater.autoUpdate')}</a>.
+			{:else}
+				<HourglassSplitIcon /> {$_('section.firmwareUpdater.autoUpdateInProgress')}
+			{/if}
+		{:else}
+			{$_('section.firmwareUpdater.swUpToDate')}
+		{/if}
+	</p>
+{:else if latestVersion == 'error'}
+	<p>Error loading version, try again later.</p>
+{:else}
+	<p>Loading...</p>
+{/if}
+{#if !$status.isOTAUpdating}
+	<section class="row row-cols-lg-auto align-items-end">
+		<div class="col flex-fill">
+			<label for="firmwareFile" class="form-label">Firmware file ({getFirmwareBinaryName()})</label>
+			<input
+				type="file"
+				id="firmwareFile"
+				on:change={(e) => handleFileChange(e, (file) => (firmwareUploadFile = file))}
+				name="update"
+				class="form-control"
+				accept=".bin"
+			/>
+		</div>
+		<div class="flex-fill">
+			<Button block on:click={uploadFirmwareFile} color="primary" disabled={!firmwareUploadFile}
+				>Update firmware</Button
+			>
+		</div>
+		<div class="col flex-fill">
+			<label for="webuiFile" class="form-label">WebUI file ({getWebUiBinaryName()})</label>
+			<input
+				type="file"
+				id="webuiFile"
+				name="update"
+				class="form-control"
+				placeholder="littlefs.bin"
+				on:change={(e) => handleFileChange(e, (file) => (firmwareWebUiFile = file))}
+				accept=".bin"
+			/>
+		</div>
+		<div class="flex-fill">
+			<Button block on:click={uploadWebUiFile} color="secondary" disabled={!firmwareWebUiFile}
+				>Update WebUI</Button
+			>
+		</div>
+	</section>
+	{#if firmwareUploadProgress > 0}
+		<Progress striped value={firmwareUploadProgress} class="progress" id="firmwareUploadProgress"
+			>{$_('section.firmwareUpdater.uploading')}... {firmwareUploadProgress}%</Progress
+		>
+	{/if}
+	{#if firmwareUploadSuccess}
+		<Alert color="success" class="firmwareUploadStatusAlert"
+			>{$_('section.firmwareUpdater.fileUploadSuccess', { values: { countdown: $countdown } })}
+		</Alert>
+	{/if}
+
+	{#if firmwareUploadError}
+		<Alert color="danger" class="firmwareUploadStatusAlert"
+			>{$_('section.firmwareUpdater.fileUploadFailed')}</Alert
+		>
+	{/if}
+	<small
+		>⚠️ <strong>{$_('warning')}</strong>: {$_('section.firmwareUpdater.firmwareUpdateText')}</small
+	>
+{/if}

src/routes/Rendered.svelte

@@ -1,25 +1,114 @@
 <script lang="ts">
 	export let status = {};
+	import RocketIcon from '../icons/RocketIcon.svelte';
+	import PickaxeIcon from '../icons/PickaxeIcon.svelte';
+	import ZapIcon from '../icons/ZapIcon.svelte';
 
 	const isSplitText = (str: string) => {
 		return str.includes('/');
 	};
+
+	export let className = 'btclock-wrapper';
+	export let verticalDesc = false;
+	// Define the currency symbols as constants
+	const CURRENCY_USD = '$';
+	const CURRENCY_EUR = '[';
+	const CURRENCY_GBP = ']';
+	const CURRENCY_JPY = '^';
+	const CURRENCY_AUD = '_';
+	//const CURRENCY_CHF = '_';
+	const CURRENCY_CAD = '`';
+
+	function getCurrencySymbol(input: string): string {
+		// Split the string into an array of characters to process each one
+		return input
+			.split('')
+			.map((char) => {
+				switch (char) {
+					case CURRENCY_EUR:
+						return '€'; // Euro symbol
+					case CURRENCY_GBP:
+						return '£'; // Pound symbol
+					case CURRENCY_JPY:
+						return '¥'; // Yen symbol
+					case CURRENCY_AUD:
+					case CURRENCY_CAD:
+					case CURRENCY_USD:
+						return '$'; // Dollar symbol
+					default:
+						return char; // Return the original character if no match
+				}
+			})
+			.join(''); // Join the array back into a string
+	}
 </script>
 
-<div class="btcclock-wrapper" id="btcclock-wrapper">
+<div class={className} id={className}>
-	<div class="btclock">
+	<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
 		{#each status.data as char}
 			{#if isSplitText(char)}
 				<div class="splitText">
-					{#each char.split('/') as part}
+					<div class="textcontainer">
-						<div class="flex-items">{part}</div>
+						{#if char.split('/').length}
-					{/each}
+							<span class="top-text">{char.split('/')[0]}</span>
+							<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' : '')}>
+					{#if char.endsWith('rocket')}
+						<RocketIcon></RocketIcon>
+					{/if}
+					{#if char.endsWith('pickaxe')}
+						<PickaxeIcon></PickaxeIcon>
+					{/if}
+					{#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>
+			{:else if char.length >= 3}
+				<div class="mediumText">{char}</div>
 			{:else if char.length === 0 || char === ' '}
 				<div class="digit">&nbsp;&nbsp;</div>
 			{:else}
-				<div class="digit">{char}</div>
+				<div class="digit">{getCurrencySymbol(char)}</div>
 			{/if}
 		{/each}
 	</div>
 </div>
+
+<style lang="scss">
+	.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/Settings.spec.ts

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store';
+import Settings from './Settings.svelte';
+import { render } from '@testing-library/svelte';
+import { describe, test, expect, beforeEach } from 'vitest';
+import { addMessages, init, locale } from 'svelte-i18n';
+
+import '$lib/i18n/index.ts';
+import en from '$lib/locales/en.json';
+addMessages('en', en);
+
+describe('Settings Component', () => {
+	beforeEach(() => {
+		init({
+			fallbackLocale: 'en',
+			initialLocale: 'en'
+		});
+		locale.set('en');
+	});
+
+	test('should render the component', () => {
+		locale.set('en');
+
+		const host = document.createElement('div');
+		document.body.appendChild(host);
+		const instance = render(Settings, {
+			target: host,
+			props: { settings: writable([]) }
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML).toContain('Settings');
+	});
+});

src/routes/Settings.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { PUBLIC_BASE_URL } from '$lib/config';
 	import { createEventDispatcher } from 'svelte';
-
 	import { _ } from 'svelte-i18n';
 	import {
 		Button,
@@ -11,52 +10,67 @@
 		CardTitle,
 		Col,
 		Form,
-		FormText,
-		Input,
-		InputGroup,
-		InputGroupText,
-		Label,
 		Row
-	} from 'sveltestrap';
+	} from '@sveltestrap/sveltestrap';
+	import {
+		ScreenSpecificSettings,
+		DisplaySettings,
+		DataSourceSettings,
+		ExtraFeaturesSettings,
+		SystemSettings
+	} from '$lib/components/settings';
 
 	export let settings;
 
-	const wifiTxPowerMap = new Map<string, number>([
+	const miningPoolMap = new Map<string, string>([
-		['Default', 80],
+		['noderunners', 'Noderunners.network'],
-		['19.5dBm', 78], // 19.5dBm
+		['braiins', 'Braiins Pool'],
-		['19dBm', 76], // 19dBm
+		['ocean', 'ocean.xyz'],
-		['18.5dBm', 74], // 18.5dBm
+		['satoshi_radio', 'Satoshi Radio pool'],
-		['17dBm', 68], // 17dBm
+		['public_pool', 'public-pool.io'],
-		['15dBm', 60], // 15dBm
+		['gobrrr_pool', 'Go Brrr pool'],
-		['13dBm', 52], // 13dBm
+		['ckpool', 'CKPool'],
-		['11dBm', 44], // 11dBm
+		['eu_ckpool', 'EU CKPool'],
-		['8.5dBm', 34], // 8.5dBm
+		['local_public_pool', 'Public Pool (local)']
-		['7dBm', 28], // 7dBm
-		['5dBm', 20] // 5dBm
 	]);
 
 	const dispatch = createEventDispatcher();
 
+	const handleReset = (e: Event) => {
+		e.preventDefault();
+		dispatch('formReset');
+	};
+
 	const onSave = async (e: Event) => {
 		e.preventDefault();
-		let formSettings = $settings;
 
+		let formSettings = $settings;
 		delete formSettings['gitRev'];
 		delete formSettings['ip'];
 		delete formSettings['lastBuildTime'];
 
+		let headers = new Headers({
+			'Content-Type': 'application/json'
+		});
+
 		await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
 			method: 'PATCH',
-			headers: {
+			headers: headers,
-				'Content-Type': 'application/json'
+			credentials: 'same-origin',
-			},
 			body: JSON.stringify(formSettings)
 		})
-			.then(() => {
+			.then((data) => {
+				if (data.status == 200) {
 					dispatch('showToast', {
 						color: 'success',
 						text: $_('section.settings.settingsSaved')
 					});
+				} else {
+					dispatch('showToast', {
+						color: 'danger',
+						text: `${data.status}: ${data.statusText}`
+					});
+				}
 			})
 			.catch(() => {
 				dispatch('showToast', {
@@ -65,244 +79,84 @@
 				});
 			});
 	};
+
+	export let xs = 12;
+	export let sm = xs;
+	export let md = sm;
+	export let lg = md;
+	export let xl = lg;
+	export let xxl = xl;
+
+	let screenSettingsIsOpen = true,
+		displaySettingsIsOpen = false,
+		dataSourceIsOpen = false,
+		extraFeaturesIsOpen = false,
+		systemIsOpen = false;
+
+	const showAll = () => {
+		screenSettingsIsOpen = true;
+		displaySettingsIsOpen = true;
+		dataSourceIsOpen = true;
+		extraFeaturesIsOpen = true;
+		systemIsOpen = true;
+	};
+
+	const hideAll = () => {
+		screenSettingsIsOpen = false;
+		displaySettingsIsOpen = false;
+		dataSourceIsOpen = false;
+		extraFeaturesIsOpen = false;
+		systemIsOpen = false;
+	};
 </script>
 
-<Col>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card>
+	<Card id="settings">
 		<CardHeader>
-			<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
+			<div class="float-end">
+				<small>
+					<button type="button" on:click={showAll} id="showAllBtn"
+						>{$_('section.settings.showAll')}</button
+					>
+					|
+					<button type="button" on:click={hideAll} id="hideAllBtn"
+						>{$_('section.settings.hideAll')}</button
+					>
+				</small>
+			</div>
+			<CardTitle>{$_('section.settings.title')}</CardTitle>
 		</CardHeader>
 		<CardBody>
+			{#if $settings.isLoaded === false}
+				<div class="d-flex align-items-center">
+					<strong role="status">Loading...</strong>
+					<div class="spinner-border ms-auto" aria-hidden="true"></div>
+				</div>
+			{:else}
 				<Form on:submit={onSave}>
-				<Row>
+					<ScreenSpecificSettings {settings} bind:isOpen={screenSettingsIsOpen} />
-					<Label md={6} for="fgColor" size="sm"
+					<DisplaySettings {settings} bind:isOpen={displaySettingsIsOpen} />
-						>{$_('section.settings.textColor', { default: 'Text color' })}</Label
+					<DataSourceSettings {settings} bind:isOpen={dataSourceIsOpen} on:showToast />
-					>
+					<ExtraFeaturesSettings
-					<Col md="6">
+						{settings}
-						<Input
+						bind:isOpen={extraFeaturesIsOpen}
-							type="select"
+						{miningPoolMap}
-							bind:value={$settings.fgColor}
+						on:showToast
-							name="select"
-							id="fgColor"
-							bsSize="sm"
-							class="form-select-sm"
-						>
-							<option value="0">{$_('colors.black')}</option>
-							<option value="65535">{$_('colors.white')}</option>
-						</Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="bgColor" size="sm">{$_('section.settings.backgroundColor')}</Label>
-					<Col md="6">
-						<Input
-							type="select"
-							bind:value={$settings.bgColor}
-							name="select"
-							id="bgColor"
-							bsSize="sm"
-							class="form-select-sm"
-						>
-							<option value="0">{$_('colors.black')}</option>
-							<option value="65535">{$_('colors.white')}</option>
-						</Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="timePerScreen" size="sm">{$_('section.settings.timePerScreen')}</Label>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.timePerScreen} />
-							<InputGroupText>{$_('time.minutes')}</InputGroupText>
-						</InputGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="fullRefreshMin" size="sm"
-						>{$_('section.settings.fullRefreshEvery')}</Label
-					>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.fullRefreshMin} />
-							<InputGroupText>{$_('time.minutes')}</InputGroupText>
-						</InputGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="minSecPriceUpd" size="sm"
-						>{$_('section.settings.timeBetweenPriceUpdates')}</Label
-					>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
-							<InputGroupText>{$_('time.seconds')}</InputGroupText>
-						</InputGroup>
-						<FormText>{$_('section.settings.shortAmountsWarning')}</FormText>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="tzOffset" size="sm">{$_('section.settings.timezoneOffset')}</Label>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input
-								type="number"
-								step="1"
-								name="tzOffset"
-								id="tzOffset"
-								bind:value={$settings.tzOffset}
 					/>
-							<InputGroupText>{$_('time.minutes')}</InputGroupText>
+					<SystemSettings {settings} bind:isOpen={systemIsOpen} />
-						</InputGroup>
-						<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="ledBrightness" size="sm">{$_('section.settings.ledBrightness')}</Label>
-					<Col md="6">
-						<Input
-							type="range"
-							name="ledBrightness"
-							id="ledBrightness"
-							bind:value={$settings.ledBrightness}
-							min={0}
-							max={255}
-							step={1}
-						/>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="mempoolInstance" size="sm"
-						>{$_('section.settings.mempoolnstance')}</Label
-					>
-					<Col md="6">
-						<Input
-							type="text"
-							bind:value={$settings.mempoolInstance}
-							name="mempoolInstance"
-							id="mempoolInstance"
-							bsSize="sm"
-						></Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="hostnamePrefix" size="sm"
-						>{$_('section.settings.hostnamePrefix')}</Label
-					>
-					<Col md="6">
-						<Input
-							type="text"
-							bind:value={$settings.hostnamePrefix}
-							name="hostnamePrefix"
-							id="hostnamePrefix"
-							bsSize="sm"
-						></Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="wifiTxPower" size="sm"
-						>{$_('section.settings.wifiTxPower', { default: 'WiFi Tx Power' })}</Label
-					>
-					<Col md="6">
-						<Input
-							type="select"
-							bind:value={$settings.txPower}
-							name="select"
-							id="fgColor"
-							bsSize="sm"
-							class="form-select-sm"
-						>
-							{#each wifiTxPowerMap as [key, value]}
-								<option {value}>{key}</option>
-							{/each}
-						</Input>
-						<FormText>{$_('section.settings.wifiTxPowerText')}</FormText>
-					</Col>
-				</Row>
-				<Row>
-					<Col md="6">
-						<Input
-							id="ledTestOnPower"
-							bind:checked={$settings.ledTestOnPower}
-							type="switch"
-							bsSize="sm"
-							label={$_('section.settings.ledPowerOnTest')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="ledFlashOnUpd"
-							bind:checked={$settings.ledFlashOnUpd}
-							type="switch"
-							bsSize="sm"
-							label={$_('section.settings.ledFlashOnBlock')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="stealFocus"
-							bind:checked={$settings.stealFocus}
-							type="switch"
-							bsSize="sm"
-							label={$_('section.settings.StealFocusOnNewBlock')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="mcapBigChar"
-							bind:checked={$settings.mcapBigChar}
-							type="switch"
-							bsSize="sm"
-							label={$_('section.settings.useBigCharsMcap')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="otaEnabled"
-							bind:checked={$settings.otaEnabled}
-							type="switch"
-							bsSize="sm"
-							label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="mdnsEnabled"
-							bind:checked={$settings.mdnsEnabled}
-							type="switch"
-							bsSize="sm"
-							label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="fetchEurPrice"
-							bind:checked={$settings.fetchEurPrice}
-							type="switch"
-							bsSize="sm"
-							label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
-						/>
-					</Col>
-				</Row>
 
-				<Row>
+					<Row class="mt-4">
-					<h3>{$_('section.settings.screens')}</h3>
+						<Col>
-					{#if $settings.screens}
+							<Button type="submit" color="primary" class="me-2">
-						{#each $settings.screens as s}
+								{$_('button.save')}
-							<Col md="6">
+							</Button>
-								<Input
+							<Button type="button" color="secondary" on:click={handleReset}>
-									id="screens_{s.id}"
+								{$_('button.reset')}
-									bind:checked={s.enabled}
+							</Button>
-									type="switch"
-									bsSize="sm"
-									label={s.name}
-								/>
 						</Col>
-						{/each}
-					{/if}
 					</Row>
-				<Button type="reset" color="secondary">{$_('button.reset')}</Button>
-				<Button color="primary">{$_('button.save')}</Button>
 				</Form>
+			{/if}
 		</CardBody>
 	</Card>
 </Col>

src/routes/Status.spec.ts

@@ -0,0 +1,30 @@
+import { writable } from 'svelte/store';
+import Status from './Status.svelte';
+import { render } from '@testing-library/svelte';
+import { describe, test, expect, beforeEach } from 'vitest';
+import { locale, init, addMessages } from 'svelte-i18n';
+
+import '$lib/i18n/index.ts';
+import en from '$lib/locales/en.json';
+addMessages('en', en);
+
+describe('Status Component', () => {
+	beforeEach(() => {
+		init({
+			fallbackLocale: 'en',
+			initialLocale: 'en'
+		});
+		locale.set('en');
+	});
+
+	test('should render the component', () => {
+		const host = document.createElement('div');
+		document.body.appendChild(host);
+		const instance = render(Status, {
+			target: host,
+			props: { status: writable([]), settings: writable([]) }
+		});
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML).toContain('Status');
+	});
+});

src/routes/Status.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { PUBLIC_BASE_URL } from '$lib/config';
 
 	import { _ } from 'svelte-i18n';
 	import { writable } from 'svelte/store';
@@ -15,12 +15,23 @@
 		Progress,
 		Tooltip,
 		Row
-	} from 'sveltestrap';
+	} from '@sveltestrap/sveltestrap';
 	import Rendered from './Rendered.svelte';
+	import { DataSourceType } from '$lib/types/dataSource';
 
 	export let settings;
 	export let status: writable<object>;
 
+	// Function to split array into chunks
+	const chunkArray = (array, chunkSize) => {
+		const result = [];
+		for (let i = 0; i < array.length; i += chunkSize) {
+			result.push(array.slice(i, i + chunkSize));
+		}
+		return result;
+	};
+	let buttonChunks = chunkArray([], 6);
+
 	const toTime = (secs: number) => {
 		var hours = Math.floor(secs / (60 * 60));
 
@@ -64,13 +75,19 @@
 	});
 
 	settings.subscribe((value: object) => {
-		lightMode = value.bgColor > value.fgColor;
+		lightMode = !value.invertedColor;
+
+		if (value.screens) buttonChunks = chunkArray(value.screens, 5);
 	});
 
 	const setScreen = (id: number) => () => {
 		fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(() => {});
 	};
 
+	const setCurrency = (c: string) => () => {
+		fetch(`${PUBLIC_BASE_URL}/api/show/currency/${c}`).catch(() => {});
+	};
+
 	const toggleTimer = (currentStatus: boolean) => (e: Event) => {
 		e.preventDefault();
 		if (currentStatus) {
@@ -79,16 +96,52 @@
 			fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
 		}
 	};
+
+	const toggleDoNotDisturb = (currentStatus: boolean) => (e: Event) => {
+		e.preventDefault();
+		console.log(currentStatus);
+		if (!currentStatus) {
+			fetch(`${PUBLIC_BASE_URL}/api/dnd/enable`);
+		} else {
+			fetch(`${PUBLIC_BASE_URL}/api/dnd/disable`);
+		}
+	};
+
+	export let xs = 12;
+	export let sm = xs;
+	export let md = sm;
+	export let lg = md;
+	export let xl = lg;
+	export let xxl = xl;
 </script>
 
-<Col>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card>
+	<Card id="status">
 		<CardHeader>
 			<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
+			{#if $settings.isLoaded === false}
+				<div class="d-flex align-items-center">
+					<strong role="status">Loading...</strong>
+					<div class="spinner-border ms-auto" aria-hidden="true"></div>
+				</div>
+			{:else}
 				{#if $settings.screens}
-				<div class="d-flex justify-content-center">
+					<div class=" d-block d-sm-none mx-auto text-center">
+						{#each buttonChunks as chunk}
+							<ButtonGroup size="sm" class="mx-auto mb-1">
+								{#each chunk as s}
+									<Button
+										color="outline-primary"
+										active={$status.currentScreen == s.id}
+										on:click={setScreen(s.id)}>{s.name}</Button
+									>
+								{/each}
+							</ButtonGroup>
+						{/each}
+					</div>
+					<div class="d-flex justify-content-center d-none d-sm-flex">
 						<ButtonGroup size="sm">
 							{#each $settings.screens as s}
 								<Button
@@ -99,13 +152,40 @@
 							{/each}
 						</ButtonGroup>
 					</div>
+					{#if $settings.actCurrencies && ($settings.dataSource == DataSourceType.BTCLOCK_SOURCE || $settings.dataSource == DataSourceType.CUSTOM_SOURCE)}
+						<div class="d-flex justify-content-center d-sm-flex mt-2">
+							<ButtonGroup size="sm">
+								{#each $settings.actCurrencies as c}
+									<Button
+										color="outline-success"
+										active={$status.currency == c}
+										on:click={setCurrency(c)}>{c}</Button
+									>
+								{/each}
+							</ButtonGroup>
+						</div>
+					{/if}
 					<hr />
 					{#if $status.data}
-					<section class={lightMode ? 'lightMode' : ''}>
+						<section class={lightMode ? 'lightMode' : 'darkMode'} style="position: relative;">
-						<Rendered status={$status}></Rendered>
+							{#if $status.isUpdating === false && ($status.isFake ?? false) === false}
+								<div class="connection-lost-overlay">
+									<div class="overlay-content">
+										<i class="bi bi-wifi-off"></i>
+										<h4>Lost connection</h4>
+										<p>Trying to reconnect...</p>
+									</div>
+								</div>
+							{/if}
+							<Rendered
+								status={$status}
+								className="btclock-wrapper"
+								verticalDesc={$settings.verticalDesc}
+							></Rendered>
 						</section>
 						{$_('section.status.screenCycle')}:
 						<a
+							id="timerStatusText"
 							href={'#'}
 							style="cursor: pointer"
 							tabindex="0"
@@ -115,10 +195,31 @@
 							>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
 									'timer.stopped'
 								)}{/if}</a
+						><br />
+
+						{$_('section.status.doNotDisturb')}:
+						<a
+							id="dndStatusText"
+							href={'#'}
+							style="cursor: pointer"
+							tabindex="0"
+							role="button"
+							aria-pressed="false"
+							on:click={toggleDoNotDisturb($status.dnd?.enabled)}
 						>
+							{#if $status.dnd?.active}&#9205; {$_('on')}{:else}&#9208; {$_('off')}{/if}</a
+						>
+						<small>
+							{#if $status.dnd?.timeBasedEnabled}
+								{$_('section.status.timeBasedDnd')} ( {$settings.dnd
+									.startHour}:{$settings.dnd.startMinute.toString().padStart(2, '0')} - {$settings
+									.dnd.endHour}:{$settings.dnd.endMinute.toString().padStart(2, '0')} )
+							{/if}
+						</small>
 					{/if}
 				{/if}
 				<hr />
+				{#if !$settings.disableLeds}
 					<Row class="justify-content-evenly">
 						{#if $status.leds}
 							{#each $status.leds as led}
@@ -135,6 +236,7 @@
 						{/if}
 					</Row>
 					<hr />
+				{/if}
 				<Progress striped value={memoryFreePercent}>{memoryFreePercent}%</Progress>
 				<div class="d-flex justify-content-between">
 					<div>{$_('section.status.memoryFree')}</div>
@@ -143,6 +245,10 @@
 					</div>
 				</div>
 				<hr />
+				{#if $settings.hasLightLevel}
+					{$_('section.status.lightSensor')}: {Number(Math.round($status.lightLevel))} lux
+					<hr />
+				{/if}
 				<Progress striped id="rssiBar" color={wifiStrengthColor} value={rssiPercent}
 					>{rssiPercent}%</Progress
 				>
@@ -158,6 +264,18 @@
 				{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
 				<br />
 				<p>
+					{#if $settings.dataSource == DataSourceType.NOSTR_SOURCE || $settings.nostrZapNotify}
+						{$_('section.status.nostrConnection')}:
+						<span>
+							{#if $status.connectionStatus && $status.connectionStatus.nostr}
+								&#9989;
+							{:else}
+								&#10060;
+							{/if}
+						</span>
+					{/if}
+					{#if $settings.dataSource != DataSourceType.NOSTR_SOURCE}
+						{#if $settings.dataSource == DataSourceType.THIRD_PARTY_SOURCE}
 							{$_('section.status.wsPriceConnection')}:
 							<span>
 								{#if $status.connectionStatus && $status.connectionStatus.price}
@@ -167,7 +285,9 @@
 								{/if}
 							</span>
 							-
-				{$_('section.status.wsMempoolConnection')}:
+							{$_('section.status.wsMempoolConnection', {
+								values: { instance: $settings.mempoolInstance }
+							})}:
 							<span>
 								{#if $status.connectionStatus && $status.connectionStatus.blocks}
 									&#9989;
@@ -175,10 +295,25 @@
 									&#10060;
 								{/if}
 							</span><br />
+						{:else}
+							{$_('section.status.wsDataConnection')}:
+							<span>
+								{#if $status.connectionStatus && $status.connectionStatus.V2}
+									&#9989;
+								{:else}
+									&#10060;
+								{/if}
+							</span>
+						{/if}
+					{/if}
 					{#if $settings.fetchEurPrice}
 						<small>{$_('section.status.fetchEuroNote')}</small>
 					{/if}
 				</p>
+			{/if}
 		</CardBody>
 	</Card>
 </Col>
+
+<style lang="scss">
+</style>

src/routes/api/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Container } from 'sveltestrap';
+	import { Button, Container } from '@sveltestrap/sveltestrap';
 
 	import { onMount } from 'svelte';
 	let swaggerLoaded: boolean = false;
@@ -31,21 +31,21 @@
 <svelte:head>
 	<title>API playground</title>
 	<script
-		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui-bundle.min.js"
+		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.min.js"
-		integrity="sha512-Ckle4LZv9LhAfEdohBdUi+QCu0e7HkXHTeSPXfbDzbCsR87QNTUBylkBEPsBNn4Ph83yK1hJ6f2uH4QMtB0hTA=="
+		integrity="sha512-7ihPQv5ibiTr0DW6onbl2MIKegdT6vjpPySyIb4Ftp68kER6Z7Yiub0tFoMmCHzZfQE9+M+KSjQndv6NhYxDgg=="
 		crossorigin="anonymous"
 		referrerpolicy="no-referrer"
 	></script>
 	<script
-		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui-standalone-preset.min.js"
+		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-standalone-preset.min.js"
-		integrity="sha512-qwGi7EG31HcylzamsmacHLZJrfUGRuuHEaCMcOojuNpMu+paR554VjaCZ9LdUVTrmF8xC03YVqTzuKx0SDdruA=="
+		integrity="sha512-UrYi+60Ci3WWWcoDXbMmzpoi1xpERbwjPGij6wTh8fXl81qNdioNNHExr9ttnBebKF0ZbVnPlTPlw+zECUK1Xw=="
 		crossorigin="anonymous"
 		referrerpolicy="no-referrer"
 	></script>
 	<link
 		rel="stylesheet"
-		href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui.min.css"
+		href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.min.css"
-		integrity="sha512-Ck+X9SARG7WscOTG4a8Qod5Zgd1MZlz4VtyyucjMJ3PnZy2lUl7q/v/0055yIfGM/v+f+216ME0/dv0qqtm6+g=="
+		integrity="sha512-+9UD8YSD9GF7FzOH38L9S6y56aYNx3R4dYbOCgvTJ2ZHpJScsahNdaMQJU/8osUiz9FPu0YZ8wdKf4evUbsGSg=="
 		crossorigin="anonymous"
 		referrerpolicy="no-referrer"
 	/>

src/routes/convert/+page.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { Col, Container, Input, InputGroup, InputGroupText, Row } from '@sveltestrap/sveltestrap';
+	import { onDestroy, onMount } from 'svelte';
+	import { encode, decode } from 'msgpack-es';
+
+	let exchangeRates = {
+		USD: 57798,
+		GBP: 44236,
+		AUD: 86552,
+		JPY: 8221088,
+		EUR: 52347,
+		CAD: 78508
+	};
+
+	let socket: WebSocket;
+
+	let currencies = { ...exchangeRates };
+	let btcValue = 1;
+	let satsValue = 100000000;
+	let lastEditedField = 'BTC';
+	let inputValues = {
+		BTC: '1',
+		sats: '100000000',
+		...Object.fromEntries(
+			Object.keys(exchangeRates).map((cur) => [cur, exchangeRates[cur].toString()])
+		)
+	};
+
+	function updateValues(currency: string, value: string) {
+		lastEditedField = currency;
+		inputValues[currency] = value;
+
+		let numValue = value === '' ? 0 : parseFloat(value);
+
+		if (currency === 'BTC') {
+			btcValue = numValue;
+			satsValue = Math.round(numValue * 100000000);
+		} else if (currency === 'sats') {
+			satsValue = Math.round(numValue);
+			btcValue = satsValue / 100000000;
+		} else {
+			btcValue = numValue / exchangeRates[currency];
+			satsValue = Math.round(btcValue * 100000000);
+		}
+
+		// Update other currency values
+		for (let cur in currencies) {
+			if (cur !== currency) {
+				currencies[cur] = btcValue * exchangeRates[cur];
+				inputValues[cur] = formatValue(currencies[cur], cur);
+			}
+		}
+
+		inputValues.BTC = formatValue(btcValue, 'BTC');
+		inputValues.sats = formatValue(satsValue, 'sats');
+	}
+
+	function formatValue(value: number, currency: string): string {
+		if (currency === 'sats') {
+			return Math.round(value).toString();
+		} else if (currency === 'BTC') {
+			return value.toFixed(8).replace(/\.?0+$/, '');
+		} else {
+			return value.toFixed(2);
+		}
+	}
+
+	// async function fetchExchangeRates() {
+	// 	try {
+	// 		const response = await fetch('https://ws.btclock.dev/api/lastprice');
+	// 		const data = await response.json();
+	// 		exchangeRates = data;
+	// 		currencies = { ...data };
+	// 		updateValues(lastEditedField, inputValues[lastEditedField]);
+	// 	} catch (error) {
+	// 		console.error('Error fetching exchange rates:', error);
+	// 	}
+	// }
+
+	onMount(() => {
+		socket = new WebSocket('ws://ws.btclock.dev/api/v2/ws');
+		socket.binaryType = 'arraybuffer';
+
+		socket.addEventListener('open', () => {
+			socket.send(
+				encode({
+					type: 'subscribe',
+					eventType: 'price',
+					currencies: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY']
+				})
+			);
+		});
+
+		socket.addEventListener('message', (event) => {
+			let data = decode(event.data);
+			if ('price' in data) {
+				let currencyKey = Object.keys(data.price);
+				exchangeRates[currencyKey] = data.price[currencyKey];
+				updateValues(lastEditedField, inputValues[lastEditedField]);
+			}
+		});
+	});
+
+	onDestroy(() => {
+		socket.close();
+	});
+</script>
+
+<Container fluid>
+	<Row class="justify-content-center">
+		<Col class="col-md-3 col-sm-12">
+			<InputGroup size="lg" class="mb-2">
+				<InputGroupText class="currencyCode">BTC</InputGroupText>
+				<Input
+					placeholder="Amount"
+					type="number"
+					value={inputValues.BTC}
+					on:input={(e) => updateValues('BTC', e.target.value)}
+				/>
+			</InputGroup>
+			<InputGroup size="lg" class="mb-2">
+				<InputGroupText class="sats currencyCode">s</InputGroupText>
+				<Input
+					placeholder="Amount"
+					type="number"
+					value={inputValues.sats}
+					on:input={(e) => updateValues('sats', e.target.value)}
+				/>
+			</InputGroup>
+			{#each Object.entries(exchangeRates) as [cur]}
+				<InputGroup size="lg" class="mb-2">
+					<InputGroupText class="currencyCode">{cur}</InputGroupText>
+					<Input
+						placeholder="Amount"
+						type="number"
+						value={inputValues[cur]}
+						on:input={(e) => updateValues(cur, e.target.value)}
+					/>
+				</InputGroup>
+			{/each}
+		</Col>
+	</Row>
+</Container>

static/swagger.json

@@ -43,7 +43,7 @@
 						"content": {
 							"application/json": {
 								"schema": {
-									"$ref": null
+									"$ref": "#/components/schemas/ArrayOfLeds"
 								}
 							}
 						}
@@ -202,7 +202,9 @@
 						}
 					}
 				}
+			}
 		},
+		"/lights/set": {
 			"patch": {
 				"tags": ["lights"],
 				"summary": "Set individual LEDs",
@@ -225,7 +227,7 @@
 				}
 			}
 		},
-		"/lights/{color}": {
+		"/lights/color/{color}": {
 			"get": {
 				"tags": ["lights"],
 				"summary": "Turn on LEDs with specific color",

static/swagger.yml

@@ -33,7 +33,7 @@ paths:
           content:
             application/json:
               schema:
-                $ref: #/components/schemas/ArrayOfLeds
+                $ref: '#/components/schemas/ArrayOfLeds'
     post:
       tags:
         - system
@@ -139,6 +139,7 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/ArrayOfLeds'
+  /lights/set:
     patch:
       tags:
         - lights
@@ -153,7 +154,7 @@ paths:
           description: succesful operation
         '400':
           description: invalid colors or wrong amount of LEDs
-  /lights/{color}:
+  /lights/color/{color}:
     get:
       tags:
         - lights

static/zones.json

@@ -0,0 +1,463 @@
+{
+	"Africa/Abidjan": "GMT0",
+	"Africa/Accra": "GMT0",
+	"Africa/Addis_Ababa": "EAT-3",
+	"Africa/Algiers": "CET-1",
+	"Africa/Asmara": "EAT-3",
+	"Africa/Bamako": "GMT0",
+	"Africa/Bangui": "WAT-1",
+	"Africa/Banjul": "GMT0",
+	"Africa/Bissau": "GMT0",
+	"Africa/Blantyre": "CAT-2",
+	"Africa/Brazzaville": "WAT-1",
+	"Africa/Bujumbura": "CAT-2",
+	"Africa/Cairo": "EET-2EEST,M4.5.5/0,M10.5.4/24",
+	"Africa/Casablanca": "<+01>-1",
+	"Africa/Ceuta": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Africa/Conakry": "GMT0",
+	"Africa/Dakar": "GMT0",
+	"Africa/Dar_es_Salaam": "EAT-3",
+	"Africa/Djibouti": "EAT-3",
+	"Africa/Douala": "WAT-1",
+	"Africa/El_Aaiun": "<+01>-1",
+	"Africa/Freetown": "GMT0",
+	"Africa/Gaborone": "CAT-2",
+	"Africa/Harare": "CAT-2",
+	"Africa/Johannesburg": "SAST-2",
+	"Africa/Juba": "CAT-2",
+	"Africa/Kampala": "EAT-3",
+	"Africa/Khartoum": "CAT-2",
+	"Africa/Kigali": "CAT-2",
+	"Africa/Kinshasa": "WAT-1",
+	"Africa/Lagos": "WAT-1",
+	"Africa/Libreville": "WAT-1",
+	"Africa/Lome": "GMT0",
+	"Africa/Luanda": "WAT-1",
+	"Africa/Lubumbashi": "CAT-2",
+	"Africa/Lusaka": "CAT-2",
+	"Africa/Malabo": "WAT-1",
+	"Africa/Maputo": "CAT-2",
+	"Africa/Maseru": "SAST-2",
+	"Africa/Mbabane": "SAST-2",
+	"Africa/Mogadishu": "EAT-3",
+	"Africa/Monrovia": "GMT0",
+	"Africa/Nairobi": "EAT-3",
+	"Africa/Ndjamena": "WAT-1",
+	"Africa/Niamey": "WAT-1",
+	"Africa/Nouakchott": "GMT0",
+	"Africa/Ouagadougou": "GMT0",
+	"Africa/Porto-Novo": "WAT-1",
+	"Africa/Sao_Tome": "GMT0",
+	"Africa/Tripoli": "EET-2",
+	"Africa/Tunis": "CET-1",
+	"Africa/Windhoek": "CAT-2",
+	"America/Adak": "HST10HDT,M3.2.0,M11.1.0",
+	"America/Anchorage": "AKST9AKDT,M3.2.0,M11.1.0",
+	"America/Anguilla": "AST4",
+	"America/Antigua": "AST4",
+	"America/Araguaina": "<-03>3",
+	"America/Argentina/Buenos_Aires": "<-03>3",
+	"America/Argentina/Catamarca": "<-03>3",
+	"America/Argentina/Cordoba": "<-03>3",
+	"America/Argentina/Jujuy": "<-03>3",
+	"America/Argentina/La_Rioja": "<-03>3",
+	"America/Argentina/Mendoza": "<-03>3",
+	"America/Argentina/Rio_Gallegos": "<-03>3",
+	"America/Argentina/Salta": "<-03>3",
+	"America/Argentina/San_Juan": "<-03>3",
+	"America/Argentina/San_Luis": "<-03>3",
+	"America/Argentina/Tucuman": "<-03>3",
+	"America/Argentina/Ushuaia": "<-03>3",
+	"America/Aruba": "AST4",
+	"America/Asuncion": "<-04>4<-03>,M10.1.0/0,M3.4.0/0",
+	"America/Atikokan": "EST5",
+	"America/Bahia": "<-03>3",
+	"America/Bahia_Banderas": "CST6",
+	"America/Barbados": "AST4",
+	"America/Belem": "<-03>3",
+	"America/Belize": "CST6",
+	"America/Blanc-Sablon": "AST4",
+	"America/Boa_Vista": "<-04>4",
+	"America/Bogota": "<-05>5",
+	"America/Boise": "MST7MDT,M3.2.0,M11.1.0",
+	"America/Cambridge_Bay": "MST7MDT,M3.2.0,M11.1.0",
+	"America/Campo_Grande": "<-04>4",
+	"America/Cancun": "EST5",
+	"America/Caracas": "<-04>4",
+	"America/Cayenne": "<-03>3",
+	"America/Cayman": "EST5",
+	"America/Chicago": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Chihuahua": "CST6",
+	"America/Costa_Rica": "CST6",
+	"America/Creston": "MST7",
+	"America/Cuiaba": "<-04>4",
+	"America/Curacao": "AST4",
+	"America/Danmarkshavn": "GMT0",
+	"America/Dawson": "MST7",
+	"America/Dawson_Creek": "MST7",
+	"America/Denver": "MST7MDT,M3.2.0,M11.1.0",
+	"America/Detroit": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Dominica": "AST4",
+	"America/Edmonton": "MST7MDT,M3.2.0,M11.1.0",
+	"America/Eirunepe": "<-05>5",
+	"America/El_Salvador": "CST6",
+	"America/Fort_Nelson": "MST7",
+	"America/Fortaleza": "<-03>3",
+	"America/Glace_Bay": "AST4ADT,M3.2.0,M11.1.0",
+	"America/Godthab": "<-02>2<-01>,M3.5.0/-1,M10.5.0/0",
+	"America/Goose_Bay": "AST4ADT,M3.2.0,M11.1.0",
+	"America/Grand_Turk": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Grenada": "AST4",
+	"America/Guadeloupe": "AST4",
+	"America/Guatemala": "CST6",
+	"America/Guayaquil": "<-05>5",
+	"America/Guyana": "<-04>4",
+	"America/Halifax": "AST4ADT,M3.2.0,M11.1.0",
+	"America/Havana": "CST5CDT,M3.2.0/0,M11.1.0/1",
+	"America/Hermosillo": "MST7",
+	"America/Indiana/Indianapolis": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Indiana/Knox": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Indiana/Marengo": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Indiana/Petersburg": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Indiana/Tell_City": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Indiana/Vevay": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Indiana/Vincennes": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Indiana/Winamac": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Inuvik": "MST7MDT,M3.2.0,M11.1.0",
+	"America/Iqaluit": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Jamaica": "EST5",
+	"America/Juneau": "AKST9AKDT,M3.2.0,M11.1.0",
+	"America/Kentucky/Louisville": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Kentucky/Monticello": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Kralendijk": "AST4",
+	"America/La_Paz": "<-04>4",
+	"America/Lima": "<-05>5",
+	"America/Los_Angeles": "PST8PDT,M3.2.0,M11.1.0",
+	"America/Lower_Princes": "AST4",
+	"America/Maceio": "<-03>3",
+	"America/Managua": "CST6",
+	"America/Manaus": "<-04>4",
+	"America/Marigot": "AST4",
+	"America/Martinique": "AST4",
+	"America/Matamoros": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Mazatlan": "MST7",
+	"America/Menominee": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Merida": "CST6",
+	"America/Metlakatla": "AKST9AKDT,M3.2.0,M11.1.0",
+	"America/Mexico_City": "CST6",
+	"America/Miquelon": "<-03>3<-02>,M3.2.0,M11.1.0",
+	"America/Moncton": "AST4ADT,M3.2.0,M11.1.0",
+	"America/Monterrey": "CST6",
+	"America/Montevideo": "<-03>3",
+	"America/Montreal": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Montserrat": "AST4",
+	"America/Nassau": "EST5EDT,M3.2.0,M11.1.0",
+	"America/New_York": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Nipigon": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Nome": "AKST9AKDT,M3.2.0,M11.1.0",
+	"America/Noronha": "<-02>2",
+	"America/North_Dakota/Beulah": "CST6CDT,M3.2.0,M11.1.0",
+	"America/North_Dakota/Center": "CST6CDT,M3.2.0,M11.1.0",
+	"America/North_Dakota/New_Salem": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Nuuk": "<-02>2<-01>,M3.5.0/-1,M10.5.0/0",
+	"America/Ojinaga": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Panama": "EST5",
+	"America/Pangnirtung": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Paramaribo": "<-03>3",
+	"America/Phoenix": "MST7",
+	"America/Port-au-Prince": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Port_of_Spain": "AST4",
+	"America/Porto_Velho": "<-04>4",
+	"America/Puerto_Rico": "AST4",
+	"America/Punta_Arenas": "<-03>3",
+	"America/Rainy_River": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Rankin_Inlet": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Recife": "<-03>3",
+	"America/Regina": "CST6",
+	"America/Resolute": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Rio_Branco": "<-05>5",
+	"America/Santarem": "<-03>3",
+	"America/Santiago": "<-04>4<-03>,M9.1.6/24,M4.1.6/24",
+	"America/Santo_Domingo": "AST4",
+	"America/Sao_Paulo": "<-03>3",
+	"America/Scoresbysund": "<-02>2<-01>,M3.5.0/-1,M10.5.0/0",
+	"America/Sitka": "AKST9AKDT,M3.2.0,M11.1.0",
+	"America/St_Barthelemy": "AST4",
+	"America/St_Johns": "NST3:30NDT,M3.2.0,M11.1.0",
+	"America/St_Kitts": "AST4",
+	"America/St_Lucia": "AST4",
+	"America/St_Thomas": "AST4",
+	"America/St_Vincent": "AST4",
+	"America/Swift_Current": "CST6",
+	"America/Tegucigalpa": "CST6",
+	"America/Thule": "AST4ADT,M3.2.0,M11.1.0",
+	"America/Thunder_Bay": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Tijuana": "PST8PDT,M3.2.0,M11.1.0",
+	"America/Toronto": "EST5EDT,M3.2.0,M11.1.0",
+	"America/Tortola": "AST4",
+	"America/Vancouver": "PST8PDT,M3.2.0,M11.1.0",
+	"America/Whitehorse": "MST7",
+	"America/Winnipeg": "CST6CDT,M3.2.0,M11.1.0",
+	"America/Yakutat": "AKST9AKDT,M3.2.0,M11.1.0",
+	"America/Yellowknife": "MST7MDT,M3.2.0,M11.1.0",
+	"Antarctica/Casey": "<+08>-8",
+	"Antarctica/Davis": "<+07>-7",
+	"Antarctica/DumontDUrville": "<+10>-10",
+	"Antarctica/Macquarie": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+	"Antarctica/Mawson": "<+05>-5",
+	"Antarctica/McMurdo": "NZST-12NZDT,M9.5.0,M4.1.0/3",
+	"Antarctica/Palmer": "<-03>3",
+	"Antarctica/Rothera": "<-03>3",
+	"Antarctica/Syowa": "<+03>-3",
+	"Antarctica/Troll": "<+00>0<+02>-2,M3.5.0/1,M10.5.0/3",
+	"Antarctica/Vostok": "<+05>-5",
+	"Arctic/Longyearbyen": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Asia/Aden": "<+03>-3",
+	"Asia/Almaty": "<+05>-5",
+	"Asia/Amman": "<+03>-3",
+	"Asia/Anadyr": "<+12>-12",
+	"Asia/Aqtau": "<+05>-5",
+	"Asia/Aqtobe": "<+05>-5",
+	"Asia/Ashgabat": "<+05>-5",
+	"Asia/Atyrau": "<+05>-5",
+	"Asia/Baghdad": "<+03>-3",
+	"Asia/Bahrain": "<+03>-3",
+	"Asia/Baku": "<+04>-4",
+	"Asia/Bangkok": "<+07>-7",
+	"Asia/Barnaul": "<+07>-7",
+	"Asia/Beirut": "EET-2EEST,M3.5.0/0,M10.5.0/0",
+	"Asia/Bishkek": "<+06>-6",
+	"Asia/Brunei": "<+08>-8",
+	"Asia/Chita": "<+09>-9",
+	"Asia/Choibalsan": "<+08>-8",
+	"Asia/Colombo": "<+0530>-5:30",
+	"Asia/Damascus": "<+03>-3",
+	"Asia/Dhaka": "<+06>-6",
+	"Asia/Dili": "<+09>-9",
+	"Asia/Dubai": "<+04>-4",
+	"Asia/Dushanbe": "<+05>-5",
+	"Asia/Famagusta": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Asia/Gaza": "EET-2EEST,M3.4.4/50,M10.4.4/50",
+	"Asia/Hebron": "EET-2EEST,M3.4.4/50,M10.4.4/50",
+	"Asia/Ho_Chi_Minh": "<+07>-7",
+	"Asia/Hong_Kong": "HKT-8",
+	"Asia/Hovd": "<+07>-7",
+	"Asia/Irkutsk": "<+08>-8",
+	"Asia/Jakarta": "WIB-7",
+	"Asia/Jayapura": "WIT-9",
+	"Asia/Jerusalem": "IST-2IDT,M3.4.4/26,M10.5.0",
+	"Asia/Kabul": "<+0430>-4:30",
+	"Asia/Kamchatka": "<+12>-12",
+	"Asia/Karachi": "PKT-5",
+	"Asia/Kathmandu": "<+0545>-5:45",
+	"Asia/Khandyga": "<+09>-9",
+	"Asia/Kolkata": "IST-5:30",
+	"Asia/Krasnoyarsk": "<+07>-7",
+	"Asia/Kuala_Lumpur": "<+08>-8",
+	"Asia/Kuching": "<+08>-8",
+	"Asia/Kuwait": "<+03>-3",
+	"Asia/Macau": "CST-8",
+	"Asia/Magadan": "<+11>-11",
+	"Asia/Makassar": "WITA-8",
+	"Asia/Manila": "PST-8",
+	"Asia/Muscat": "<+04>-4",
+	"Asia/Nicosia": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Asia/Novokuznetsk": "<+07>-7",
+	"Asia/Novosibirsk": "<+07>-7",
+	"Asia/Omsk": "<+06>-6",
+	"Asia/Oral": "<+05>-5",
+	"Asia/Phnom_Penh": "<+07>-7",
+	"Asia/Pontianak": "WIB-7",
+	"Asia/Pyongyang": "KST-9",
+	"Asia/Qatar": "<+03>-3",
+	"Asia/Qyzylorda": "<+05>-5",
+	"Asia/Riyadh": "<+03>-3",
+	"Asia/Sakhalin": "<+11>-11",
+	"Asia/Samarkand": "<+05>-5",
+	"Asia/Seoul": "KST-9",
+	"Asia/Shanghai": "CST-8",
+	"Asia/Singapore": "<+08>-8",
+	"Asia/Srednekolymsk": "<+11>-11",
+	"Asia/Taipei": "CST-8",
+	"Asia/Tashkent": "<+05>-5",
+	"Asia/Tbilisi": "<+04>-4",
+	"Asia/Tehran": "<+0330>-3:30",
+	"Asia/Thimphu": "<+06>-6",
+	"Asia/Tokyo": "JST-9",
+	"Asia/Tomsk": "<+07>-7",
+	"Asia/Ulaanbaatar": "<+08>-8",
+	"Asia/Urumqi": "<+06>-6",
+	"Asia/Ust-Nera": "<+10>-10",
+	"Asia/Vientiane": "<+07>-7",
+	"Asia/Vladivostok": "<+10>-10",
+	"Asia/Yakutsk": "<+09>-9",
+	"Asia/Yangon": "<+0630>-6:30",
+	"Asia/Yekaterinburg": "<+05>-5",
+	"Asia/Yerevan": "<+04>-4",
+	"Atlantic/Azores": "<-01>1<+00>,M3.5.0/0,M10.5.0/1",
+	"Atlantic/Bermuda": "AST4ADT,M3.2.0,M11.1.0",
+	"Atlantic/Canary": "WET0WEST,M3.5.0/1,M10.5.0",
+	"Atlantic/Cape_Verde": "<-01>1",
+	"Atlantic/Faroe": "WET0WEST,M3.5.0/1,M10.5.0",
+	"Atlantic/Madeira": "WET0WEST,M3.5.0/1,M10.5.0",
+	"Atlantic/Reykjavik": "GMT0",
+	"Atlantic/South_Georgia": "<-02>2",
+	"Atlantic/St_Helena": "GMT0",
+	"Atlantic/Stanley": "<-03>3",
+	"Australia/Adelaide": "ACST-9:30ACDT,M10.1.0,M4.1.0/3",
+	"Australia/Brisbane": "AEST-10",
+	"Australia/Broken_Hill": "ACST-9:30ACDT,M10.1.0,M4.1.0/3",
+	"Australia/Currie": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+	"Australia/Darwin": "ACST-9:30",
+	"Australia/Eucla": "<+0845>-8:45",
+	"Australia/Hobart": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+	"Australia/Lindeman": "AEST-10",
+	"Australia/Lord_Howe": "<+1030>-10:30<+11>-11,M10.1.0,M4.1.0",
+	"Australia/Melbourne": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+	"Australia/Perth": "AWST-8",
+	"Australia/Sydney": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+	"Etc/GMT": "GMT0",
+	"Etc/GMT+0": "GMT0",
+	"Etc/GMT+1": "<-01>1",
+	"Etc/GMT+10": "<-10>10",
+	"Etc/GMT+11": "<-11>11",
+	"Etc/GMT+12": "<-12>12",
+	"Etc/GMT+2": "<-02>2",
+	"Etc/GMT+3": "<-03>3",
+	"Etc/GMT+4": "<-04>4",
+	"Etc/GMT+5": "<-05>5",
+	"Etc/GMT+6": "<-06>6",
+	"Etc/GMT+7": "<-07>7",
+	"Etc/GMT+8": "<-08>8",
+	"Etc/GMT+9": "<-09>9",
+	"Etc/GMT-0": "GMT0",
+	"Etc/GMT-1": "<+01>-1",
+	"Etc/GMT-10": "<+10>-10",
+	"Etc/GMT-11": "<+11>-11",
+	"Etc/GMT-12": "<+12>-12",
+	"Etc/GMT-13": "<+13>-13",
+	"Etc/GMT-14": "<+14>-14",
+	"Etc/GMT-2": "<+02>-2",
+	"Etc/GMT-3": "<+03>-3",
+	"Etc/GMT-4": "<+04>-4",
+	"Etc/GMT-5": "<+05>-5",
+	"Etc/GMT-6": "<+06>-6",
+	"Etc/GMT-7": "<+07>-7",
+	"Etc/GMT-8": "<+08>-8",
+	"Etc/GMT-9": "<+09>-9",
+	"Etc/GMT0": "GMT0",
+	"Etc/Greenwich": "GMT0",
+	"Etc/UCT": "UTC0",
+	"Etc/UTC": "UTC0",
+	"Etc/Universal": "UTC0",
+	"Etc/Zulu": "UTC0",
+	"Europe/Amsterdam": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Andorra": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Astrakhan": "<+04>-4",
+	"Europe/Athens": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Belgrade": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Berlin": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Bratislava": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Brussels": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Bucharest": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Budapest": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Busingen": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Chisinau": "EET-2EEST,M3.5.0,M10.5.0/3",
+	"Europe/Copenhagen": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Dublin": "IST-1GMT0,M10.5.0,M3.5.0/1",
+	"Europe/Gibraltar": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Guernsey": "GMT0BST,M3.5.0/1,M10.5.0",
+	"Europe/Helsinki": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Isle_of_Man": "GMT0BST,M3.5.0/1,M10.5.0",
+	"Europe/Istanbul": "<+03>-3",
+	"Europe/Jersey": "GMT0BST,M3.5.0/1,M10.5.0",
+	"Europe/Kaliningrad": "EET-2",
+	"Europe/Kiev": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Kirov": "MSK-3",
+	"Europe/Lisbon": "WET0WEST,M3.5.0/1,M10.5.0",
+	"Europe/Ljubljana": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/London": "GMT0BST,M3.5.0/1,M10.5.0",
+	"Europe/Luxembourg": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Madrid": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Malta": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Mariehamn": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Minsk": "<+03>-3",
+	"Europe/Monaco": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Moscow": "MSK-3",
+	"Europe/Oslo": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Paris": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Podgorica": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Prague": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Riga": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Rome": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Samara": "<+04>-4",
+	"Europe/San_Marino": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Sarajevo": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Saratov": "<+04>-4",
+	"Europe/Simferopol": "MSK-3",
+	"Europe/Skopje": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Sofia": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Stockholm": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Tallinn": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Tirane": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Ulyanovsk": "<+04>-4",
+	"Europe/Uzhgorod": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Vaduz": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Vatican": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Vienna": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Vilnius": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Volgograd": "MSK-3",
+	"Europe/Warsaw": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Zagreb": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Europe/Zaporozhye": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+	"Europe/Zurich": "CET-1CEST,M3.5.0,M10.5.0/3",
+	"Indian/Antananarivo": "EAT-3",
+	"Indian/Chagos": "<+06>-6",
+	"Indian/Christmas": "<+07>-7",
+	"Indian/Cocos": "<+0630>-6:30",
+	"Indian/Comoro": "EAT-3",
+	"Indian/Kerguelen": "<+05>-5",
+	"Indian/Mahe": "<+04>-4",
+	"Indian/Maldives": "<+05>-5",
+	"Indian/Mauritius": "<+04>-4",
+	"Indian/Mayotte": "EAT-3",
+	"Indian/Reunion": "<+04>-4",
+	"Pacific/Apia": "<+13>-13",
+	"Pacific/Auckland": "NZST-12NZDT,M9.5.0,M4.1.0/3",
+	"Pacific/Bougainville": "<+11>-11",
+	"Pacific/Chatham": "<+1245>-12:45<+1345>,M9.5.0/2:45,M4.1.0/3:45",
+	"Pacific/Chuuk": "<+10>-10",
+	"Pacific/Easter": "<-06>6<-05>,M9.1.6/22,M4.1.6/22",
+	"Pacific/Efate": "<+11>-11",
+	"Pacific/Enderbury": "<+13>-13",
+	"Pacific/Fakaofo": "<+13>-13",
+	"Pacific/Fiji": "<+12>-12",
+	"Pacific/Funafuti": "<+12>-12",
+	"Pacific/Galapagos": "<-06>6",
+	"Pacific/Gambier": "<-09>9",
+	"Pacific/Guadalcanal": "<+11>-11",
+	"Pacific/Guam": "ChST-10",
+	"Pacific/Honolulu": "HST10",
+	"Pacific/Kiritimati": "<+14>-14",
+	"Pacific/Kosrae": "<+11>-11",
+	"Pacific/Kwajalein": "<+12>-12",
+	"Pacific/Majuro": "<+12>-12",
+	"Pacific/Marquesas": "<-0930>9:30",
+	"Pacific/Midway": "SST11",
+	"Pacific/Nauru": "<+12>-12",
+	"Pacific/Niue": "<-11>11",
+	"Pacific/Norfolk": "<+11>-11<+12>,M10.1.0,M4.1.0/3",
+	"Pacific/Noumea": "<+11>-11",
+	"Pacific/Pago_Pago": "SST11",
+	"Pacific/Palau": "<+09>-9",
+	"Pacific/Pitcairn": "<-08>8",
+	"Pacific/Pohnpei": "<+11>-11",
+	"Pacific/Port_Moresby": "<+10>-10",
+	"Pacific/Rarotonga": "<-10>10",
+	"Pacific/Saipan": "ChST-10",
+	"Pacific/Tahiti": "<-10>10",
+	"Pacific/Tarawa": "<+12>-12",
+	"Pacific/Tongatapu": "<+13>-13",
+	"Pacific/Wake": "<+12>-12",
+	"Pacific/Wallis": "<+12>-12"
+}

svelte.config.js

@@ -1,11 +1,11 @@
 import adapter from '@sveltejs/adapter-static';
-import preprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: preprocess({}),
+	preprocess: sveltePreprocess({}),
 	build: {
 		rollupOptions: {
 			output: {

tests/doc-screenshots/viewport-screenshots.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect } from '@playwright/test';
+
+import { initMock, settingsJson, statusJson } from '../shared';
+import sharp from 'sharp';
+
+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;
+
+	statusJson.isUpdating = true;
+	// Set the color scheme
+	if (testInfo.project.use?.colorScheme === 'dark') {
+		settingsJson.invertedColor = true;
+	} else {
+		settingsJson.invertedColor = false;
+	}
+
+	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({
+		fullPage: true
+	});
+
+	await sharp(screenshot)
+		.toFormat('webp', {
+			quality: 95,
+			nearLossless: true
+		})
+		.toFile(
+			`./doc/screenshot-${test.info().project.use.colorScheme?.toLowerCase().replace(' ', '_')}.webp`
+		);
+});

tests/playwright/test.ts

@@ -0,0 +1,184 @@
+import { expect, test } from '@playwright/test';
+import { initMock, settingsJson, statusJson } from '../shared';
+
+test.beforeEach(initMock);
+
+test('index page has expected columns control, status, settings', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
+});
+
+test('index page has working language selector', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('//*[@id="nav-language-dropdown"]/a')).toBeVisible();
+	page.locator('//*[@id="nav-language-dropdown"]/a').click();
+	//*[@id="nav-language-dropdown"]/ul/li[1]/button
+	await expect(page.locator('//*[@id="nav-language-dropdown"]/ul/li[1]/button')).toBeVisible();
+	page.locator('//*[@id="nav-language-dropdown"]/ul/li[2]/button').click();
+	await expect(page.getByRole('heading', { name: 'Instellingen' })).toBeVisible();
+	page.locator('//*[@id="nav-language-dropdown"]/a').click();
+	page.locator('//*[@id="nav-language-dropdown"]/ul/li[3]/button').click();
+	await expect(page.getByRole('heading', { name: 'Configuración' })).toBeVisible();
+});
+
+test('api page has expected load button', async ({ page }) => {
+	await page.goto('/api');
+	await expect(page.getByRole('button', { name: 'Load' })).toBeVisible();
+});
+
+// test('timezone can be negative, zero and positive', async ({ page }) => {
+// 	await page.goto('/');
+// 	await page.getByRole('button', { name: 'Show all' }).click();
+
+// 	const tzOffsetField = 'input#tzOffset';
+
+// 	for (const val of ['-10', '0', '42']) {
+// 		await page.fill(tzOffsetField, val);
+// 		const resultValue = await page.$eval(tzOffsetField, (input: HTMLInputElement) => input.value);
+// 		expect(resultValue).toBe(val);
+// 		await page.getByRole('button', { name: 'Save' }).click();
+// 	}
+// });
+
+test('time values can not be zero or negative', async ({ page }) => {
+	await page.goto('/');
+	await page.getByRole('button', { name: 'Show all' }).click();
+
+	for (const field of ['#timePerScreen', '#fullRefreshMin', '#minSecPriceUpd']) {
+		for (const val of ['42', '210']) {
+			await page.fill(field, val);
+			const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
+			expect(resultValue).toBe(val);
+			await page.getByRole('button', { name: 'Save' }).click();
+			const validationMessage = await page.$eval(
+				field,
+				(input: HTMLInputElement) => input.validationMessage
+			);
+			expect(validationMessage).not.toContain('Value must be greater');
+		}
+
+		for (const val of ['-10', '0']) {
+			await page.fill(field, val);
+			const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
+			expect(resultValue).toBe(val);
+			await page.getByRole('button', { name: 'Save' }).click();
+			const validationMessage = await page.$eval(
+				field,
+				(input: HTMLInputElement) => input.validationMessage
+			);
+			expect(validationMessage).toContain('Value must be greater');
+		}
+	}
+});
+
+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();
+
+	const inputField = 'input#fetchEurPrice';
+	const switchElement = await page.locator(inputField);
+
+	expect(switchElement).toBeTruthy();
+	const isSwitchEnabled = await switchElement.isChecked();
+	expect(isSwitchEnabled).toBe(false);
+
+	await expect(page.getByText('the WS Price connection will show')).toBeHidden();
+
+	await switchElement.click();
+	const isSwitchNowEnabled = await switchElement.isChecked();
+	expect(isSwitchNowEnabled).toBe(true);
+
+	await expect(page.getByText('the WS Price connection will show')).toBeVisible();
+});
+
+test('npub values will be converted to hex pubkeys', async ({ page }) => {
+	await page.goto('/');
+	await page.getByRole('button', { name: 'Show all' }).click();
+
+	for (const field of ['#nostrZapPubkey']) {
+		for (const val of ['npub1k5f85zx0xdskyayqpfpc0zq6n7vwqjuuxugkayk72fgynp34cs3qfcvqg2']) {
+			await page.fill(field, val);
+
+			await page.getByLabel('Nostr Relay').click();
+			const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
+
+			expect(resultValue).toBe('b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422');
+		}
+	}
+});
+
+test('empty nostr relay field is not accepted', async ({ page }) => {
+	await page.goto('/');
+	await page.getByRole('button', { name: 'Show all' }).click();
+
+	const nostrRelayField = page.getByLabel('Nostr Relay');
+
+	nostrRelayField.fill('');
+
+	await page.getByRole('button', { name: 'Save' }).click();
+	const validationMessage = await nostrRelayField.evaluate((el) => el.validationMessage);
+
+	expect(validationMessage).toContain('Please fill out this field');
+});
+
+test('screens should be able to change', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('button', { name: 'Sats per Dollar' })).toBeVisible();
+	const responsePromise = page.waitForRequest('*/**/api/show/screen/*');
+
+	await page.getByRole('button', { name: 'Sats per Dollar' }).click();
+	const response = await responsePromise;
+	expect(response.url()).toContain('api/show/screen/10');
+});
+
+test('parse all types of EPD content correctly', async ({ page }) => {
+	statusJson.data[2] = '123';
+
+	await page.route('**/events', (route) => {
+		const newStatus = statusJson;
+		newStatus.data = ['BLOCK/HEIGHT', '8', '123', '0', '8', '1', '5'];
+
+		// Respond with a custom SSE message
+		route.fulfill({
+			status: 200,
+			contentType: 'text/event-stream',
+			json: `${JSON.stringify(newStatus)}\n\n`
+		});
+	});
+
+	await page.goto('/');
+
+	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
+	await page.waitForSelector('#timerStatusText:has-text("running")');
+	await page.waitForSelector('#btclock-wrapper > div > div:nth-child(1)');
+
+	expect(statusJson.data[0]).toContain('/');
+	await expect(page.locator('#btclock-wrapper > div > div:nth-child(1)')).toBeTruthy();
+	await expect(page.locator('#btclock-wrapper > div > div:nth-child(1)')).toHaveClass('splitText');
+	expect(statusJson.data[1]).toHaveLength(1);
+	await expect(page.locator('#btclock-wrapper > div > div:nth-child(2)')).toHaveClass('digit');
+	expect(statusJson.data[2]).toHaveLength(3);
+	await expect(page.locator('#btclock-wrapper > div > div:nth-child(3)')).toHaveClass('mediumText');
+});
+
+test('should work with more than 7 screens', async ({ page }) => {
+	statusJson.data[2] = '1';
+	statusJson.numScreens = 9;
+	settingsJson.numScreens = 9;
+	statusJson.data.splice(1, 0, ' ', ' ');
+
+	await page.goto('/');
+
+	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
+	await page.waitForSelector('#timerStatusText:has-text("running")');
+	await expect(page.locator('#btclock-wrapper > div > div:nth-child(9)')).toBeTruthy();
+
+	await expect(page.locator('#customText')).toHaveAttribute(
+		'maxlength',
+		statusJson.numScreens.toString()
+	);
+});

tests/screenshots/viewport-screenshots.spec.ts

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,257 @@
+interface Page {
+	route: (url: string, handler: (route: Route) => Promise<void>) => Promise<void>;
+}
+
+interface Route {
+	fulfill: (response: {
+		json?: typeof statusJson | typeof settingsJson | typeof latestReleaseFake;
+		status?: number;
+		headers?: Record<string, string>;
+		body?: ReadableStream;
+	}) => Promise<void>;
+}
+
+export const fetchLatestBlockHeight = async () => {
+	const response = await fetch('https://ws.btclock.dev/api/lastblock');
+	const blockHeight = await response.text();
+	return ['BLOCK/HEIGHT', ...blockHeight.trim().split('')];
+};
+
+export const fetchLatestRelease = async () => {
+	try {
+		const response = await fetch(
+			'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
+		);
+		if (!response.ok) throw new Error('Failed to fetch latest release');
+		const data = await response.json();
+		settingsJson.gitTag = data.tag_name;
+		return data;
+	} catch (error) {
+		console.warn('Failed to fetch latest release, using fallback:', error);
+		settingsJson.gitTag = latestReleaseFake.tag_name;
+		return latestReleaseFake;
+	}
+};
+
+export const statusJson = {
+	currentScreen: 20,
+	numScreens: 7,
+	timerRunning: true,
+	isOTAUpdating: false,
+	espUptime: 4479,
+	espFreeHeap: 58508,
+	espHeapSize: 342108,
+	connectionStatus: {
+		price: false,
+		blocks: false,
+		V2: true,
+		nostr: true
+	},
+	rssi: -66,
+	data: ['BLOCK/HEIGHT', '0', '0', '0', '0', '0', '0'],
+	currency: 'USD',
+	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' }
+	],
+	isUpdating: true,
+	isFake: true,
+	dnd: {
+		enabled: true,
+		timeBasedEnabled: true,
+		startTime: '23:00',
+		endTime: '7:00',
+		active: true
+	}
+};
+
+export const settingsJson = {
+	numScreens: 7,
+	timerSeconds: 1800,
+	timerRunning: true,
+	minSecPriceUpd: 30,
+	fullRefreshMin: 60,
+	wpTimeout: 600,
+	tzOffset: 0,
+	dataSource: 0,
+	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.2.27',
+	bitaxeEnabled: false,
+	bitaxeHostname: 'bitaxe1',
+	miningPoolStats: false,
+	miningPoolName: 'ocean',
+	miningPoolUser: '38Qkkei3SuF1Eo45BaYmRHUneRD54yyTFy',
+	nostrZapNotify: true,
+	hwRev: 'REV_A_EPD_2_13',
+	fsRev: '64e518bf58f89749753167a8b6826e10bb6455c5',
+	nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
+	lastBuildTime: Math.round(new Date().getTime() / 1000),
+	screens: [
+		{
+			id: 0,
+			name: 'Block Height',
+			enabled: true
+		},
+		{
+			id: 3,
+			name: 'Time',
+			enabled: false
+		},
+		{
+			id: 4,
+			name: 'Halving countdown',
+			enabled: false
+		},
+		{
+			id: 6,
+			name: 'Block Fee Rate',
+			enabled: false
+		},
+		{
+			id: 10,
+			name: 'Sats per dollar',
+			enabled: true
+		},
+		{
+			id: 20,
+			name: 'Ticker',
+			enabled: true
+		},
+		{
+			id: 30,
+			name: 'Market Cap',
+			enabled: false
+		}
+	],
+	actCurrencies: ['USD', 'EUR'],
+	availableCurrencies: ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD'],
+	availablePools: [
+		'ocean',
+		'noderunners',
+		'satoshi_radio',
+		'braiins',
+		'public_pool',
+		'gobrrr_pool',
+		'ckpool',
+		'eu_ckpool'
+	],
+	dnd: {
+		enabled: false,
+		timeBasedEnabled: true,
+		startHour: 23,
+		startMinute: 0,
+		endHour: 7,
+		endMinute: 0
+	},
+	availableFonts: ['antonio', 'oswald'],
+	invertedColor: false,
+	isLoaded: true,
+	isFake: true
+};
+
+export const latestReleaseFake = {
+	id: 782,
+	tag_name: '3.2.24',
+	target_commitish: '',
+	name: '3.2.24',
+	body: '',
+	url: 'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/782',
+	html_url: 'https://git.btclock.dev/btclock/btclock_v3/releases/tag/3.2.24',
+	tarball_url: 'https://git.btclock.dev/btclock/btclock_v3/archive/3.2.24.tar.gz',
+	zipball_url: 'https://git.btclock.dev/btclock/btclock_v3/archive/3.2.24.zip',
+	hide_archive_links: false,
+	upload_url: 'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/782/assets',
+	draft: false,
+	prerelease: false,
+	created_at: '2024-12-28T17:48:05Z',
+	published_at: '2024-12-28T17:48:05Z',
+	author: {},
+	assets: [],
+	archive_download_count: {
+		zip: 0,
+		tar_gz: 0
+	}
+};
+
+export const initMock = async ({ page }: { page: Page }) => {
+	// Update status with latest block height
+	statusJson.data = await fetchLatestBlockHeight();
+	const latestRelease = await fetchLatestRelease();
+
+	await page.route('*/**/api/status', async (route) => {
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/10', async (route) => {
+		//if (route.request().url().includes('*/**/api/show/screen/1')) {
+		statusJson.currentScreen = 1;
+		statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/20', async (route) => {
+		statusJson.currentScreen = 2;
+		statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
+
+		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'];
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/settings', async (route) => {
+		await route.fulfill({ json: settingsJson });
+	});
+
+	await page.route('**/events', async (route) => {
+		const newStatus = statusJson;
+		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
+		newStatus.isUpdating = true;
+
+		// Format the SSE message correctly
+		const sseMessage = `data: ${JSON.stringify(newStatus)}\n\n`;
+
+		// Create a readable stream for SSE
+		const stream = new ReadableStream({
+			start(controller) {
+				controller.enqueue(new TextEncoder().encode(sseMessage));
+				// Keep the connection open
+				// controller.close(); // Don't close if you want to send more events
+			}
+		});
+
+		await route.fulfill({
+			status: 200,
+			headers: {
+				'Content-Type': 'text/event-stream',
+				'Cache-Control': 'no-cache',
+				Connection: 'keep-alive'
+			},
+			body: stream
+		});
+	});
+
+	await page.route('**/api/v1/repos/btclock/btclock_v3/releases/latest', async (route) => {
+		await route.fulfill({ json: latestRelease });
+	});
+};

tsconfig.json

@@ -9,6 +9,7 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
+		"verbatimModuleSyntax": true,
 		"moduleResolution": "bundler"
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias

vite.config.test.ts

@@ -0,0 +1,18 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	build: {
+		sourcemap: true,
+		minify: false,
+		rollupOptions: {
+			output: {
+				manualChunks: undefined // Disable code splitting
+			}
+		}
+	},
+	test: {
+		include: ['tests/**/*.{test,spec}.{js,ts}']
+	}
+});

vite.config.ts

@@ -1,5 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+// import { visualizer } from 'rollup-plugin-visualizer';
 
 import * as fs from 'fs';
 import * as path from 'path';
@@ -9,7 +10,9 @@ const doRewrap = ({ cssClass }) => {
 		if (fs.existsSync(path.resolve(__dirname, 'dist/bundle.js'))) {
 			return;
 		}
-	} catch (e) {}
+	} catch {
+		// do nothing
+	}
 	console.log('\nStart re-wrapping...');
 	fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function (err, data) {
 		if (!data) {
@@ -35,10 +38,14 @@ const doRewrap = ({ cssClass }) => {
 							path.resolve(__dirname, 'dist/index.html'),
 							() => {}
 						);
-					} catch (e) {}
+					} catch {
+						// do nothing
+					}
 					try {
 						fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'));
-					} catch (e) {}
+					} catch {
+						// do nothing
+					}
 					console.log('Finished: bundle.js + index.html have been regenerated.\n');
 				}
 			});
@@ -58,15 +65,43 @@ export default defineConfig({
 				}
 			}
 		}
+		// visualizer({
+		// 	emitFile: true,
+		// 	filename: "stats.html",
+		//   })
 	],
 	build: {
-		minify: true,
+		minify: 'esbuild',
 		cssCodeSplit: false,
+		chunkSizeWarningLimit: 550,
 		rollupOptions: {
 			output: {
-				manualChunks: () => 'app',
+				// assetFileNames: '[hash][extname]',
-				assetFileNames: '[name][extname]'
+				entryFileNames: `[hash][extname]`,
+				chunkFileNames: `[hash][extname]`,
+				assetFileNames: `[hash][extname]`,
+				preserveModules: false,
+
+				manualChunks: () => {
+					return 'app';
 				}
 			}
 		}
+	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				quietDeps: true,
+				silenceDeprecations: ['import']
+			}
+		}
+	},
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}'],
+		globals: true,
+		environment: 'jsdom'
+	},
+	define: {
+		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+	}
 });