.eslintignore

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

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

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

.github/dependabot.yml

@@ -1,15 +0,0 @@
-# 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,51 +3,30 @@ name: BTClock WebUI CI
 on: [push]
 
 env:
-  PUBLIC_BASE_URL: ''
+  PUBLIC_BASE_URL: ""
 
 jobs:
-  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@v4
+      - uses: actions/checkout@v3
         with:
           submodules: recursive
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v3
         with:
           node-version: lts/*
           cache: yarn
           cache-dependency-path: '**/yarn.lock'
-      - uses: actions/cache@v4
+      - uses: actions/cache@v3
         with:
           path: |
             ~/.cache/pip
             ~/node_modules
           key: ${{ runner.os }}-pio
-      - uses: actions/setup-python@v5
+      - uses: actions/setup-python@v4
         with:
           python-version: '3.9'
       - name: Get current date
@@ -61,76 +40,30 @@ 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: |
+        run: /tmp/mklittlefs/mklittlefs -c build_gz -s 409600 littlefs.bin 
-          set -e
-          /tmp/mklittlefs/mklittlefs -c build_gz -s 409600 output/littlefs.bin
       - name: Upload artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
           path: |
             webui.tgz
-            output/littlefs.bin
+            littlefs.bin
       - name: Create release
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         uses: ncipollo/release-action@v1
         with:
           tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
           commit: main
           name: release-${{ steps.getBlockHeight.outputs.blockHeight }}
-          artifacts: 'output/littlefs.bin,webui.tgz'
+          artifacts: "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,4 +12,3 @@ 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,5 +1,6 @@
 {
-	"i18n-ally.localesPaths": ["src/lib/locales"],
+    "i18n-ally.localesPaths": [
-	"i18n-ally.keystyle": "nested",
+        "src/lib/locales"
-	"i18n-ally.sourceLanguage": "en"
+    ],
-}
+    "i18n-ally.keystyle": "nested"
+}

README.md

@@ -1,46 +1,38 @@
-# BTClock WebUI
+# create-svelte
 
