Merge pull request 'Configure Renovate' (#4) from renovate/configure into main

Reviewed-on: #4

.eslintignore

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

.eslintrc.cjs

@@ -1,30 +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
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
-};

.forgejo/workflows/build.yaml

@@ -0,0 +1,121 @@
+on: [push]
+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:
+          node-version: lts/*
+          cache: yarn
+          cache-dependency-path: '**/yarn.lock'
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/pip
+            ~/node_modules
+          key: ${{ runner.os }}-pio
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '>=3.10'
+      - 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
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - name: Build WebUI
+        run: yarn build
+      - name: Get current block
+        id: getBlockHeight
+        run: echo "blockHeight=$(curl -s https://mempool.space/api/blocks/tip/height)" >> $GITHUB_OUTPUT
+      - name: Write block height to file
+        env:
+          BLOCK_HEIGHT: ${{ steps.getBlockHeight.outputs.blockHeight }}
+        run: mkdir -p output && echo "$BLOCK_HEIGHT" > output/version.txt
+      - name: gzip build for LittleFS
+        run: find dist -type f ! -name ".*" -exec sh -c 'mkdir -p "build_gz/$(dirname "${1#dist/}")" && gzip -k "$1" -c > "build_gz/${1#dist/}".gz' _ {} \;
+      - name: Write git rev to file
+        run: echo "$GITHUB_SHA" > build_gz/fs_hash.txt && echo "$GITHUB_SHA" > output/commit.txt
+      - name: Check GZipped directory size
+        run: |
+          # Set the threshold size in bytes
+          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
+        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
+        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.4.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

@@ -3,35 +3,56 @@ name: BTClock WebUI CI
 on: [push]
 
 env:
-  PUBLIC_BASE_URL: ""
+  PUBLIC_BASE_URL: ''
 
 jobs:
-  build:
+  check-changes:
     runs-on: ubuntu-latest
+    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: ubuntu-latest
+    if: ${{ needs.check-changes.outputs.all_changed_and_modified_files_count >= 1 }}
     permissions:
       contents: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: yarn
           cache-dependency-path: '**/yarn.lock'
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: |
             ~/.cache/pip
             ~/node_modules
           key: ${{ runner.os }}-pio
-      - uses: actions/setup-python@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: '3.9'
       - name: Get current date
         id: dateAndTime
-        run: echo "dateAndTime=$(date +'%Y-%m-%d-%H-%M')" >> $GITHUB_OUTPUT
+        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 &&
@@ -40,27 +61,76 @@ jobs:
           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
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
       - name: Build WebUI
         run: yarn build
+      - name: Get current block
+        id: getBlockHeight
+        run: echo "blockHeight=$(curl -s https://mempool.space/api/blocks/tip/height)" >> $GITHUB_OUTPUT
+      - name: Write block height to file
+        env:
+          BLOCK_HEIGHT: ${{ steps.getBlockHeight.outputs.blockHeight }}
+        run: mkdir -p output && echo "$BLOCK_HEIGHT" > output/version.txt
       - name: gzip build for LittleFS
         run: find dist -type f ! -name ".*" -exec sh -c 'mkdir -p "build_gz/$(dirname "${1#dist/}")" && gzip -k "$1" -c > "build_gz/${1#dist/}".gz' _ {} \;
+      - name: Write git rev to file
+        run: echo "$GITHUB_SHA" > build_gz/fs_hash.txt && echo "$GITHUB_SHA" > output/commit.txt
+      - name: Check GZipped directory size
+        run: |
+          # Set the threshold size in bytes
+          THRESHOLD=409600
+
+          # 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
         run: tar czf webui.tgz --strip-components=1 dist
       - name: Build LittleFS
-        run: /tmp/mklittlefs/mklittlefs -c build_gz -s 409600 littlefs.bin 
+        run: |
+          set -e
+          /tmp/mklittlefs/mklittlefs -c build_gz -s 409600 output/littlefs.bin
       - name: Upload artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           path: |
             webui.tgz
-            littlefs.bin
+            output/littlefs.bin
       - name: Create release
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         uses: ncipollo/release-action@v1
         with:
-          tag: main
+          tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
           commit: main
-          name: release-${{ steps.date.outputs.dateAndTime }}
+          name: release-${{ steps.getBlockHeight.outputs.blockHeight }}
-          artifacts: "littlefs.bin,webui.tgz"
+          artifacts: 'output/littlefs.bin,webui.tgz'
           allowUpdates: true
           removeArtifacts: true
-          makeLatest: true
+          makeLatest: true
+      - name: Pushes littlefs.bin to web flasher
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          SSH_DEPLOY_KEY: ${{ secrets.SSH_DEPLOY_KEY }}
+        with:
+          source-directory: output/
+          target-directory: webui/
+          destination-github-username: 'btclock'
+          destination-repository-name: 'web-flasher'
+          target-branch: main
+          user-name: ${{github.actor}}
+          user-email: ${{github.actor}}@users.noreply.github.com

.gitignore

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

.prettierignore

@@ -8,7 +8,7 @@ node_modules
 !.env.example
 dist/
 build_gz
