chore: Update dependencies

Reviewed-on: #61

.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.6.0
+        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: ','
@@ -95,19 +95,22 @@ 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 output/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
             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 }}
@@ -118,6 +121,7 @@ jobs:
           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:

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,56 +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",
-		"test": "npm run test:integration && npm run test:unit",
+		"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-static": "^2.0.3",
-		"@sveltejs/kit": "^1.27.4",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@testing-library/svelte": "^4.0.5",
+		"@testing-library/svelte": "^5.2.1",
 		"@types/swagger-ui": "^3.52.4",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"@vitest/ui": "^0.34.6",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"jsdom": "^22.1.0",
-		"prettier": "^3.0.0",
-		"prettier-plugin-svelte": "^3.0.0",
-		"sass": "^1.69.5",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.6.0",
-		"svelte-preprocess": "^5.1.1",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.2",
-		"vitest": "^0.34.6",
-		"vitest-dom": "^0.1.1",
-		"vitest-github-actions-reporter": "^0.11.0"
+		"@typescript-eslint/eslint-plugin": "^8.7.0",
+		"@typescript-eslint/parser": "^8.7.0",
+		"@vitest/ui": "^2.0.5",
+		"eslint": "^9.11.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"jsdom": "^25.0.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"rollup-plugin-visualizer": "^5.12.0",
+		"sass": "^1.79.3",
+		"sharp": "^0.33.5",
+		"svelte": "^4.2.19",
+		"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/oswald": "^5.0.17",
-		"@fontsource/ubuntu": "^5.0.8",
+		"@fontsource/antonio": "^5.1.0",
+		"@fontsource/oswald": "^5.1.0",
+		"@fontsource/ubuntu": "^5.1.0",
 		"@noble/secp256k1": "^2.1.0",
-		"@playwright/test": "^1.40.0",
-		"bootstrap": "^5.3.2",
+		"@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",
-		"sveltestrap": "^5.11.2",
-		"swagger-ui": "^5.10.0"
+		"svelte-bootstrap-icons": "^3.1.1",
+		"svelte-i18n": "^4.0.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 }) {
- 							input,
+@@ -658,9 +658,9 @@ async function kit({ svelte_config }) {
  							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}`,
-+								assetFileNames: `${prefix}/assets/[hash][extname]`,
++								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/c[hash].${ext}`,
++								assetFileNames: `${prefix}/a[hash][extname]`,
  								hoistTransitiveImports: false,
- 								sourcemapIgnoreList
- 							},
+ 								sourcemapIgnoreList,
+ 								manualChunks: split ? undefined : () => 'bundle',

playwright.config.ts

@@ -6,11 +6,11 @@ const config: PlaywrightTestConfig = {
 		timezoneId: 'Europe/Amsterdam'
 	},
 	webServer: {
-		command: 'npm run build && npm run preview',
+		command: 'npm run build:test && npm run preview',
 		port: 4173
 	},
 	reporter: process.env.CI ? 'github' : 'list',
-	testDir: 'tests',
+	testDir: 'tests/playwright',
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/
 };
 

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/i18n/index.ts

@@ -8,11 +8,23 @@ 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
-		? browser && localStorage.getItem('locale')
-			? localStorage.getItem('locale')
-			: window.navigator.language.slice(0, 2)
-		: defaultLocale
+	initialLocale: getInitialLocale()
 });

src/lib/index.ts

@@ -12,7 +12,7 @@ const isValidNpub = (npub: string): boolean => {
 		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 (e) {
+	} catch {
 		// If any error is thrown, the npub is not valid
 		return false;
 	}
@@ -35,7 +35,7 @@ const isValidNostrRelay = async (url: string): Promise<boolean> => {
 		}
 
 		return false;
-	} catch (e) {
+	} catch {
 		// If any error is thrown, the URL is not a valid Nostr relay
 		return false;
 	}
@@ -72,7 +72,7 @@ const getPubKey = (input: string): string | null => {
 		}
 
 		return null;
-	} catch (e) {
+	} catch {
 		// If any error is thrown, the input is not valid
 		return null;
 	}

src/lib/locales/de.json

@@ -30,14 +30,50 @@
 			"wifiTxPower": "WiFi-TX-Leistung",
 			"settingsSaved": "Einstellungen gespeichert",
 			"errorSavingSettings": "Fehler beim Speichern der Einstellungen",
-			"ownDataSource": "BTClock-Datenquelle verwenden",
+			"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"
+			"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",
@@ -65,7 +101,9 @@
 			"wifiSignalStrength": "WiFi-Signalstärke",
 			"wsDataConnection": "BTClock-Datenquelle verbindung",
 			"lightSensor": "Lichtsensor",
-			"nostrConnection": "Nostr Relay-Verbindung"
+			"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",
@@ -76,7 +114,9 @@
 			"swUpdateAvailable": "Eine neuere Version ist verfügbar!",
 			"latestVersion": "Letzte Version",
 			"releaseDate": "Veröffentlichungsdatum",