-[![Latest release](https://git.btclock.dev/btclock/webui/badges/release.svg)](https://git.btclock.dev/btclock/webui/releases/latest)
+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://git.btclock.dev/btclock/webui/badges/workflows/build.yaml/badge.svg)](https://git.btclock.dev/btclock/webui/actions?workflow=build.yaml&actor=0&status=0)
 
-The web user-interface for the BTClock, based on Svelte-kit. It uses Bootstrap for the lay-out.
+## Creating a project
 
-![Screenshot](doc/screenshot-light.webp)
+If you're seeing this, you've probably already done this step. Congrats!
-![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
 
-After installed dependencies with `yarn`, start a development server:
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
-yarn dev
+npm run dev
 
 # or start the server and open the app in a new browser tab
-yarn dev -- --open
+npm run dev -- --open
 ```
 
 ## Building
 
-To create a production version of the WebUI:
+To create a production version of your app:
 
 ```bash
-yarn build
+npm run build
 ```
 
-Make sure the postinstall script is ran, because otherwise the filenames are to long for the LittleFS filesystem.
+You can preview the production build with `npm run preview`.
 
-## Deploying
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-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

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

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

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

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

extra/icons/pickaxe.svg

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

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

package.json

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

patches/@sveltejs+kit+1.27.6.patch

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

playwright.config.ts

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

playwright.doc-screenshot.config.ts

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

playwright.screenshot.config.ts

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

renovate.json

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

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

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

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

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

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

src/lib/components/Placeholder.svelte

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

src/lib/components/SettingsInput.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import {
-		Input,
-		InputGroup,
-		InputGroupText,
-		Label,
-		FormText,
-		Col,
-		Row
-	} from '@sveltestrap/sveltestrap';
-
-	export let id: string;
-	export let label: string;
-	export let value: string | number;
-	export let type: string = 'text';
-	export let size: string = 'sm';
-	export let required: boolean = false;
-	export let min: number | undefined = undefined;
-	export let max: number | undefined = undefined;
-	export let step: number | string | undefined = undefined;
-	export let suffix: string | undefined = undefined;
-	export let helpText: string | undefined = undefined;
-	export let disabled: boolean = false;
-	export let valid: boolean | undefined = undefined;
-	export let invalid: boolean | undefined = undefined;
-	export let minlength: string | undefined = undefined;
-	export let onChange: (() => void) | undefined = undefined;
-	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

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

src/lib/components/SettingsSwitch.svelte

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

src/lib/components/ToggleHeader.svelte

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

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

src/lib/components/settings/DataSourceSettings.svelte

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

src/lib/components/settings/DisplaySettings.svelte

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

src/lib/components/settings/ExtraFeaturesSettings.svelte

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

src/lib/components/settings/ScreenSpecificSettings.svelte

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

src/lib/components/settings/SystemSettings.svelte

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

src/lib/components/settings/TimezoneSelector.svelte

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

src/lib/components/settings/index.ts

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

src/lib/config.ts

@@ -1,5 +0,0 @@
-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,30 +1,13 @@
-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: getInitialLocale()
+	initialLocale: browser ? window.navigator.language : defaultLocale,
-});
+})

src/lib/index.ts

@@ -1,81 +1 @@
-import * as nip19 from 'nostr-tools/nip19';
+// place files you want to import through the `$lib` alias in this folder.
-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

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

src/lib/locales/en.json

@@ -1,170 +1,71 @@
 {
-	"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",
-			"useBlkCountdown": "Blocks countdown for halving",
+      "otaUpdates": "OTA updates",
-			"useSatsSymbol": "Use sats symbol",
+      "enableMdns": "mDNS",
-			"suffixPrice": "Suffix price format",
+      "fetchEuroPrice": "Fetch € price",
-			"disableLeds": "Disable all LEDs effects",
+      "shortAmountsWarning": "Short amounts might shorten lifespan.",
-			"otaUpdates": "OTA updates",
+      "tzOffsetHelpText": "A restart is required to apply TZ offset.",
-			"enableMdns": "mDNS",
+      "screens": "Screens"
-			"fetchEuroPrice": "Fetch € price",
+    },
-			"shortAmountsWarning": "Short amounts might shorten lifespan of the displays",
+    "control": {
-			"tzOffsetHelpText": "A restart is required to apply TZ offset.",
+      "systemInfo": "System info",
-			"screens": "Screens",
+      "version": "Version",
-			"wifiTxPowerText": "In most cases this does not need to be set.",
+      "buildTime": "Build time",
-			"wifiTxPower": "WiFi TX power",
+      "ledColor": "LED color",
-			"settingsSaved": "Settings saved",
+      "turnOff": "Turn off",
-			"errorSavingSettings": "Error saving settings",
+      "setColor": "Set color",
-			"ownDataSource": "BTClock data source",
+      "showText": "Show text",
-			"flMaxBrightness": "Frontlight brightness",
+      "text": "Text",
-			"flAlwaysOn": "Frontlight always on",
+      "title": "Control",
-			"flEffectDelay": "Frontlight effect speed",
+      "hostname": "Hostname"
-			"flFlashOnUpd": "Frontlight flash on new block",
+    },
-			"mempoolInstanceHelpText": "Only effective when BTClock data-source is disabled. A restart is required to apply.",
+    "status": {
-			"luxLightToggle": "Auto toggle frontlight at lux",
+      "title": "Status",
-			"wpTimeout": "WiFi-config portal timeout",
+      "screenCycle": "Screen cycle",
-			"nostrPubKey": "Nostr source pubkey",
+      "memoryFree": "Memory free",
-			"nostrZapKey": "Nostr zap pubkey",
+      "wsPriceConnection": "WS Price connection",
-			"nostrRelay": "Nostr Relay",
+      "wsMempoolConnection": "WS Mempool.space connection",
-			"nostrZapNotify": "Enable Nostr Zap Notifications",
+      "fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌  since it uses another data source.",
-			"useNostr": "Use Nostr data source",
+      "uptime": "Uptime"
-			"bitaxeHostname": "BitAxe hostname or IP",
+    }
-			"bitaxeEnabled": "Enable BitAxe-integration",
+  },
-			"miningPoolStats": "Enable Mining Pool Stats integration",
+  "colors": {
-			"miningPoolName": "Mining Pool",
+    "black": "Black",
-			"miningPoolUser": "Mining Pool username or api key",
+    "white": "White"
-			"nostrZapPubkey": "Nostr Zap pubkey",
+  },
-			"invalidNostrPubkey": "Invalid Nostr pubkey, note that your pubkey does NOT start with npub.",
+  "time": {
-			"convertingValidNpub": "Converting valid npub to pubkey",
+    "minutes": "minutes",
-			"flDisable": "Disable frontlight",
+    "seconds": "seconds"
-			"httpAuthEnabled": "Require authentication for WebUI",
+  },
-			"httpAuthUser": "WebUI Username",
+  "restartRequired": "restart required",
-			"httpAuthPass": "WebUI Password",
+  "button": {
-			"httpAuthText": "Only password-protects WebUI, not API-calls.",
+    "save": "Save",
-			"currencies": "Currencies",
+    "reset": "Reset",
-			"customSource": "Use custom data source endpoint",
+    "restart": "Restart",
-			"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications.",
+    "forceFullRefresh": "Force full refresh"
-			"mowMode": "Mow Suffix Mode",
+  },
-			"suffixShareDot": "Suffix compact notation",
+  "timer": {
-			"section": {
+    "running": "running",
-				"displaysAndLed": "Displays and LEDs",
+    "stopped": "stopped"
-				"screenSettings": "Screen specific",
+  },
-				"dataSource": "Data source",
+  "sections": {
-				"extraFeatures": "Extra features",
+    "control": {
-				"system": "System"
+      "keepSameColor": "Keep same color"
-			},
+    }
-			"ledFlashOnZap": "LED flash on Nostr Zap",
+  }
-			"flFlashOnZap": "Frontlight flash on Nostr Zap",
-			"showAll": "Show all",
-			"hideAll": "Hide all",
-			"flOffWhenDark": "Frontlight off when dark",
-			"luxLightToggleText": "Set to 0 to disable",
-			"verticalDesc": "Use vertical screen description",
-			"enableDebugLog": "Enable Debug-log",
-			"dataSource": {
-				"label": "Data Source",
-				"btclock": "BTClock Data Source",
-				"thirdParty": "mempool.space/coincap.io",
-				"nostr": "Nostr publisher",
-				"custom": "Custom Endpoint"
-			},
-			"thirdPartySource": "Use mempool.space/coincap.io",
-			"ceDisableSSL": "Disable SSL",
-			"ceEndpoint": "Endpoint hostname",
-			"fontName": "Font",
-			"timeBasedDnd": "Enable Do Not Disturb time schedule",
-			"dndStartHour": "Start hour",
-			"dndStartMinute": "Start minute",
-			"dndEndHour": "End hour",
-			"dndEndMinute": "End minute"
-		},
-		"control": {
-			"systemInfo": "System info",
-			"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",
-			"doNotDisturb": "Do not disturb",
-			"timeBasedDnd": "Time-based schedule"
-		},
-		"firmwareUpdater": {
-			"fileUploadFailed": "File upload failed. Make sure you have selected the correct file and try again.",
-			"fileUploadSuccess": "File uploaded successfully, restarting device and reloading WebUI in {countdown} seconds",
-			"uploading": "Uploading",
-			"firmwareUpdateText": "When you use the firmware upload functionality, make sure you use the correct files. Uploading the wrong files can result in a non-working device. If it goes wrong, you can restore firmware by uploading the full image after setting the device in BOOT-mode.",
-			"swUpdateAvailable": "A newer version is available!",
-			"swUpToDate": "You are up to date.",
-			"latestVersion": "Latest Version",
-			"releaseDate": "Release Date",
-			"viewRelease": "View Release",
-			"autoUpdate": "Install update (experimental)",
-			"autoUpdateInProgress": "Auto-update in progress, please wait..."
-		}
-	},
-	"colors": {
-		"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,150 +1,71 @@
 {
-	"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": "Pequeñas cantidades pueden acortar la vida útil de los displays",
+      "shortAmountsWarning": "Cantidades pequeñas pueden acortar la vida útil.",
-			"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",
-			"useBlkCountdown": "Cuenta regresiva en bloques",
+      "fetchEuroPrice": "Obtener precio en €",
-			"useSatsSymbol": "Usar símbolo sats",
+      "timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
-			"fetchEuroPrice": "Obtener precio en €",
+      "ledPowerOnTest": "Prueba de encendido del LED",
-			"timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
+      "enableMdns": "mDNS",
-			"ledPowerOnTest": "Prueba de encendido del LED",
+      "hostnamePrefix": "Prefijo de nombre de host",
-			"enableMdns": "mDNS",
+      "mempoolnstance": "Instancia de Mempool",
-			"hostnamePrefix": "Prefijo de nombre de host",
+      "otaUpdates": "Actualización por aire"
-			"mempoolnstance": "Instancia de Mempool",
+    },
-			"suffixPrice": "Precio con sufijos",
+    "control": {
-			"disableLeds": "Desactivar efectos de LED",
+      "turnOff": "Apagar",
-			"otaUpdates": "Actualización por aire",
+      "setColor": "Establecer el color",
-			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto.",
+      "version": "Versión",
-			"settingsSaved": "Configuración guardada",
+      "ledColor": "color del LED",
-			"errorSavingSettings": "Error al guardar la configuración",
+      "systemInfo": "Info del sistema",
-			"ownDataSource": "fuente de datos BTClock",
+      "showText": "Poner texto",
-			"flMaxBrightness": "Brillo de luz de la pantalla",
+      "text": "Texto",
-			"flAlwaysOn": "Luz de la pantalla siempre encendida",
+      "title": "Control",
-			"flEffectDelay": "Velocidad del efecto de luz de la pantalla",
+      "buildTime": "Tiempo de construcción",
-			"flFlashOnUpd": "Luz de la pantalla parpadea con un nuevo bloque",
+      "hostname": "Nombre de host"
-			"mempoolInstanceHelpText": "Solo es efectivo cuando la fuente de datos BTClock está deshabilitada. \nEs necesario reiniciar para aplicar.",
+    },
-			"luxLightToggle": "Cambio automático de luz frontal en lux",
+    "status": {
-			"wpTimeout": "Portal de configuración WiFi timeout",
+      "memoryFree": "Memoria RAM libre",
-			"useNostr": "Utilice la fuente de datos Nostr",
+      "wsPriceConnection": "Conexión WebSocket Precio",
-			"flDisable": "Desactivar luz de la pantalla",
+      "wsMempoolConnection": "Conexión WebSocket Mempool.space",
-			"httpAuthUser": "Nombre de usuario WebUI",
+      "screenCycle": "Rotacion de pantalla",
-			"httpAuthPass": "Contraseña WebUI",
+      "uptime": "Tiempo de funcionamiento",
-			"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
+      "fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
-			"currencies": "Monedas",
+      "title": "Estado"
-			"mowMode": "Modo de sufijo Mow",
+    }
-			"suffixShareDot": "Notación compacta de sufijo",
+  },
-			"section": {
+  "button": {
-				"displaysAndLed": "Pantallas y LED",
+    "save": "Guardar",
-				"screenSettings": "Específico de la pantalla",
+    "reset": "Restaurar",
-				"dataSource": "fuente de datos",
+    "restart": "Reiniciar",
-				"extraFeatures": "Funciones adicionales",
+    "forceFullRefresh": "Forzar refresco"
-				"system": "Sistema"
+  },
-			},
+  "colors": {
-			"ledFlashOnZap": "LED parpadeante con Nostr Zap",
+    "black": "Negro",
-			"flFlashOnZap": "Flash de luz frontal con Nostr Zap",
+    "white": "Blanco"
-			"showAll": "Mostrar todo",
+  },
-			"hideAll": "Ocultar todo",
+  "restartRequired": "reinicio requerido",
-			"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
+  "time": {
-			"luxLightToggleText": "Establecer en 0 para desactivar",
+    "minutes": "minutos",
-			"verticalDesc": "Descripción de pantalla vertical",
+    "seconds": "segundos"
-			"enableDebugLog": "Habilitar registro de depuración",
+  },
-			"bitaxeEnabled": "Habilitar la integración de BitAxe",
+  "timer": {
-			"miningPoolStats": "Habilitar la integración de estadísticas del grupo minero",
+    "running": "funcionando",
-			"nostrZapNotify": "Habilitar notificaciones de Nostr Zap",
+    "stopped": "detenido"
-			"thirdPartySource": "Utilice mempool.space/coincap.io",
+  },
-			"dataSource": {
+  "sections": {
-				"nostr": "editorial nostr",
+    "control": {
-				"custom": "Punto final personalizado"
+      "keepSameColor": "Mantén el mismo color"
-			},
+    }
-			"fontName": "Fuente",
+  }
-			"timeBasedDnd": "Habilitar el horario de No molestar",
-			"dndStartHour": "Hora de inicio",
-			"dndStartMinute": "Minuto de inicio",
-			"dndEndHour": "Hora final",
-			"dndEndMinute": "Minuto final"
-		},
-		"control": {
-			"turnOff": "Apagar",
-			"setColor": "Establecer el color",
-			"version": "Versión",
-			"ledColor": "color del LED",
-			"systemInfo": "Info del sistema",
-			"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",
-			"doNotDisturb": "No molestar",
-			"timeBasedDnd": "Horario basado en el tiempo"
-		},
-		"firmwareUpdater": {
-			"fileUploadSuccess": "Archivo cargado exitosamente, reiniciando el dispositivo. Recargando WebUI en {countdown} segundos",
-			"fileUploadFailed": "Error al cargar el archivo. \nAsegúrese de haber seleccionado el archivo correcto e inténtelo nuevamente.",
-			"uploading": "Subiendo",
-			"firmwareUpdateText": "Cuando utilice la función de carga de firmware, asegúrese de utilizar los archivos correctos. \nCargar archivos incorrectos puede provocar que el dispositivo no funcione. \nSi sale mal, puede restaurar el firmware cargando la imagen completa después de configurar el dispositivo en modo BOOT.",
-			"swUpToDate": "Tienes la ultima version.",
-			"swUpdateAvailable": "¡Una nueva versión está disponible!",
-			"latestVersion": "Ultima versión",
-			"releaseDate": "Fecha de lanzamiento",
-			"viewRelease": "Ver lanzamiento",
-			"autoUpdate": "Instalar actualización (experimental)",
-			"autoUpdateInProgress": "Actualización automática en progreso, espere..."
-		}
-	},
-	"button": {
-		"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,141 +1,70 @@
 {
-	"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 mogelijk levensduur schermen",
+      "shortAmountsWarning": "Lage waardes verkorten levensduur",
-			"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",
-			"useBlkCountdown": "Blocks aftellen voor halving",
+      "fetchEuroPrice": "Toon € prijs",
-			"useSatsSymbol": "Gebruik sats symbol",
+      "screens": "Schermen",
-			"fetchEuroPrice": "Toon € prijs",
+      "hostnamePrefix": "Hostnaam voorvoegsel",
-			"screens": "Schermen",
+      "mempoolnstance": "Mempool instantie",
-			"hostnamePrefix": "Hostnaam voorvoegsel",
+      "otaUpdates": "OTA updates"
-			"mempoolnstance": "Mempool instantie",
+    },
-			"suffixPrice": "Achtervoegsel prijs formaat",
+    "control": {
-			"disableLeds": "Alle LEDs effecten uit",
+      "systemInfo": "Systeeminformatie",
-			"otaUpdates": "OTA updates",
+      "version": "Versie",
-			"wifiTxPower": "WiFi TX power",
+      "buildTime": "Bouwtijd",
-			"wifiTxPowerText": "Meestal hoeft dit niet aangepast te worden.",
+      "setColor": "Kleur instellen",
-			"settingsSaved": "Instellingen opgeslagen",
+      "turnOff": "Uitzetten",
-			"errorSavingSettings": "Fout bij opslaan instellingen",
+      "ledColor": "LED kleur",
-			"ownDataSource": "BTClock-gegevensbron gebruiken",
+      "showText": "Toon tekst",
-			"flMaxBrightness": "Displaylicht helderheid",
+      "text": "Tekst",
-			"flAlwaysOn": "Displaylicht altijd aan",
+      "title": "Besturing"
-			"flEffectDelay": "Displaylicht effect snelheid",
+    },
-			"flFlashOnUpd": "Knipper displaylicht bij nieuw blok",
+    "status": {
-			"mempoolInstanceHelpText": "Alleen effectief als de BTClock-gegevensbron is uitgeschakeld. \nOm toe te passen is een herstart nodig.",
+      "title": "Status",
-			"luxLightToggle": "Schakelen displaylicht op lux",
+      "memoryFree": "Geheugen vrij",
-			"wpTimeout": "WiFi-config-portal timeout",
+      "screenCycle": "Scherm cyclus",
-			"useNostr": "Gebruik Nostr-gegevensbron",
+      "wsPriceConnection": "WS Prijs verbinding",
-			"flDisable": "Schakel Displaylicht uit",
+      "wsMempoolConnection": "WS Mempool.space verbinding",
-			"httpAuthUser": "WebUI-gebruikersnaam",
+      "fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
-			"httpAuthPass": "WebUI-wachtwoord",
+      "uptime": "Uptime"
-			"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
+    }
-			"currencies": "Valuta's",
+  },
-			"mowMode": "Mow achtervoegsel",
+  "colors": {
-			"suffixShareDot": "Achtervoegsel compacte notatie",
+    "black": "Zwart",
-			"section": {
+    "white": "Wit"
-				"displaysAndLed": "Displays en LED's",
+  },
-				"screenSettings": "Schermspecifiek",
+  "time": {
-				"dataSource": "Gegevensbron",
+    "minutes": "minuten",
-				"extraFeatures": "Extra functies",
+    "seconds": "seconden"
-				"system": "Systeem"
+  },
-			},
+  "restartRequired": "herstart nodig",
-			"ledFlashOnZap": "Knipper LED bij Nostr Zap",
+  "button": {
-			"flFlashOnZap": "Knipper displaylicht bij Nostr Zap",
+    "save": "Opslaan",
-			"showAll": "Toon alles",
+    "reset": "Herstel",
-			"hideAll": "Alles verbergen",
+    "restart": "Herstart",
-			"flOffWhenDark": "Displaylicht uit als het donker is",
+    "forceFullRefresh": "Forceer scherm verversen"
-			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
+  },
-			"verticalDesc": "Verticale schermbeschrijving",
+  "timer": {
-			"fontName": "Lettertype",
+    "running": "actief",
-			"timeBasedDnd": "Schakel het tijdschema Niet storen in",
+    "stopped": "gestopt"
-			"dndStartHour": "Begin uur",
+  },
-			"dndStartMinute": "Beginminuut",
+  "sections": {
-			"dndEndHour": "Eind uur",
+    "control": {
-			"dndEndMinute": "Einde minuut"
+      "keepSameColor": "Behoud zelfde kleur"
-		},
+    }
-		"control": {
+  }
-			"systemInfo": "Systeeminformatie",
-			"version": "Versie",
-			"buildTime": "Bouwtijd",
-			"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",
-			"doNotDisturb": "Niet storen",
-			"timeBasedDnd": "Op tijd gebaseerd schema"
-		},
-		"firmwareUpdater": {
-			"fileUploadSuccess": "Bestand geüpload, apparaat herstart. WebUI opnieuw geladen over {countdown} seconden",
-			"fileUploadFailed": "Bestandsupload mislukt. \nZorg ervoor dat het juiste bestand is geselecteerd en probeer het opnieuw.",
-			"uploading": "Uploaden",
-			"firmwareUpdateText": "Zorg bij het gebruiken van de firmware upload dat de juiste bestanden gebruikt worden. \nHet uploaden van de verkeerde bestanden kan resulteren in een niet-werkend apparaat. \nAls het misgaat, kunt u de firmware herstellen door de volledige afbeelding te uploaden nadat u het apparaat in de BOOT-modus hebt gezet.",
-			"swUpToDate": "Je hebt de nieuwste versie.",
-			"swUpdateAvailable": "Een nieuwere versie is beschikbaar!",
-			"latestVersion": "Laatste versie",
-			"releaseDate": "Datum van publicatie",
-			"viewRelease": "Bekijk publicatie",
-			"autoUpdate": "Update installeren (experimenteel)",
-			"autoUpdateInProgress": "Automatische update wordt uitgevoerd. Even geduld a.u.b...."
-		}
-	},
-	"colors": {
-		"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

@@ -1,18 +0,0 @@
-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,352 +1,188 @@
-@use '@fontsource/ubuntu/scss/mixins' as Ubuntu;
+@import "../node_modules/bootstrap/scss/functions";
-@use '@fontsource/antonio/scss/mixins' as Antonio;
+@import "../node_modules/bootstrap/scss/variables";
-
+@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";
 
-@include Ubuntu.faces(
+$form-range-track-bg: #fff;
-	$subsets: latin,
+$color-mode-type: media-query;
-	$weights: 400,
+$font-family-base: "Ubuntu";
-	$formats: 'woff2',
-	$directory: '@fontsource/ubuntu/files'
-);
-
-@include Antonio.faces(
-	$subsets: latin,
-	$weights: 400,
-	$formats: 'woff2',
-	$directory: '@fontsource/antonio/files'
-);
-
-@import './satsymbol';
-
-$color-mode-type: data;
-$font-family-base: 'Ubuntu';
 $font-size-base: 0.9rem;
-$input-font-size-sm: $font-size-base * 0.875;
+//$font-size-sm: $font-size-base * .875 !default;
+//$form-label-font-size: $font-size-base * .575 !default;
+//$input-btn-font-size-sm: 0.4rem;
+//$form-label-font-size: 0.4rem;
+$input-font-size-sm: $font-size-base * .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/placeholders';
-@import '../node_modules/bootstrap/scss/spinners';
 
-@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";
 
-/* Default state (xs) - sticky */
+@include media-breakpoint-down(xl) {
-.sticky-xs-top {
+    html {
-	position: sticky;
+        font-size: 85%;
-	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);
+    }
 }
 
-@media (max-width: 576px) {
+@include media-breakpoint-down(lg) {
-	main {
+    html {
-		margin-top: 25px;
+        font-size: 75%;
-	}
+    }
 }
 
-/* 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;
 }
 
-#btclock-wrapper {
+.splitText div:first-child::after {
-	margin: 0 auto;
+    display: block;
+    content: '';
+    margin-top: 0px;
+    border-bottom: 2px solid;
+    margin-bottom: 3px;
 }
 
-.btn-group-sm .btn {
+#btcclock-wrapper {
-	font-size: 0.8rem;
+    margin: 0 auto;
-	// text-overflow: ellipsis;
-	// white-space: nowrap;
-	// overflow: hidden;
-	// width: 4rem;
 }
 
-.btn-group-sm {
+.btclock {
-	display: flex !important;
+    border: 1px solid darkgray;
-	flex-wrap: wrap !important;
+    background: #000;
-	gap: 0.25rem !important;
+    border-radius: 5px;
+    padding: 10px;
+    max-width: 700px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    align-content: stretch;
+    font-family: 'Oswald', sans-serif;
+
+    >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;
+    }
 }
 
-/* Remove the border radius override that Bootstrap applies */
+.darkMode .btclock>div {
-.btn-group-sm > .btn {
+    color: #fff;
-	border-radius: 0.25rem !important;
+    border-color: #fff;
-	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;
 }
-
-.btclock-wrapper {
-	.btclock {
-		background: #000;
-		display: flex;
-		font-size: calc(2vw + 2vh);
-		font-family: 'Antonio', sans-serif;
-		font-weight: 400;
-		padding: 10px;
-		gap: 10px;
-
-		.digit,
-		.splitText,
-		.mediumText {
-			border: 2px solid gold;
-			border-radius: 8px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			text-align: center;
-			padding: 10px 10px 15px 10px;
-			width: calc(12vw + 12vh); /* Set a dynamic width based on viewport */
-			aspect-ratio: 1 / 1.5; /* Maintain a 1:1 aspect ratio */
-
-			hr {
-				width: 75%; /* Line width relative to digit square */
-				border: 0;
-				border-top: 2px solid #fff;
-				margin: 0; /* Remove default margin */
-				padding: 0;
-				opacity: 1;
-			}
-		}
-
-		.digit.sats {
-			padding-top: 35px;
-		}
-
-		.mediumText {
-			font-size: calc(1.25vw + 1.25vh);
-		}
-
-		.splitText {
-			flex-direction: column; /* Stack the text and line vertically */
-			align-items: center;
-			justify-content: space-around; /* Distribute items with space between */
-			padding: 5px;
-		}
-
-		&.verticalDesc > .splitText:first-child {
-			.textcontainer {
-				transform: rotate(-90deg);
-			}
-		}
-
-		.splitText .textcontainer :first-child::after {
-			display: block;
-			content: '';
-			margin-top: 0px;
-			border-bottom: 2px solid;
-			// margin-bottom: 3px;
-		}
-
-		.splitText {
-			font-size: calc(0.3vw + 1vh);
-
-			.top-text,
-			.bottom-text {
-				margin: 0;
-				line-height: 1;
-			}
-
-			.top-text {
-				margin-bottom: -45px;
-			}
-
-			.bottom-text {
-				margin-top: -45px;
-			}
-		}
-
-		.digit-blank {
-			content: 'abc';
-		}
-
-		.digit.icon {
-			content: 'abc';
-
-			svg {
-				width: 100%;
-			}
-		}
-	}
-
-	.digit.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;
+    padding: 0;
 
-	li {
+    li {
-		list-style: none;
+        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%);
-}
-
-.connection-lost-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.75);
-	z-index: 1050;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	.overlay-content {
-		background-color: rgba(255, 255, 255, 0.75);
-
-		padding: 0.5rem;
-		border-radius: 0.5rem;
-		text-align: center;
-
-		i {
-			font-size: 1rem;
-			color: $danger;
-			margin-bottom: 1rem;
-		}
-
-		h4 {
-			margin-bottom: 0.5rem;
-		}
-	}
-}

src/lib/style/satsymbol.scss

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

src/lib/types/dataSource.ts

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

src/lib/uiSettings.ts

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

src/routes/+layout.svelte

@@ -1,23 +1,21 @@
 <script lang="ts">
 	import {
-		Collapse,
+		Navbar,
-		Dropdown,
+		NavbarBrand,
-		DropdownItem,
-		DropdownMenu,
-		DropdownToggle,
 		Nav,
 		NavItem,
 		NavLink,
-		Navbar,
+		Collapse,
-		NavbarBrand,
+		Dropdown,
-		NavbarToggler
+		DropdownMenu,
-	} from '@sveltestrap/sveltestrap';
+		DropdownItem,
-	import { _ } from 'svelte-i18n';
+		DropdownToggle
+	} 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);
@@ -28,93 +26,57 @@
 		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 (Object.prototype.hasOwnProperty.call(flagMap, lowercaseCode)) {
+		if (flagMap.hasOwnProperty(lowercaseCode)) {
 			return flagMap[lowercaseCode];
 		} else {
 			// Return null for unsupported language codes
-			return flagMap['en'];
+			return null;
 		}
 	};
 
-	let languageNames = {};
+	export const getLanguageName = (languageCode: string): string | null => {
+		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 currentLocale = derived(locale, ($locale) => $locale || 'en');
+		const lowercaseCode = languageCode.toLowerCase();
 
-	locale.subscribe(() => {
+		return languageNames.hasOwnProperty(lowercaseCode)
-		const localeToUse = $locale || 'en';
+			? languageNames[lowercaseCode][lowercaseCode]
-		let newLanguageNames = new Intl.DisplayNames([localeToUse], { type: 'language' });
+			: null;
-
-		for (let l of $locales) {
-			languageNames[l] = newLanguageNames.of(l) || l;
-		}
-	});
-
-	let isOpen = false;
-
-	const toggle = () => {
-		isOpen = !isOpen;
 	};
 </script>
 
-<Navbar expand="md" sticky="xs-top" theme="auto">
+<Navbar expand="md">
-	<NavbarBrand class="d-none d-sm-block">&#8383;TClock</NavbarBrand>
+	<NavbarBrand>&#8383;TClock</NavbarBrand>
-	<Nav class="d-md-none" pills>
+	<Collapse navbar expand="md">
-		<NavItem>
-			<NavLink href="#control" active>{$_('section.control.title', { default: 'Control' })}</NavLink
-			>
-		</NavItem>
-		<NavItem>
-			<NavLink href="#status">{$_('section.status.title', { default: 'Status' })}</NavLink>
-		</NavItem>
-		<NavItem>
-			<NavLink class="nav-link" href="#settings"
-				>{$_('section.settings.title', { default: 'Settings' })}</NavLink
-			>
-		</NavItem>
-	</Nav>
-
-	<NavbarToggler on:click={toggle} />
-
-	<Collapse {isOpen} navbar expand="sm">
 		<Nav class="me-auto" navbar>
 			<NavItem>
 				<NavLink href="/" active={$page.url.pathname === '/'}>Home</NavLink>
 			</NavItem>
-			<NavItem>
-				<NavLink href="/convert" active={$page.url.pathname === '/convert'}>Convert</NavLink>
-			</NavItem>
 			<NavItem>
 				<NavLink href="/api" active={$page.url.pathname === '/api'}>API</NavLink>
 			</NavItem>
 		</Nav>
-		{#if !$isLoading}
+		<Dropdown inNavbar>
-			<Dropdown id="nav-language-dropdown" inNavbar class="me-3">
+			<DropdownToggle nav caret>{getFlagEmoji($locale)} {getLanguageName($locale)}</DropdownToggle>
-				<DropdownToggle nav caret
+			<DropdownMenu end>
-					>{getFlagEmoji($currentLocale)}
+				{#each $locales as locale}
-					{languageNames[$currentLocale] || 'English'}</DropdownToggle
+					<DropdownItem on:click={setLocale(locale)}>{getFlagEmoji(locale)} {getLanguageName(locale)}</DropdownItem>
-				>
+				{/each}
-				<DropdownMenu end>
+			</DropdownMenu>
-					{#each $locales as locale}
+		</Dropdown>
-						<DropdownItem on:click={setLocale(locale)}
-							>{getFlagEmoji(locale)} {languageNames[locale]}</DropdownItem
-						>
-					{/each}
-				</DropdownMenu>
-			</Dropdown>
-		{/if}
-		<ColorSchemeSwitcher></ColorSchemeSwitcher>
 	</Collapse>
 </Navbar>
 
 <!-- +layout.svelte -->
-<main>
+<slot />
-	<slot />
-</main>

src/routes/+layout.ts

@@ -1,24 +1,20 @@
-import '$lib/style/app.scss';
+import "$lib/style/app.scss";
 
-import { browser } from '$app/environment';
+
-import '$lib/i18n'; // Import to initialize. Important :)
+import { browser } from '$app/environment'
-import { locale, waitLocale } from 'svelte-i18n';
+import '$lib/i18n' // Import to initialize. Important :)
-import type { LayoutLoad } from './$types';
+import { locale, waitLocale } from 'svelte-i18n'
+import type { LayoutLoad } from './$types'
 
 export const load: LayoutLoad = async () => {
-	if (browser) {
+	 if (browser && localStorage.getItem('locale')) {
-		if (localStorage.getItem('locale')) {
+        locale.set(localStorage.getItem('locale'));
-			locale.set(localStorage.getItem('locale'));
+    } else if (browser) {
-		} else {
+		locale.set(window.navigator.language)
-			// Normalize the browser locale
-			const browserLocale = window.navigator.language.split('-')[0].toLowerCase();
-			const supportedLocales = ['en', 'nl', 'es', 'de'];
-			locale.set(supportedLocales.includes(browserLocale) ? browserLocale : 'en');
-		}
 	}
-	await waitLocale();
+    await waitLocale();
-};
+}
 
 export const prerender = true;
 export const ssr = false;
-export const csr = true;
+export const csr = true;

src/routes/+page.svelte

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

@@ -1,30 +0,0 @@
-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,248 +1,134 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$lib/config';
+import { PUBLIC_BASE_URL } from '$env/static/public';
 	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,
-		Card,
+    ButtonGroup,
-		CardBody,
+    Card,
-		CardHeader,
+    CardTitle,
-		CardTitle,
+    CardBody,
-		Col,
+    CardHeader,
-		Form,
+    Col,
-		Input,
+    Container,
-		Label,
+    Form,
-		Row
+    Input,
-	} from '@sveltestrap/sveltestrap';
+    Label,
-	import FirmwareUpdater from './FirmwareUpdater.svelte';
+    Row
-	import { uiSettings } from '$lib/uiSettings';
+} from 'sveltestrap';
-	import { Placeholder } from '$lib/components';
 
-	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;
 
-	export let customText: string;
+const setCustomText = () => {
-	export let status: Writable<{ leds: [] }>;
+    fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
-	let ledStatus = [];
+};
-	let keepLedsSameColor = false;
 
-	const setCustomText = () => {
+const checkSyncLeds = (e:Event) => {
-		fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(() => {});
+	console.log('checksyncleds', keepLedsSameColor);
-	};
+	if (keepLedsSameColor) {
+		console.log(e.target.value);
 
-	const checkSyncLeds = (e: Event) => {
+		ledStatus.forEach((element, i) => {
-		console.log('checksyncleds', keepLedsSameColor);
+			if (ledStatus[i].hex != e.target_value) {
-		if (keepLedsSameColor) {
+				ledStatus[i].hex = e.target.value;
-			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')}`;
-				}
 			}
+		});
+	}
+}
 