-
+dist/**
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
-    "i18n-ally.localesPaths": [
+	"i18n-ally.localesPaths": ["src/lib/locales"],
-        "src/lib/locales"
+	"i18n-ally.keystyle": "nested",
-    ],
+	"i18n-ally.sourceLanguage": "en"
-    "i18n-ally.keystyle": "nested"
+}
-}

README.md

@@ -1,38 +1,45 @@
-# create-svelte
+# BTClock WebUI
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+[![BTClock CI](https://github.com/btclock/webui/actions/workflows/workflow.yml/badge.svg)](https://github.com/btclock/webui2/actions/workflows/workflow.yml)
 
-## Creating a project
+The web user-interface for the BTClock, based on Svelte-kit. It uses Bootstrap for the lay-out.
 
-If you're seeing this, you've probably already done this step. Congrats!
+![Screenshot](doc/screenshot.webp)
-
+![Screenshot Dark](doc/screenshot-dark.webp)
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
 
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+After installed dependencies with `yarn`, start a development server:
 
 ```bash
-npm run dev
+yarn dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
+yarn dev -- --open
 ```
 
 ## Building
 
-To create a production version of your app:
+To create a production version of the WebUI:
 
 ```bash
-npm run build
+yarn build
 ```
 
-You can preview the production build with `npm run preview`.
+Make sure the postinstall script is ran, because otherwise the filenames are to long for the LittleFS filesystem.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+## 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:
+
+```bash
+python3 gzip_build.py
+```
+
+Then you can make a `LittleFS.bin` with mklittlefs:
+
+```bash
+mklittlefs -c build_gz -s 409600 littlefs.bin
+```
+
+You can preview the production build with `yarn preview`.

doc/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

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

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

patches/@sveltejs+kit+1.27.6.patch

@@ -1,17 +0,0 @@
-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
---- 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,
- 							output: {
- 								format: 'esm',
--								entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].${ext}`,
--								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].${ext}`,
--								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
-+								entryFileNames: ssr ? '[name].js' : `${prefix}/[hash].${ext}`,
-+								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
-+								assetFileNames: `${prefix}/assets/[hash][extname]`,
- 								hoistTransitiveImports: false,
- 								sourcemapIgnoreList
- 							},

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

@@ -0,0 +1,30 @@
+diff --git a/node_modules/@sveltejs/kit/src/exports/vite/index.js b/node_modules/@sveltejs/kit/src/exports/vite/index.js
+index 21bc3d4..eef2db3 100644
+--- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
++++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
+@@ -648,9 +648,9 @@ async function kit({ svelte_config }) {
+ 							output: {
+ 								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}`,
+-								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
++								entryFileNames: ssr ? '[name].js' : `${prefix}/[hash].${ext}`,
++								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
++								assetFileNames: `${prefix}/assets/[hash][extname]`,
+ 								hoistTransitiveImports: false,
+ 								sourcemapIgnoreList,
+ 								manualChunks: split ? undefined : () => 'bundle',
+@@ -665,9 +665,9 @@ async function kit({ svelte_config }) {
+ 					worker: {
+ 						rollupOptions: {
+ 							output: {
+-								entryFileNames: `${prefix}/workers/[name]-[hash].js`,
+-								chunkFileNames: `${prefix}/workers/chunks/[name]-[hash].js`,
+-								assetFileNames: `${prefix}/workers/assets/[name]-[hash][extname]`,
++								entryFileNames: `${prefix}/workers/[hash].js`,
++								chunkFileNames: `${prefix}/workers/chunks/[hash].js`,
++								assetFileNames: `${prefix}/workers/assets/[hash][extname]`,
+ 								hoistTransitiveImports: false
+ 							}
+ 						}

playwright.config.ts

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

playwright.screenshot.config.ts

@@ -0,0 +1,59 @@
+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 } }
+		}
+	]
+});

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

src/hooks.server.ts

@@ -1,10 +1,10 @@
-import type { Handle } from '@sveltejs/kit'
+import type { Handle } from '@sveltejs/kit';
-import { locale } from 'svelte-i18n'
+import { locale } from 'svelte-i18n';
 
 export const handle: Handle = async ({ event, resolve }) => {
-	const lang = event.request.headers.get('accept-language')?.split(',')[0]
+	const lang = event.request.headers.get('accept-language')?.split(',')[0];
 	if (lang) {
-		locale.set(lang)
+		locale.set(lang);
 	}
-	return resolve(event)
+	return resolve(event);
-}
+};

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/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,5 @@
+export { default as SettingsSwitch } from './SettingsSwitch.svelte';
+export { default as SettingsInput } from './SettingsInput.svelte';
+export { default as SettingsSelect } from './SettingsSelect.svelte';
+export { default as ToggleHeader } from './ToggleHeader.svelte';
+export { default as ColorSchemeSwitcher } from './ColorSchemeSwitcher.svelte';

src/lib/config.ts

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

src/lib/i18n/index.ts

@@ -1,13 +1,30 @@
-import { browser } from '$app/environment'
+import { browser } from '$app/environment';
-import { init, register } from 'svelte-i18n'
+import { init, register } from 'svelte-i18n';
 
-const defaultLocale = 'en'
+const defaultLocale = 'en';
 
-register('en', () => import('../locales/en.json'))
+register('en', () => import('../locales/en.json'));
-register('nl', () => import('../locales/nl.json'))
+register('nl', () => import('../locales/nl.json'));
-register('es', () => import('../locales/es.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 ? window.navigator.language : defaultLocale,
+	initialLocale: getInitialLocale()
-})
+});

src/lib/index.ts

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

src/lib/locales/de.json

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

src/lib/locales/en.json

@@ -1,71 +1,150 @@
 {
-  "section": {
+	"section": {
-    "settings": {
+		"settings": {
-      "title": "Settings",
+			"title": "Settings",
-      "textColor": "Text color",
+			"textColor": "Text color",
-      "backgroundColor": "Background color",
+			"backgroundColor": "Background color",
-      "ledPowerOnTest": "LED power-on test",
+			"ledPowerOnTest": "LED power-on test",
-      "ledFlashOnBlock": "LED flash on new block",
+			"ledFlashOnBlock": "LED flash on new block",
-      "timePerScreen": "Time per screen",
+			"timePerScreen": "Time per screen",
-      "ledBrightness": "LED brightness",
+			"ledBrightness": "LED brightness",
-      "timezoneOffset": "Timezone offset",
+			"timezoneOffset": "Timezone offset",
-      "timeBetweenPriceUpdates": "Time between price updates",
+			"timeBetweenPriceUpdates": "Time between price updates",
-      "fullRefreshEvery": "Full refresh every",
+			"fullRefreshEvery": "Full refresh every",
-      "mempoolnstance": "Mempool Instance",
+			"mempoolnstance": "Mempool Instance",
-      "hostnamePrefix": "Hostname prefix",
+			"hostnamePrefix": "Hostname prefix",
-      "StealFocusOnNewBlock": "Steal focus on new block",
+			"StealFocusOnNewBlock": "Steal focus on new block",
-      "useBigCharsMcap": "Use big characters for market cap",
+			"useBigCharsMcap": "Use big characters for market cap",
-      "otaUpdates": "OTA updates",
+			"useBlkCountdown": "Blocks countdown for halving",
-      "enableMdns": "mDNS",
+			"useSatsSymbol": "Use sats symbol",
-      "fetchEuroPrice": "Fetch € price",
+			"suffixPrice": "Suffix price format",
-      "shortAmountsWarning": "Short amounts might shorten lifespan.",
+			"disableLeds": "Disable all LEDs effects",
-      "tzOffsetHelpText": "A restart is required to apply TZ offset.",
+			"otaUpdates": "OTA updates",
-      "screens": "Screens"
+			"enableMdns": "mDNS",
-    },
+			"fetchEuroPrice": "Fetch € price",
-    "control": {
+			"shortAmountsWarning": "Short amounts might shorten lifespan of the displays",
-      "systemInfo": "System info",
+			"tzOffsetHelpText": "A restart is required to apply TZ offset.",
-      "version": "Version",
+			"screens": "Screens",
-      "buildTime": "Build time",
+			"wifiTxPowerText": "In most cases this does not need to be set.",
-      "ledColor": "LED color",
+			"wifiTxPower": "WiFi TX power",
-      "turnOff": "Turn off",
+			"settingsSaved": "Settings saved",
-      "setColor": "Set color",
+			"errorSavingSettings": "Error saving settings",
-      "showText": "Show text",
+			"ownDataSource": "Use BTClock data source",
-      "text": "Text",
+			"flMaxBrightness": "Frontlight brightness",
-      "title": "Control",
+			"flAlwaysOn": "Frontlight always on",
-      "hostname": "Hostname"
+			"flEffectDelay": "Frontlight effect speed",
-    },
+			"flFlashOnUpd": "Frontlight flash on new block",
-    "status": {
+			"mempoolInstanceHelpText": "Only effective when BTClock data-source is disabled. A restart is required to apply.",
-      "title": "Status",
+			"luxLightToggle": "Auto toggle frontlight at lux",
-      "screenCycle": "Screen cycle",
+			"wpTimeout": "WiFi-config portal timeout",
-      "memoryFree": "Memory free",
+			"nostrPubKey": "Nostr source pubkey",
-      "wsPriceConnection": "WS Price connection",
+			"nostrZapKey": "Nostr zap pubkey",
-      "wsMempoolConnection": "WS Mempool.space connection",
+			"nostrRelay": "Nostr Relay",
-      "fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌  since it uses another data source.",
+			"nostrZapNotify": "Nostr Zap Notifications",
-      "uptime": "Uptime"
+			"useNostr": "Use Nostr data source",
-    }
+			"bitaxeHostname": "BitAxe hostname or IP",
-  },
+			"bitaxeEnabled": "Enable BitAxe",
-  "colors": {
+			"miningPoolStats": "Enable Mining Pool Stats",
-    "black": "Black",
+			"miningPoolName": "Mining Pool",
-    "white": "White"
+			"miningPoolUser": "Mining Pool username or api key",
-  },
+			"nostrZapPubkey": "Nostr Zap pubkey",
-  "time": {
+			"invalidNostrPubkey": "Invalid Nostr pubkey, note that your pubkey does NOT start with npub.",
-    "minutes": "minutes",
+			"convertingValidNpub": "Converting valid npub to pubkey",
-    "seconds": "seconds"
+			"flDisable": "Disable frontlight",
-  },
+			"httpAuthEnabled": "Require authentication for WebUI",
-  "restartRequired": "restart required",
+			"httpAuthUser": "WebUI Username",
-  "button": {
+			"httpAuthPass": "WebUI Password",
-    "save": "Save",
+			"httpAuthText": "Only password-protects WebUI, not API-calls.",
-    "reset": "Reset",
+			"currencies": "Currencies",
-    "restart": "Restart",
+			"stagingSource": "Use Staging data source (for development)",
-    "forceFullRefresh": "Force full refresh"
+			"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications.",
-  },
+			"mowMode": "Mow Suffix Mode",
-  "timer": {
+			"suffixShareDot": "Suffix compact notation",
-    "running": "running",
+			"section": {
-    "stopped": "stopped"
+				"displaysAndLed": "Displays and LEDs",
-  },
+				"screenSettings": "Screen specific",
-  "sections": {
+				"dataSource": "Data source",
-    "control": {
+				"extraFeatures": "Extra features",
-      "keepSameColor": "Keep same color"
+				"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"
+		},
+		"control": {
+			"systemInfo": "System info",
+			"version": "Version",
+			"buildTime": "Build time",
+			"ledColor": "LED color",
+			"turnOff": "Turn off",
+			"setColor": "Set color",
+			"showText": "Show text",
+			"text": "Text",
+			"title": "Control",
+			"hostname": "Hostname",
+			"frontlight": "Frontlight",
+			"turnOn": "Turn on",
+			"flashFrontlight": "Flash",
+			"firmwareUpdate": "Firmware update",
+			"fwCommit": "Firmware commit"
+		},
+		"status": {
+			"title": "Status",
+			"screenCycle": "Screen cycle",
+			"memoryFree": "Memory free",
+			"wsPriceConnection": "WS Price connection",
+			"wsMempoolConnection": "WS {instance} connection",
+			"fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌  since it uses another data source.",
+			"uptime": "Uptime",
+			"wifiSignalStrength": "WiFi Signal strength",
+			"wsDataConnection": "BTClock data-source connection",
+			"lightSensor": "Light sensor",
+			"nostrConnection": "Nostr Relay connection"
+		},
+		"firmwareUpdater": {
+			"fileUploadFailed": "File upload failed. Make sure you have selected the correct file and try again.",
+			"fileUploadSuccess": "File uploaded successfully, restarting device and reloading WebUI in {countdown} seconds",
+			"uploading": "Uploading",
+			"firmwareUpdateText": "When you use the firmware upload functionality, make sure you use the correct files. Uploading the wrong files can result in a non-working device. If it goes wrong, you can restore firmware by uploading the full image after setting the device in BOOT-mode.",
+			"swUpdateAvailable": "A newer version is available!",
+			"swUpToDate": "You are up to date.",
+			"latestVersion": "Latest Version",
+			"releaseDate": "Release Date",
+			"viewRelease": "View Release",
+			"autoUpdate": "Install update (experimental)"
+		}
+	},
+	"colors": {
+		"black": "Black",
+		"white": "White"
+	},
+	"time": {
+		"minutes": "minutes",
+		"seconds": "seconds"
+	},
+	"restartRequired": "restart required",
+	"button": {
+		"save": "Save",
+		"reset": "Reset",
+		"restart": "Restart",
+		"forceFullRefresh": "Force full refresh"
+	},
+	"timer": {
+		"running": "running",
+		"stopped": "stopped"
+	},
+	"sections": {
+		"control": {
+			"keepSameColor": "Keep same color"
+		}
+	},
+	"rssiBar": {
+		"tooltip": "Values > -67 dBm are considered good. > -30 dBm is amazing"
+	},
+	"warning": "Warning",
+	"auto-detect": "Auto-detect"
 }

src/lib/locales/es.json

@@ -1,71 +1,132 @@
 {
-  "section": {
+	"section": {
-    "settings": {
+		"settings": {
-      "title": "Configuración",
+			"title": "Configuración",
-      "textColor": "Color de texto",
+			"textColor": "Color de texto",
-      "backgroundColor": "Color de fondo",
+			"backgroundColor": "Color de fondo",
-      "ledBrightness": "Brillo LED",
+			"ledBrightness": "Brillo LED",
-      "screens": "Pantallas",
+			"screens": "Pantallas",
-      "shortAmountsWarning": "Cantidades pequeñas pueden acortar la vida útil.",
+			"shortAmountsWarning": "Pequeñas cantidades pueden acortar la vida útil de los displays",
-      "fullRefreshEvery": "Actualización completa cada",
+			"fullRefreshEvery": "Actualización completa cada",
-      "timePerScreen": "Tiempo por pantalla",
+			"timePerScreen": "Tiempo por pantalla",
-      "tzOffsetHelpText": "Es necesario reiniciar para aplicar la compensación.",
+			"tzOffsetHelpText": "Es necesario reiniciar para aplicar la compensación.",
-      "timezoneOffset": "Compensación de zona horaria",
+			"timezoneOffset": "Compensación de zona horaria",
-      "StealFocusOnNewBlock": "Presta atención al nuevo bloque",
+			"StealFocusOnNewBlock": "Presta atención al nuevo bloque",
-      "ledFlashOnBlock": "El LED parpadea con un bloque nuevo",
+			"ledFlashOnBlock": "El LED parpadea con un bloque nuevo",
-      "useBigCharsMcap": "Utilice caracteres grandes para la market cap",
+			"useBigCharsMcap": "Utilice caracteres grandes para la market cap",
-      "fetchEuroPrice": "Obtener precio en €",
+			"useBlkCountdown": "Cuenta regresiva en bloques",
-      "timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
+			"useSatsSymbol": "Usar símbolo sats",
-      "ledPowerOnTest": "Prueba de encendido del LED",
+			"fetchEuroPrice": "Obtener precio en €",
-      "enableMdns": "mDNS",
+			"timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
-      "hostnamePrefix": "Prefijo de nombre de host",
+			"ledPowerOnTest": "Prueba de encendido del LED",
-      "mempoolnstance": "Instancia de Mempool",
+			"enableMdns": "mDNS",
-      "otaUpdates": "Actualización por aire"
+			"hostnamePrefix": "Prefijo de nombre de host",
-    },
+			"mempoolnstance": "Instancia de Mempool",
-    "control": {
+			"suffixPrice": "Precio con sufijos",
-      "turnOff": "Apagar",
+			"disableLeds": "Desactivar efectos de LED",
-      "setColor": "Establecer el color",
+			"otaUpdates": "Actualización por aire",
-      "version": "Versión",
+			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto.",
-      "ledColor": "color del LED",
+			"settingsSaved": "Configuración guardada",
-      "systemInfo": "Info del sistema",
+			"errorSavingSettings": "Error al guardar la configuración",
-      "showText": "Poner texto",
+			"ownDataSource": "Utilice la fuente de datos BTClock",
-      "text": "Texto",
+			"flMaxBrightness": "Brillo de luz de la pantalla",
-      "title": "Control",
+			"flAlwaysOn": "Luz de la pantalla siempre encendida",
-      "buildTime": "Tiempo de construcción",
+			"flEffectDelay": "Velocidad del efecto de luz de la pantalla",
-      "hostname": "Nombre de host"
+			"flFlashOnUpd": "Luz de la pantalla parpadea con un nuevo bloque",
-    },
+			"mempoolInstanceHelpText": "Solo es efectivo cuando la fuente de datos BTClock está deshabilitada. \nEs necesario reiniciar para aplicar.",
-    "status": {
+			"luxLightToggle": "Cambio automático de luz frontal en lux",
-      "memoryFree": "Memoria RAM libre",
+			"wpTimeout": "Portal de configuración WiFi timeout",
-      "wsPriceConnection": "Conexión WebSocket Precio",
+			"useNostr": "Utilice la fuente de datos Nostr",
-      "wsMempoolConnection": "Conexión WebSocket Mempool.space",
+			"flDisable": "Desactivar luz de la pantalla",
-      "screenCycle": "Rotacion de pantalla",
+			"httpAuthUser": "Nombre de usuario WebUI",
-      "uptime": "Tiempo de funcionamiento",
+			"httpAuthPass": "Contraseña WebUI",
-      "fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
+			"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
-      "title": "Estado"
+			"currencies": "Monedas",
-    }
+			"mowMode": "Modo de sufijo Mow",
-  },
+			"suffixShareDot": "Notación compacta de sufijo",
-  "button": {
+			"section": {
-    "save": "Guardar",
+				"displaysAndLed": "Pantallas y LED",
-    "reset": "Restaurar",
+				"screenSettings": "Específico de la pantalla",
-    "restart": "Reiniciar",
+				"dataSource": "fuente de datos",
-    "forceFullRefresh": "Forzar refresco"
+				"extraFeatures": "Funciones adicionales",
-  },
+				"system": "Sistema"
-  "colors": {
+			},
-    "black": "Negro",
+			"ledFlashOnZap": "LED parpadeante con Nostr Zap",
-    "white": "Blanco"
+			"flFlashOnZap": "Flash de luz frontal con Nostr Zap",
-  },
+			"showAll": "Mostrar todo",
-  "restartRequired": "reinicio requerido",
+			"hideAll": "Ocultar todo",
-  "time": {
+			"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
-    "minutes": "minutos",
+			"luxLightToggleText": "Establecer en 0 para desactivar",
-    "seconds": "segundos"
+			"verticalDesc": "Descripción de pantalla vertical"
-  },
+		},
-  "timer": {
+		"control": {
-    "running": "funcionando",
+			"turnOff": "Apagar",
-    "stopped": "detenido"
+			"setColor": "Establecer el color",
-  },
+			"version": "Versión",
-  "sections": {
+			"ledColor": "color del LED",
-    "control": {
+			"systemInfo": "Info del sistema",
-      "keepSameColor": "Mantén el mismo color"
+			"showText": "Mostrar texto",
-    }
+			"text": "Texto",
-  }
+			"title": "Control",
+			"buildTime": "Tiempo de compilación",
+			"hostname": "Nombre del host",
+			"turnOn": "Encender",
+			"frontlight": "Luz de la pantalla",
+			"flashFrontlight": "Luz intermitente"
+		},
+		"status": {
+			"memoryFree": "Memoria RAM libre",
+			"wsPriceConnection": "Conexión WebSocket Precio",
+			"wsMempoolConnection": "Conexión WebSocket {instance}",
+			"screenCycle": "Ciclo de pantalla",
+			"uptime": "Tiempo de funcionamiento",
+			"fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
+			"title": "Estado",
+			"wifiSignalStrength": "Fuerza de la señal WiFi",
+			"wsDataConnection": "Conexión de fuente de datos BTClock",
+			"lightSensor": "Sensor de luz",
+			"nostrConnection": "Conexión de relé Nostr"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Archivo cargado exitosamente, reiniciando el dispositivo. Recargando WebUI en {countdown} segundos",
+			"fileUploadFailed": "Error al cargar el archivo. \nAsegúrese de haber seleccionado el archivo correcto e inténtelo nuevamente.",
+			"uploading": "Subiendo",
+			"firmwareUpdateText": "Cuando utilice la función de carga de firmware, asegúrese de utilizar los archivos correctos. \nCargar archivos incorrectos puede provocar que el dispositivo no funcione. \nSi sale mal, puede restaurar el firmware cargando la imagen completa después de configurar el dispositivo en modo BOOT.",
+			"swUpToDate": "Tienes la ultima version.",
+			"swUpdateAvailable": "¡Una nueva versión está disponible!",
+			"latestVersion": "Ultima versión",
+			"releaseDate": "Fecha de lanzamiento",
+			"viewRelease": "Ver lanzamiento",
+			"autoUpdate": "Instalar actualización (experimental)"
+		}
+	},
+	"button": {
+		"save": "Guardar",
+		"reset": "Restaurar",
+		"restart": "Reiniciar",
+		"forceFullRefresh": "Forzar refresco"
+	},
+	"colors": {
+		"black": "Negro",
+		"white": "Blanco"
+	},
+	"restartRequired": "reinicio requerido",
+	"time": {
+		"minutes": "minutos",
+		"seconds": "segundos"
+	},
+	"timer": {
+		"running": "funcionando",
+		"stopped": "detenido"
+	},
+	"sections": {
+		"control": {
+			"keepSameColor": "Mantén el mismo color"
+		}
+	},
+	"rssiBar": {
+		"tooltip": "Se consideran buenos valores > -67 dBm. > -30 dBm es increíble"
+	},
+	"warning": "Aviso",
+	"auto-detect": "Detección automática"
 }

src/lib/locales/nl.json

@@ -1,70 +1,132 @@
 {
-  "section": {
+	"section": {
-    "settings": {
+		"settings": {
-      "title": "Instellingen",
+			"title": "Instellingen",
-      "textColor": "Tekstkleur",
+			"textColor": "Tekstkleur",
-      "backgroundColor": "Achtergrondkleur",
+			"backgroundColor": "Achtergrondkleur",
-      "timeBetweenPriceUpdates": "Tijd tussen prijs updates",
+			"timeBetweenPriceUpdates": "Tijd tussen prijs updates",
-      "timezoneOffset": "Tijdzone afwijking",
+			"timezoneOffset": "Tijdzone afwijking",
-      "ledBrightness": "LED helderheid",
+			"ledBrightness": "LED helderheid",
-      "timePerScreen": "Tijd per scherm",
+			"timePerScreen": "Tijd per scherm",
-      "fullRefreshEvery": "Volledig verversen elke",
+			"fullRefreshEvery": "Volledig verversen elke",
-      "shortAmountsWarning": "Lage waardes verkorten levensduur",
+			"shortAmountsWarning": "Lage waardes verkorten mogelijk levensduur schermen",
-      "tzOffsetHelpText": "Herstart nodig voor toepassen afwijking.",
+			"tzOffsetHelpText": "Herstart nodig voor toepassen afwijking.",
-      "enableMdns": "mDNS",
+			"enableMdns": "mDNS",
-      "ledPowerOnTest": "LED test bij aanzetten",
+			"ledPowerOnTest": "LED test bij aanzetten",
-      "StealFocusOnNewBlock": "Pak aandacht bij nieuw blok",
+			"StealFocusOnNewBlock": "Pak aandacht bij nieuw blok",
-      "ledFlashOnBlock": "Knipper led bij nieuw blok",
+			"ledFlashOnBlock": "Knipper led bij nieuw blok",
-      "useBigCharsMcap": "Gebruik grote tekens bij market cap",
+			"useBigCharsMcap": "Gebruik grote tekens bij market cap",
-      "fetchEuroPrice": "Toon € prijs",
+			"useBlkCountdown": "Blocks aftellen voor halving",
-      "screens": "Schermen",
+			"useSatsSymbol": "Gebruik sats symbol",
-      "hostnamePrefix": "Hostnaam voorvoegsel",
+			"fetchEuroPrice": "Toon € prijs",
-      "mempoolnstance": "Mempool instantie",
+			"screens": "Schermen",
-      "otaUpdates": "OTA updates"
+			"hostnamePrefix": "Hostnaam voorvoegsel",
-    },
+			"mempoolnstance": "Mempool instantie",
-    "control": {
+			"suffixPrice": "Achtervoegsel prijs formaat",
-      "systemInfo": "Systeeminformatie",
+			"disableLeds": "Alle LEDs effecten uit",
-      "version": "Versie",
+			"otaUpdates": "OTA updates",
-      "buildTime": "Bouwtijd",
+			"wifiTxPower": "WiFi TX power",
-      "setColor": "Kleur instellen",
+			"wifiTxPowerText": "Meestal hoeft dit niet aangepast te worden.",
-      "turnOff": "Uitzetten",
+			"settingsSaved": "Instellingen opgeslagen",
-      "ledColor": "LED kleur",
+			"errorSavingSettings": "Fout bij opslaan instellingen",
-      "showText": "Toon tekst",
+			"ownDataSource": "BTClock-gegevensbron gebruiken",
-      "text": "Tekst",
+			"flMaxBrightness": "Displaylicht helderheid",
-      "title": "Besturing"
+			"flAlwaysOn": "Displaylicht altijd aan",
-    },
+			"flEffectDelay": "Displaylicht effect snelheid",
-    "status": {
+			"flFlashOnUpd": "Knipper displaylicht bij nieuw blok",
-      "title": "Status",
+			"mempoolInstanceHelpText": "Alleen effectief als de BTClock-gegevensbron is uitgeschakeld. \nOm toe te passen is een herstart nodig.",
-      "memoryFree": "Geheugen vrij",
+			"luxLightToggle": "Schakelen displaylicht op lux",
-      "screenCycle": "Scherm cyclus",
+			"wpTimeout": "WiFi-config-portal timeout",
-      "wsPriceConnection": "WS Prijs verbinding",
+			"useNostr": "Gebruik Nostr-gegevensbron",
-      "wsMempoolConnection": "WS Mempool.space verbinding",
+			"flDisable": "Schakel Displaylicht uit",
-      "fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
+			"httpAuthUser": "WebUI-gebruikersnaam",
-      "uptime": "Uptime"
+			"httpAuthPass": "WebUI-wachtwoord",
-    }
+			"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
-  },
+			"currencies": "Valuta's",
-  "colors": {
+			"mowMode": "Mow achtervoegsel",
-    "black": "Zwart",
+			"suffixShareDot": "Achtervoegsel compacte notatie",
-    "white": "Wit"
+			"section": {
-  },
+				"displaysAndLed": "Displays en LED's",
-  "time": {
+				"screenSettings": "Schermspecifiek",
-    "minutes": "minuten",
+				"dataSource": "Gegevensbron",
-    "seconds": "seconden"
+				"extraFeatures": "Extra functies",
-  },
+				"system": "Systeem"
-  "restartRequired": "herstart nodig",
+			},
-  "button": {
+			"ledFlashOnZap": "Knipper LED bij Nostr Zap",
-    "save": "Opslaan",
+			"flFlashOnZap": "Knipper displaylicht bij Nostr Zap",
-    "reset": "Herstel",
+			"showAll": "Toon alles",
-    "restart": "Herstart",
+			"hideAll": "Alles verbergen",
-    "forceFullRefresh": "Forceer scherm verversen"
+			"flOffWhenDark": "Displaylicht uit als het donker is",
-  },
+			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
-  "timer": {
+			"verticalDesc": "Verticale schermbeschrijving"
-    "running": "actief",
+		},
-    "stopped": "gestopt"
+		"control": {
-  },
+			"systemInfo": "Systeeminformatie",
-  "sections": {
+			"version": "Versie",
-    "control": {
+			"buildTime": "Bouwtijd",
-      "keepSameColor": "Behoud zelfde kleur"
+			"setColor": "Kleur instellen",
-    }
+			"turnOff": "Uitzetten",
-  }
+			"ledColor": "LED kleur",
+			"showText": "Toon tekst",
+			"text": "Tekst",
+			"title": "Besturing",
+			"frontlight": "Displaylicht",
+			"turnOn": "Aanzetten",
+			"flashFrontlight": "Knipper"
+		},
+		"status": {
+			"title": "Status",
+			"memoryFree": "Geheugen vrij",
+			"screenCycle": "Scherm cyclus",
+			"wsPriceConnection": "WS Prijs verbinding",
+			"wsMempoolConnection": "WS {instance} verbinding",
+			"fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
+			"uptime": "Uptime",
+			"wifiSignalStrength": "WiFi signaalsterkte",
+			"wsDataConnection": "BTClock-gegevensbron verbinding",
+			"lightSensor": "Licht sensor",
+			"nostrConnection": "Nostr Relay-verbinding"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Bestand geüpload, apparaat herstart. WebUI opnieuw geladen over {countdown} seconden",
+			"fileUploadFailed": "Bestandsupload mislukt. \nZorg ervoor dat het juiste bestand is geselecteerd en probeer het opnieuw.",
+			"uploading": "Uploaden",
+			"firmwareUpdateText": "Zorg bij het gebruiken van de firmware upload dat de juiste bestanden gebruikt worden. \nHet uploaden van de verkeerde bestanden kan resulteren in een niet-werkend apparaat. \nAls het misgaat, kunt u de firmware herstellen door de volledige afbeelding te uploaden nadat u het apparaat in de BOOT-modus hebt gezet.",
+			"swUpToDate": "Je hebt de nieuwste versie.",
+			"swUpdateAvailable": "Een nieuwere versie is beschikbaar!",
+			"latestVersion": "Laatste versie",
+			"releaseDate": "Datum van publicatie",
+			"viewRelease": "Bekijk publicatie",
+			"autoUpdate": "Update installeren (experimenteel)"
+		}
+	},
+	"colors": {
+		"black": "Zwart",
+		"white": "Wit"
+	},
+	"time": {
+		"minutes": "minuten",
+		"seconds": "seconden"
+	},
+	"restartRequired": "herstart nodig",
+	"button": {
+		"save": "Opslaan",
+		"reset": "Herstel",
+		"restart": "Herstart",
+		"forceFullRefresh": "Forceer scherm verversen"
+	},
+	"timer": {
+		"running": "actief",
+		"stopped": "gestopt"
+	},
+	"sections": {
+		"control": {
+			"keepSameColor": "Behoud zelfde kleur"
+		}
+	},
+	"rssiBar": {
+		"tooltip": "Waarden > -67 dBm zijn goed. > -30 dBm is verbazingwekkend"
+	},
+	"warning": "Waarschuwing",
+	"auto-detect": "Automatische detectie"
 }

src/lib/screen.ts

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

src/lib/style/app.scss

@@ -1,188 +1,319 @@
-@import "../node_modules/bootstrap/scss/functions";
+@use '@fontsource/ubuntu/scss/mixins' as Ubuntu;
-@import "../node_modules/bootstrap/scss/variables";
+@use '@fontsource/antonio/scss/mixins' as Antonio;
-@import "../node_modules/bootstrap/scss/variables-dark";
+
+@import '../node_modules/bootstrap/scss/functions';
 
 //@import "@fontsource/antonio/latin-400.css";
-@import "@fontsource/ubuntu/latin-400.css";
-@import "@fontsource/oswald/latin-400.css";
 
-$form-range-track-bg: #fff;
+@include Ubuntu.faces(
-$color-mode-type: media-query;
+	$subsets: latin,
-$font-family-base: "Ubuntu";
+	$weights: 400,
+	$formats: 'woff2',
+	$directory: '@fontsource/ubuntu/files'
+);
+
+@include Antonio.faces(
+	$subsets: latin,
+	$weights: 400,
+	$formats: 'woff2',
+	$directory: '@fontsource/antonio/files'
+);
+
+@import './satsymbol';
+
+$color-mode-type: data;
+$font-family-base: 'Ubuntu';
 $font-size-base: 0.9rem;
-//$font-size-sm: $font-size-base * .875 !default;
+$input-font-size-sm: $font-size-base * 0.875;
-//$form-label-font-size: $font-size-base * .575 !default;
-//$input-btn-font-size-sm: 0.4rem;
-//$form-label-font-size: 0.4rem;
-$input-font-size-sm: $font-size-base * .875;
 
+@import '../node_modules/bootstrap/scss/variables';
+@import '../node_modules/bootstrap/scss/variables-dark';
 // $border-radius:               .675rem;
 
-@import "../node_modules/bootstrap/scss/mixins";
+@import '../node_modules/bootstrap/scss/mixins';
-@import "../node_modules/bootstrap/scss/maps";
+@import '../node_modules/bootstrap/scss/maps';
-@import "../node_modules/bootstrap/scss/utilities";
+@import '../node_modules/bootstrap/scss/utilities';
 
-@import "../node_modules/bootstrap/scss/root";
+@import '../node_modules/bootstrap/scss/root';
-@import "../node_modules/bootstrap/scss/reboot";
+@import '../node_modules/bootstrap/scss/reboot';
-@import "../node_modules/bootstrap/scss/type";
+@import '../node_modules/bootstrap/scss/type';
-@import "../node_modules/bootstrap/scss/containers";
+@import '../node_modules/bootstrap/scss/containers';
-@import "../node_modules/bootstrap/scss/grid";
+@import '../node_modules/bootstrap/scss/grid';
-@import "../node_modules/bootstrap/scss/forms";
+@import '../node_modules/bootstrap/scss/forms';
-@import "../node_modules/bootstrap/scss/buttons";
+@import '../node_modules/bootstrap/scss/buttons';
-@import "../node_modules/bootstrap/scss/button-group";
+@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";
+@import '../node_modules/bootstrap/scss/dropdown';
 
-@import "../node_modules/bootstrap/scss/navbar";
+@import '../node_modules/bootstrap/scss/navbar';
-@import "../node_modules/bootstrap/scss/nav";
+@import '../node_modules/bootstrap/scss/nav';
-@import "../node_modules/bootstrap/scss/card";
+@import '../node_modules/bootstrap/scss/card';
-@import "../node_modules/bootstrap/scss/progress";
+@import '../node_modules/bootstrap/scss/progress';
+@import '../node_modules/bootstrap/scss/tooltip';
+@import '../node_modules/bootstrap/scss/toasts';
+@import '../node_modules/bootstrap/scss/alert';
 
-@import "../node_modules/bootstrap/scss/helpers";
+@import '../node_modules/bootstrap/scss/helpers';
-@import "../node_modules/bootstrap/scss/utilities/api";
+@import '../node_modules/bootstrap/scss/utilities/api';
 
-@include media-breakpoint-down(xl) {
+/* Default state (xs) - sticky */
-    html {
+.sticky-xs-top {
-        font-size: 85%;
+	position: sticky;
-    }
+	top: 0;
-
+	z-index: 1020;
-    button.btn,
-    input[type="button"].btn,
-    input[type="submit"].btn,
-    input[type="reset"].btn {
-        @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
-    }
 }
 