-			"viewRelease": "Veröffentlichung anzeigen"
+			"viewRelease": "Veröffentlichung anzeigen",
+			"autoUpdate": "Update installieren (experimentell)",
+			"autoUpdateInProgress": "Automatische Aktualisierung läuft, bitte warten..."
 		}
 	},
 	"colors": {

src/lib/locales/en.json

@@ -29,7 +29,7 @@
 			"wifiTxPower": "WiFi TX power",
 			"settingsSaved": "Settings saved",
 			"errorSavingSettings": "Error saving settings",
-			"ownDataSource": "Use BTClock data source",
+			"ownDataSource": "BTClock data source",
 			"flMaxBrightness": "Frontlight brightness",
 			"flAlwaysOn": "Frontlight always on",
 			"flEffectDelay": "Frontlight effect speed",
@@ -38,8 +38,59 @@
 			"luxLightToggle": "Auto toggle frontlight at lux",
 			"wpTimeout": "WiFi-config portal timeout",
 			"nostrPubKey": "Nostr source pubkey",
+			"nostrZapKey": "Nostr zap pubkey",
 			"nostrRelay": "Nostr Relay",
-			"useNostr": "Use Nostr datasource"
+			"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",
@@ -69,7 +120,9 @@
 			"wifiSignalStrength": "WiFi Signal strength",
 			"wsDataConnection": "BTClock data-source connection",
 			"lightSensor": "Light sensor",
-			"nostrConnection": "Nostr Relay connection"
+			"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.",
@@ -80,7 +133,9 @@
 			"swUpToDate": "You are up to date.",
 			"latestVersion": "Latest Version",
 			"releaseDate": "Release Date",
-			"viewRelease": "View Release"
+			"viewRelease": "View Release",
+			"autoUpdate": "Install update (experimental)",
+			"autoUpdateInProgress": "Auto-update in progress, please wait..."
 		}
 	},
 	"colors": {

src/lib/locales/es.json

@@ -28,7 +28,7 @@
 			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto.",
 			"settingsSaved": "Configuración guardada",
 			"errorSavingSettings": "Error al guardar la configuración",
-			"ownDataSource": "Utilice la fuente de datos BTClock",
+			"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",
@@ -36,7 +36,43 @@
 			"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"
+			"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",
@@ -64,7 +100,9 @@
 			"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"
+			"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",
@@ -75,7 +113,9 @@
 			"swUpdateAvailable": "¡Una nueva versión está disponible!",
 			"latestVersion": "Ultima versión",
 			"releaseDate": "Fecha de lanzamiento",
-			"viewRelease": "Ver lanzamiento"
+			"viewRelease": "Ver lanzamiento",
+			"autoUpdate": "Instalar actualización (experimental)",
+			"autoUpdateInProgress": "Actualización automática en progreso, espere..."
 		}
 	},
 	"button": {

src/lib/locales/nl.json

@@ -37,7 +37,34 @@
 			"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"
+			"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",
@@ -64,7 +91,9 @@
 			"wifiSignalStrength": "WiFi signaalsterkte",
 			"wsDataConnection": "BTClock-gegevensbron verbinding",
 			"lightSensor": "Licht sensor",
-			"nostrConnection": "Nostr Relay-verbinding"
+			"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",
@@ -75,7 +104,9 @@
 			"swUpdateAvailable": "Een nieuwere versie is beschikbaar!",
 			"latestVersion": "Laatste versie",
 			"releaseDate": "Datum van publicatie",
-			"viewRelease": "Bekijk publicatie"
+			"viewRelease": "Bekijk publicatie",
+			"autoUpdate": "Update installeren (experimenteel)",
+			"autoUpdateInProgress": "Automatische update wordt uitgevoerd. Even geduld a.u.b...."
 		}
 	},
 	"colors": {

src/lib/style/app.scss

@@ -1,17 +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';
-@import './satsymbol.scss';
 
-$color-mode-type: media-query;
+@include Ubuntu.faces(
+	$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;
 $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';
@@ -26,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';
 
@@ -37,67 +53,205 @@ $input-font-size-sm: $font-size-base * 0.875;
 @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';
 
-nav {
-	margin-bottom: 15px;
+/* Default state (xs) - sticky */
+.sticky-xs-top {
+	position: sticky;
+	top: 0;
+	z-index: 1020;
 }
 
-.splitText div:first-child::after {
-	display: block;
-	content: '';
-	margin-top: 0px;
-	border-bottom: 2px solid;
-	margin-bottom: 3px;
+@media (max-width: 576px) {
+	main {
+		margin-top: 25px;
+	}
+}
+
+/* Remove sticky behavior for larger screens */
+@media (min-width: 576px) {
+	.sticky-xs-top {
+		position: relative;
+	}
+}
+
+@include color-mode(dark) {
+	.navbar {
+		--bs-navbar-color: $light;
+		background-color: $dark;
+	}
+}
+
+@include color-mode(light) {
+	.navbar {
+		--bs-navbar-color: $dark;
+		background-color: $light;
+	}
+}
+
+nav {
+	margin-bottom: 15px;
 }
 
 #btclock-wrapper {
 	margin: 0 auto;
 }
 
-//@include media-breakpoint-down(xl) {
 .btn-group-sm .btn {
 	font-size: 0.8rem;
+	// text-overflow: ellipsis;
+	// white-space: nowrap;
+	// overflow: hidden;
+	// width: 4rem;
 }
-//}
 
-.btclock {
-	border: 1px solid darkgray;
-	background: #000;
-	border-radius: 5px;
-	padding: 10px;
-	max-width: 700px;
-	margin: 0 auto;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-	align-items: center;
-	align-content: stretch;
-	font-family: 'Oswald', sans-serif;
-	font-size: 1vw;
-	> div {
-		padding: 5px;
+.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 {
+		background: #000;
+		display: flex;
+		font-size: calc(2vw + 2vh);
+		font-family: 'Antonio', sans-serif;
+		font-weight: 400;
+		padding: 10px;
+		gap: 10px;
+
+		.digit,
+		.splitText,
+		.mediumText {
+			border: 2px solid gold;
+			border-radius: 8px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+			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,
-	.splitText,
-	.mediumText {
-		border: 2px solid gold;
-		border-radius: 8px;
+	.digit.sats {
+		font-family: 'Satoshi Symbol', sans-serif;
+		content: 'a';
+	}
 
-		@include media-breakpoint-up(sm) {
-			min-width: 10px;
+	@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;
+				}
+			}
 		}
-
-		@include media-breakpoint-up(xxl) {
-			min-width: 70px;
-		}
-
-		text-align: center;
-		color: #fff;
 	}
 }
 
@@ -106,75 +260,26 @@ nav {
 	border-color: #fff;
 }
 
-.lightMode .btclock > div {
-	background: #fff;
+.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.2rem;
-		padding-top: 2.1rem !important;
-		padding-bottom: 2.1rem !important;
-	}
-
-	text-align: center;
-}
-
-.mediumText {
-	font-size: 3rem;
-	padding-left: 5px;
-	padding-right: 5px;
-	@include media-breakpoint-up(sm) {
-		font-size: 1.8rem;
-		padding-top: 13px !important;
-		padding-bottom: 13px !important;
-	}
-	@include media-breakpoint-up(xxl) {
-		font-size: 3rem;
-		padding-top: 29px !important;
-		padding-bottom: 29px !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.sats {
-	padding-top: 15px;
-	padding-bottom: 5px;
-	font-size: 4.5rem;
-	font-family: 'Satoshi Symbol';
-}
-
-.digit-blank {
-	content: 'abc';
-}
-
-#customText {
-	text-transform: uppercase;
-}
 .system_info {
 	padding: 0;
 
@@ -196,3 +301,52 @@ nav {
 #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

@@ -1,8 +1,6 @@
 @font-face {
 	font-family: 'Satoshi Symbol';
-	src:
-		url('/fonts/Satoshi_Symbol.woff2') format('woff2'),
-		url('/fonts/Satoshi_Symbol.woff') format('woff');
+	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/routes/+layout.svelte

@@ -9,11 +9,15 @@
 		NavItem,
 		NavLink,
 		Navbar,
-		NavbarBrand
-	} from 'sveltestrap';
+		NavbarBrand,
+		NavbarToggler
+	} from '@sveltestrap/sveltestrap';
+	import { _ } from 'svelte-i18n';
 
 	import { page } from '$app/stores';
 	import { locale, locales, isLoading } from 'svelte-i18n';
+	import { ColorSchemeSwitcher } from '$lib/components';
+	import { derived } from 'svelte/store';
 
 	export const setLocale = (lang: string) => () => {
 		locale.set(lang);
@@ -36,37 +40,67 @@
 			return flagMap[lowercaseCode];
 		} else {
 			// Return null for unsupported language codes
-			return null;
+			return flagMap['en'];
 		}
 	};
 
 	let languageNames = {};
 
-	locale.subscribe(() => {
-		if ($locale) {
-			let newLanguageNames = new Intl.DisplayNames([$locale], { type: 'language' });
+	const currentLocale = derived(locale, ($locale) => $locale || 'en');
 
-			for (let l: string of $locales) {
-				languageNames[l] = newLanguageNames.of(l);
-			}
+	locale.subscribe(() => {
+		const localeToUse = $locale || 'en';
+		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">
-	<NavbarBrand>&#8383;TClock</NavbarBrand>
-	<Collapse navbar expand="md">
+<Navbar expand="md" sticky="xs-top" theme="auto">
+	<NavbarBrand class="d-none d-sm-block">&#8383;TClock</NavbarBrand>
+	<Nav class="d-md-none" pills>
+		<NavItem>
+			<NavLink href="#control" active>{$_('section.control.title', { default: 'Control' })}</NavLink
+			>
+		</NavItem>
+		<NavItem>
+			<NavLink href="#status">{$_('section.status.title', { default: 'Status' })}</NavLink>
+		</NavItem>
+		<NavItem>
+			<NavLink class="nav-link" href="#settings"
+				>{$_('section.settings.title', { default: 'Settings' })}</NavLink
+			>
+		</NavItem>
+	</Nav>
+
+	<NavbarToggler on:click={toggle} />
+
+	<Collapse {isOpen} navbar expand="sm">
 		<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>
 		{#if !$isLoading}
-			<Dropdown id="nav-language-dropdown" inNavbar>
-				<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$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)}
@@ -76,8 +110,11 @@
 				</DropdownMenu>
 			</Dropdown>
 		{/if}
+		<ColorSchemeSwitcher></ColorSchemeSwitcher>
 	</Collapse>
 </Navbar>
 
 <!-- +layout.svelte -->
-<slot />
+<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')) {
-		locale.set(localStorage.getItem('locale'));
-	} else if (browser) {
-		locale.set(window.navigator.language);
+	if (browser) {
+		if (localStorage.getItem('locale')) {
+			locale.set(localStorage.getItem('locale'));
+		} else {
+			// 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

@@ -2,7 +2,8 @@
 	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';
@@ -12,15 +13,11 @@
 	import { uiSettings } from '$lib/uiSettings';
 
 	let settings = writable({
-		fgColor: '0'
+		fgColor: '0',
+		bgColor: '0',
+		isLoaded: false
 	});
 
-	// let uiSettings = writable({
-	// 	inputSize: 'sm',
-	// 	selectClass: '',
-	// 	btnSize: 'lg'
-	// });
-
 	let status = writable({
 		data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
 		espFreeHeap: 0,
@@ -29,48 +26,126 @@
 			price: false,
 			blocks: false
 		},
-		leds: []
+		leds: [],
+		isUpdating: false
 	});
 
-	const fetchStatusData = () => {
-		fetch(`${PUBLIC_BASE_URL}/api/status`)
-			.then((res) => res.json())
-			.then((data) => {
-				status.set(data);
-			});
+	const fetchStatusData = async () => {
+		const res = await fetch(`${PUBLIC_BASE_URL}/api/status`, { credentials: 'same-origin' });
+
+		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 = () => {
-		fetch(PUBLIC_BASE_URL + `/api/settings`)
-			.then((res) => res.json())
-			.then((data) => {
-				data.fgColor = String(data.fgColor);
-				data.bgColor = String(data.bgColor);
-				data.timePerScreen = data.timerSeconds / 60;
+	const fetchSettingsData = async () => {
+		const res = await fetch(PUBLIC_BASE_URL + `/api/settings`, { credentials: 'same-origin' });
 
-				if (data.fgColor > 65535) {
-					data.fgColor = '65535';
-				}
+		if (!res.ok) {
+			console.error('Error fetching settings data:', res.statusText);
+			return;
+		}
 
-				if (data.bgColor > 65535) {
-					data.bgColor = '65535';
-				}
-				settings.set(data);
-			});
+		const data = await res.json();
+
+		data.fgColor = String(data.fgColor);
+		data.bgColor = String(data.bgColor);
+		data.timePerScreen = data.timerSeconds / 60;
+
+		if (data.fgColor > 65535) {
+			data.fgColor = '65535';
+		}
+
+		if (data.bgColor > 65535) {
+			data.bgColor = '65535';
+		}
+		settings.set(data);
 	};
 
-	onMount(() => {
-		fetchSettingsData();
-		fetchStatusData();
+	let sections: (HTMLElement | null)[];
+	let observer: IntersectionObserver;
+	const SM_BREAKPOINT = 576;
 
-		const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
+	const setupObserver = () => {
+		if (window.innerWidth < SM_BREAKPOINT) {
+			observer = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							const id = entry.target.id;
+							replaceState(`#${id}`);
 
-		evtSource.addEventListener('status', (e) => {
-			let dataObj = JSON.parse(e.data);
-			status.set(dataObj);
-		});
+							// 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();
 		}
 
@@ -122,17 +197,20 @@
 </svelte:head>
 
 <Container fluid>
-	<Row cols={{ xl: 3, md: 2, sm: 1 }}>
-		<Control bind:settings bind:status></Control>
-		<Status bind:settings bind:status></Status>
-		<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData}></Settings>
+	<Row class="placeholder-glow">
+		<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
+
+		<Status bind:settings bind:status lg="6" xxl="4"></Status>
+
+		<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
+		></Settings>
 	</Row>
 </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.svelte

@@ -14,9 +14,10 @@
 		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 = {};
 
@@ -95,10 +96,18 @@
 	});
 
 	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>
-	<Card>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+	<Card id="control">
 		<CardHeader>
 			<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
 		</CardHeader>
@@ -179,7 +188,7 @@
 				</Form>
 				<hr />
 			{/if}
-			{#if $settings.hasFrontlight}
+			{#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="">
@@ -206,15 +215,16 @@
 					</li>
 				{/if}
 				<li>
-					{$_('section.control.buildTime')}: {new Date(
-						$settings.lastBuildTime * 1000
-					).toLocaleString()}
+					{$_('section.control.buildTime')}: <Placeholder
+						value={new Date($settings.lastBuildTime * 1000).toLocaleString()}
+						checkValue={$settings.lastBuildTime}
+					/>
 				</li>
-				<li>IP: {$settings.ip}</li>
-				<li>HW revision: {$settings.hwRev}</li>
-				<li>{$_('section.control.fwCommit')}: {$settings.gitRev}</li>
-				<li>WebUI commit: {$settings.fsRev}</li>
-				<li>{$_('section.control.hostname')}: {$settings.hostname}</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>
 			<Row>
 				<Col class="d-flex justify-content-end">
@@ -231,7 +241,7 @@
 			{#if $settings.otaEnabled}
 				<hr />
 				<h3>{$_('section.control.firmwareUpdate')}</h3>
-				<FirmwareUpdater bind:settings />
+				<FirmwareUpdater on:showToast bind:settings bind:status />
 			{/if}
 		</CardBody>
 	</Card>

src/routes/FirmwareUpdater.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import { PUBLIC_BASE_URL } from '$lib/config';
-	import { onMount } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { writable } from 'svelte/store';
-	import { Progress, Alert, Button } from 'sveltestrap';
+	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 = '';
@@ -91,6 +94,9 @@
 	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;
@@ -107,17 +113,71 @@
 		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://api.github.com/repos/btclock/btclock_v3/releases/latest'
+				'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
 			);
-			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;
+			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);
 		}
@@ -141,72 +201,81 @@
 	}
 </script>
 
-{#if latestVersion}
+{#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}
-			{$_('section.firmwareUpdater.swUpdateAvailable')}
+			{#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}
-<section class="row row-cols-lg-auto align-items-end">
-	<div class="col-12">
-		<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
+{#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
 		>
-	</div>
-	<div class="col mt-2">
-		<label for="webuiFile" class="form-label">WebUI file (littlefs.bin)</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}
+	{#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 firmwareUploadError}
+		<Alert color="danger" class="firmwareUploadStatusAlert"
+			>{$_('section.firmwareUpdater.fileUploadFailed')}</Alert
+		>
+	{/if}
+	<small
+		>⚠️ <strong>{$_('warning')}</strong>: {$_('section.firmwareUpdater.firmwareUpdateText')}</small
 	>
 {/if}
-<small
-	>⚠️ <strong>{$_('warning')}</strong>: {$_('section.firmwareUpdater.firmwareUpdateText')}</small
->

src/routes/Rendered.svelte

@@ -1,19 +1,80 @@
 <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="btclock-wrapper" id="btclock-wrapper">
-	<div class="btclock">
+<div class={className} id={className}>
+	<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
 		{#each status.data as char}
 			{#if isSplitText(char)}
 				<div class="splitText">
-					{#each char.split('/') as part}
+					<div class="textcontainer">
+						{#if char.split('/').length}
+							<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}
+					{/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>
@@ -22,8 +83,32 @@
 			{: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.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-	import { isValidNostrRelay, getPubKey, isValidHexPubKey } from '$lib';
 	import { PUBLIC_BASE_URL } from '$lib/config';
-	import { uiSettings } from '$lib/uiSettings';
 	import { createEventDispatcher } from 'svelte';
-
 	import { _ } from 'svelte-i18n';
 	import {
 		Button,
@@ -13,28 +10,28 @@
 		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>([
-		['Default', 80],
-		['19.5dBm', 78], // 19.5dBm
-		['19dBm', 76], // 19dBm
-		['18.5dBm', 74], // 18.5dBm
-		['17dBm', 68], // 17dBm
-		['15dBm', 60], // 15dBm
-		['13dBm', 52], // 13dBm
-		['11dBm', 44], // 11dBm
-		['8.5dBm', 34], // 8.5dBm
-		['7dBm', 28], // 7dBm
-		['5dBm', 20] // 5dBm
+	const miningPoolMap = new Map<string, string>([
+		['noderunners', 'Noderunners.network'],
+		['braiins', 'Braiins Pool'],
+		['ocean', 'ocean.xyz'],
+		['satoshi_radio', 'Satoshi Radio pool'],
+		['public_pool', 'public-pool.io'],
+		['gobrrr_pool', 'Go Brrr pool'],
+		['ckpool', 'CKPool'],
+		['eu_ckpool', 'EU CKPool'],
+		['local_public_pool', 'Public Pool (local)']
 	]);
 
 	const dispatch = createEventDispatcher();
@@ -44,32 +41,36 @@
 		dispatch('formReset');
 	};
 
-	const getTzOffsetFromSystem = () => {
-		const dt = new Date();
-		let diffTZ = dt.getTimezoneOffset();
-		$settings.tzOffset = diffTZ * -1;
-	};
-
 	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: {
-				'Content-Type': 'application/json'
-			},
+			headers: headers,
+			credentials: 'same-origin',
 			body: JSON.stringify(formSettings)
 		})
-			.then(() => {
-				dispatch('showToast', {
-					color: 'success',
-					text: $_('section.settings.settingsSaved')
-				});
+			.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', {
@@ -79,493 +80,83 @@
 			});
 	};
 
-	let validNostrRelay = false;
-	const testNostrRelay = async () => {
-		validNostrRelay = await isValidNostrRelay($settings.nostrRelay);
+	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 checkValidNostrPubkey = () => {
-		$settings.nostrPubKey = getPubKey($settings.nostrPubKey);
-	};
-
-	const onFlBrightnessChange = async () => {
-		await fetch(`${PUBLIC_BASE_URL}/api/frontlight/brightness/${$settings.flMaxBrightness}`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json'
-			}
-		});
+	const hideAll = () => {
+		screenSettingsIsOpen = false;
+		displaySettingsIsOpen = false;
+		dataSourceIsOpen = false;
+		extraFeaturesIsOpen = false;
+		systemIsOpen = false;
 	};
 </script>
 
-<Col>
-	<Card>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+	<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>
-			<Form on:submit={onSave}>
-				<Row>
-					<Label md={6} for="fgColor" size={$uiSettings.inputSize}
-						>{$_('section.settings.textColor', { default: 'Text color' })}</Label
-					>
-					<Col md="6">
-						<Input
-							type="select"
-							bind:value={$settings.fgColor}
-							name="select"
-							id="fgColor"
-							bsSize={$uiSettings.inputSize}
-							class={$uiSettings.selectClass}
-						>
-							<option value="0">{$_('colors.black')}</option>
-							<option value="65535">{$_('colors.white')}</option>
-						</Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="bgColor" size={$uiSettings.inputSize}
-						>{$_('section.settings.backgroundColor')}</Label
-					>
-					<Col md="6">
-						<Input
-							type="select"
-							bind:value={$settings.bgColor}
-							name="select"
-							id="bgColor"
-							bsSize={$uiSettings.inputSize}
-							class={$uiSettings.selectClass}
-						>
-							<option value="0">{$_('colors.black')}</option>
-							<option value="65535">{$_('colors.white')}</option>
-						</Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="timePerScreen" size={$uiSettings.inputSize}
-						>{$_('section.settings.timePerScreen')}</Label
-					>
-					<Col md="6">
-						<InputGroup size={$uiSettings.inputSize}>
-							<Input
-								type="number"
-								id="timePerScreen"
-								min={1}
-								step="1"
-								bind:value={$settings.timePerScreen}
-							/>
-							<InputGroupText>{$_('time.minutes')}</InputGroupText>
-						</InputGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="fullRefreshMin" size={$uiSettings.inputSize}
-						>{$_('section.settings.fullRefreshEvery')}</Label
-					>
-					<Col md="6">
-						<InputGroup size={$uiSettings.inputSize}>
-							<Input
-								type="number"
-								id="fullRefreshMin"
-								min={1}
-								step="1"
-								bind:value={$settings.fullRefreshMin}
-							/>
-							<InputGroupText>{$_('time.minutes')}</InputGroupText>
-						</InputGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="minSecPriceUpd" size={$uiSettings.inputSize}
-						>{$_('section.settings.timeBetweenPriceUpdates')}</Label
-					>
-					<Col md="6">
-						<InputGroup size={$uiSettings.inputSize}>
-							<Input
-								type="number"
-								id="minSecPriceUpd"
-								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={$uiSettings.inputSize}
-						>{$_('section.settings.timezoneOffset')}</Label
-					>
-					<Col md="6">
-						<InputGroup size={$uiSettings.inputSize}>
-							<Input
-								type="number"
-								step="1"
-								name="tzOffset"
-								id="tzOffset"
-								bind:value={$settings.tzOffset}
-							/>
-							<InputGroupText>{$_('time.minutes')}</InputGroupText>
-							<Button type="button" color="info" on:click={getTzOffsetFromSystem}
-								>{$_('auto-detect')}</Button
-							>
-						</InputGroup>
-						<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="ledBrightness" size={$uiSettings.inputSize}
-						>{$_('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>
-				{#if $settings.hasFrontlight}
-					<Row>
-						<Label md={6} for="flMaxBrightness" size={$uiSettings.inputSize}
-							>{$_('section.settings.flMaxBrightness')}</Label
-						>
-						<Col md="6">
-							<Input
-								type="range"
-								name="flMaxBrightness"
-								id="flMaxBrightness"
-								bind:value={$settings.flMaxBrightness}
-								on:change={onFlBrightnessChange}
-								min={0}
-								max={4095}
-								step={1}
-							/>
-						</Col>
-					</Row>
-					<Row>
-						<Label md={6} for="flEffectDelay" size={$uiSettings.inputSize}
-							>{$_('section.settings.flEffectDelay')}</Label
-						>
-						<Col md="6">
-							<Input
-								type="range"
-								name="flEffectDelay"
-								id="flEffectDelay"
-								bind:value={$settings.flEffectDelay}
-								min={5}
-								max={300}
-								step={1}
-							/>
-						</Col>
-					</Row>
-				{/if}
-				{#if $settings.hasLightLevel}
-					<Row>
-						<Label md={6} for="luxLightToggle" size={$uiSettings.inputSize}
-							>{$_('section.settings.luxLightToggle')} ({$settings.luxLightToggle})</Label
-						>
-						<Col md="6">
-							<Input
-								type="range"
-								name="luxLightToggle"
-								id="luxLightToggle"
-								bind:value={$settings.luxLightToggle}
-								min={0}
-								max={1000}
-								step={1}
-							/>
-						</Col>
-					</Row>
-				{/if}
-				{#if $settings.useNostr}
-					<Row>
-						<Label md={6} for="nostrPubKey" size={$uiSettings.inputSize}
-							>{$_('section.settings.nostrPubKey')}</Label
-						>
-						<Col md="6">
-							<Input
-								type="text"
-								bind:value={$settings.nostrPubKey}
-								name="nostrPubKey"
-								id="nostrPubKey"
-								on:change={checkValidNostrPubkey}
-								invalid={!isValidHexPubKey($settings.nostrPubKey)}
-								bsSize={$uiSettings.inputSize}
-							></Input>
-						</Col>
-					</Row>
-					<Row>
-						<Label md={6} for="nostrRelay" size={$uiSettings.inputSize}
-							>{$_('section.settings.nostrRelay')}</Label
-						>
-						<Col md="6">
-							<InputGroup size={$uiSettings.inputSize}>
-								<Input
-									type="text"
-									bind:value={$settings.nostrRelay}
-									name="nostrRelay"
-									id="nostrRelay"
-									valid={validNostrRelay}
-									bsSize={$uiSettings.inputSize}
-								></Input>
-								<Button type="button" color="success" on:click={testNostrRelay}
-									>{$_('test', { default: 'Test' })}</Button
-								>
-							</InputGroup>
-						</Col>
-					</Row>
-				{/if}
-				<Row>
-					<Label md={6} for="mempoolInstance" size="sm"
-						>{$_('section.settings.mempoolnstance')}</Label
-					>
-					<Col md="6">
-						<InputGroup size={$uiSettings.inputSize}>
-							<Input
-								type="text"
-								bind:value={$settings.mempoolInstance}
-								name="mempoolInstance"
-								id="mempoolInstance"
-								disabled={$settings.ownDataSource}
-								bsSize="sm"
-							></Input>
-							<InputGroupText>
-								<Input
-									addon
-									type="checkbox"
-									bind:checked={$settings.mempoolSecure}
-									disabled={$settings.ownDataSource}
-									bsSize={$uiSettings.inputSize}
-								/>
-								HTTPS
-							</InputGroupText>
-						</InputGroup>
-						<FormText>{$_('section.settings.mempoolInstanceHelpText')}</FormText>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="hostnamePrefix" size={$uiSettings.inputSize}
-						>{$_('section.settings.hostnamePrefix')}</Label
-					>
-					<Col md="6">
-						<Input
-							type="text"
-							bind:value={$settings.hostnamePrefix}
-							name="hostnamePrefix"
-							id="hostnamePrefix"
-							bsSize={$uiSettings.inputSize}
-						></Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="wifiTxPower" size={$uiSettings.inputSize}
-						>{$_('section.settings.wifiTxPower', { default: 'WiFi Tx Power' })}</Label
-					>
-					<Col md="6">
-						<Input
-							type="select"
-							bind:value={$settings.txPower}
-							name="select"
-							id="fgColor"
-							bsSize={$uiSettings.inputSize}
-							class={$uiSettings.selectClass}
-						>
-							{#each wifiTxPowerMap as [key, value]}
-								<option {value}>{key}</option>
-							{/each}
-						</Input>
-						<FormText>{$_('section.settings.wifiTxPowerText')}</FormText>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="wpTimeout" size={$uiSettings.inputSize}
-						>{$_('section.settings.wpTimeout')}</Label
-					>
-					<Col md="6">
-						<InputGroup size={$uiSettings.inputSize}>
-							<Input
-								type="number"
-								id="minSecPriceUpd"
-								min={1}
-								step="1"
-								bind:value={$settings.wpTimeout}
-							/>
-							<InputGroupText>{$_('time.seconds')}</InputGroupText>
-						</InputGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Col md="6">
-						<Input
-							id="ledTestOnPower"
-							bind:checked={$settings.ledTestOnPower}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.ledPowerOnTest')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="ledFlashOnUpd"
-							bind:checked={$settings.ledFlashOnUpd}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.ledFlashOnBlock')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="stealFocus"
-							bind:checked={$settings.stealFocus}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.StealFocusOnNewBlock')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="mcapBigChar"
-							bind:checked={$settings.mcapBigChar}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.useBigCharsMcap')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="otaEnabled"
-							bind:checked={$settings.otaEnabled}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="mdnsEnabled"
-							bind:checked={$settings.mdnsEnabled}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="fetchEurPrice"
-							bind:checked={$settings.fetchEurPrice}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="useBlkCountdown"
-							bind:checked={$settings.useBlkCountdown}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.useBlkCountdown')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="useSatsSymbol"
-							bind:checked={$settings.useSatsSymbol}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.useSatsSymbol')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="suffixPrice"
-							bind:checked={$settings.suffixPrice}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.suffixPrice')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="disableLeds"
-							bind:checked={$settings.disableLeds}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label={$_('section.settings.disableLeds')}
-						/>
-					</Col>
-					<Col md="6">
-						<Input
-							id="ownDataSource"
-							bind:checked={$settings.ownDataSource}
-							type="switch"
-							bsSize={$uiSettings.inputSize}
-							label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
-						/>
-					</Col>
-					{#if $settings.nostrRelay}
-						<Col md="6">
-							<Input
-								id="useNostr"
-								bind:checked={$settings.useNostr}
-								type="switch"
-								bsSize={$uiSettings.inputSize}
-								label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
-							/>
-						</Col>
-					{/if}
-					{#if $settings.hasFrontlight}
-						<Col md="6">
-							<Input
-								id="flAlwaysOn"
-								bind:checked={$settings.flAlwaysOn}
-								type="switch"
-								bsSize={$uiSettings.inputSize}
-								label={$_('section.settings.flAlwaysOn')}
-							/>
-						</Col>
-						<Col md="6">
-							<Input
-								id="flFlashOnUpd"
-								bind:checked={$settings.flFlashOnUpd}
-								type="switch"
-								bsSize={$uiSettings.inputSize}
-								label={$_('section.settings.flFlashOnUpd')}
-							/>
-						</Col>
-					{/if}
-				</Row>
+			{#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}>
+					<ScreenSpecificSettings {settings} bind:isOpen={screenSettingsIsOpen} />
+					<DisplaySettings {settings} bind:isOpen={displaySettingsIsOpen} />
+					<DataSourceSettings {settings} bind:isOpen={dataSourceIsOpen} on:showToast />
+					<ExtraFeaturesSettings
+						{settings}
+						bind:isOpen={extraFeaturesIsOpen}
+						{miningPoolMap}
+						on:showToast
+					/>
+					<SystemSettings {settings} bind:isOpen={systemIsOpen} />
 
-				<Row>
-					<h3>{$_('section.settings.screens')}</h3>
-					{#if $settings.screens}
-						{#each $settings.screens as s}
-							<Col md="6">
-								<Input
-									id="screens_{s.id}"
-									bind:checked={s.enabled}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={s.name}
-								/>
-							</Col>
-						{/each}
-					{/if}
-				</Row>
-				<Row>
-					<Col class="d-flex justify-content-end">
-						<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>
-						<div class="mx-2"></div>
-						<Button color="primary">{$_('button.save')}</Button>
-					</Col>
-				</Row>
-			</Form>
+					<Row class="mt-4">
+						<Col>
+							<Button type="submit" color="primary" class="me-2">
+								{$_('button.save')}
+							</Button>
+							<Button type="button" color="secondary" on:click={handleReset}>
+								{$_('button.reset')}
+							</Button>
+						</Col>
+					</Row>
+				</Form>
+			{/if}
 		</CardBody>
 	</Card>
 </Col>

src/routes/Status.svelte

@@ -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,135 +96,224 @@
 			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>
-	<Card>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+	<Card id="status">
 		<CardHeader>
 			<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
-			{#if $settings.screens}
-				<div class="d-flex justify-content-center">
-					<ButtonGroup size="sm">
-						{#each $settings.screens as s}
-							<Button
-								color="outline-primary"
-								active={$status.currentScreen == s.id}
-								on:click={setScreen(s.id)}>{s.name}</Button
-							>
-						{/each}
-					</ButtonGroup>
+			{#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>
-				<hr />
-				{#if $status.data}
-					<section class={lightMode ? 'lightMode' : ''}>
-						<Rendered status={$status}></Rendered>
-					</section>
-					{$_('section.status.screenCycle')}:
-					<a
-						id="timerStatusText"
-						href={'#'}
-						style="cursor: pointer"
-						tabindex="0"
-						role="button"
-						aria-pressed="false"
-						on:click={toggleTimer($status.timerRunning)}
-						>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
-								'timer.stopped'
-							)}{/if}</a
-					>
-				{/if}
-			{/if}
-			<hr />
-			{#if !$settings.disableLeds}
-				<Row class="justify-content-evenly">
-					{#if $status.leds}
-						{#each $status.leds as led}
-							<Col>
-								<Input
-									type="color"
-									id="ledColorPicker"
-									bind:value={led.hex}
-									class="mx-auto"
-									disabled
-								/>
-							</Col>
+			{:else}
+				{#if $settings.screens}
+					<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
+									color="outline-primary"
+									active={$status.currentScreen == s.id}
+									on:click={setScreen(s.id)}>{s.name}</Button
+								>
+							{/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}
-				</Row>
-				<hr />
-			{/if}
-			<Progress striped value={memoryFreePercent}>{memoryFreePercent}%</Progress>
-			<div class="d-flex justify-content-between">
-				<div>{$_('section.status.memoryFree')}</div>
-				<div>
-					{Math.round($status.espFreeHeap / 1024)} / {Math.round($status.espHeapSize / 1024)} KiB
-				</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
-			>
-			<Tooltip target="rssiBar" placement="bottom">{$_('rssiBar.tooltip')}</Tooltip>
+					<hr />
+					{#if $status.data}
+						<section class={lightMode ? 'lightMode' : 'darkMode'} style="position: relative;">
+							{#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"
+							role="button"
+							aria-pressed="false"
+							on:click={toggleTimer($status.timerRunning)}
+							>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
+									'timer.stopped'
+								)}{/if}</a
+						><br />
 
-			<div class="d-flex justify-content-between">
-				<div>{$_('section.status.wifiSignalStrength')}</div>
-				<div>
-					{$status.rssi} dBm
+						{$_('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}
+								<Col>
+									<Input
+										type="color"
+										id="ledColorPicker"
+										bind:value={led.hex}
+										class="mx-auto"
+										disabled
+									/>
+								</Col>
+							{/each}
+						{/if}
+					</Row>
+					<hr />
+				{/if}
+				<Progress striped value={memoryFreePercent}>{memoryFreePercent}%</Progress>
+				<div class="d-flex justify-content-between">
+					<div>{$_('section.status.memoryFree')}</div>
+					<div>
+						{Math.round($status.espFreeHeap / 1024)} / {Math.round($status.espHeapSize / 1024)} KiB
+					</div>
 				</div>
-			</div>
-			<hr />
-			{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
-			<br />
-			<p>
-				{#if $settings.useNostr}
-					{$_('section.status.nostrConnection')}:
-					<span>
-						{#if $status.connectionStatus && $status.connectionStatus.nostr}
-							&#9989;
-						{:else}
-							&#10060;
-						{/if}
-					</span>
-				{:else if !$settings.ownDataSource}
-					{$_('section.status.wsPriceConnection')}:
-					<span>
-						{#if $status.connectionStatus && $status.connectionStatus.nostr}
-							&#9989;
-						{:else}
-							&#10060;
-						{/if}
-					</span>
-					-
-					{$_('section.status.wsMempoolConnection', {
-						values: { instance: $settings.mempoolInstance }
-					})}:
-					<span>
-						{#if $status.connectionStatus && $status.connectionStatus.blocks}
-							&#9989;
-						{:else}
-							&#10060;
-						{/if}
-					</span><br />
-				{:else}
-					{$_('section.status.wsDataConnection')}:
-					<span>
-						{#if $status.connectionStatus && $status.connectionStatus.price}
-							&#9989;
-						{:else}
-							&#10060;
-						{/if}
-					</span>
+				<hr />
+				{#if $settings.hasLightLevel}
+					{$_('section.status.lightSensor')}: {Number(Math.round($status.lightLevel))} lux
+					<hr />
 				{/if}
-				{#if $settings.fetchEurPrice}
-					<small>{$_('section.status.fetchEuroNote')}</small>
-				{/if}
-			</p>
+				<Progress striped id="rssiBar" color={wifiStrengthColor} value={rssiPercent}
+					>{rssiPercent}%</Progress
+				>
+				<Tooltip target="rssiBar" placement="bottom">{$_('rssiBar.tooltip')}</Tooltip>
+
+				<div class="d-flex justify-content-between">
+					<div>{$_('section.status.wifiSignalStrength')}</div>
+					<div>
+						{$status.rssi} dBm
+					</div>
+				</div>
+				<hr />
+				{$_('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}
+									&#9989;
+								{:else}
+									&#10060;
+								{/if}
+							</span>
+							-
+							{$_('section.status.wsMempoolConnection', {
+								values: { instance: $settings.mempoolInstance }
+							})}:
+							<span>
+								{#if $status.connectionStatus && $status.connectionStatus.blocks}
+									&#9989;
+								{:else}
+									&#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"
-		integrity="sha512-Ckle4LZv9LhAfEdohBdUi+QCu0e7HkXHTeSPXfbDzbCsR87QNTUBylkBEPsBNn4Ph83yK1hJ6f2uH4QMtB0hTA=="
+		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.min.js"
+		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"
-		integrity="sha512-qwGi7EG31HcylzamsmacHLZJrfUGRuuHEaCMcOojuNpMu+paR554VjaCZ9LdUVTrmF8xC03YVqTzuKx0SDdruA=="
+		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-standalone-preset.min.js"
+		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"
-		integrity="sha512-Ck+X9SARG7WscOTG4a8Qod5Zgd1MZlz4VtyyucjMJ3PnZy2lUl7q/v/0055yIfGM/v+f+216ME0/dv0qqtm6+g=="
+		href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.min.css"
+		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/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

@@ -1,107 +1,7 @@
 import { expect, test } from '@playwright/test';
+import { initMock, settingsJson, statusJson } from '../shared';
 
-const statusJson = {
-	currentScreen: 0,
-	numScreens: 7,
-	timerRunning: true,
-	espUptime: 4479,
-	espFreeHeap: 58508,
-	espHeapSize: 342108,
-	connectionStatus: { price: true, blocks: true },
-	rssi: -66,
-	data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
-	rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
-	leds: [
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' }
-	]
-};
-
-const settingsJson = {
-	numScreens: 7,
-	fgColor: 415029,
-	bgColor: 0,
-	timerSeconds: 1800,
-	timerRunning: true,
-	minSecPriceUpd: 30,
-	fullRefreshMin: 60,
-	wpTimeout: 600,
-	tzOffset: 0,
-	useBitcoinNode: false,
-	mempoolInstance: 'mempool.space',
-	ledTestOnPower: true,
-	ledFlashOnUpd: true,
-	ledBrightness: 128,
-	stealFocus: true,
-	mcapBigChar: true,
-	mdnsEnabled: true,
-	otaEnabled: true,
-	fetchEurPrice: false,
-	hostnamePrefix: 'btclock',
-	hostname: 'btclock-d60b14',
-	ip: '192.168.20.231',
-	txPower: 78,
-	gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
-	lastBuildTime: '1700666677',
-	screens: [
-		{ id: 0, name: 'Block Height', enabled: true },
-		{ id: 1, name: 'Sats per dollar', enabled: true },
-		{ id: 2, name: 'Ticker', enabled: true },
-		{ id: 3, name: 'Time', enabled: true },
-		{ id: 4, name: 'Halving countdown', enabled: true },
-		{ id: 5, name: 'Market Cap', enabled: true }
-	]
-};
-
-test.beforeEach(async ({ page }) => {
-	await page.route('*/**/api/status', async (route) => {
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/1', async (route) => {
-		//if (route.request().url().includes('*/**/api/show/screen/1')) {
-		statusJson.currentScreen = 1;
-		statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
-		statusJson.rendered = statusJson.data;
-		//}
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/2', async (route) => {
-		statusJson.currentScreen = 2;
-		(statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4']),
-			(statusJson.rendered = statusJson.data);
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/4', async (route) => {
-		statusJson.currentScreen = 4;
-		(statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO']),
-			(statusJson.rendered = statusJson.data);
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/settings', async (route) => {
-		await route.fulfill({ json: settingsJson });
-	});
-
-	await page.route('**/events', (route) => {
-		const newStatus = statusJson;
-		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
-
-		// Respond with a custom SSE message
-		route.fulfill({
-			status: 200,
-			contentType: 'text/event-stream',
-			json: `${JSON.stringify(newStatus)}\n\n`
-		});
-	});
-});
+test.beforeEach(initMock);
 
 test('index page has expected columns control, status, settings', async ({ page }) => {
 	await page.goto('/');
@@ -114,11 +14,12 @@ 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();
-	await expect(page.locator('//*[@id="nav-language-dropdown"]/div/button[1]')).toBeVisible();
-	page.locator('//*[@id="nav-language-dropdown"]/div/button[2]').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"]/div/button[3]').click();
+	page.locator('//*[@id="nav-language-dropdown"]/ul/li[3]/button').click();
 	await expect(page.getByRole('heading', { name: 'Configuración' })).toBeVisible();
 });
 
@@ -127,20 +28,23 @@ test('api page has expected load button', async ({ page }) => {
 	await expect(page.getByRole('button', { name: 'Load' })).toBeVisible();
 });
 
-test('timezone can be negative, zero and positive', async ({ page }) => {
-	await page.goto('/');
-	const tzOffsetField = 'input#tzOffset';
+// test('timezone can be negative, zero and positive', async ({ page }) => {
+// 	await page.goto('/');
+// 	await page.getByRole('button', { name: 'Show all' }).click();
 
-	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();
-	}
-});
+// 	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']) {
@@ -170,9 +74,13 @@ test('time values can not be zero or negative', async ({ page }) => {
 });
 
 test('info message when fetch eur price is enabled', async ({ page }) => {
+	delete (settingsJson as { actCurrencies?: string[] }).actCurrencies;
+
 	await page.goto('/');
+	await page.getByRole('button', { name: 'Show all' }).click();
+
 	const inputField = 'input#fetchEurPrice';
-	const switchElement = await page.$(inputField);
+	const switchElement = await page.locator(inputField);
 
 	expect(switchElement).toBeTruthy();
 	const isSwitchEnabled = await switchElement.isChecked();
@@ -187,6 +95,36 @@ test('info message when fetch eur price is enabled', async ({ page }) => {
 	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();
@@ -194,7 +132,7 @@ test('screens should be able to change', async ({ page }) => {
 
 	await page.getByRole('button', { name: 'Sats per Dollar' }).click();
 	const response = await responsePromise;
-	expect(response.url()).toContain('api/show/screen/1');
+	expect(response.url()).toContain('api/show/screen/10');
 });
 
 test('parse all types of EPD content correctly', async ({ page }) => {

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,6 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
-import GithubActionsReporter from 'vitest-github-actions-reporter';
+import { defineConfig } from 'vite';
+// import { visualizer } from 'rollup-plugin-visualizer';
 
 import * as fs from 'fs';
 import * as path from 'path';
@@ -10,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) {
@@ -36,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');
 				}
 			});
@@ -59,21 +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: '[name][extname]'
+				// assetFileNames: '[hash][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',
-		reporters: process.env.GITHUB_ACTIONS ? ['default', new GithubActionsReporter()] : 'default'
+		environment: 'jsdom'
+	},
+	define: {
+		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 	}
 });