-			firstLedDataSubscription();
+const setLEDcolor = () => {
-		}
+    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 => { });
+};
 
-	onDestroy(firstLedDataSubscription);
+const turnOffLeds = () => {
+    fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(err => { });
+};
 
-	// You can also add more props if needed
+const restartClock = () => {
-	export let xs = 12;
+    fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(err => { });
-	export let sm = xs;
+}
-	export let md = sm;
+
-	export let lg = md;
+const forceFullRefresh = () => {
-	export let xl = lg;
+    fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(err => { });
-	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 {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+<Col>
-	<Card id="control">
+	<Card>
 		<CardHeader>
 			<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
 			<Form>
 				<Row>
-					<Label md={4} for="customText" size={$uiSettings.inputSize}
+					<Label md={6} for="customText">{ $_('section.control.text') }</Label>
-						>{$_('section.control.text')}</Label
+					<Col md="6">
-					>
+						<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>
-				<Row>
-					<Col class="d-flex justify-content-end">
-						<Button color="primary" on:click={setCustomText} bsSize={$uiSettings.btnSize}
-							>{$_('section.control.showText')}</Button
-						>
 					</Col>
 				</Row>
+                <Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>
+
 			</Form>
 			<hr />
-			{#if !$settings.disableLeds}
+			<h3>LEDs</h3>
-				<h3>LEDs</h3>
+            <Form>
-				<Form>
+				<Row>
-					<Row>
+					<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
-						<Label md={4} for="ledColorPicker" size={$uiSettings.inputSize}
+					<Col md="6">
-							>{$_('section.control.ledColor')}</Label
+						<Row class="justify-content-between">
-						>
+							{#if ledStatus}
-						<Col md="8">
+							{#each ledStatus as led, i }
-							<Row class="justify-content-between">
+							<Col>
-								{#if ledStatus}
+							<Input type="color" id="ledColorPicker[{i}]" bind:value="{led.hex}" class="mx-auto" on:change="{checkSyncLeds}" />
-									{#each ledStatus as led, i}
+							</Col>
-										<Col>
+							{/each}
-											<Input
+							{/if}
-												type="color"
+							<Col>
-												id="ledColorPicker[{i}]"
+							<Input bind:checked={keepLedsSameColor} type="switch" class="mx-auto"  label="{ $_('sections.control.keepSameColor') }" />
-												bind:value={led.hex}
+							</Col>
-												class="mx-auto"
+						</Row>
-												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 />
+                <Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>
-			{/if}
+                <Button color="primary" on:click={setLEDcolor}>{ $_('section.control.setColor') }</Button>
-			<h3>{$_('section.control.systemInfo')}</h3>
+			</Form>
-			<ul class="small system_info">
-				{#if $settings.gitTag}
-					<li>
-						{$_('section.control.version')}: {$settings.gitTag}
-					</li>
-				{/if}
-				<li>
-					{$_('section.control.buildTime')}: <Placeholder
-						value={new Date($settings.lastBuildTime * 1000).toLocaleString()}
-						checkValue={$settings.lastBuildTime}
-					/>
-				</li>
-				<li>IP: <Placeholder value={$settings.ip} /></li>
-				<li>HW revision: <Placeholder value={$settings.hwRev} /></li>
-				<li>{$_('section.control.fwCommit')}: <Placeholder value={$settings.gitRev} /></li>
-				<li>WebUI commit: <Placeholder value={$settings.fsRev} /></li>
-				<li>{$_('section.control.hostname')}: <Placeholder value={$settings.hostname} /></li>
-			</ul>
-			<Row>
-				<Col class="d-flex justify-content-end">
-					<Button color="danger" id="restartBtn" on:click={restartClock}
-						>{$_('button.restart')}</Button
-					>
-					<div class="mx-2"></div>
 
-					<Button color="warning" id="forceFullRefresh" on:click={forceFullRefresh}
+			<hr />
-						>{$_('button.forceFullRefresh')}</Button
+			<h3>{ $_('section.control.systemInfo') }</h3>
-					>
+			<ul class="small system_info">
-				</Col>
+				<li>{ $_('section.control.version') }: {$settings.gitRev}</li>
-			</Row>
+				<li>{ $_('section.control.buildTime') }: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
-			{#if $settings.otaEnabled}
+				<li>IP: {$settings.ip}</li>
-				<hr />
+				<li>{ $_('section.control.hostname') }: {$settings.hostname}</li>
-				<h3>{$_('section.control.firmwareUpdate')}</h3>
+			</ul>
-				<FirmwareUpdater on:showToast bind:settings bind:status />
+            <Button color="danger" id="restartBtn" on:click="{restartClock}">{ $_('button.restart') }</Button>
-			{/if}
+            <Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">{ $_('button.forceFullRefresh') }</Button>
 		</CardBody>
 	</Card>
 </Col>

src/routes/FirmwareUpdater.svelte

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

src/routes/Rendered.svelte

@@ -1,114 +1,25 @@
 <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={className} id={className}>
+<div class="btcclock-wrapper" id="btcclock-wrapper">
-	<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
+    <div class="btclock">
-		{#each status.data as char}
+        {#each status.data as char}
-			{#if isSplitText(char)}
+        {#if isSplitText(char)}
-				<div class="splitText">
+        <div class="splitText">
-					<div class="textcontainer">
+            {#each char.split("/") as part}
-						{#if char.split('/').length}
+            <div class="flex-items">{part}</div>
-							<span class="top-text">{char.split('/')[0]}</span>
+            {/each}
-							<span class="bottom-text">{char.split('/')[1]}</span>
+        </div>
-						{/if}
+        {:else if char.length === 0 || char === " "}
-					</div>
+        <div class="digit">&nbsp;&nbsp;</div>
-					<!-- {#each char.split('/') as part}
+        {:else}
-						<div class="flex-items">{part}</div>
+        <div class="digit">{char}</div>
-					{/each} -->
+        {/if}
-				</div>
+        {/each}
-			{:else if char.startsWith('mdi')}
+    </div> 
-				<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
+</div>
-					{#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

@@ -1,32 +0,0 @@
-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,162 +1,209 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$lib/config';
+    import { PUBLIC_BASE_URL } from '$env/static/public';
-	import { createEventDispatcher } from 'svelte';
+
+	import { onMount } from 'svelte';
+	import { readonly, writable } from 'svelte/store';
+
 	import { _ } from 'svelte-i18n';
 	import {
-		Button,
-		Card,
-		CardBody,
-		CardHeader,
-		CardTitle,
 		Col,
+		Container,
+		Row,
+		Card,
+        CardTitle,
+		CardHeader,
+		CardBody,
 		Form,
-		Row
+		FormGroup,
-	} from '@sveltestrap/sveltestrap';
+		FormText,
-	import {
+		Label,
-		ScreenSpecificSettings,
+		Input,
-		DisplaySettings,
+		InputGroup,
-		DataSourceSettings,
+		InputGroupText,
-		ExtraFeaturesSettings,
+        Button
-		SystemSettings
+	} from 'sveltestrap';
-	} from '$lib/components/settings';
 
 	export let settings;
 
-	const miningPoolMap = new Map<string, string>([
+    const onSave = async(e:Event) => {
-		['noderunners', 'Noderunners.network'],
+        e.preventDefault();
-		['braiins', 'Braiins Pool'],
+        let formSettings = $settings;
-		['ocean', 'ocean.xyz'],
-		['satoshi_radio', 'Satoshi Radio pool'],
-		['public_pool', 'public-pool.io'],
-		['gobrrr_pool', 'Go Brrr pool'],
-		['ckpool', 'CKPool'],
-		['eu_ckpool', 'EU CKPool'],
-		['local_public_pool', 'Public Pool (local)']
-	]);
 
-	const dispatch = createEventDispatcher();
+        delete formSettings["gitRev"];
+        delete formSettings["ip"];
+        delete formSettings["lastBuildTime"];
 
-	const handleReset = (e: Event) => {
+        const res = await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
-		e.preventDefault();
-		dispatch('formReset');
-	};
-
-	const onSave = async (e: Event) => {
-		e.preventDefault();
-
-		let formSettings = $settings;
-		delete formSettings['gitRev'];
-		delete formSettings['ip'];
-		delete formSettings['lastBuildTime'];
-
-		let headers = new Headers({
-			'Content-Type': 'application/json'
-		});
-
-		await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
 			method: 'PATCH',
-			headers: headers,
+            headers: {
-			credentials: 'same-origin',
+                "Content-Type": "application/json",
+            },
 			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')
-				});
-			});
-	};
-
-	export let xs = 12;
-	export let sm = xs;
-	export let md = sm;
-	export let lg = md;
-	export let xl = lg;
-	export let xxl = xl;
-
-	let screenSettingsIsOpen = true,
-		displaySettingsIsOpen = false,
-		dataSourceIsOpen = false,
-		extraFeaturesIsOpen = false,
-		systemIsOpen = false;
-
-	const showAll = () => {
-		screenSettingsIsOpen = true;
-		displaySettingsIsOpen = true;
-		dataSourceIsOpen = true;
-		extraFeaturesIsOpen = true;
-		systemIsOpen = true;
-	};
-
-	const hideAll = () => {
-		screenSettingsIsOpen = false;
-		displaySettingsIsOpen = false;
-		dataSourceIsOpen = false;
-		extraFeaturesIsOpen = false;
-		systemIsOpen = false;
-	};
 </script>
 
-<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+<Col>
-	<Card id="settings">
+	<Card>
 		<CardHeader>
-			<div class="float-end">
+			<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
-				<small>
-					<button type="button" on:click={showAll} id="showAllBtn"
-						>{$_('section.settings.showAll')}</button
-					>
-					|
-					<button type="button" on:click={hideAll} id="hideAllBtn"
-						>{$_('section.settings.hideAll')}</button
-					>
-				</small>
-			</div>
-			<CardTitle>{$_('section.settings.title')}</CardTitle>
 		</CardHeader>
 		<CardBody>
-			{#if $settings.isLoaded === false}
+			<Form on:submit={onSave}>
-				<div class="d-flex align-items-center">
+				<Row>
-					<strong role="status">Loading...</strong>
+					<Label md={6} for="fgColor" size="sm">{$_('section.settings.textColor', { default: 'Text color' })}</Label>
-					<div class="spinner-border ms-auto" aria-hidden="true"></div>
+					<Col md="6">
-				</div>
+						<Input
-			{:else}
+							type="select"
-				<Form on:submit={onSave}>
+							bind:value={$settings.fgColor}
-					<ScreenSpecificSettings {settings} bind:isOpen={screenSettingsIsOpen} />
+							name="select"
-					<DisplaySettings {settings} bind:isOpen={displaySettingsIsOpen} />
+							id="fgColor"
-					<DataSourceSettings {settings} bind:isOpen={dataSourceIsOpen} on:showToast />
+							bsSize="sm"
-					<ExtraFeaturesSettings
+							class="form-select-sm"
-						{settings}
+						>
-						bind:isOpen={extraFeaturesIsOpen}
+							<option value="0">{ $_('colors.black') }</option>
-						{miningPoolMap}
+							<option value="65535">{ $_('colors.white') }</option>
-						on:showToast
+						</Input>
-					/>
+					</Col>
-					<SystemSettings {settings} bind:isOpen={systemIsOpen} />
+				</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>
+						</InputGroup>
+						<FormText>{ $_('section.settings.tzOffsetHelpText') }</FormText>
+					</Col>
+				</Row>
+				<Row>
+					<Label md={6} for="ledBrightness" size="sm">{ $_('section.settings.ledBrightness') }</Label>
+					<Col md="6">
+						<Input
+							type="range"
+							name="ledBrightness"
+							id="ledBrightness"
+                            bind:value={$settings.ledBrightness}
+							min={0}
+							max={255}
+							step={1}
+						/>
+					</Col>
+				</Row>
+				<Row>
+					<Label md={6} for="mempoolInstance" size="sm">{ $_('section.settings.mempoolnstance') }</Label>
+                    <Col md="6">
+						<Input
+							type="text"
+							bind:value={$settings.mempoolInstance}
+							name="mempoolInstance"
+							id="mempoolInstance"
+							bsSize="sm"
+						>
+						</Input>
+					</Col>
+				</Row>
+				<Row>
+					<Label md={6} for="hostnamePrefix" size="sm">{ $_('section.settings.hostnamePrefix') }</Label>
+                    <Col md="6">
+						<Input
+							type="text"
+							bind:value={$settings.hostnamePrefix}
+							name="hostnamePrefix"
+							id="hostnamePrefix"
+							bsSize="sm"
+						>
+						</Input>
+					</Col>
+				</Row>
+                <Row>
+                    <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 class="mt-4">
+                <Row>
-						<Col>
+                    <h3>{ $_('section.settings.screens') }</h3>
-							<Button type="submit" color="primary" class="me-2">
+                    {#if $settings.screens}
-								{$_('button.save')}
+                    {#each $settings.screens as s}
-							</Button>
+                    <Col md="6">
-							<Button type="button" color="secondary" on:click={handleReset}>
+                        <Input id="screens_{s.id}" bind:checked={s.enabled} type="switch" bsSize="sm" label="{s.name}" />
-								{$_('button.reset')}
+                    </Col>
-							</Button>
+                    {/each}
-						</Col>
+                    {/if}
-					</Row>
+                </Row>
-				</Form>
+                <Button type="reset" color="secondary">{ $_('button.reset') }</Button>
-			{/if}
+                <Button color="primary">{ $_('button.save') }</Button>
+			</Form>
 		</CardBody>
 	</Card>
 </Col>

src/routes/Status.spec.ts

@@ -1,30 +0,0 @@
-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,319 +1,131 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$lib/config';
+    import { PUBLIC_BASE_URL } from '$env/static/public';
 
+    import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-	import { writable } from 'svelte/store';
+	import { writable, type Writable } from 'svelte/store';
-	import {
+	import { Row, Input, Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
-		Button,
-		ButtonGroup,
-		Card,
-		CardBody,
-		CardHeader,
-		CardTitle,
-		Col,
-		Input,
-		Progress,
-		Tooltip,
-		Row
-	} from '@sveltestrap/sveltestrap';
 	import Rendered from './Rendered.svelte';
-	import { DataSourceType } from '$lib/types/dataSource';
+	
+    export let settings; 
+    export let status:Writable<{}>;
 
-	export let settings;
+    const toTime = (secs:Number) => {
-	export let status: writable<object>;
+        var hours = Math.floor(secs / (60 * 60));
 
-	// Function to split array into chunks
+        var divisor_for_minutes = secs % (60 * 60);
-	const chunkArray = (array, chunkSize) => {
+        var minutes = Math.floor(divisor_for_minutes / 60);
-		const result = [];
-		for (let i = 0; i < array.length; i += chunkSize) {
-			result.push(array.slice(i, i + chunkSize));
-		}
-		return result;
-	};
-	let buttonChunks = chunkArray([], 6);
 
-	const toTime = (secs: number) => {
+        var divisor_for_seconds = divisor_for_minutes % 60;
-		var hours = Math.floor(secs / (60 * 60));
+        var seconds = Math.ceil(divisor_for_seconds);
 
-		var divisor_for_minutes = secs % (60 * 60);
+        var obj = {
-		var minutes = Math.floor(divisor_for_minutes / 60);
+            "h": hours,
+            "m": minutes,
+            "s": seconds
+        };
+        return obj;
+    }
 
-		var divisor_for_seconds = divisor_for_minutes % 60;
+    const toUptimeString = (secs:Number):String => {
-		var seconds = Math.ceil(divisor_for_seconds);
+        let time = toTime(secs);
 
-		var obj = {
+        return `${time.h}h ${time.m}m ${time.s}s`;
-			h: hours,
+    }
-			m: minutes,
-			s: seconds
-		};
-		return obj;
-	};
 
-	const toUptimestring = (secs: number): string => {
+    let memoryFreePercent:number = 50;
-		let time = toTime(secs);
+    let lightMode:boolean = false;
 
-		return `${time.h}h ${time.m}m ${time.s}s`;
+    status.subscribe((value: {}) => {
-	};
+        memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
+    });
 
-	let memoryFreePercent: number = 50;
+    settings.subscribe((value: {}) => {
-	let rssiPercent: number = 50;
+        lightMode = value.bgColor > value.fgColor;
-	let wifiStrengthColor: string = 'info';
+    });
-	let lightMode: boolean = false;
 
-	status.subscribe((value: object) => {
+    const setScreen = (id:number) => () => {
-		memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
+        fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { });
+    }
 
-		rssiPercent = Math.round(((value.rssi + 120) / (-30 + 120)) * 100);
+    const toggleTimer = (currentStatus:boolean) => () => {
+        if (currentStatus) {
+            fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
+        } else {
+            fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
+        }
+    }
 
-		if (value.rssi > -55) {
+    const isLightMode = () => {
-			wifiStrengthColor = 'success';
+        return $settings.bgColor > $settings.fgColor;
-		} else if (value.rssi < -87) {
+    }
-			wifiStrengthColor = 'warning';
-		} else {
-			wifiStrengthColor = 'info';
-		}
-	});
 
-	settings.subscribe((value: object) => {
-		lightMode = !value.invertedColor;
-
-		if (value.screens) buttonChunks = chunkArray(value.screens, 5);
-	});
-
-	const setScreen = (id: number) => () => {
-		fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(() => {});
-	};
-
-	const setCurrency = (c: string) => () => {
-		fetch(`${PUBLIC_BASE_URL}/api/show/currency/${c}`).catch(() => {});
-	};
-
-	const toggleTimer = (currentStatus: boolean) => (e: Event) => {
-		e.preventDefault();
-		if (currentStatus) {
-			fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
-		} else {
-			fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
-		}
-	};
-
-	const toggleDoNotDisturb = (currentStatus: boolean) => (e: Event) => {
-		e.preventDefault();
-		console.log(currentStatus);
-		if (!currentStatus) {
-			fetch(`${PUBLIC_BASE_URL}/api/dnd/enable`);
-		} else {
-			fetch(`${PUBLIC_BASE_URL}/api/dnd/disable`);
-		}
-	};
-
-	export let xs = 12;
-	export let sm = xs;
-	export let md = sm;
-	export let lg = md;
-	export let xl = lg;
-	export let xxl = xl;
 </script>
 
-<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
+<Col>
-	<Card id="status">
+	<Card>
 		<CardHeader>
 			<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
-			{#if $settings.isLoaded === false}
+            {#if $settings.screens}
-				<div class="d-flex align-items-center">
+            <div class="d-flex justify-content-center">
-					<strong role="status">Loading...</strong>
+                <ButtonGroup size="sm">
-					<div class="spinner-border ms-auto" aria-hidden="true"></div>
+                    {#each $settings.screens as s}
-				</div>
+                    <Button color="outline-primary" active={$status.currentScreen == s.id} on:click={setScreen(s.id)}>{s.name}</Button>
-			{:else}
+                    {/each}
-				{#if $settings.screens}
+                </ButtonGroup>
-					<div class=" d-block d-sm-none mx-auto text-center">
+                </div>
-						{#each buttonChunks as chunk}
+              <hr>
-							<ButtonGroup size="sm" class="mx-auto mb-1">
+              {#if $status.data}
-								{#each chunk as s}
+              <section class={lightMode ? 'lightMode': ''}>
-									<Button
+                  <Rendered status="{$status}"></Rendered>
-										color="outline-primary"
+              </section>
-										active={$status.currentScreen == s.id}
+              { $_('section.status.screenCycle') }: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; { $_('timer.running') }{:else}&#9208; { $_('timer.stopped') }{/if}</a>
-										on:click={setScreen(s.id)}>{s.name}</Button
+              {/if}
-									>
+            {/if}
-								{/each}
+        <hr>
-							</ButtonGroup>
+        <Row class="justify-content-evenly">
-						{/each}
+            {#if $status.leds}
-					</div>
+            {#each $status.leds as led}
-					<div class="d-flex justify-content-center d-none d-sm-flex">
+            <Col>
-						<ButtonGroup size="sm">
+            <Input type="color" id="ledColorPicker" bind:value="{led.hex}" class="mx-auto" disabled />
-							{#each $settings.screens as s}
+            </Col>
-								<Button
+            {/each}
-									color="outline-primary"
+            {/if}
-									active={$status.currentScreen == s.id}
+        </Row>
-									on:click={setScreen(s.id)}>{s.name}</Button
+        <hr>
-								>
+        <Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
-							{/each}
+        <div class="d-flex justify-content-between">
-						</ButtonGroup>
+            <div>{ $_('section.status.memoryFree') } </div>
-					</div>
+            <div>{ Math.round($status.espFreeHeap / 1024)  } / { Math.round($status.espHeapSize / 1024) } KiB</div>
-					{#if $settings.actCurrencies && ($settings.dataSource == DataSourceType.BTCLOCK_SOURCE || $settings.dataSource == DataSourceType.CUSTOM_SOURCE)}
+          </div>
-						<div class="d-flex justify-content-center d-sm-flex mt-2">
+        <hr>
-							<ButtonGroup size="sm">
+        { $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
-								{#each $settings.actCurrencies as c}
+        <br>
-									<Button
+        <p>
-										color="outline-success"
+            { $_('section.status.wsPriceConnection') }:
-										active={$status.currency == c}
+            <span>
-										on:click={setCurrency(c)}>{c}</Button
+            {#if $status.connectionStatus && $status.connectionStatus.price}
-									>
+            &#9989;
-								{/each}
+            {:else}
-							</ButtonGroup>
+            &#10060;
-						</div>
+            {/if}
-					{/if}
+            </span>
-					<hr />
+            - 
-					{#if $status.data}
+            { $_('section.status.wsMempoolConnection') }:
-						<section class={lightMode ? 'lightMode' : 'darkMode'} style="position: relative;">
+            <span>
-							{#if $status.isUpdating === false && ($status.isFake ?? false) === false}
+              {#if $status.connectionStatus && $status.connectionStatus.blocks}
-								<div class="connection-lost-overlay">
+              &#9989;
-									<div class="overlay-content">
+              {:else}
-										<i class="bi bi-wifi-off"></i>
+              &#10060;
-										<h4>Lost connection</h4>
+              {/if}
-										<p>Trying to reconnect...</p>
+            </span><br>
-									</div>
+            {#if $settings.fetchEurPrice}
-								</div>
+            <small>{ $_('section.status.fetchEuroNote') }</small>
-							{/if}
+            {/if}
-							<Rendered
+          </p>
-								status={$status}
+        </CardBody>
-								className="btclock-wrapper"
+        
-								verticalDesc={$settings.verticalDesc}
+    </Card>
-							></Rendered>
-						</section>
-						{$_('section.status.screenCycle')}:
-						<a
-							id="timerStatusText"
-							href={'#'}
-							style="cursor: pointer"
-							tabindex="0"
-							role="button"
-							aria-pressed="false"
-							on:click={toggleTimer($status.timerRunning)}
-							>{#if $status.timerRunning}&#9205; {$_('timer.running')}{:else}&#9208; {$_(
-									'timer.stopped'
-								)}{/if}</a
-						><br />
-
-						{$_('section.status.doNotDisturb')}:
-						<a
-							id="dndStatusText"
-							href={'#'}
-							style="cursor: pointer"
-							tabindex="0"
-							role="button"
-							aria-pressed="false"
-							on:click={toggleDoNotDisturb($status.dnd?.enabled)}
-						>
-							{#if $status.dnd?.active}&#9205; {$_('on')}{:else}&#9208; {$_('off')}{/if}</a
-						>
-						<small>
-							{#if $status.dnd?.timeBasedEnabled}
-								{$_('section.status.timeBasedDnd')} ( {$settings.dnd
-									.startHour}:{$settings.dnd.startMinute.toString().padStart(2, '0')} - {$settings
-									.dnd.endHour}:{$settings.dnd.endMinute.toString().padStart(2, '0')} )
-							{/if}
-						</small>
-					{/if}
-				{/if}
-				<hr />
-				{#if !$settings.disableLeds}
-					<Row class="justify-content-evenly">
-						{#if $status.leds}
-							{#each $status.leds as led}
-								<Col>
-									<Input
-										type="color"
-										id="ledColorPicker"
-										bind:value={led.hex}
-										class="mx-auto"
-										disabled
-									/>
-								</Col>
-							{/each}
-						{/if}
-					</Row>
-					<hr />
-				{/if}
-				<Progress striped value={memoryFreePercent}>{memoryFreePercent}%</Progress>
-				<div class="d-flex justify-content-between">
-					<div>{$_('section.status.memoryFree')}</div>
-					<div>
-						{Math.round($status.espFreeHeap / 1024)} / {Math.round($status.espHeapSize / 1024)} KiB
-					</div>
-				</div>
-				<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.dataSource == DataSourceType.NOSTR_SOURCE || $settings.nostrZapNotify}
-						{$_('section.status.nostrConnection')}:
-						<span>
-							{#if $status.connectionStatus && $status.connectionStatus.nostr}
-								&#9989;
-							{:else}
-								&#10060;
-							{/if}
-						</span>
-					{/if}
-					{#if $settings.dataSource != DataSourceType.NOSTR_SOURCE}
-						{#if $settings.dataSource == DataSourceType.THIRD_PARTY_SOURCE}
-							{$_('section.status.wsPriceConnection')}:
-							<span>
-								{#if $status.connectionStatus && $status.connectionStatus.price}
-									&#9989;
-								{:else}
-									&#10060;
-								{/if}
-							</span>
-							-
-							{$_('section.status.wsMempoolConnection', {
-								values: { instance: $settings.mempoolInstance }
-							})}:
-							<span>
-								{#if $status.connectionStatus && $status.connectionStatus.blocks}
-									&#9989;
-								{:else}
-									&#10060;
-								{/if}
-							</span><br />
-						{:else}
-							{$_('section.status.wsDataConnection')}:
-							<span>
-								{#if $status.connectionStatus && $status.connectionStatus.V2}
-									&#9989;
-								{:else}
-									&#10060;
-								{/if}
-							</span>
-						{/if}
-					{/if}
-					{#if $settings.fetchEurPrice}
-						<small>{$_('section.status.fetchEuroNote')}</small>
-					{/if}
-				</p>
-			{/if}
-		</CardBody>
-	</Card>
 </Col>
-
-<style lang="scss">
-</style>

src/routes/api/+page.svelte

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

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

static/zones.json

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

svelte.config.js

@@ -1,18 +1,20 @@
 import adapter from '@sveltejs/adapter-static';
-import { sveltePreprocess } from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: sveltePreprocess({}),
+	preprocess: vitePreprocess({
-	build: {
+	
-		rollupOptions: {
+	}),
-			output: {
+build: {
-				assetFilenames: '[hash]'
+	rollupOptions: {
-			}
+		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.
@@ -22,11 +24,11 @@ const config = {
 			// 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/doc-screenshots/viewport-screenshots.spec.ts

@@ -1,70 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { initMock, settingsJson, statusJson } from '../shared';
-import sharp from 'sharp';
-
-test.beforeEach(initMock);
-
-// Define the translations for the headings
-const headings = {
-	en: {
-		control: 'Control',
-		status: 'Status',
-		settings: 'Settings',
-		language: 'English'
-	},
-	de: {
-		control: 'Steuerung',
-		status: 'Status',
-		settings: 'Einstellungen',
-		language: 'Deutsch'
-	},
-	nl: {
-		control: 'Besturing',
-		status: 'Status',
-		settings: 'Instellingen',
-		language: 'Nederlands'
-	},
-	es: {
-		control: 'Control',
-		status: 'Estado',
-		settings: 'Ajustes',
-		language: 'Español'
-	}
-};
-
-test('capture screenshots across devices', async ({ page }, testInfo) => {
-	// Get the locale from the browser or default to 'en'
-	const locale = testInfo.project.use?.locale?.split('-')[0].toLowerCase() || 'en';
-	const translations = headings[locale] || headings.en;
-
-	statusJson.isUpdating = true;
-	// Set the color scheme
-	if (testInfo.project.use?.colorScheme === 'dark') {
-		settingsJson.invertedColor = true;
-	} else {
-		settingsJson.invertedColor = false;
-	}
-
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: translations.control })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.status })).toBeVisible();
-	await expect(page.getByRole('heading', { name: translations.settings })).toBeVisible();
-
-	if (await page.locator('#nav-language-dropdown').isVisible()) {
-		await expect(page.getByRole('link', { name: translations.language })).toBeVisible();
-	}
-
-	const screenshot = await page.screenshot({
-		fullPage: true
-	});
-
-	await sharp(screenshot)
-		.toFormat('webp', {
-			quality: 95,
-			nearLossless: true
-		})
-		.toFile(
-			`./doc/screenshot-${test.info().project.use.colorScheme?.toLowerCase().replace(' ', '_')}.webp`
-		);
-});

tests/playwright/test.ts

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

tests/screenshots/viewport-screenshots.spec.ts

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

tests/shared.ts

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

tsconfig.json

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

vite.config.test.ts

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

vite.config.ts

@@ -1,107 +1,62 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-// 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 {
+	} catch(e) {}
-		// do nothing
+	console.log("\nStart re-wrapping...")
-	}
+	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(
+			console.log(`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`)
-				`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`
+			return
-			);
-			return;
 		}
-		const matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm);
+		let matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm)
 		if (matchData) {
-			const cleanData = matchData[0]
+			let cleanData = matchData[0].trim()
-				.trim()
+				.replace(`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`, `document.querySelector(".${cssClass}")`)
-				.replace(
-					`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`,
-					`document.querySelector(".${cssClass}")`
-				);
 			fs.writeFile(path.resolve(__dirname, 'dist/bundle.js'), cleanData, (err) => {
-				if (err) console.log(err);
+				if (err)
+					console.log(err)
 				else {
 					try {
-						fs.rename(
+						fs.rename(path.resolve(__dirname,'dist/index.page'), path.resolve(__dirname, 'dist/index.html'), (err) => { })
-							path.resolve(__dirname, 'dist/index.page'),
+					} catch (e) { }
-							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 {
+					} catch (e) { }
-						// do nothing
+					console.log("Finished: bundle.js + index.html have been regenerated.\n")
-					}
-					console.log('Finished: bundle.js + index.html have been regenerated.\n');
 				}
-			});
+			})
-		} else console.log(`[Error]: No proper <script> tag found in bundle.html`);
+		} else 
-	});
+			console.log(`[Error]: No proper <script> tag found in bundle.html`)
-};
+	})
+}
+
 
 export default defineConfig({
-	plugins: [
+	plugins: [sveltekit(), {
-		sveltekit(),
+		name: 'postbuild-command', 
-		{
-			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: 'esbuild',
+		minify: true,
 		cssCodeSplit: false,
-		chunkSizeWarningLimit: 550,
 		rollupOptions: {
 			output: {
-				// assetFileNames: '[hash][extname]',
+				manualChunks: () => 'app',
-				entryFileNames: `[hash][extname]`,
+				assetFileNames: "[name][extname]"
-				chunkFileNames: `[hash][extname]`,
-				assetFileNames: `[hash][extname]`,
-				preserveModules: false,
-
-				manualChunks: () => {
-					return 'app';
-				}
 			}
 		}
-	},
-	css: {
-		preprocessorOptions: {
-			scss: {
-				quietDeps: true,
-				silenceDeprecations: ['import']
-			}
-		}
-	},
-	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}'],
-		globals: true,
-		environment: 'jsdom'
-	},
-	define: {
-		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 	}
 });