-@include media-breakpoint-down(lg) {
+@media (max-width: 576px) {
-    html {
+	main {
-        font-size: 75%;
+		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;
+	margin-bottom: 15px;
 }
 
-.splitText div:first-child::after {
+#btclock-wrapper {
-    display: block;
+	margin: 0 auto;
-    content: '';
-    margin-top: 0px;
-    border-bottom: 2px solid;
-    margin-bottom: 3px;
 }
 
-#btcclock-wrapper {
+.btn-group-sm .btn {
-    margin: 0 auto;
+	font-size: 0.8rem;
+	// text-overflow: ellipsis;
+	// white-space: nowrap;
+	// overflow: hidden;
+	// width: 4rem;
 }
 
-.btclock {
+.btn-group-sm {
-    border: 1px solid darkgray;
+	display: flex !important;
-    background: #000;
+	flex-wrap: wrap !important;
-    border-radius: 5px;
+	gap: 0.25rem !important;
-    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;
-
-    >div {
-        padding: 5px;
-    }
-
-    .digit,
-    .splitText,
-    .mediumText {
-        border: 2px solid gold;
-        border-radius: 8px;
-
-        @include media-breakpoint-up(sm) {
-            min-width: 10px;
-        }
-
-        @include media-breakpoint-up(xxl) {
-            min-width: 70px;
-        }
-
-        text-align: center;
-        color: #fff;
-    }
 }
 
-.darkMode .btclock>div {
+/* Remove the border radius override that Bootstrap applies */
-    color: #fff;
+.btn-group-sm > .btn {
-    border-color: #fff;
+	border-radius: 0.25rem !important;
-}
+	margin: 0 !important;
-
+	position: relative !important;
-.lightMode .btclock>div {
-    background: #fff;
-}
-
-.lightMode .btclock>div {
-    color: #000;
-}
-
-.darkMode .btclock>div {
-    background: #000;
-}
-
-.splitText {
-    @include media-breakpoint-up(sm) {
-        font-size: 1.0rem;
-        padding-top: 8px !important;
-        padding-bottom: 9px !important;
-    }
-    @include media-breakpoint-up(xxl) {
-        font-size: 1.8rem;
-        padding-top: 19px !important;
-        padding-bottom: 20px !important;
-    }
-
-    text-align: center;
-}
-
-.mediumText {
-    font-size: 3rem;
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-top: 20px !important;
-    padding-bottom: 20px !important;
-}
-
-.digit {
-    font-size: 5rem;
-    @include media-breakpoint-up(sm) {
-        font-size: 2.5rem;
-    }
-    @include media-breakpoint-up(xxl) {
-        font-size: 5rem;
-    }
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.digit-blank {
-    content: "abc";
 }
 
 #customText {
-    text-transform: uppercase;
+	text-transform: uppercase;
 }
-.system_info {
-    padding: 0;
 
-    li {
+.btclock-wrapper {
-        list-style: none;
+	.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.sats {
+		font-family: 'Satoshi Symbol', sans-serif;
+		content: 'a';
+	}
+
+	@media (max-width: 576px) {
+		.btclock {
+			font-size: calc(2vw + 2vh); /* Adjust for small screens if necessary */
+
+			.digit,
+			.splitText,
+			.mediumText {
+				padding: 5px;
+			}
+
+			.splitText {
+				font-size: calc(1.2vw + 1.2vh);
+
+				.top-text,
+				.bottom-text {
+					margin: 0;
+					line-height: 1;
+				}
+
+				.top-text {
+					margin-bottom: -10px;
+				}
+
+				.bottom-text {
+					margin-top: -10px;
+				}
+			}
+		}
+	}
+}
+
+.darkMode .btclock > div {
+	color: #fff;
+	border-color: #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;
+}
+
+.system_info {
+	padding: 0;
+
+	li {
+		list-style: none;
+	}
 }
 
 .card-title {
-    margin-bottom: 0;
+	margin-bottom: 0;
-}
+}
+
+.navbar-brand {
+	font-style: italic;
+	font-weight: 600;
+}
+
+.firmwareUploadStatusAlert,
+#firmwareUploadProgress {
+	@extend .my-2;
+}
+
+.sats {
+	font-family: 'Satoshi Symbol';
+}
+
+.currencyCode {
+	width: 20%;
+	text-align: center;
+	display: inline-block;
+}
+
+input[type='number'] {
+	text-align: right;
+}
+
+.lightMode .bitaxelogo {
+	filter: brightness(0) saturate(100%);
+}

src/lib/style/satsymbol.scss

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

src/lib/uiSettings.ts

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

src/routes/+layout.svelte

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

src/routes/+layout.ts

@@ -1,20 +1,24 @@
-import "$lib/style/app.scss";
+import '$lib/style/app.scss';
 
-
+import { browser } from '$app/environment';
-import { browser } from '$app/environment'
+import '$lib/i18n'; // Import to initialize. Important :)
-import '$lib/i18n' // Import to initialize. Important :)
+import { locale, waitLocale } from 'svelte-i18n';
-import { locale, waitLocale } from 'svelte-i18n'
+import type { LayoutLoad } from './$types';
-import type { LayoutLoad } from './$types'
 
 export const load: LayoutLoad = async () => {
-	 if (browser && localStorage.getItem('locale')) {
+	if (browser) {
-        locale.set(localStorage.getItem('locale'));
+		if (localStorage.getItem('locale')) {
-    } else if (browser) {
+			locale.set(localStorage.getItem('locale'));
-		locale.set(window.navigator.language)
+		} 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();
+	await waitLocale();
-}
+};
 
 export const prerender = true;
 export const ssr = false;
-export const csr = true;
+export const csr = true;

src/routes/+page.svelte

@@ -1,71 +1,184 @@
 <script lang="ts">
-    import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { PUBLIC_BASE_URL } from '$lib/config';
+	import { screenSize, updateScreenSize } from '$lib/screen';
 
-	import { _ } from 'svelte-i18n';
+	import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
-	import { Col, Container, Row } from 'sveltestrap';
+	import { replaceState } from '$app/navigation';
 
-	import Control from './Control.svelte';
-	import Status from './Status.svelte';
-	import Settings from './Settings.svelte';
-	import { writable } from 'svelte/store';
 	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
+	import Control from './Control.svelte';
+	import Settings from './Settings.svelte';
+	import Status from './Status.svelte';
+	import { uiSettings } from '$lib/uiSettings';
 
 	let settings = writable({
-        fgColor: "0"
+		fgColor: '0',
-    });
+		bgColor: '0'
+	});
 
 	let status = writable({
-        data: ["L", "O", "A", "D", "I", "N", "G"],
+		data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
-        espFreeHeap: 0,
+		espFreeHeap: 0,
-        espHeapSize: 0,
+		espHeapSize: 0,
-        connectionStatus: {
+		connectionStatus: {
-            "price": false,
+			price: false,
-            "blocks": false
+			blocks: false
-        },
+		},
 		leds: []
-    }); 
+	});
 
-	onMount(() => {
+	const fetchStatusData = () => {
-		fetch( PUBLIC_BASE_URL + `/api/settings`)
+		fetch(`${PUBLIC_BASE_URL}/api/status`, { credentials: 'same-origin' })
-			.then((res) => res.json())
-			.then((data) => {
-				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);
-			});
-
-		fetch(`${PUBLIC_BASE_URL}/api/status`)
 			.then((res) => res.json())
 			.then((data) => {
 				status.set(data);
 			});
+	};
 
-			const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
+	const fetchSettingsData = () => {
+		fetch(PUBLIC_BASE_URL + `/api/settings`, { credentials: 'same-origin' })
+			.then((res) => res.json())
+			.then((data) => {
+				data.fgColor = String(data.fgColor);
+				data.bgColor = String(data.bgColor);
+				data.timePerScreen = data.timerSeconds / 60;
 
-			evtSource.addEventListener('status', (e) => {
+				if (data.fgColor > 65535) {
-				let dataObj = (JSON.parse(e.data));
+					data.fgColor = '65535';
-				status.set(dataObj);
+				}
-			});	
+
+				if (data.bgColor > 65535) {
+					data.bgColor = '65535';
+				}
+				settings.set(data);
+			});
+	};
+
+	let sections: (HTMLElement | null)[];
+	let observer: IntersectionObserver;
+	const SM_BREAKPOINT = 576;
+
+	const setupObserver = () => {
+		if (window.innerWidth < SM_BREAKPOINT) {
+			observer = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							const id = entry.target.id;
+							replaceState(`#${id}`);
+
+							// Update nav pills
+							document.querySelectorAll('.nav-link').forEach((link) => {
+								link.classList.remove('active');
+								if (link.getAttribute('href') === `#${id}`) {
+									link.classList.add('active');
+								}
+							});
+						}
+					});
+				},
+				{
+					threshold: 0.25 // Trigger when section is 50% visible
+				}
+			);
+
+			sections = ['control', 'status', 'settings'].map((id) => document.getElementById(id));
+
+			sections.forEach((section) => observer.observe(section!));
+		}
+	};
+
+	onMount(() => {
+		setupObserver();
+
+		fetchSettingsData();
+		fetchStatusData();
+
+		const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
+
+		evtSource.addEventListener('status', (e) => {
+			let dataObj = JSON.parse(e.data);
+			status.set(dataObj);
+		});
+
+		function handleResize() {
+			if (observer) {
+				observer.disconnect();
+			}
+			setupObserver();
+
+			updateScreenSize();
+		}
+
+		// Add an event listener to update the screen size when the window is resized
+		window.addEventListener('resize', handleResize);
+
+		// Call the function initially to set the initial screen size
+		updateScreenSize();
+
+		// Cleanup function to remove the event listener when the component is destroyed
+		return () => {
+			window.removeEventListener('resize', handleResize);
+		};
 	});
+
+	$: {
+		const lgBreakpoint = parseInt(
+			getComputedStyle(document.documentElement).getPropertyValue('--bs-breakpoint-lg')
+		);
+
+		if ($screenSize >= lgBreakpoint) {
+			uiSettings.set({
+				inputSize: 'sm',
+				selectClass: 'form-select-sm',
+				btnSize: 'sm'
+			});
+		} else {
+			uiSettings.set({
+				inputSize: 'lg',
+				selectClass: 'form-select-lg',
+				btnSize: 'xl'
+			});
+		}
+	}
+
+	let toastIsOpen = false;
+	let toastColor = 'success';
+	let toastBody = '';
+
+	export const showToast = (event) => {
+		toastIsOpen = true;
+		toastColor = event.detail.color;
+		toastBody = event.detail.text;
+	};
 </script>
 
 <svelte:head>
-	<title>&#8383;TClock</title>
+	<title>BTClock</title>
 </svelte:head>
 
 <Container fluid>
 	<Row>
-		<Control bind:settings bind:status></Control>
+		<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
-		<Status  bind:settings bind:status></Status>
+
-		<Settings bind:settings></Settings>
+		<Status bind:settings bind:status lg="6" xxl="4"></Status>
+
+		<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
+		></Settings>
 	</Row>
 </Container>
+<div class="position-fixed bottom-0 end-0 p-2">
+	<div class="">
+		<Toast
+			isOpen={toastIsOpen}
+			class="me-1 bg-{toastColor} text-bg-{toastColor}"
+			autohide
+			on:close={() => (toastIsOpen = false)}
+		>
+			<ToastBody>
+				{toastBody}
+			</ToastBody>
+		</Toast>
+	</div>
+</div>

src/routes/Control.spec.ts

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

src/routes/Control.svelte

@@ -1,134 +1,246 @@
 <script lang="ts">
-import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { PUBLIC_BASE_URL } from '$lib/config';
 	import { onDestroy } from 'svelte';
-import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
-	import type { Subscriber, Unsubscriber } from 'svelte/motion';
 	import type { Writable } from 'svelte/store';
-import {
+	import {
-    Button,
+		Button,
-    ButtonGroup,
+		Card,
-    Card,
+		CardBody,
-    CardTitle,
+		CardHeader,
-    CardBody,
+		CardTitle,
-    CardHeader,
+		Col,
-    Col,
+		Form,
-    Container,
+		Input,
-    Form,
+		Label,
-    Input,
+		Row
-    Label,
+	} from '@sveltestrap/sveltestrap';
-    Row
+	import FirmwareUpdater from './FirmwareUpdater.svelte';
-} from 'sveltestrap';
+	import { uiSettings } from '$lib/uiSettings';
 
-export let settings = {};
+	export let settings = {};
-export let customText:String;
-export let ledColor:String = "#FFCC00";
-export let status:Writable<{leds:[]}>;
-let ledStatus = [];
-let keepLedsSameColor = false;
 
-const setCustomText = () => {
+	export let customText: string;
-    fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
+	export let status: Writable<{ leds: [] }>;
-};
+	let ledStatus = [];
+	let keepLedsSameColor = false;
 
-const checkSyncLeds = (e:Event) => {
+	const setCustomText = () => {
-	console.log('checksyncleds', keepLedsSameColor);
+		fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(() => {});
-	if (keepLedsSameColor) {
+	};
-		console.log(e.target.value);
 
-		ledStatus.forEach((element, i) => {
+	const checkSyncLeds = (e: Event) => {
-			if (ledStatus[i].hex != e.target_value) {
+		console.log('checksyncleds', keepLedsSameColor);
-				ledStatus[i].hex = e.target.value;
+		if (keepLedsSameColor) {
+			console.log(e.target.value);
+
+			ledStatus.forEach((element, i) => {
+				if (ledStatus[i].hex != e.target_value) {
+					ledStatus[i].hex = e.target.value;
+				}
+			});
+		}
+	};
+
+	const setLEDcolor = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/lights/set`, {
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			method: 'PATCH',
+			body: JSON.stringify(ledStatus)
+		}).catch(() => {});
+	};
+
+	const turnOffLeds = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(() => {});
+	};
+
+	const turnOnFrontlight = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/frontlight/on`).catch(() => {});
+	};
+
+	const flashFrontlight = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/frontlight/flash`).catch(() => {});
+	};
+
+	const turnOffFrontlight = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/frontlight/off`).catch(() => {});
+	};
+
+	const restartClock = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(() => {});
+	};
+
+	const forceFullRefresh = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(() => {});
+	};
+
+	let firstLedDataSubscription = () => {};
+
+	firstLedDataSubscription = status.subscribe(async (val) => {
+		if (val && val.leds) {
+			ledStatus = val.leds.map((obj) => ({ ['hex']: obj['hex'] }));
+
+			for (let led of ledStatus) {
+				if (led['hex'] == '#000000') {
+					led['hex'] = `#${Math.floor(Math.random() * 16777215)
+						.toString(16)
+						.padStart(6, '0')}`;
+				}
 			}
-		});
-	}
-}
 
-const setLEDcolor = () => {
+			firstLedDataSubscription();
-    console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
+		}
-    fetch(`${PUBLIC_BASE_URL}/api/lights`, {
+	});
-		headers: {
-			'Content-Type': 'application/json'
-		},
-		method: 'PATCH',
-		body: JSON.stringify(ledStatus)
-	}
-	).catch(err => { });
-};
 
-const turnOffLeds = () => {
+	onDestroy(firstLedDataSubscription);
-    fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(err => { });
-};
 
-const restartClock = () => {
+	// You can also add more props if needed
-    fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(err => { });
+	export let xs = 12;
-}
+	export let sm = xs;
-
+	export let md = sm;
-const forceFullRefresh = () => {
+	export let lg = md;
-    fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(err => { });
+	export let xl = lg;
-}
+	export let xxl = xl;
-
-let firstLedDataSubscription = () => {};
-
-firstLedDataSubscription = status.subscribe(async(val) => {
-	if (val && val.leds) {
-		ledStatus = val.leds.map((obj) => ({ ["hex"]: obj["hex"] }));
-		firstLedDataSubscription();
-	}
-})
-
-onDestroy(firstLedDataSubscription);
 </script>
 
-<Col>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card>
+	<Card id="control">
 		<CardHeader>
 			<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
 			<Form>
 				<Row>
-					<Label md={6} for="customText">{ $_('section.control.text') }</Label>
+					<Label md={4} for="customText" size={$uiSettings.inputSize}
-					<Col md="6">
+						>{$_('section.control.text')}</Label
-						<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}" />
+					>
+					<Col md="8">
+						<Input
+							type="text"
+							id="customText"
+							bind:value={customText}
+							bsSize="$uiSettings.inputSize"
+							maxLength={$settings.numScreens}
+						/>
 					</Col>
 				</Row>
-                <Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>
-
-			</Form>
-			<hr />
-			<h3>LEDs</h3>
-            <Form>
 				<Row>
-					<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
+					<Col class="d-flex justify-content-end">
-					<Col md="6">
+						<Button color="primary" on:click={setCustomText} bsSize={$uiSettings.btnSize}
-						<Row class="justify-content-between">
+							>{$_('section.control.showText')}</Button
-							{#if ledStatus}
+						>
-							{#each ledStatus as led, i }
-							<Col>
-							<Input type="color" id="ledColorPicker[{i}]" bind:value="{led.hex}" class="mx-auto" on:change="{checkSyncLeds}" />
-							</Col>
-							{/each}
-							{/if}
-							<Col>
-							<Input bind:checked={keepLedsSameColor} type="switch" class="mx-auto"  label="{ $_('sections.control.keepSameColor') }" />
-							</Col>
-						</Row>
 					</Col>
 				</Row>
-                <Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>
-                <Button color="primary" on:click={setLEDcolor}>{ $_('section.control.setColor') }</Button>
 			</Form>
-
 			<hr />
-			<h3>{ $_('section.control.systemInfo') }</h3>
+			{#if !$settings.disableLeds}
+				<h3>LEDs</h3>
+				<Form>
+					<Row>
+						<Label md={4} for="ledColorPicker" size={$uiSettings.inputSize}
+							>{$_('section.control.ledColor')}</Label
+						>
+						<Col md="8">
+							<Row class="justify-content-between">
+								{#if ledStatus}
+									{#each ledStatus as led, i}
+										<Col>
+											<Input
+												type="color"
+												id="ledColorPicker[{i}]"
+												bind:value={led.hex}
+												class="mx-auto"
+												on:change={checkSyncLeds}
+											/>
+										</Col>
+									{/each}
+								{/if}
+							</Row>
+							<Row>
+								<Col class="d-flex justify-content-end">
+									<Input
+										bind:checked={keepLedsSameColor}
+										type="switch"
+										label={$_('sections.control.keepSameColor')}
+										bsSize={$uiSettings.inputSize}
+									/>
+								</Col>
+							</Row>
+						</Col>
+					</Row>
+					<Row>
+						<Col class="d-flex justify-content-end">
+							<Button
+								color="secondary"
+								id="turnOffLedsBtn"
+								on:click={turnOffLeds}
+								bsSize={$uiSettings.inputSize}>{$_('section.control.turnOff')}</Button
+							>
+							<div class="mx-2"></div>
+							<Button color="primary" on:click={setLEDcolor} bsSize={$uiSettings.inputSize}
+								>{$_('section.control.setColor')}</Button
+							>
+						</Col>
+					</Row>
+				</Form>
+				<hr />
+			{/if}
+			{#if $settings.hasFrontlight && !$settings.flDisable}
+				<h3>{$_('section.control.frontlight')}</h3>
+				<Row class="d-flex justify-content-between justify-content-md-end">
+					<Col md="auto" class="">
+						<Button color="secondary" id="turnOffFrontlightBtn" on:click={turnOffFrontlight}
+							>{$_('section.control.turnOff')}</Button
+						>
+					</Col><Col md="auto" class="">
+						<Button color="primary" on:click={turnOnFrontlight}
+							>{$_('section.control.turnOn')}</Button
+						>
+					</Col><Col md="auto" class="">
+						<Button color="success" id="flashFrontlight" on:click={flashFrontlight}
+							>{$_('section.control.flashFrontlight')}</Button
+						>
+					</Col>
+				</Row>
+				<hr />
+			{/if}
+			<h3>{$_('section.control.systemInfo')}</h3>
 			<ul class="small system_info">
-				<li>{ $_('section.control.version') }: {$settings.gitRev}</li>
+				{#if $settings.gitTag}
-				<li>{ $_('section.control.buildTime') }: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
+					<li>
+						{$_('section.control.version')}: {$settings.gitTag}
+					</li>
+				{/if}
+				<li>
+					{$_('section.control.buildTime')}: {new Date(
+						$settings.lastBuildTime * 1000
+					).toLocaleString()}
+				</li>
 				<li>IP: {$settings.ip}</li>
-				<li>{ $_('section.control.hostname') }: {$settings.hostname}</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>
 			</ul>
-            <Button color="danger" id="restartBtn" on:click="{restartClock}">{ $_('button.restart') }</Button>
+			<Row>
-            <Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">{ $_('button.forceFullRefresh') }</Button>
+				<Col class="d-flex justify-content-end">
+					<Button color="danger" id="restartBtn" on:click={restartClock}
+						>{$_('button.restart')}</Button
+					>
+					<div class="mx-2"></div>
+
+					<Button color="warning" id="forceFullRefresh" on:click={forceFullRefresh}
+						>{$_('button.forceFullRefresh')}</Button
+					>
+				</Col>
+			</Row>
+			{#if $settings.otaEnabled}
+				<hr />
+				<h3>{$_('section.control.firmwareUpdate')}</h3>
+				<FirmwareUpdater on:showToast bind:settings />
+			{/if}
 		</CardBody>
 	</Card>
 </Col>

src/routes/FirmwareUpdater.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+	import { PUBLIC_BASE_URL } from '$lib/config';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { writable } from 'svelte/store';
+	import { Progress, Alert, Button } from '@sveltestrap/sveltestrap';
+
+	const dispatch = createEventDispatcher();
+
+	export let settings = { hwRev: '' };
+
+	let currentVersion: string = $settings.gitTag; // Replace with your current version
+
+	let latestVersion: string = '';
+	let isNewerVersionAvailable: boolean = false;
+	let releaseDate: string = '';
+	let releaseUrl: string = '';
+
+	const countdown = writable(10);
+	let firmwareUploadFile: File | null = null;
+	let firmwareWebUiFile: File | null = null;
+
+	let firmwareUploadProgress = 0;
+	let firmwareUploadSuccess = false;
+	let firmwareUploadError = false;
+
+	const handleFileChange = (event: Event, setFile: (file: File) => void) => {
+		const target = event.target as HTMLInputElement;
+		if (target.files && target.files.length > 0) {
+			setFile(target.files[0]);
+		}
+	};
+
+	function startCountdownToReload(duration: number) {
+		let timeRemaining = duration;
+
+		const interval = setInterval(() => {
+			timeRemaining -= 1;
+			countdown.set(timeRemaining);
+
+			if (timeRemaining <= 0) {
+				clearInterval(interval);
+				location.reload();
+			}
+		}, 1000); // Update every second
+	}
+
+	const uploadFile = async (file: File | null, endpoint: string) => {
+		if (!file) return;
+
+		const formData = new FormData();
+		formData.append('file', file);
+		firmwareUploadSuccess = false;
+		firmwareUploadError = false;
+		try {
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', endpoint);
+
+			xhr.upload.onprogress = (event: ProgressEvent) => {
+				if (event.lengthComputable) {
+					firmwareUploadProgress = Math.round((event.loaded * 100) / event.total);
+				}
+			};
+
+			xhr.onload = () => {
+				if (xhr.status === 200 && xhr.responseText != 'FAIL') {
+					firmwareUploadSuccess = true;
+					startCountdownToReload(10);
+				} else {
+					firmwareUploadError = true;
+				}
+			};
+
+			xhr.onerror = () => {
+				firmwareUploadError = true;
+			};
+
+			xhr.send(formData);
+		} catch (error) {
+			firmwareUploadError = true;
+			console.error(error);
+		}
+	};
+
+	const uploadFirmwareFile = () => {
+		uploadFile(firmwareUploadFile, `${PUBLIC_BASE_URL}/upload/firmware`);
+	};
+
+	const uploadWebUiFile = () => {
+		uploadFile(firmwareWebUiFile, `${PUBLIC_BASE_URL}/upload/webui`);
+	};
+
+	const getFirmwareBinaryName = () => {
+		let binaryFilename = '';
+		switch ($settings.hwRev) {
+			case 'REV_V8_EPD_2_13':
+				binaryFilename = 'btclock_rev_v8_213epd_firmware.bin';
+				break;
+			case 'REV_B_EPD_2_13':
+				binaryFilename = 'btclock_rev_b_213epd_firmware.bin';
+				break;
+			case 'REV_A_EPD_2_13':
+				binaryFilename = 'lolin_s3_mini_213epd_firmware.bin';
+				break;
+			case 'REV_A_EPD_2_9':
+				binaryFilename = 'lolin_s3_mini_29epd_firmware.bin';
+				break;
+			default:
+				binaryFilename = 'Unsupported hardware, unable to determine firmware binary filename';
+		}
+
+		return binaryFilename;
+	};
+
+	const onAutoUpdate = async (e: Event) => {
+		e.preventDefault();
+
+		try {
+			const response = await fetch(`${PUBLIC_BASE_URL}/api/firmware/auto_update`);
+
+			if (!response.ok) {
+				let msg = (await response.json()).msg;
+
+				dispatch('showToast', {
+					color: 'danger',
+					text: msg
+				});
+			} else {
+				let msg = (await response.json()).msg;
+
+				dispatch('showToast', {
+					color: 'info',
+					text: msg
+				});
+			}
+		} catch (error) {
+			dispatch('showToast', {
+				color: 'danger',
+				text: error
+			});
+			console.error('Error fetching latest version:', error);
+		}
+	};
+
+	onMount(async () => {
+		try {
+			const response = await fetch(
+				'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
+			);
+
+			if (!response.ok) {
+				latestVersion = 'error';
+			} else {
+				const data = await response.json();
+				latestVersion = data.tag_name;
+				releaseDate = new Date(data.created_at).toLocaleString();
+				releaseUrl = data.html_url;
+
+				isNewerVersionAvailable = compareVersions(latestVersion, currentVersion) === 1;
+			}
+		} catch (error) {
+			console.error('Error fetching latest version:', error);
+		}
+	});
+
+	function compareVersions(version1: string, version2: string): number {
+		if (!version2) return 0;
+
+		const parts1 = version1.split('.').map((part) => parseInt(part, 10));
+		const parts2 = version2.split('.').map((part) => parseInt(part, 10));
+
+		for (let i = 0; i < 3; i++) {
+			if (parts1[i] > parts2[i]) {
+				return 1;
+			} else if (parts1[i] < parts2[i]) {
+				return -1;
+			}
+		}
+
+		return 0;
+	}
+</script>
+
+{#if latestVersion && latestVersion != 'error'}
+	<p>
+		{$_('section.firmwareUpdater.latestVersion')}: {latestVersion} - {$_(
+			'section.firmwareUpdater.releaseDate'
+		)}: {releaseDate} -
+		<a href={releaseUrl} target="_blank">{$_('section.firmwareUpdater.viewRelease')}</a><br />
+		{#if isNewerVersionAvailable}
+			{$_('section.firmwareUpdater.swUpdateAvailable')} -
+			<a href="/" on:click={onAutoUpdate}>{$_('section.firmwareUpdater.autoUpdate')}</a>.
+		{: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 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 (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 firmwareUploadError}
+	<Alert color="danger" class="firmwareUploadStatusAlert"
+		>{$_('section.firmwareUpdater.fileUploadFailed')}</Alert
+	>
+{/if}
+<small
+	>⚠️ <strong>{$_('warning')}</strong>: {$_('section.firmwareUpdater.firmwareUpdateText')}</small
+>

src/routes/Rendered.svelte

@@ -1,25 +1,114 @@
 <script lang="ts">
-    export let status = {};
+	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) => {
+	const isSplitText = (str: string) => {
-        return str.includes("/");
+		return str.includes('/');
-    }
+	};
+
+	export let className = 'btclock-wrapper';
+	export let verticalDesc = false;
+	// Define the currency symbols as constants
+	const CURRENCY_USD = '$';
+	const CURRENCY_EUR = '[';
+	const CURRENCY_GBP = ']';
+	const CURRENCY_JPY = '^';
+	const CURRENCY_AUD = '_';
+	//const CURRENCY_CHF = '_';
+	const CURRENCY_CAD = '`';
+
+	function getCurrencySymbol(input: string): string {
+		// Split the string into an array of characters to process each one
+		return input
+			.split('')
+			.map((char) => {
+				switch (char) {
+					case CURRENCY_EUR:
+						return '€'; // Euro symbol
+					case CURRENCY_GBP:
+						return '£'; // Pound symbol
+					case CURRENCY_JPY:
+						return '¥'; // Yen symbol
+					case CURRENCY_AUD:
+					case CURRENCY_CAD:
+					case CURRENCY_USD:
+						return '$'; // Dollar symbol
+					default:
+						return char; // Return the original character if no match
+				}
+			})
+			.join(''); // Join the array back into a string
+	}
 </script>
 
-<div class="btcclock-wrapper" id="btcclock-wrapper">
+<div class={className} id={className}>
-    <div class="btclock">
+	<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
-        {#each status.data as char}
+		{#each status.data as char}
-        {#if isSplitText(char)}
+			{#if isSplitText(char)}
-        <div class="splitText">
+				<div class="splitText">
-            {#each char.split("/") as part}
+					<div class="textcontainer">
-            <div class="flex-items">{part}</div>
+						{#if char.split('/').length}
-            {/each}
+							<span class="top-text">{char.split('/')[0]}</span>
-        </div>
+							<span class="bottom-text">{char.split('/')[1]}</span>
-        {:else if char.length === 0 || char === " "}
+						{/if}
-        <div class="digit">&nbsp;&nbsp;</div>
+					</div>
-        {:else}
+					<!-- {#each char.split('/') as part}
-        <div class="digit">{char}</div>
+						<div class="flex-items">{part}</div>
-        {/if}
+					{/each} -->
-        {/each}
+				</div>
-    </div> 
+			{:else if char.startsWith('mdi')}
-</div>
+				<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
+					{#if char.endsWith('rocket')}
+						<RocketIcon></RocketIcon>
+					{/if}
+					{#if char.endsWith('pickaxe')}
+						<PickaxeIcon></PickaxeIcon>
+					{/if}
+					{#if char.endsWith('bolt')}
+						<ZapIcon></ZapIcon>
+					{/if}
+					{#if char.endsWith('bitaxe')}
+						<img src="/bitaxe.webp" class="bitaxelogo" alt="BitAxe logo" />
+					{/if}
+					{#if char.endsWith('miningpool')}
+						<span class="pool-logo">Mining Pool Logo</span>
+					{/if}
+				</div>
+			{:else if char === 'STS'}
+				<div class="digit sats">S</div>
+			{:else if char.length >= 3}
+				<div class="mediumText">{char}</div>
+			{:else if char.length === 0 || char === ' '}
+				<div class="digit">&nbsp;&nbsp;</div>
+			{:else}
+				<div class="digit">{getCurrencySymbol(char)}</div>
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style lang="scss">
+	.icon {
+		fill: currentColor;
+	}
+
+	.btclock-wrapper .btclock .icon.icon-img {
+		// padding: 0 15px;
+		aspect-ratio: 1;
+		width: calc(100 / 7);
+
+		img {
+			max-width: 95%;
+		}
+	}
+
+	.bitaxelogo {
+		transform: rotate(-90deg);
+	}
+
+	.pool-logo {
+		font-size: 0.75rem;
+	}
+</style>

src/routes/Settings.spec.ts

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

src/routes/Settings.svelte

@@ -1,208 +1,800 @@
 <script lang="ts">
-    import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { isValidNostrRelay, getPubKey, isValidHexPubKey, isValidNpub } from '$lib';
-
+	import { PUBLIC_BASE_URL } from '$lib/config';
-	import { onMount } from 'svelte';
+	import { uiSettings } from '$lib/uiSettings';
-	import { readonly, writable } from 'svelte/store';
+	import { createEventDispatcher } from 'svelte';
-
 	import { _ } from 'svelte-i18n';
 	import {
-		Col,
+		Button,
-		Container,
-		Row,
 		Card,
-        CardTitle,
-		CardHeader,
 		CardBody,
+		CardHeader,
+		CardTitle,
+		Col,
 		Form,
-		FormGroup,
+		Row
-		FormText,
+	} from '@sveltestrap/sveltestrap';
-		Label,
+	import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
-		Input,
+	import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
-		InputGroup,
+	import { derived } from 'svelte/store';
-		InputGroupText,
+	import { SettingsSwitch, SettingsInput, SettingsSelect, ToggleHeader } from '$lib/components';
-        Button
-	} from 'sveltestrap';
 
 	export let settings;
 
-    const onSave = async(e:Event) => {
+	const wifiTxPowerMap = new Map<string, number>([
-        e.preventDefault();
+		['Default', 80],
-        let formSettings = $settings;
+		['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
+	]);
 
-        delete formSettings["gitRev"];
+	const miningPoolMap = new Map<string, string>([
-        delete formSettings["ip"];
+		['noderunners', 'Noderunners.network'],
-        delete formSettings["lastBuildTime"];
+		['braiins', 'Braiins Pool'],
+		['ocean', 'ocean.xyz'],
+		['satoshi_radio', 'Satoshi Radio pool'],
+		['public_pool', 'public-pool.io'],
+		['gobrrr_pool', 'Go Brrr pool']
+	]);
 
-        const res = await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
+	const getMiningPoolName = (name: string) => {
+		if (miningPoolMap.has(name)) return miningPoolMap.get(name);
+
+		return name;
+	};
+
+	const dispatch = createEventDispatcher();
+
+	const handleReset = (e: Event) => {
+		e.preventDefault();
+		dispatch('formReset');
+	};
+
+	const getTzOffsetFromSystem = () => {
+		const dt = new Date();
+		let diffTZ = dt.getTimezoneOffset();
+		$settings.tzOffset = diffTZ * -1;
+	};
+
+	const onSave = async (e: Event) => {
+		e.preventDefault();
+
+		// const form = e.target as HTMLFormElement;
+		// const formData = new FormData(form);
+
+		let formSettings = $settings;
+
+		delete formSettings['gitRev'];
+		delete formSettings['ip'];
+		delete formSettings['lastBuildTime'];
+
+		let headers = new Headers({
+			'Content-Type': 'application/json'
+		});
+
+		//if ($settings.httpAuthEnabled) {
+		//	headers.set('Authorization', 'Basic ' + btoa($settings.httpAuthUser + ":" + $settings.httpAuthPass));
+		//}
+
+		await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
 			method: 'PATCH',
-            headers: {
+			headers: headers,
-                "Content-Type": "application/json",
+			credentials: 'same-origin',
-            },
 			body: JSON.stringify(formSettings)
-		})		
+		})
-    }
+			.then((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', {
+					color: 'danger',
+					text: $_('section.settings.errorSavingSettings')
+				});
+			});
+	};
+
+	let validNostrRelay = false;
+	const testNostrRelay = async () => {
+		validNostrRelay = await isValidNostrRelay($settings.nostrRelay);
+	};
+
+	let validBitaxe = 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;
+	};
+
+	const onFlBrightnessChange = async () => {
+		await fetch(`${PUBLIC_BASE_URL}/api/frontlight/brightness/${$settings.flMaxBrightness}`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+	};
+
+	let showPassword = false;
+
+	let textColor = '0';
+	const colorStore = derived(settings, ($settings) => ({
+		fgColor: $settings.fgColor,
+		bgColor: $settings.bgColor
+	}));
+
+	// $: {
+	// 	if ($colorStore) {
+	// 		console.log('Settings model changed:', $colorStore);
+	// 		if ($colorStore.fgColor < $colorStore.bgColor)
+	// 			textColor = "0";
+	// 		else
+	// 			textColor = "1"; // 65535
+	// 	}
+	// }
+
+	colorStore.subscribe(() => {
+		if ($colorStore) {
+			if ($colorStore.fgColor < $colorStore.bgColor) textColor = '0';
+			else textColor = '1'; // 65535
+		}
+	});
+
+	const setTextColor = () => {
+		console.log(textColor);
+		if (textColor == '1') {
+			$settings.fgColor = 65535;
+			$settings.bgColor = 0;
+		} else {
+			$settings.fgColor = 0;
+			$settings.bgColor = 65535;
+		}
+	};
+
+	const showAll = (show: boolean) => {
+		screenSettingsIsOpen = show;
+		displaysAndLedIsOpen = show;
+		dataSourceIsOpen = show;
+		extraFeaturesIsOpen = show;
+		systemIsOpen = show;
+	};
+
+	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: boolean,
+		displaysAndLedIsOpen: boolean,
+		dataSourceIsOpen: boolean,
+		extraFeaturesIsOpen: boolean,
+		systemIsOpen: boolean;
 </script>
 
-<Col>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card>
+	<Card id="settings">
 		<CardHeader>
+			<div class="float-end">
+				<small
+					><button
+						on:click={() => {
+							showAll(true);
+						}}
+						type="button">{$_('section.settings.showAll')}</button
+					>
+					|
+					<button
+						type="button"
+						on:click={() => {
+							showAll(false);
+						}}>{$_('section.settings.hideAll')}</button
+					></small
+				>
+			</div>
 			<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
 		</CardHeader>
+
 		<CardBody>
-			<Form on:submit={onSave}>
+			<Form on:submit={onSave} class="clearfix">
 				<Row>
-					<Label md={6} for="fgColor" size="sm">{$_('section.settings.textColor', { default: 'Text color' })}</Label>
+					<ToggleHeader
-					<Col md="6">
+						header={$_('section.settings.section.screenSettings')}
-						<Input
+						defaultOpen={true}
-							type="select"
+						isOpen={screenSettingsIsOpen}
-							bind:value={$settings.fgColor}
+					>
-							name="select"
+						<Row>
-							id="fgColor"
+							<SettingsSwitch
-							bsSize="sm"
+								id="stealFocus"
-							class="form-select-sm"
+								bind:checked={$settings.stealFocus}
-						>
+								label={$_('section.settings.StealFocusOnNewBlock')}
-							<option value="0">{ $_('colors.black') }</option>
+								size={$uiSettings.inputSize}
-							<option value="65535">{ $_('colors.white') }</option>
+								col={{ md: '6', xl: '12', xxl: '6' }}
-						</Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="bgColor" size="sm">{ $_('section.settings.backgroundColor') }</Label>
-					<Col md="6">
-						<Input
-							type="select"
-							bind:value={$settings.bgColor}
-							name="select"
-							id="bgColor"
-							bsSize="sm"
-							class="form-select-sm"
-						>
-							<option value="0">{ $_('colors.black') }</option>
-							<option value="65535">{ $_('colors.white') }</option>
-						</Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="timePerScreen" size="sm">{ $_('section.settings.timePerScreen') }</Label>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.timePerScreen} />
-							<InputGroupText>{ $_('time.minutes') }</InputGroupText>
-						</InputGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="fullRefreshMin" size="sm">{ $_('section.settings.fullRefreshEvery') }</Label>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.fullRefreshMin} />
-							<InputGroupText>{ $_('time.minutes') }</InputGroupText>
-						</InputGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="minSecPriceUpd" size="sm">{ $_('section.settings.timeBetweenPriceUpdates') }</Label>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
-							<InputGroupText>{ $_('time.seconds') }</InputGroupText>
-						</InputGroup>
-						<FormText>{ $_('section.settings.shortAmountsWarning') }</FormText>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="tzOffset" size="sm">{ $_('section.settings.timezoneOffset') }</Label>
-					<Col md="6">
-						<InputGroup size="sm">
-							<Input
-								type="number"
-								min={1}
-								step="1"
-								name="tzOffset"
-								id="tzOffset"
-								bind:value={$settings.tzOffset}
 							/>
-							<InputGroupText>{ $_('time.minutes') }</InputGroupText>
+							<SettingsSwitch
-						</InputGroup>
+								id="mcapBigChar"
-						<FormText>{ $_('section.settings.tzOffsetHelpText') }</FormText>
+								bind:checked={$settings.mcapBigChar}
-					</Col>
+								label={$_('section.settings.useBigCharsMcap')}
-				</Row>
+								size={$uiSettings.inputSize}
-				<Row>
+								col={{ md: '6', xl: '12', xxl: '6' }}
-					<Label md={6} for="ledBrightness" size="sm">{ $_('section.settings.ledBrightness') }</Label>
+							/>
-					<Col md="6">
+							<SettingsSwitch
-						<Input
+								id="useBlkCountdown"
-							type="range"
+								bind:checked={$settings.useBlkCountdown}
-							name="ledBrightness"
+								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.useNostr !== true}
+							<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"
+													bsSize={$uiSettings.inputSize}
+													label={c}
+												/>
+												<label class="form-check-label" for="currency_{c}">{c}</label>
+											</div>
+										</Col>
+									{/each}
+								{/if}
+							</Row>
+						{/if}
+					</ToggleHeader>
+				</Row><Row>
+					<ToggleHeader
+						header={$_('section.settings.section.displaysAndLed')}
+						isOpen={displaysAndLedIsOpen}
+					>
+						<SettingsSelect
+							id="textColor"
+							label={$_('section.settings.textColor')}
+							bind:value={textColor}
+							options={[
+								[$_('colors.black') + ' on ' + $_('colors.white'), '0'],
+								[$_('colors.white') + ' on ' + $_('colors.black'), '1']
+							]}
+							size={$uiSettings.inputSize}
+							selectClass={$uiSettings.selectClass}
+							onChange={setTextColor}
+						/>
+
+						<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"
-                            bind:value={$settings.ledBrightness}
+							label={$_('section.settings.ledBrightness')}
+							bind:value={$settings.ledBrightness}
+							type="range"
 							min={0}
 							max={255}
 							step={1}
+							size={$uiSettings.inputSize}
 						/>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="mempoolInstance" size="sm">{ $_('section.settings.mempoolnstance') }</Label>
-                    <Col md="6">
-						<Input
-							type="text"
-							bind:value={$settings.mempoolInstance}
-							name="mempoolInstance"
-							id="mempoolInstance"
-							bsSize="sm"
-						>
-						</Input>
-					</Col>
-				</Row>
-				<Row>
-					<Label md={6} for="hostnamePrefix" size="sm">{ $_('section.settings.hostnamePrefix') }</Label>
-                    <Col md="6">
-						<Input
-							type="text"
-							bind:value={$settings.hostnamePrefix}
-							name="hostnamePrefix"
-							id="hostnamePrefix"
-							bsSize="sm"
-						>
-						</Input>
-					</Col>
-				</Row>
-                <Row>
-                    <Col md="6">
-                        <Input id="ledTestOnPower" bind:checked={$settings.ledTestOnPower} type="switch" bsSize="sm" label="{ $_('section.settings.ledPowerOnTest') }" />
-                    </Col>
-                    <Col md="6">
-                        <Input id="ledFlashOnUpd" bind:checked={$settings.ledFlashOnUpd} type="switch" bsSize="sm" label="{ $_('section.settings.ledFlashOnBlock') }" />
-                    </Col>
-                    <Col md="6">
-                        <Input id="stealFocus" bind:checked={$settings.stealFocus} type="switch" bsSize="sm" label="{ $_('section.settings.StealFocusOnNewBlock') }" />
-                    </Col>
-                    <Col md="6">
-                        <Input id="mcapBigChar" bind:checked={$settings.mcapBigChar} type="switch" bsSize="sm" label="{ $_('section.settings.useBigCharsMcap') }" />
-                    </Col>
-                    <Col md="6">
-                        <Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.otaUpdates') } ({ $_('restartRequired') })" />
-                    </Col>
-                    <Col md="6">
-                        <Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.enableMdns') } ({ $_('restartRequired') })" />
-                    </Col>
-                       <Col md="6">
-                        <Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="{ $_('section.settings.fetchEuroPrice') } ({ $_('restartRequired') })" />
-                    </Col>
-                </Row>
 
-                <Row>
+						{#if $settings.hasFrontlight && !$settings.flDisable}
-                    <h3>{ $_('section.settings.screens') }</h3>
+							<SettingsInput
-                    {#if $settings.screens}
+								id="flMaxBrightness"
-                    {#each $settings.screens as s}
+								label={$_('section.settings.flMaxBrightness')}
-                    <Col md="6">
+								bind:value={$settings.flMaxBrightness}
-                        <Input id="screens_{s.id}" bind:checked={s.enabled} type="switch" bsSize="sm" label="{s.name}" />
+								type="range"
-                    </Col>
+								min={0}
-                    {/each}
+								max={4095}
-                    {/if}
+								step={1}
-                </Row>
+								size={$uiSettings.inputSize}
-                <Button type="reset" color="secondary">{ $_('button.reset') }</Button>
+								onChange={onFlBrightnessChange}
-                <Button color="primary">{ $_('button.save') }</Button>
+							/>
+
+							<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}
+								/>
+
+								<SettingsSwitch
+									id="flOffWhenDark"
+									bind:checked={$settings.flOffWhenDark}
+									label={$_('section.settings.flOffWhenDark')}
+									size={$uiSettings.inputSize}
+								/>
+							{/if}
+						</Row>
+					</ToggleHeader>
+				</Row><Row>
+					<ToggleHeader
+						header={$_('section.settings.section.dataSource')}
+						isOpen={dataSourceIsOpen}
+					>
+						<SettingsInput
+							id="mempoolInstance"
+							label={$_('section.settings.mempoolnstance')}
+							bind:value={$settings.mempoolInstance}
+							disabled={$settings.ownDataSource}
+							required={true}
+							helpText={$_('section.settings.mempoolInstanceHelpText')}
+							size={$uiSettings.inputSize}
+						/>
+
+						<Row>
+							<SettingsSwitch
+								id="ownDataSource"
+								bind:checked={$settings.ownDataSource}
+								label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
+								size={$uiSettings.inputSize}
+							/>
+
+							{#if $settings.nostrRelay}
+								<SettingsSwitch
+									id="useNostr"
+									bind:checked={$settings.useNostr}
+									label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
+									size={$uiSettings.inputSize}
+								/>
+							{/if}
+
+							{#if 'stagingSource' in $settings}
+								<SettingsSwitch
+									id="stagingSource"
+									bind:checked={$settings.stagingSource}
+									label="{$_('section.settings.stagingSource')} ({$_('restartRequired')})"
+									size={$uiSettings.inputSize}
+								/>
+							{/if}
+						</Row>
+					</ToggleHeader>
+				</Row><Row>
+					<ToggleHeader
+						header={$_('section.settings.section.extraFeatures')}
+						isOpen={extraFeaturesIsOpen}
+					>
+						{#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}
+						{#if $settings.miningPoolStats}
+							<SettingsSelect
+								id="miningPoolName"
+								label={$_('section.settings.miningPoolName')}
+								bind:value={$settings.miningPoolName}
+								options={$settings.availablePools.map((pool) => [getMiningPoolName(pool), pool])}
+								size={$uiSettings.inputSize}
+								selectClass={$uiSettings.selectClass}
+							/>
+							<SettingsInput
+								id="miningPoolUser"
+								label={$_('section.settings.miningPoolUser')}
+								bind:value={$settings.miningPoolUser}
+								required={true}
+								size={$uiSettings.inputSize}
+							/>
+						{/if}
+						{#if 'nostrZapNotify' in $settings && $settings['nostrZapNotify']}
+							<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}
+						{#if $settings.useNostr}
+							<SettingsInput
+								id="nostrPubKey"
+								label={$_('section.settings.nostrPubKey')}
+								bind:value={$settings.nostrPubKey}
+								invalid={!isValidHexPubKey($settings.nostrPubKey)}
+								helpText={!isValidHexPubKey($settings.nostrPubKey)
+									? $_('section.settings.invalidNostrPubkey')
+									: undefined}
+								size={$uiSettings.inputSize}
+								onChange={() => checkValidNostrPubkey('nostrPubKey')}
+								onInput={() => checkValidNostrPubkey('nostrPubKey')}
+							/>
+						{/if}
+						{#if 'nostrZapNotify' in $settings || $settings.useNostr}
+							<SettingsInput
+								id="nostrRelay"
+								label={$_('section.settings.nostrRelay')}
+								bind:value={$settings.nostrRelay}
+								required={true}
+								valid={validNostrRelay}
+								size={$uiSettings.inputSize}
+							>
+								<Button type="button" color="success" on:click={testNostrRelay}
+									>{$_('test', { default: 'Test' })}</Button
+								>
+							</SettingsInput>
+						{/if}
+						<Row>
+							{#if 'bitaxeEnabled' in $settings}
+								<SettingsSwitch
+									id="bitaxeEnabled"
+									bind:checked={$settings.bitaxeEnabled}
+									label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
+									size={$uiSettings.inputSize}
+								/>
+							{/if}
+							{#if 'miningPoolStats' in $settings}
+								<SettingsSwitch
+									id="miningPoolStats"
+									bind:checked={$settings.miningPoolStats}
+									label="{$_('section.settings.miningPoolStats')} ({$_('restartRequired')})"
+									size={$uiSettings.inputSize}
+								/>
+							{/if}
+							{#if 'nostrZapNotify' in $settings}
+								<SettingsSwitch
+									id="nostrZapNotify"
+									bind:checked={$settings.nostrZapNotify}
+									label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
+									size={$uiSettings.inputSize}
+								/>
+								<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}
+							{/if}
+						</Row>
+					</ToggleHeader>
+				</Row><Row>
+					<ToggleHeader header={$_('section.settings.section.system')} isOpen={systemIsOpen}>
+						<SettingsInput
+							id="tzOffset"
+							label={$_('section.settings.timezoneOffset')}
+							bind:value={$settings.tzOffset}
+							type="number"
+							step="1"
+							required={true}
+							suffix={$_('time.minutes')}
+							helpText={$_('section.settings.tzOffsetHelpText')}
+							size={$uiSettings.inputSize}
+						>
+							<Button type="button" color="info" on:click={getTzOffsetFromSystem}
+								>{$_('auto-detect')}</Button
+							>
+						</SettingsInput>
+
+						{#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}
+							minlength="1"
+							size={$uiSettings.inputSize}
+						/>
+
+						<SettingsSelect
+							id="wifiTxPower"
+							label={$_('section.settings.wifiTxPower', { default: 'WiFi Tx Power' })}
+							bind:value={$settings.txPower}
+							options={Array.from(wifiTxPowerMap.entries())}
+							size={$uiSettings.inputSize}
+							selectClass={$uiSettings.selectClass}
+							helpText={$_('section.settings.wifiTxPowerText')}
+						/>
+
+						<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}
+							/>
+						</Row>
+					</ToggleHeader>
+				</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>
 		</CardBody>
 	</Card>

src/routes/Status.spec.ts

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

src/routes/Status.svelte

@@ -1,131 +1,269 @@
 <script lang="ts">
-    import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { PUBLIC_BASE_URL } from '$lib/config';
 
-    import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-	import { writable, type Writable } from 'svelte/store';
+	import { writable } from 'svelte/store';
-	import { Row, Input, Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
+	import {
+		Button,
+		ButtonGroup,
+		Card,
+		CardBody,
+		CardHeader,
+		CardTitle,
+		Col,
+		Input,
+		Progress,
+		Tooltip,
+		Row
+	} from '@sveltestrap/sveltestrap';
 	import Rendered from './Rendered.svelte';
-	
-    export let settings; 
-    export let status:Writable<{}>;
 
-    const toTime = (secs:Number) => {
+	export let settings;
-        var hours = Math.floor(secs / (60 * 60));
+	export let status: writable<object>;
 
-        var divisor_for_minutes = secs % (60 * 60);
+	// Function to split array into chunks
-        var minutes = Math.floor(divisor_for_minutes / 60);
+	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);
 
-        var divisor_for_seconds = divisor_for_minutes % 60;
+	const toTime = (secs: number) => {
-        var seconds = Math.ceil(divisor_for_seconds);
+		var hours = Math.floor(secs / (60 * 60));
 
-        var obj = {
+		var divisor_for_minutes = secs % (60 * 60);
-            "h": hours,
+		var minutes = Math.floor(divisor_for_minutes / 60);
-            "m": minutes,
-            "s": seconds
-        };
-        return obj;
-    }
 
-    const toUptimeString = (secs:Number):String => {
+		var divisor_for_seconds = divisor_for_minutes % 60;
-        let time = toTime(secs);
+		var seconds = Math.ceil(divisor_for_seconds);
 
-        return `${time.h}h ${time.m}m ${time.s}s`;
+		var obj = {
-    }
+			h: hours,
+			m: minutes,
+			s: seconds
+		};
+		return obj;
+	};
 
-    let memoryFreePercent:number = 50;
+	const toUptimestring = (secs: number): string => {
-    let lightMode:boolean = false;
+		let time = toTime(secs);
 
-    status.subscribe((value: {}) => {
+		return `${time.h}h ${time.m}m ${time.s}s`;
-        memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
+	};
-    });
 
-    settings.subscribe((value: {}) => {
+	let memoryFreePercent: number = 50;
-        lightMode = value.bgColor > value.fgColor;
+	let rssiPercent: number = 50;
-    });
+	let wifiStrengthColor: string = 'info';
+	let lightMode: boolean = false;
 
-    const setScreen = (id:number) => () => {
+	status.subscribe((value: object) => {
-        fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { });
+		memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
-    }
 
-    const toggleTimer = (currentStatus:boolean) => () => {
+		rssiPercent = Math.round(((value.rssi + 120) / (-30 + 120)) * 100);
-        if (currentStatus) {
-            fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
-        } else {
-            fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
-        }
-    }
 
-    const isLightMode = () => {
+		if (value.rssi > -55) {
-        return $settings.bgColor > $settings.fgColor;
+			wifiStrengthColor = 'success';
-    }
+		} else if (value.rssi < -87) {
+			wifiStrengthColor = 'warning';
+		} else {
+			wifiStrengthColor = 'info';
+		}
+	});
 
+	settings.subscribe((value: object) => {
+		lightMode = value.bgColor > value.fgColor;
+
+		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) {
+			fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
+		} else {
+			fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
+		}
+	};
+
+	export let xs = 12;
+	export let sm = xs;
+	export let md = sm;
+	export let lg = md;
+	export let xl = lg;
+	export let xxl = xl;
 </script>
 
-<Col>
+<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card>
+	<Card id="status">
 		<CardHeader>
 			<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
-            {#if $settings.screens}
+			{#if $settings.screens}
-            <div class="d-flex justify-content-center">
+				<div class=" d-block d-sm-none mx-auto text-center">
-                <ButtonGroup size="sm">
+					{#each buttonChunks as chunk}
-                    {#each $settings.screens as s}
+						<ButtonGroup size="sm" class="mx-auto mb-1">
-                    <Button color="outline-primary" active={$status.currentScreen == s.id} on:click={setScreen(s.id)}>{s.name}</Button>
+							{#each chunk as s}
-                    {/each}
+								<Button
-                </ButtonGroup>
+									color="outline-primary"
-                </div>
+									active={$status.currentScreen == s.id}
-              <hr>
+									on:click={setScreen(s.id)}>{s.name}</Button
-              {#if $status.data}
+								>
-              <section class={lightMode ? 'lightMode': ''}>
+							{/each}
-                  <Rendered status="{$status}"></Rendered>
+						</ButtonGroup>
-              </section>
+					{/each}
-              { $_('section.status.screenCycle') }: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; { $_('timer.running') }{:else}&#9208; { $_('timer.stopped') }{/if}</a>
+				</div>
-              {/if}
+				<div class="d-flex justify-content-center d-none d-sm-flex">
-            {/if}
+					<ButtonGroup size="sm">
-        <hr>
+						{#each $settings.screens as s}
-        <Row class="justify-content-evenly">
+							<Button
-            {#if $status.leds}
+								color="outline-primary"
-            {#each $status.leds as led}
+								active={$status.currentScreen == s.id}
-            <Col>
+								on:click={setScreen(s.id)}>{s.name}</Button
-            <Input type="color" id="ledColorPicker" bind:value="{led.hex}" class="mx-auto" disabled />
+							>
-            </Col>
+						{/each}
-            {/each}
+					</ButtonGroup>
-            {/if}
+				</div>
-        </Row>
+				{#if $settings.actCurrencies && $settings.ownDataSource}
-        <hr>
+					<div class="d-flex justify-content-center d-sm-flex mt-2">
-        <Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
+						<ButtonGroup size="sm">
-        <div class="d-flex justify-content-between">
+							{#each $settings.actCurrencies as c}
-            <div>{ $_('section.status.memoryFree') } </div>
+								<Button
-            <div>{ Math.round($status.espFreeHeap / 1024)  } / { Math.round($status.espHeapSize / 1024) } KiB</div>
+									color="outline-success"
-          </div>
+									active={$status.currency == c}
-        <hr>
+									on:click={setCurrency(c)}>{c}</Button
-        { $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
+								>
-        <br>
+							{/each}
-        <p>
+						</ButtonGroup>
-            { $_('section.status.wsPriceConnection') }:
+					</div>
-            <span>
+				{/if}
-            {#if $status.connectionStatus && $status.connectionStatus.price}
+				<hr />
-            &#9989;
+				{#if $status.data}
-            {:else}
+					<section class={lightMode ? 'lightMode' : 'darkMode'}>
-            &#10060;
+						<Rendered
-            {/if}
+							status={$status}
-            </span>
+							className="btclock-wrapper"
-            - 
+							verticalDesc={$settings.verticalDesc}
-            { $_('section.status.wsMempoolConnection') }:
+						></Rendered>
-            <span>
+					</section>
-              {#if $status.connectionStatus && $status.connectionStatus.blocks}
+					{$_('section.status.screenCycle')}:
-              &#9989;
+					<a
-              {:else}
+						id="timerStatusText"
-              &#10060;
+						href={'#'}
-              {/if}
+						style="cursor: pointer"
-            </span><br>
+						tabindex="0"
-            {#if $settings.fetchEurPrice}
+						role="button"
-            <small>{ $_('section.status.fetchEuroNote') }</small>
+						aria-pressed="false"
-            {/if}
+						on:click={toggleTimer($status.timerRunning)}
-          </p>
+						>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
-        </CardBody>
+								'timer.stopped'
-        
+							)}{/if}</a
-    </Card>
+					>
+				{/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>
+			<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>
+
+			<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.useNostr || $settings.nostrZapNotify}
+					{$_('section.status.nostrConnection')}:
+					<span>
+						{#if $status.connectionStatus && $status.connectionStatus.nostr}
+							&#9989;
+						{:else}
+							&#10060;
+						{/if}
+					</span>
+				{/if}
+				{#if !$settings.useNostr}
+					{#if !$settings.ownDataSource}
+						{$_('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>
+		</CardBody>
+	</Card>
 </Col>

src/routes/api/+page.svelte

@@ -1,64 +1,57 @@
 <script lang="ts">
-	import { _ } from 'svelte-i18n';
+	import { Button, Container } from '@sveltestrap/sveltestrap';
-	import { Col, Container, Row, Button } from 'sveltestrap';
 
 	import { onMount } from 'svelte';
-	//import * as swaggerJson from '../../../static/swagger.json';
+	let swaggerLoaded: boolean = false;
-	//	import SwaggerUI from 'swagger-ui';
-	import 'swagger-ui/dist/swagger-ui.css';
-
-	let swaggerLoaded:boolean = false;
 
 	onMount(async () => {
-		// @ts-ignore
 		loadSwagger();
 	});
 
 	const loadSwagger = () => {
-		if (!SwaggerUIBundle)
+		// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
-			return;
+		if (!SwaggerUIBundle) return; // eslint-disable-line
 		swaggerLoaded = true;
+		// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
+		// eslint-disable-next-line
 		window.ui = SwaggerUIBundle({
-				url: '/swagger.json',
+			url: '/swagger.json',
-				dom_id: '#swagger-ui-container',
+			dom_id: '#swagger-ui-container',
-				presets: [
+			presets: [
-					// @ts-ignore
+				// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
-					SwaggerUIBundle.presets.apis,
+				SwaggerUIBundle.presets.apis, // eslint-disable-line
-					// @ts-ignore
+				// @ts-expect-error: SwaggerUIStandalonePreset is loaded from external script from CDN
-					SwaggerUIStandalonePreset
+				SwaggerUIStandalonePreset // eslint-disable-line
-				],
+			]
-				//	layout: "StandaloneLayout",
+			//	layout: "StandaloneLayout",
-				});
+		});
-			}
+	};
-		
 </script>
 
 <svelte:head>
 	<title>API playground</title>
 	<script
-		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui-bundle.min.js"
+		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.min.js"
-		integrity="sha512-Ckle4LZv9LhAfEdohBdUi+QCu0e7HkXHTeSPXfbDzbCsR87QNTUBylkBEPsBNn4Ph83yK1hJ6f2uH4QMtB0hTA=="
+		integrity="sha512-7ihPQv5ibiTr0DW6onbl2MIKegdT6vjpPySyIb4Ftp68kER6Z7Yiub0tFoMmCHzZfQE9+M+KSjQndv6NhYxDgg=="
 		crossorigin="anonymous"
 		referrerpolicy="no-referrer"
 	></script>
 	<script
-		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui-standalone-preset.min.js"
+		src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-standalone-preset.min.js"
-		integrity="sha512-qwGi7EG31HcylzamsmacHLZJrfUGRuuHEaCMcOojuNpMu+paR554VjaCZ9LdUVTrmF8xC03YVqTzuKx0SDdruA=="
+		integrity="sha512-UrYi+60Ci3WWWcoDXbMmzpoi1xpERbwjPGij6wTh8fXl81qNdioNNHExr9ttnBebKF0ZbVnPlTPlw+zECUK1Xw=="
 		crossorigin="anonymous"
 		referrerpolicy="no-referrer"
 	></script>
 	<link
 		rel="stylesheet"
-		href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.0/swagger-ui.min.css"
+		href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.min.css"
-		integrity="sha512-Ck+X9SARG7WscOTG4a8Qod5Zgd1MZlz4VtyyucjMJ3PnZy2lUl7q/v/0055yIfGM/v+f+216ME0/dv0qqtm6+g=="
+		integrity="sha512-+9UD8YSD9GF7FzOH38L9S6y56aYNx3R4dYbOCgvTJ2ZHpJScsahNdaMQJU/8osUiz9FPu0YZ8wdKf4evUbsGSg=="
 		crossorigin="anonymous"
 		referrerpolicy="no-referrer"
 	/>
-
 </svelte:head>
 
 <Container fluid class="bg-light">
-	<section class:invisible={swaggerLoaded}><Button  on:click="{loadSwagger}">Load</Button></section>
+	<section class:invisible={swaggerLoaded}><Button on:click={loadSwagger}>Load</Button></section>
 	<div id="swagger-ui-container" />
-
 </Container>

src/routes/convert/+page.svelte

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

static/swagger.json

@@ -1,480 +1,457 @@
 {
-  "openapi": "3.0.3",
+	"openapi": "3.0.3",
-  "info": {
+	"info": {
-    "title": "BTClock API",
+		"title": "BTClock API",
-    "version": "3.0",
+		"version": "3.0",
-    "description": "BTClock V3 API"
+		"description": "BTClock V3 API"
-  },
+	},
-  "servers": [
+	"servers": [
-    {
+		{
-      "url": "/api/"
+			"url": "/api/"
-    }
+		}
-  ],
+	],
-  "paths": {
+	"paths": {
-    "/status": {
+		"/status": {
-      "get": {
+			"get": {
-        "tags": [
+				"tags": ["system"],
-          "system"
+				"summary": "Get current status",
-        ],
+				"responses": {
-        "summary": "Get current status",
+					"200": {
-        "responses": {
+						"description": "successful operation"
-          "200": {
+					}
-            "description": "successful operation"
+				}
-          }
+			}
-        }
+		},
-      }
+		"/system_status": {
-    },
+			"get": {
-    "/system_status": {
+				"tags": ["system"],
-      "get": {
+				"summary": "Get system status",
-        "tags": [
+				"responses": {
-          "system"
+					"200": {
-        ],
+						"description": "successful operation"
-        "summary": "Get system status",
+					}
-        "responses": {
+				}
-          "200": {
+			}
-            "description": "successful operation"
+		},
-          }
+		"/settings": {
-        }
+			"get": {
-      }
+				"tags": ["system"],
-    },
+				"summary": "Get current settings",
-    "/settings": {
+				"responses": {
-      "get": {
+					"200": {
-        "tags": [
+						"description": "successful operation",
-          "system"
+						"content": {
-        ],
+							"application/json": {
-        "summary": "Get current settings",
+								"schema": {
-        "responses": {
+									"$ref": "#/components/schemas/ArrayOfLeds"
-          "200": {
+								}
-            "description": "successful operation",
+							}
-            "content": {
+						}
-              "application/json": {
+					}
-                "schema": {
+				}
-                  "$ref": null
+			},
-                }
+			"post": {
-              }
+				"tags": ["system"],
-            }
+				"summary": "Save current settings",
-          }
+				"requestBody": {
-        }
+					"content": {
-      },
+						"application/json": {
-      "post": {
+							"schema": {
-        "tags": [
+								"$ref": "#/components/schemas/Settings"
-          "system"
+							}
-        ],
+						}
-        "summary": "Save current settings",
+					}
-        "requestBody": {
+				},
-          "content": {
+				"responses": {
-            "application/json": {
+					"200": {
-              "schema": {
+						"description": "successful operation"
-                "$ref": "#/components/schemas/Settings"
+					}
-              }
+				}
-            }
+			},
-          }
+			"patch": {
-        },
+				"tags": ["system"],
-        "responses": {
+				"summary": "Save current settings",
-          "200": {
+				"requestBody": {
-            "description": "successful operation"
+					"content": {
-          }
+						"application/json": {
-        }
+							"schema": {
-      },
+								"$ref": "#/components/schemas/Settings"
-      "patch": {
+							}
-        "tags": [
+						}
-          "system"
+					}
-        ],
+				},
-        "summary": "Save current settings",
+				"responses": {
-        "requestBody": {
+					"200": {
-          "content": {
+						"description": "successful operation"
-            "application/json": {
+					}
-              "schema": {
+				}
-                "$ref": "#/components/schemas/Settings"
+			}
-              }
+		},
-            }
+		"/action/pause": {
-          }
+			"get": {
-        },
+				"tags": ["timer"],
-        "responses": {
+				"summary": "Pause screen rotation",
-          "200": {
+				"responses": {
-            "description": "successful operation"
+					"200": {
-          }
+						"description": "successful operation"
-        }
+					}
-      }
+				}
-    },
+			}
-    "/action/pause": {
+		},
-      "get": {
+		"/action/timer_restart": {
-        "tags": [
+			"get": {
-          "timer"
+				"tags": ["timer"],
-        ],
+				"summary": "Restart screen rotation",
-        "summary": "Pause screen rotation",
+				"responses": {
-        "responses": {
+					"200": {
-          "200": {
+						"description": "successful operation"
-            "description": "successful operation"
+					}
-          }
+				}
-        }
+			}
-      }
+		},
-    },
+		"/show/screen/{id}": {
-    "/action/timer_restart": {
+			"get": {
-      "get": {
+				"tags": ["screens"],
-        "tags": [
+				"summary": "Set screen to show",
-          "timer"
+				"parameters": [
-        ],
+					{
-        "summary": "Restart screen rotation",
+						"in": "path",
-        "responses": {
+						"name": "id",
-          "200": {
+						"schema": {
-            "description": "successful operation"
+							"type": "integer",
-          }
+							"default": 1
-        }
+						},
-      }
+						"required": true,
-    },
+						"description": "ID of screen to show"
-    "/show/screen/{id}": {
+					}
-      "get": {
+				],
-        "tags": [
+				"responses": {
-          "screens"
+					"200": {
-        ],
+						"description": "successful operation"
-        "summary": "Set screen to show",
+					}
-        "parameters": [
+				}
-          {
+			}
-            "in": "path",
+		},
-            "name": "id",
+		"/show/text/{text}": {
-            "schema": {
+			"get": {
-              "type": "integer",
+				"tags": ["screens"],
-              "default": 1
+				"summary": "Set text to show",
-            },
+				"parameters": [
-            "required": true,
+					{
-            "description": "ID of screen to show"
+						"in": "path",
-          }
+						"name": "text",
-        ],
+						"schema": {
-        "responses": {
+							"type": "string",
-          "200": {
+							"default": "text"
-            "description": "successful operation"
+						},
-          }
+						"required": true,
-        }
+						"description": "Text to show"
-      }
+					}
-    },
+				],
-    "/show/text/{text}": {
+				"responses": {
-      "get": {
+					"200": {
-        "tags": [
+						"description": "successful operation"
-          "screens"
+					}
-        ],
+				}
-        "summary": "Set text to show",
+			}
-        "parameters": [
+		},
-          {
+		"/show/custom": {
-            "in": "path",
+			"post": {
-            "name": "text",
+				"tags": ["screens"],
-            "schema": {
+				"summary": "Set text to show (advanced)",
-              "type": "string",
+				"requestBody": {
-              "default": "text"
+					"content": {
-            },
+						"application/json": {
-            "required": true,
+							"schema": {
-            "description": "Text to show"
+								"$ref": "#/components/schemas/CustomText"
-          }
+							}
-        ],
+						}
-        "responses": {
+					}
-          "200": {
+				},
-            "description": "successful operation"
+				"responses": {
-          }
+					"200": {
-        }
+						"description": "successful operation"
-      }
+					}
-    },
+				}
-    "/show/custom": {
+			}
-      "post": {
+		},
-        "tags": [
+		"/full_refresh": {
-          "screens"
+			"get": {
-        ],
+				"tags": ["system"],
-        "summary": "Set text to show (advanced)",
+				"summary": "Force full refresh of all displays",
-        "requestBody": {
+				"responses": {
-          "content": {
+					"200": {
-            "application/json": {
+						"description": "successful operation"
-              "schema": {
+					}
-                "$ref": "#/components/schemas/CustomText"
+				}
-              }
+			}
-            }
+		},
-          }
+		"/lights": {
-        },
+			"get": {
-        "responses": {
+				"tags": ["lights"],
-          "200": {
+				"summary": "Get LEDs status",
-            "description": "successful operation"
+				"responses": {
-          }
+					"200": {
-        }
+						"description": "successful operation",
-      }
+						"content": {
-    },
+							"application/json": {
-    "/full_refresh": {
+								"schema": {
-      "get": {
+									"$ref": "#/components/schemas/ArrayOfLeds"
-        "tags": [
+								}
-          "system"
+							}
-        ],
+						}
-        "summary": "Force full refresh of all displays",
+					}
-        "responses": {
+				}
-          "200": {
+			}
-            "description": "successful operation"
+		},
-          }
+		"/lights/set": {
-        }
+			"patch": {
-      }
+				"tags": ["lights"],
-    },
+				"summary": "Set individual LEDs",
-    "/lights": {
+				"requestBody": {
-      "get": {
+					"content": {
-        "tags": [
+						"application/json": {
-          "lights"
+							"schema": {
-        ],
+								"$ref": "#/components/schemas/ArrayOfLedsInput"
-        "summary": "Get LEDs status",
+							}
-        "responses": {
+						}
-          "200": {
+					}
-            "description": "successful operation",
+				},
-            "content": {
+				"responses": {
-              "application/json": {
+					"200": {
-                "schema": {
+						"description": "succesful operation"
-                  "$ref": "#/components/schemas/ArrayOfLeds"
+					},
-                }
+					"400": {
-              }
+						"description": "invalid colors or wrong amount of LEDs"
-            }
+					}
-          }
+				}
-        }
+			}
-      },
+		},
-      "patch": {
+		"/lights/color/{color}": {
-        "tags": [
+			"get": {
-          "lights"
+				"tags": ["lights"],
-        ],
+				"summary": "Turn on LEDs with specific color",
-        "summary": "Set individual LEDs",
+				"parameters": [
-        "requestBody": {
+					{
-          "content": {
+						"in": "path",
-            "application/json": {
+						"name": "color",
-              "schema": {
+						"schema": {
-                "$ref": "#/components/schemas/ArrayOfLedsInput"
+							"type": "string",
-              }
+							"default": "FFCC00"
-            }
+						},
-          }
+						"required": true,
-        },
+						"description": "Color in RGB hex"
-        "responses": {
+					}
-          "200": {
+				],
-            "description": "succesful operation"
+				"responses": {
-          },
+					"200": {
-          "400": {
+						"description": "successful operation"
-            "description": "invalid colors or wrong amount of LEDs"
+					}
-          }
+				}
-        }
+			}
-      }
+		},
-    },
+		"/lights/off": {
-    "/lights/{color}": {
+			"get": {
-      "get": {
+				"tags": ["lights"],
-        "tags": [
+				"summary": "Turn LEDs off",
-          "lights"
+				"responses": {
-        ],
+					"200": {
-        "summary": "Turn on LEDs with specific color",
+						"description": "successful operation"
-        "parameters": [
+					}
-          {
+				}
-            "in": "path",
+			}
-            "name": "color",
+		},
-            "schema": {
+		"/restart": {
-              "type": "string",
+			"get": {
-              "default": "FFCC00"
+				"tags": ["system"],
-            },
+				"summary": "Restart BTClock",
-            "required": true,
+				"responses": {
-            "description": "Color in RGB hex"
+					"200": {
-          }
+						"description": "successful operation"
-        ],
+					}
-        "responses": {
+				}
-          "200": {
+			}
-            "description": "successful operation"
+		}
-          }
+	},
-        }
+	"components": {
-      }
+		"schemas": {
-    },
+			"RgbColorValues": {
-    "/lights/off": {
+				"type": "object",
-      "get": {
+				"properties": {
-        "tags": [
+					"red": {
-          "lights"
+						"type": "integer",
-        ],
+						"minimum": 0,
-        "summary": "Turn LEDs off",
+						"maximum": 255,
-        "responses": {
+						"example": 255
-          "200": {
+					},
-            "description": "successful operation"
+					"green": {
-          }
+						"type": "integer",
-        }
+						"minimum": 0,
-      }
+						"maximum": 255,
-    },
+						"example": 204
-    "/restart": {
+					},
-      "get": {
+					"blue": {
-        "tags": [
+						"type": "integer",
-          "system"
+						"minimum": 0,
-        ],
+						"maximum": 255,
-        "summary": "Restart BTClock",
+						"example": 0
-        "responses": {
+					}
-          "200": {
+				}
-            "description": "successful operation"
+			},
-          }
+			"RgbColorHex": {
-        }
+				"type": "object",
-      }
+				"properties": {
-    }
+					"hex": {
-  },
+						"type": "string",
-  "components": {
+						"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$",
-    "schemas": {
+						"example": "#FFCC00"
-      "RgbColorValues": {
+					}
-        "type": "object",
+				}
-        "properties": {
+			},
-          "red": {
+			"RgbColorValueAndHex": {
-            "type": "integer",
+				"allOf": [
-            "minimum": 0,
+					{
-            "maximum": 255,
+						"$ref": "#/components/schemas/RgbColorValues"
-            "example": 255
+					},
-          },
+					{
-          "green": {
+						"$ref": "#/components/schemas/RgbColorHex"
-            "type": "integer",
+					}
-            "minimum": 0,
+				]
-            "maximum": 255,
+			},
-            "example": 204
+			"RgbColorValueOrHex": {
-          },
+				"oneOf": [
-          "blue": {
+					{
-            "type": "integer",
+						"$ref": "#/components/schemas/RgbColorValues"
-            "minimum": 0,
+					},
-            "maximum": 255,
+					{
-            "example": 0
+						"$ref": "#/components/schemas/RgbColorHex"
-          }
+					}
-        }
+				]
-      },
+			},
-      "RgbColorHex": {
+			"ArrayOfLeds": {
-        "type": "object",
+				"type": "array",
-        "properties": {
+				"items": {
-          "hex": {
+					"$ref": "#/components/schemas/RgbColorValueAndHex"
-            "type": "string",
+				}
-            "pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$",
+			},
-            "example": "#FFCC00"
+			"ArrayOfLedsInput": {
-          }
+				"type": "array",
-        }
+				"items": {
-      },
+					"$ref": "#/components/schemas/RgbColorValueOrHex"
-      "RgbColorValueAndHex": {
+				}
-        "allOf": [
+			},
-          {
+			"Settings": {
-            "$ref": "#/components/schemas/RgbColorValues"
+				"type": "object",
-          },
+				"properties": {
-          {
+					"fetchEurPrice": {
-            "$ref": "#/components/schemas/RgbColorHex"
+						"type": "boolean",
-          }
+						"description": "Fetch EUR price instead of USD"
-        ]
+					},
-      },
+					"fgColor": {
-      "RgbColorValueOrHex": {
+						"type": "string",
-        "oneOf": [
+						"default": 16777215,
-          {
+						"description": "ePaper foreground (text) color"
-            "$ref": "#/components/schemas/RgbColorValues"
+					},
-          },
+					"bgColor": {
-          {
+						"type": "string",
-            "$ref": "#/components/schemas/RgbColorHex"
+						"default": 0,
-          }
+						"description": "ePaper background color"
-        ]
+					},
-      },
+					"ledTestOnPower": {
-      "ArrayOfLeds": {
+						"type": "boolean",
-        "type": "array",
+						"default": true,
-        "items": {
+						"description": "Do LED test on power-on"
-          "$ref": "#/components/schemas/RgbColorValueAndHex"
+					},
-        }
+					"ledFlashOnUpd": {
-      },
+						"type": "boolean",
-      "ArrayOfLedsInput": {
+						"default": false,
-        "type": "array",
+						"description": "Flash LEDs on new block"
-        "items": {
+					},
-          "$ref": "#/components/schemas/RgbColorValueOrHex"
+					"mdnsEnabled": {
-        }
+						"type": "boolean",
-      },
+						"default": true,
-      "Settings": {
+						"description": "Enable mDNS"
-        "type": "object",
+					},
-        "properties": {
+					"otaEnabled": {
-          "fetchEurPrice": {
+						"type": "boolean",
-            "type": "boolean",
+						"default": true,
-            "description": "Fetch EUR price instead of USD"
+						"description": "Enable over-the-air updates"
-          },
+					},
-          "fgColor": {
+					"stealFocus": {
-            "type": "string",
+						"type": "boolean",
-            "default": 16777215,
+						"default": false,
-            "description": "ePaper foreground (text) color"
+						"description": "Steal focus on new block"
-          },
+					},
-          "bgColor": {
+					"mcapBigChar": {
-            "type": "string",
+						"type": "boolean",
-            "default": 0,
+						"default": false,
-            "description": "ePaper background color"
+						"description": "Use big characters for market cap screen"
-          },
+					},
-          "ledTestOnPower": {
+					"mempoolInstance": {
-            "type": "boolean",
+						"type": "string",
-            "default": true,
+						"default": "mempool.space",
-            "description": "Do LED test on power-on"
+						"description": "Mempool.space instance to connect to"
-          },
+					},
-          "ledFlashOnUpd": {
+					"ledBrightness": {
-            "type": "boolean",
+						"type": "integer",
-            "default": false,
+						"default": 128,
-            "description": "Flash LEDs on new block"
+						"description": "Brightness of LEDs"
-          },
+					},
-          "mdnsEnabled": {
+					"fullRefreshMin": {
-            "type": "boolean",
+						"type": "integer",
-            "default": true,
+						"default": 60,
-            "description": "Enable mDNS"
+						"description": "Full refresh time of ePaper displays in minutes"
-          },
+					},
-          "otaEnabled": {
+					"screen[0]": {
-            "type": "boolean",
+						"type": "boolean"
-            "default": true,
+					},
-            "description": "Enable over-the-air updates"
+					"screen[1]": {
-          },
+						"type": "boolean"
-          "stealFocus": {
+					},
-            "type": "boolean",
+					"screen[2]": {
-            "default": false,
+						"type": "boolean"
-            "description": "Steal focus on new block"
+					},
-          },
+					"screen[3]": {
-          "mcapBigChar": {
+						"type": "boolean"
-            "type": "boolean",
+					},
-            "default": false,
+					"screen[4]": {
-            "description": "Use big characters for market cap screen"
+						"type": "boolean"
-          },
+					},
-          "mempoolInstance": {
+					"screen[5]": {
-            "type": "string",
+						"type": "boolean"
-            "default": "mempool.space",
+					},
-            "description": "Mempool.space instance to connect to"
+					"screen[6]": {
-          },
+						"type": "boolean"
-          "ledBrightness": {
+					},
-            "type": "integer",
+					"tzOffset": {
-            "default": 128,
+						"type": "integer",
-            "description": "Brightness of LEDs"
+						"default": 60,
-          },
+						"description": "Timezone offset in minutes"
-          "fullRefreshMin": {
+					},
-            "type": "integer",
+					"minSecPriceUpd": {
-            "default": 60,
+						"type": "integer",
-            "description": "Full refresh time of ePaper displays in minutes"
+						"default": 30,
-          },
+						"description": "Minimum time between price updates in seconds"
-          "screen[0]": {
+					},
-            "type": "boolean"
+					"timePerScreen": {
-          },
+						"type": "integer",
-          "screen[1]": {
+						"default": 30,
-            "type": "boolean"
+						"description": "Time between screens when rotating in minutes"
-          },
+					},
-          "screen[2]": {
+					"txPower": {
-            "type": "boolean"
+						"type": "integer",
-          },
+						"description": "WiFi Tx Power"
-          "screen[3]": {
+					}
-            "type": "boolean"
+				}
-          },
+			},
-          "screen[4]": {
+			"CustomText": {
-            "type": "boolean"
+				"type": "array",
-          },
+				"items": {
-          "screen[5]": {
+					"type": "string"
-            "type": "boolean"
+				},
-          },
+				"minItems": 7,
-          "tzOffset": {
+				"maxItems": 7
-            "type": "integer",
+			}
-            "default": 60,
+		}
-            "description": "Timezone offset in minutes"
+	}
-          },
+}
-          "minSecPriceUpd": {
-            "type": "integer",
-            "default": 30,
-            "description": "Minimum time between price updates in seconds"
-          },
-          "timePerScreen": {
-            "type": "integer",
-            "default": 30,
-            "description": "Time between screens when rotating in minutes"
-          }
-        }
-      },
-      "CustomText": {
-        "type": "array",
-        "items": {
-          "type": "string"
-        },
-        "minItems": 7,
-        "maxItems": 7
-      }
-    }
-  }
-}

static/swagger.yml

@@ -31,9 +31,9 @@ paths:
         '200':
           description: successful operation
           content:
-            application/json: 
+            application/json:
               schema:
-                $ref: #/components/schemas/ArrayOfLeds
+                $ref: '#/components/schemas/ArrayOfLeds'
     post:
       tags:
         - system
@@ -139,8 +139,9 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/ArrayOfLeds'
+  /lights/set:
     patch:
-      tags: 
+      tags:
         - lights
       summary: Set individual LEDs
       requestBody:
@@ -149,11 +150,11 @@ paths:
             schema:
               $ref: '#/components/schemas/ArrayOfLedsInput'
       responses:
-        "200":
+        '200':
           description: succesful operation
-        "400":
+        '400':
           description: invalid colors or wrong amount of LEDs
-  /lights/{color}:
+  /lights/color/{color}:
     get:
       tags:
         - lights
@@ -188,38 +189,38 @@ paths:
 components:
   schemas:
     RgbColorValues:
-        type: object
+      type: object
-        properties:
+      properties:
-          red:
+        red:
-            type: integer
+          type: integer
-            minimum: 0
+          minimum: 0
-            maximum: 255
+          maximum: 255
-            example: 255
+          example: 255
-          green:
+        green:
-            type: integer
+          type: integer
-            minimum: 0
+          minimum: 0
-            maximum: 255
+          maximum: 255
-            example: 204
+          example: 204
-          blue:
+        blue:
-            type: integer
+          type: integer
-            minimum: 0
+          minimum: 0
-            maximum: 255
+          maximum: 255
-            example: 0
+          example: 0
     RgbColorHex:
-        type: object
+      type: object
-        properties:
+      properties:
-          hex:
+        hex:
-            type: string
+          type: string
-            pattern: ^#(?:[0-9a-fA-F]{3}){1,2}$
+          pattern: ^#(?:[0-9a-fA-F]{3}){1,2}$
-            example: "#FFCC00"
+          example: '#FFCC00'
     RgbColorValueAndHex:
-        allOf: 
+      allOf:
-            - $ref: '#/components/schemas/RgbColorValues'
+        - $ref: '#/components/schemas/RgbColorValues'
-            - $ref: '#/components/schemas/RgbColorHex'
+        - $ref: '#/components/schemas/RgbColorHex'
     RgbColorValueOrHex:
-        oneOf: 
+      oneOf:
-            - $ref: '#/components/schemas/RgbColorValues'
+        - $ref: '#/components/schemas/RgbColorValues'
-            - $ref: '#/components/schemas/RgbColorHex'
+        - $ref: '#/components/schemas/RgbColorHex'
     ArrayOfLeds:
       type: array
       items:
@@ -290,6 +291,8 @@ components:
           type: boolean
         screen[5]:
           type: boolean
+        screen[6]:
+          type: boolean
         tzOffset:
           type: integer
           default: 60
@@ -302,6 +305,9 @@ components:
           type: integer
           default: 30
           description: Time between screens when rotating in minutes
+        txPower:
+          type: integer
+          description: WiFi Tx Power
     CustomText:
       type: array
       items:

svelte.config.js

@@ -1,20 +1,18 @@
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+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: vitePreprocess({
+	preprocess: sveltePreprocess({}),
-	
+	build: {
-	}),
+		rollupOptions: {
-build: {
+			output: {
-	rollupOptions: {
+				assetFilenames: '[hash]'
-		output: {
+			}
-			assetFilenames: '[hash]'
 		}
-	}
+	},
-},
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
@@ -24,11 +22,11 @@ build: {
 			// these options are set automatically — see below
 			pages: 'dist',
 			assets: 'dist',
-			fallback: "bundle.html",
+			fallback: 'bundle.html',
 			precompress: false,
 			strict: true
 		}),
-		appDir: "build",
+		appDir: 'build'
 		// inlineStyleThreshold: 9999999999
 	}
 };

tests/playwright/test.ts

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

tests/screenshots/viewport-screenshots.spec.ts

@@ -0,0 +1,132 @@
+import { test, expect } from '@playwright/test';
+
+import { initMock, settingsJson, statusJson } from '../shared';
+
+test.beforeEach(initMock);
+
+// Define the translations for the headings
+const headings = {
+	en: {
+		control: 'Control',
+		status: 'Status',
+		settings: 'Settings',
+		language: 'English'
+	},
+	de: {
+		control: 'Steuerung',
+		status: 'Status',
+		settings: 'Einstellungen',
+		language: 'Deutsch'
+	},
+	nl: {
+		control: 'Besturing',
+		status: 'Status',
+		settings: 'Instellingen',
+		language: 'Nederlands'
+	},
+	es: {
+		control: 'Control',
+		status: 'Estado',
+		settings: 'Ajustes',
+		language: 'Español'
+	}
+};
+
+test('capture screenshots across devices', async ({ page }, testInfo) => {
+	// Get the locale from the browser or default to 'en'
+	const locale = testInfo.project.use?.locale?.split('-')[0].toLowerCase() || 'en';
+	const translations = headings[locale] || headings.en;
+
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: translations.control })).toBeVisible();
+	await expect(page.getByRole('heading', { name: translations.status })).toBeVisible();
+	await expect(page.getByRole('heading', { name: translations.settings })).toBeVisible();
+
+	if (await page.locator('#nav-language-dropdown').isVisible()) {
+		await expect(page.getByRole('link', { name: translations.language })).toBeVisible();
+	}
+
+	const screenshot = await page.screenshot({
+		path: `./test-results/screenshots/default-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
+	});
+
+	await testInfo.attach(`default`, {
+		body: screenshot,
+		contentType: 'image/png'
+	});
+});
+
+test('capture screenshots across devices with bitaxe screens', async ({ page }, testInfo) => {
+	const locale = testInfo.project.use?.locale?.split('-')[0].toLowerCase() || 'en';
+	const translations = headings[locale] || headings.en;
+
+	settingsJson.screens = [
+		{
+			id: 0,
+			name: 'Block Height',
+			enabled: true
+		},
+		{
+			id: 3,
+			name: 'Time',
+			enabled: true
+		},
+		{
+			id: 4,
+			name: 'Halving countdown',
+			enabled: true
+		},
+		{
+			id: 6,
+			name: 'Block Fee Rate',
+			enabled: true
+		},
+		{
+			id: 10,
+			name: 'Sats per dollar',
+			enabled: true
+		},
+		{
+			id: 20,
+			name: 'Ticker',
+			enabled: true
+		},
+		{
+			id: 30,
+			name: 'Market Cap',
+			enabled: true
+		},
+		{
+			id: 80,
+			name: 'BitAxe Hashrate',
+			enabled: true
+		},
+		{
+			id: 81,
+			name: 'BitAxe Best Difficulty',
+			enabled: true
+		}
+	];
+
+	statusJson.data = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
+	statusJson.rendered = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
+
+	await page.goto('/');
+
+	await expect(page.getByRole('heading', { name: translations.control })).toBeVisible();
+	await expect(page.getByRole('heading', { name: translations.status })).toBeVisible();
+	await expect(page.getByRole('heading', { name: translations.settings })).toBeVisible();
+
+	if (await page.locator('#nav-language-dropdown').isVisible()) {
+		await expect(page.getByRole('link', { name: translations.language })).toBeVisible();
+	}
+
+	await page.screenshot({
+		path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
+	});
+
+	await testInfo.attach(`bitaxe`, {
+		path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`,
+		contentType: 'image/png'
+	});
+});

tests/shared.ts

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

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.ts

@@ -1,62 +1,109 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import GithubActionsReporter from 'vitest-github-actions-reporter';
+// import { visualizer } from 'rollup-plugin-visualizer';
 
-import * as fs from 'fs'
+import * as fs from 'fs';
-import * as path from 'path'
+import * as path from 'path';
 
 const doRewrap = ({ cssClass }) => {
 	try {
 		if (fs.existsSync(path.resolve(__dirname, 'dist/bundle.js'))) {
-			return
+			return;
 		}
-	} catch(e) {}
+	} catch {
-	console.log("\nStart re-wrapping...")
+		// do nothing
-	fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function(err, data){
+	}
+	console.log('\nStart re-wrapping...');
+	fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function (err, data) {
 		if (!data) {
-			console.log(`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`)
+			console.log(
-			return
+				`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`
+			);
+			return;
 		}
-		let matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm)
+		const matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm);
 		if (matchData) {
-			let cleanData = matchData[0].trim()
+			const cleanData = matchData[0]
-				.replace(`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`, `document.querySelector(".${cssClass}")`)
+				.trim()
+				.replace(
+					`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`,
+					`document.querySelector(".${cssClass}")`
+				);
 			fs.writeFile(path.resolve(__dirname, 'dist/bundle.js'), cleanData, (err) => {
-				if (err)
+				if (err) console.log(err);
-					console.log(err)
 				else {
 					try {
-						fs.rename(path.resolve(__dirname,'dist/index.page'), path.resolve(__dirname, 'dist/index.html'), (err) => { })
+						fs.rename(
-					} catch (e) { }
+							path.resolve(__dirname, 'dist/index.page'),
+							path.resolve(__dirname, 'dist/index.html'),
+							() => {}
+						);
+					} catch {
+						// do nothing
+					}
 					try {
-						fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'))
+						fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'));
-					} catch (e) { }
+					} catch {
-					console.log("Finished: bundle.js + index.html have been regenerated.\n")
+						// do nothing
+					}
+					console.log('Finished: bundle.js + index.html have been regenerated.\n');
 				}
-			})
+			});
-		} else 
+		} else console.log(`[Error]: No proper <script> tag found in bundle.html`);
-			console.log(`[Error]: No proper <script> tag found in bundle.html`)
+	});
-	})
+};
-}
-
 
 export default defineConfig({
-	plugins: [sveltekit(), {
+	plugins: [
-		name: 'postbuild-command', 
+		sveltekit(),
+		{
+			name: 'postbuild-command',
 			closeBundle: {
 				order: 'post',
 				handler() {
-					setTimeout(() => doRewrap({ cssClass: "overlay" }), Math.random()*500+500)
+					setTimeout(() => doRewrap({ cssClass: 'overlay' }), Math.random() * 500 + 500);
 				}
 			}
-	}],
+		}
+		// visualizer({
+		// 	emitFile: true,
+		// 	filename: "stats.html",
+		//   })
+	],
 	build: {
-		minify: true,
+		minify: 'esbuild',
 		cssCodeSplit: false,
+		chunkSizeWarningLimit: 550,
 		rollupOptions: {
 			output: {
-				manualChunks: () => 'app',
+				// assetFileNames: '[hash][extname]',
-				assetFileNames: "[name][extname]"
+				entryFileNames: `[hash][extname]`,
+				chunkFileNames: `[hash][extname]`,
+				assetFileNames: `[hash][extname]`,
+				preserveModules: false,
+
+				manualChunks: () => {
+					return 'app';
+				}
 			}
 		}
+	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				quietDeps: true,
+				silenceDeprecations: ['import']
+			}
+		}
+	},
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}'],
+		globals: true,
+		environment: 'jsdom',
+		reporters: process.env.GITHUB_ACTIONS ? ['default', new GithubActionsReporter()] : 'default'
+	},
+	define: {
+		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 	}
 });