Bump version to 1.6.0

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/docker-publish.yml

@@ -25,7 +25,7 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Install python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: 3.x
 
@@ -38,7 +38,7 @@ jobs:
           run_install: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: 'pnpm'
@@ -96,7 +96,7 @@ jobs:
           run_install: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: 'pnpm'

.github/workflows/docs-publish.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
       - name: Install python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: 3.x
       - name: Check files
@@ -33,7 +33,7 @@ jobs:
       - pre-commit
     steps:
       - uses: actions/checkout@v5
-      - uses: actions/setup-python@v5
+      - uses: actions/setup-python@v6
         with:
           python-version: 3.x
       - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
@@ -59,7 +59,7 @@ jobs:
         run: |
           git config user.name github-actions[bot]
           git config user.email 41898282+github-actions[bot]@users.noreply.github.com
-      - uses: actions/setup-python@v5
+      - uses: actions/setup-python@v6
         with:
           python-version: 3.x
       - run: echo "cache_id=${{github.sha}}" >> $GITHUB_ENV

.github/workflows/repo-maintenance.yml

@@ -18,7 +18,7 @@ jobs:
     name: 'Stale'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         with:
           days-before-stale: 7
           days-before-close: 14
@@ -57,7 +57,7 @@ jobs:
     name: 'Close Answered Discussions'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v7
+      - uses: actions/github-script@v8
         with:
           script: |
             function sleep(ms) {
@@ -113,7 +113,7 @@ jobs:
     name: 'Close Outdated Discussions'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v7
+      - uses: actions/github-script@v8
         with:
           script: |
             function sleep(ms) {
@@ -204,7 +204,7 @@ jobs:
     name: 'Close Unsupported Feature Requests'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v7
+      - uses: actions/github-script@v8
         with:
           script: |
             function sleep(ms) {

docs/configs/docker.md

@@ -271,4 +271,4 @@ You can show the docker stats by clicking the status indicator but this can also
   showStats: true
 ```
 
-Also see the settings for [show docker stats](settings.md#show-docker-stats).
+Also see the settings for [show docker stats](settings.md#show-container-stats).

docs/configs/kubernetes.md

@@ -178,3 +178,32 @@ See [ClusterRole and ClusterRoleBinding](../installation/k8s.md#clusterrole-and-
 ## Caveats
 
 Similarly to Docker service discovery, there currently is no rigid ordering to discovered services and discovered services will be displayed above those specified in the `services.yaml`.
+
+## Adding extra configuration files
+
+Some Homepage features (for example, [Proxmox](../configs/proxmox.md)) require additional configuration files such as `proxmox.yaml`.
+When running Homepage on Kubernetes, these files must be provided via a `ConfigMap` and mounted into the container at `/app/config`.
+
+### ConfigMap example
+
+```yaml
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: homepage
+data:
+  proxmox.yaml: |
+    pve:
+      url: https://proxmox.host.or.ip:8006
+      token: username@pam!Token ID
+      secret: secret
+```
+
+Mount the file into `/app/config` by updating the `Deployment`:
+
+```yaml
+volumeMounts:
+  - mountPath: /app/config/proxmox.yaml
+    name: homepage-config
+    subPath: proxmox.yaml
+```

docs/configs/proxmox.md

@@ -4,10 +4,10 @@ description: Proxmox Configuration
 ---
 
 The Proxmox connection is configured in the `proxmox.yaml` file. See [Create token](#create-token) section below for details on how to generate the required API token.
-You can configure multiple nodes - be sure to use the exact `proxmoxNode` identifier!
+To configure multiple nodes, ensure the key name in the `proxmox.yaml` matches the `proxmoxNode` field used in your service configuration.
 
 ```yaml
-pve:
+pve: # must match your actual Proxmox node name
   url: https://proxmox.host.or.ip:8006
   token: username@pam!Token ID
   secret: secret

docs/configs/services.md

@@ -118,6 +118,47 @@ Each widget can optionally provide a list of which fields should be visible via
       key: apikeyapikeyapikeyapikeyapikey
 ```
 
+### Block Highlighting
+
+Widgets can tint their metric block text automatically based on rules defined alongside the service. Attach a `highlight` section to the widget configuration and map each block to one or more numeric or string rules using the field key (for example, `queued`, `lan_users`).
+
+```yaml
+- Sonarr:
+    icon: sonarr.png
+    href: http://sonarr.host.or.ip
+    widget:
+      type: sonarr
+      url: http://sonarr.host.or.ip
+      key: ${SONARR_API_KEY}
+      highlight:
+        queued:
+          numeric:
+            - level: danger
+              when: gte
+              value: 20
+            - level: warn
+              when: gte
+              value: 5
+            - level: good
+              when: eq
+              value: 0
+        status:
+          string:
+            - level: danger
+              when: regex
+              value: "(failed|import) pending"
+            - level: good
+              when: equals
+              value: "All good"
+        status_code:
+          string:
+            - level: warn
+              when: regex
+              value: "^5\\d{2}$"
+```
+
+Supported numeric operators for the `when` property are `gt`, `gte`, `lt`, `lte`, `eq`, `ne`, `between`, and `outside`. String rules support `equals`, `includes`, `startsWith`, `endsWith`, and `regex`. Each rule can be inverted with `negate: true`, and string rules may pass `caseSensitive: true` or custom regex `flags`. The highlight engine does its best to coerce formatted values, but you will get the most reliable results when you pass plain numbers or strings into `<Block>`.
+
 ## Descriptions
 
 Services may have descriptions,

docs/configs/settings.md

@@ -109,6 +109,20 @@ color: slate
 
 Supported colors are: `slate`, `gray`, `zinc`, `neutral`, `stone`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `red`, `white`
 
+## Block Highlight Levels
+
+You can override the default Tailwind classes applied when a widget highlight rule resolves to the `good`, `warn`, or `danger` level.
+
+```yaml
+blockHighlights:
+  levels:
+    good: "bg-emerald-500/40 text-emerald-950 dark:bg-emerald-900/60 dark:text-emerald-400"
+    warn: "bg-amber-300/30 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200"
+    danger: "bg-rose-700/45 text-rose-200 dark:bg-rose-950/70 dark:text-rose-400"
+```
+
+Any unspecified level falls back to the built-in defaults.
+
 ## Layout
 
 You can configure service and bookmarks sections to be either "column" or "row" based layouts, like so:
@@ -441,6 +455,7 @@ There are a few optional settings for the Quick Launch feature:
 - `showSearchSuggestions`: show search suggestions for the internet search. If this is not specified then the setting will be inherited from the search widget. If it is not specified there either, it will default to false. For custom providers the `suggestionUrl` needs to be set in order for this to work.
 - `provider`: search engine provider. If none is specified it will try to use the provider set for the Search Widget, if neither are present then internet search will be disabled.
 - `hideVisitURL`: disable detecting and offering an option to open URLs. This is false by default, enabling the feature.
+- `mobileButtonPosition`: enables and sets the position of the mobile quicklaunch button. Options are `top-left`, `top-right`, `bottom-left`, `bottom-right`. This is empty by default, disabling the feature.
 
 ```yaml
 quicklaunch:
@@ -485,9 +500,9 @@ logpath: /logfile/path
 
 By default, logs are sent both to `stdout` and to a file at the path specified. This can be changed by setting the `LOG_TARGETS` environment variable to one of `both` (default), `stdout` or `file`.
 
-## Show Docker Stats
+## Show Container Stats
 
-You can show all docker stats expanded in `settings.yaml`:
+You can show all docker or proxmox stats expanded in `settings.yaml`:
 
 ```yaml
 showStats: true

docs/more/sponsors.md

@@ -28,7 +28,7 @@ These companies help the Homepage project by providing services, tools, and reso
   </div>
 
   <div style="margin-bottom: 16px;">
-    <a href="https://crowdin.com/project/homepage"><img src="https://support.crowdin.com/assets/logos/core-logo/png/crowdin-core-logo-cWhite.png" alt="Crowdin" style="max-width: 100%; height: 64px; display: block;" /></a>
+    <a href="https://crowdin.com/project/gethomepage"><img src="https://support.crowdin.com/assets/logos/core-logo/png/crowdin-core-logo-cWhite.png" alt="Crowdin" style="max-width: 100%; height: 64px; display: block;" /></a>
     <p>
       Crowdin provides the translation platform for the project.  Making it easy to translate the project into multiple languages.
     </p>

docs/widgets/authoring/getting-started.md

@@ -62,3 +62,4 @@ To ensure cohesiveness of various widgets, the following should be used as a gui
 - Minimize the number of API calls
 - Avoid the use of custom proxy unless absolutely necessary
 - Widgets should be 'read-only', as in they should not make write changes using the relevant tool's API. Homepage widgets are designed to surface information, not to be a (usually worse) replacement for the tool itself.
+- Widgets should not allow manually overriding the "refresh interval" setting, as misconfigured refresh intervals can easily lead to performance issues for users.

docs/widgets/index.md

@@ -32,7 +32,7 @@ More detail on configuring service widgets can be found in the [Service Widgets
 
 ## Info Widgets
 
-Info widgets are used to display information in the header, often about your system or environment. Info widgets are defined your `widgets.yaml` file. Here's an example:
+Info widgets are used to display information in the header, often about your system or environment. Info widgets are defined in your `widgets.yaml` file. Here's an example:
 
 ```yaml
 - openmeteo:

docs/widgets/services/qbittorrent.md

@@ -16,4 +16,5 @@ widget:
   username: username
   password: password
   enableLeechProgress: true # optional, defaults to false
+  enableLeechSize: true # optional, defaults to false
 ```

docs/widgets/services/unraid.md

@@ -10,11 +10,11 @@ The Unraid widget allows you to monitor the resources of an Unraid server.
 **Minimum Requirements:**
 
 - Unraid 7.2 -or- Unraid Connect plugin 2025.08.19.1850
-- API key with the **GUEST** (read only) role: [Managing API Keys](https://docs.unraid.net/go/managing-api-keys)
+- API key with the **ADMIN** role: [Managing API Keys](https://docs.unraid.net/go/managing-api-keys)
 
 The widget can display metrics for selected Unraid pools. If using one of the "pool" fields, you must also add the pool name to the settings.
 
-**Allowed fields:** `["cpu","memoryPercent","memoryAvailable","memoryUsed","notifications","arrayFreeSpace","arrayUsedSpace","arrayUsedPercent","status","pool1UsedSpace","pool1FreeSpace","pool1UsedPercent","pool2UsedSpace","pool2FreeSpace","pool2UsedPercent","pool3UsedSpace","pool3FreeSpace","pool3UsedPercent","pool4UsedSpace","pool4FreeSpace","pool4UsedPercent"]`
+**Allowed fields:** `["cpu","memoryPercent","memoryAvailable","memoryUsed","notifications","arrayFree","arrayUsedSpace","arrayUsedPercent","status","pool1UsedSpace","pool1FreeSpace","pool1UsedPercent","pool2UsedSpace","pool2FreeSpace","pool2UsedPercent","pool3UsedSpace","pool3FreeSpace","pool3UsedPercent","pool4UsedSpace","pool4FreeSpace","pool4UsedPercent"]`
 
 ```yaml
 widget:

docs/widgets/services/yourspotify.md

@@ -0,0 +1,28 @@
+---
+title: Your Spotify
+description: Your Spotify Widget Configuration
+---
+
+Learn more about [Your Spotify](https://github.com/Yooooomi/your_spotify).
+
+Find your API key under `Settings > Account > Public token`, click `Generate` if not yet generated, copy key after
+`?token=`.
+
+Allowed fields: `["songs", "time", "artists"]`.
+
+```yaml
+widget:
+  type: yourspotify
+  url: http://your-spotify-server.host.or.ip # if using lsio image, add /api/
+  key: apikeyapikeyapikeyapikeyapikey
+  interval: month # optional, defaults to week
+```
+
+#### Interval
+
+Allowed values for `interval`: `day`, `week`, `month`, `year`, `all`.
+
+!!! note
+
+    `interval` is different from predefined intervals you see in `Your Spotify`'s UI.
+    For example, `This week` in UI means _from the start of this week_, here `week` means _past 7 days_.

mkdocs.yml

@@ -176,6 +176,7 @@ nav:
           - widgets/services/wgeasy.md
           - widgets/services/whatsupdocker.md
           - widgets/services/xteve.md
+          - widgets/services/yourspotify.md
           - widgets/services/zabbix.md
       - "Information Widgets":
           - widgets/info/index.md

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homepage",
-  "version": "1.4.6",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -11,14 +11,14 @@
     "telemetry": "next telemetry disable"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.7",
+    "@headlessui/react": "^2.2.9",
     "@kubernetes/client-node": "^1.0.0",
     "classnames": "^2.5.1",
     "compare-versions": "^6.1.1",
     "dockerode": "^4.0.7",
     "follow-redirects": "^1.15.11",
-    "gamedig": "^5.3.1",
-    "i18next": "^24.2.3",
+    "gamedig": "^5.3.2",
+    "i18next": "^25.5.3",
     "ical.js": "^2.1.0",
     "js-yaml": "^4.1.0",
     "json-rpc-2.0": "^1.7.0",
@@ -28,8 +28,8 @@
     "next": "^15.5.2",
     "next-i18next": "^12.1.0",
     "ping": "^0.4.4",
-    "pretty-bytes": "^6.1.1",
-    "raw-body": "^3.0.0",
+    "pretty-bytes": "^7.1.0",
+    "raw-body": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.5.3",
@@ -44,18 +44,18 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/postcss": "^4.1.14",
     "eslint": "^9.25.1",
     "eslint-config-next": "^15.2.4",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-organize-imports": "^4.3.0",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.0.9",
     "typescript": "^5.7.3"

public/locales/af/common.json

@@ -276,7 +276,7 @@
         "pending": "Afwagtend",
         "approved": "Goedgekeur",
         "available": "Beskikbaar",
-        "issues": "Open Issues"
+        "issues": "Oop Kwessies"
     },
     "overseerr": {
         "pending": "Afwagtend",
@@ -1074,45 +1074,45 @@
         "containers": "Houers"
     },
     "filebrowser": {
-        "available": "Available",
-        "used": "Used",
-        "total": "Total"
+        "available": "Beskikbaar",
+        "used": "Gebruik",
+        "total": "Totaal"
     },
     "wallos": {
-        "activeSubscriptions": "Subscriptions",
-        "thisMonthlyCost": "This Month",
-        "nextMonthlyCost": "Next Month",
-        "previousMonthlyCost": "Prev. Month",
-        "nextRenewingSubscription": "Next Payment"
+        "activeSubscriptions": "Intekeninge",
+        "thisMonthlyCost": "Hierdie Maand",
+        "nextMonthlyCost": "Volgende Maand",
+        "previousMonthlyCost": "Vorige Maand",
+        "nextRenewingSubscription": "Volgende paaiement"
     },
     "unraid": {
-        "STARTED": "Started",
-        "STOPPED": "Stopped",
-        "NEW_ARRAY": "New Array",
-        "RECON_DISK": "Reconstructing Disk",
-        "DISABLE_DISK": "Disk Disabled",
-        "SWAP_DSBL": "Swap Disable",
-        "INVALID_EXPANSION": "Invalid Expansion",
-        "PARITY_NOT_BIGGEST": "Parity Not Biggest",
-        "TOO_MANY_MISSING_DISKS": "Too Many Missing Disks",
-        "NEW_DISK_TOO_SMALL": "New Disk Too Small",
-        "NO_DATA_DISKS": "No Data Disks",
-        "notifications": "Notifications",
+        "STARTED": "Begin",
+        "STOPPED": "Gestop",
+        "NEW_ARRAY": "Nuwe Skikking",
+        "RECON_DISK": "Rekonstruksie van Skyf",
+        "DISABLE_DISK": "Skyf Gedeaktiveer",
+        "SWAP_DSBL": "Ruil Gedeaktiveer",
+        "INVALID_EXPANSION": "Ongeldige Uitbreiding",
+        "PARITY_NOT_BIGGEST": "Pariteit nie die grootste nie",
+        "TOO_MANY_MISSING_DISKS": "Te Veel Ontbrekende Skywe",
+        "NEW_DISK_TOO_SMALL": "Nuwe Skyf te Klein",
+        "NO_DATA_DISKS": "Geen Data Skywe",
+        "notifications": "Kennisgewings",
         "status": "Status",
-        "cpu": "CPU",
-        "memoryUsed": "Memory Used",
-        "memoryAvailable": "Memory Available",
-        "arrayUsed": "Array Used",
-        "arrayFree": "Array Free",
-        "poolUsed": "{{pool}} Used",
-        "poolFree": "{{pool}} Free"
+        "cpu": "SVE",
+        "memoryUsed": "Geheue Gebruik",
+        "memoryAvailable": "Geheue Beskikbaar",
+        "arrayUsed": "Skikking Gebruik",
+        "arrayFree": "Skikking Vry",
+        "poolUsed": "{{pool}} Gebruik",
+        "poolFree": "{{pool}} Vry"
     },
     "backrest": {
-        "num_plans": "Plans",
-        "num_success_30": "Successes",
-        "num_failure_30": "Failures",
-        "num_success_latest": "Succeeding",
-        "num_failure_latest": "Failing",
-        "bytes_added_30": "Bytes Added"
+        "num_plans": "Planne",
+        "num_success_30": "Suksesse",
+        "num_failure_30": "Mislukkings",
+        "num_success_latest": "Slaag",
+        "num_failure_latest": "Mislukking",
+        "bytes_added_30": "Grepe bygevoeg"
     }
 }

public/locales/de/common.json

@@ -630,9 +630,9 @@
     },
     "opnsense": {
         "cpu": "CPU-Last",
-        "memory": "Aktiver RAM",
-        "wanUpload": "WAN-Upload",
-        "wanDownload": "WAN-Download"
+        "memory": "RAM aktiv",
+        "wanUpload": "WAN Up",
+        "wanDownload": "WAN Down"
     },
     "moonraker": {
         "printer_state": "Druckerstatus",
@@ -786,7 +786,7 @@
         "downloadCount": "Warteschlange",
         "downloadBytesRemaining": "Verbleibend",
         "downloadTotalBytes": "Größe",
-        "downloadSpeed": "Geschwindigkeit"
+        "downloadSpeed": "Datenrate"
     },
     "kavita": {
         "seriesCount": "Serien",

public/locales/en/common.json

@@ -1114,5 +1114,10 @@
         "num_success_latest": "Succeeding",
         "num_failure_latest": "Failing",
         "bytes_added_30": "Bytes Added"
+    },
+    "yourspotify": {
+      "songs": "Songs",
+      "time":  "Time",
+      "artists": "Artists"
     }
 }

public/locales/pl/common.json

@@ -241,16 +241,16 @@
     "sonarr": {
         "wanted": "Poszukiwane",
         "queued": "W kolejce",
-        "series": "Series",
-        "queue": "Queue",
-        "unknown": "Unknown"
+        "series": "Seriale",
+        "queue": "Kolejka",
+        "unknown": "Nieznany"
     },
     "radarr": {
-        "wanted": "Wanted",
+        "wanted": "Poszukiwane",
         "missing": "Brakujące",
-        "queued": "Queued",
-        "movies": "Movies",
-        "queue": "Queue",
+        "queued": "W kolejce",
+        "movies": "Filmy",
+        "queue": "Kolejka",
         "unknown": "Unknown"
     },
     "lidarr": {
@@ -273,16 +273,16 @@
         "available": "Dostępne"
     },
     "jellyseerr": {
-        "pending": "Pending",
-        "approved": "Approved",
-        "available": "Available",
+        "pending": "Oczekujące",
+        "approved": "Zaakceptowane",
+        "available": "Dostępne",
         "issues": "Open Issues"
     },
     "overseerr": {
-        "pending": "Pending",
+        "pending": "Oczekujące",
         "processing": "Przetwarzane",
-        "approved": "Approved",
-        "available": "Available"
+        "approved": "Zaakceptowane",
+        "available": "Dostępne"
     },
     "netalertx": {
         "total": "Total",
@@ -297,8 +297,8 @@
         "gravity": "Grawitacja"
     },
     "adguard": {
-        "queries": "Queries",
-        "blocked": "Blocked",
+        "queries": "Zapytania",
+        "blocked": "Zablokowane",
         "filtered": "Przefiltrowane",
         "latency": "Opóźnienia"
     },
@@ -313,7 +313,7 @@
         "total": "Total"
     },
     "suwayomi": {
-        "download": "Downloaded",
+        "download": "Pobrano",
         "nondownload": "Niepobrane",
         "read": "Read",
         "unread": "Unread",
@@ -367,7 +367,7 @@
         "unknown": "Unknown"
     },
     "navidrome": {
-        "nothing_streaming": "No Active Streams",
+        "nothing_streaming": "Brak aktywnych strumieni",
         "please_wait": "Proszę czekać"
     },
     "npm": {
@@ -426,26 +426,26 @@
         "unread": "Unread"
     },
     "authentik": {
-        "users": "Users",
+        "users": "Użytkownicy",
         "loginsLast24H": "Logowania (24h)",
         "failedLoginsLast24H": "Nieudane logowania (24h)"
     },
     "proxmox": {
-        "mem": "MEM",
+        "mem": "RAM",
         "cpu": "Procesor",
         "lxc": "Kontenery LXC",
         "vms": "Maszyn wirtualnych"
     },
     "glances": {
         "cpu": "Procesor",
-        "load": "Load",
+        "load": "Obciążenie",
         "wait": "Proszę czekać",
-        "temp": "TEMP",
+        "temp": "TEMP.",
         "_temp": "Temperatura",
         "warn": "Ostrzeżenie",
         "uptime": "UP",
         "total": "Total",
-        "free": "Free",
+        "free": "Wolne",
         "used": "Used",
         "days": "d",
         "hours": "h",
@@ -471,57 +471,57 @@
         "1-day": "Głównie słoneczny",
         "1-night": "Głównie bezchmurny",
         "2-day": "Częściowo pochmurnie",
-        "2-night": "Partly Cloudy",
+        "2-night": "Częściowo pochmurnie",
         "3-day": "Pochmurnie",
-        "3-night": "Cloudy",
+        "3-night": "Pochmurnie",
         "45-day": "Mgliście",
-        "45-night": "Foggy",
-        "48-day": "Foggy",
-        "48-night": "Foggy",
+        "45-night": "Mgliście",
+        "48-day": "Mgliście",
+        "48-night": "Mgliście",
         "51-day": "Lekka mżawka",
-        "51-night": "Light Drizzle",
+        "51-night": "Lekka mżawka",
         "53-day": "Mżawka",
-        "53-night": "Drizzle",
+        "53-night": "Mżawka",
         "55-day": "Gęsta mżawka",
-        "55-night": "Heavy Drizzle",
+        "55-night": "Gęsta mżawka",
         "56-day": "Lekko chłodna mżawka",
-        "56-night": "Light Freezing Drizzle",
+        "56-night": "Lekko chłodna mżawka",
         "57-day": "Chłodna mżawka",
-        "57-night": "Freezing Drizzle",
+        "57-night": "Chłodna mżawka",
         "61-day": "Lekki deszcz",
-        "61-night": "Light Rain",
+        "61-night": "Lekki deszcz",
         "63-day": "Deszcz",
-        "63-night": "Rain",
+        "63-night": "Deszcz",
         "65-day": "Ciężki deszcz",
-        "65-night": "Heavy Rain",
+        "65-night": "Ciężki deszcz",
         "66-day": "Mroźny deszcz",
-        "66-night": "Freezing Rain",
-        "67-day": "Freezing Rain",
-        "67-night": "Freezing Rain",
+        "66-night": "Mroźny deszcz",
+        "67-day": "Mroźny deszcz",
+        "67-night": "Mroźny deszcz",
         "71-day": "Lekki śnieg",
-        "71-night": "Light Snow",
+        "71-night": "Lekki śnieg",
         "73-day": "Śnieg",
-        "73-night": "Snow",
+        "73-night": "Śnieg",
         "75-day": "Ciężki śnieg",
-        "75-night": "Heavy Snow",
+        "75-night": "Ciężki śnieg",
         "77-day": "Ziarnisty śnieg",
-        "77-night": "Snow Grains",
+        "77-night": "Ziarnisty śnieg",
         "80-day": "Lekkie opady",
-        "80-night": "Light Showers",
+        "80-night": "Lekkie opady",
         "81-day": "Opady",
-        "81-night": "Showers",
+        "81-night": "Opady",
         "82-day": "Ciężkie opady",
-        "82-night": "Heavy Showers",
+        "82-night": "Ciężkie opady",
         "85-day": "Opady śniegu",
-        "85-night": "Snow Showers",
-        "86-day": "Snow Showers",
-        "86-night": "Snow Showers",
+        "85-night": "Opady śniegu",
+        "86-day": "Opady śniegu",
+        "86-night": "Opady śniegu",
         "95-day": "Burze z piorunami",
-        "95-night": "Thunderstorm",
+        "95-night": "Burze z piorunami",
         "96-day": "Burza z gradobiciem",
-        "96-night": "Thunderstorm With Hail",
-        "99-day": "Thunderstorm With Hail",
-        "99-night": "Thunderstorm With Hail"
+        "96-night": "Burza z gradobiciem",
+        "99-day": "Burza z gradobiciem",
+        "99-night": "Burza z gradobiciem"
     },
     "homebridge": {
         "available_update": "System",

public/locales/pt_BR/common.json

@@ -63,7 +63,7 @@
         "wlan_users": "Usuários de WLAN",
         "up": "UP",
         "down": "Desligado",
-        "wait": "Please wait",
+        "wait": "Por favor, aguarde",
         "empty_data": "Status do Subsistema desconhecido"
     },
     "docker": {
@@ -83,7 +83,7 @@
         "partial": "Parcial"
     },
     "ping": {
-        "error": "Error",
+        "error": "Erro",
         "ping": "Tempo de resposta",
         "down": "Inativo",
         "up": "Ativo",
@@ -91,11 +91,11 @@
     },
     "siteMonitor": {
         "http_status": "Estado HTTP",
-        "error": "Error",
+        "error": "Erro",
         "response": "Resposta",
-        "down": "Down",
-        "up": "Up",
-        "not_available": "Not Available"
+        "down": "Inativo",
+        "up": "Ativo",
+        "not_available": "Não Disponível"
     },
     "emby": {
         "playing": "A reproduzir",
@@ -112,7 +112,7 @@
         "offline_alt": "Offline",
         "online": "Disponível",
         "total": "Total",
-        "unknown": "Unknown"
+        "unknown": "Desconhecido"
     },
     "evcc": {
         "pv_power": "Produção",
@@ -141,11 +141,11 @@
         "connectionStatusDisconnecting": "Desconectando",
         "connectionStatusDisconnected": "Desconectado",
         "connectionStatusConnected": "Conectado",
-        "uptime": "Uptime",
+        "uptime": "Tempo ativo",
         "maxDown": "Tempo de inatividade máximo",
         "maxUp": "Máx. Acima",
-        "down": "Down",
-        "up": "Up",
+        "down": "Inativo",
+        "up": "Ativo",
         "received": "Recebido",
         "sent": "Enviado",
         "externalIPAddress": "IP Externo",
@@ -168,10 +168,10 @@
         "passes": "Passes"
     },
     "tautulli": {
-        "playing": "Playing",
-        "transcoding": "Transcoding",
-        "bitrate": "Bitrate",
-        "no_active": "No Active Streams",
+        "playing": "Tocando",
+        "transcoding": "Transcodificando",
+        "bitrate": "Taxa de bits",
+        "no_active": "Sem Streams Ativos",
         "plex_connection_error": "Verifique a conexão do Plex"
     },
     "omada": {
@@ -189,28 +189,28 @@
     "plex": {
         "streams": "Streams Ativas",
         "albums": "Álbuns",
-        "movies": "Movies",
+        "movies": "Filmes",
         "tv": "Series de TV"
     },
     "sabnzbd": {
-        "rate": "Rate",
+        "rate": "Taxa",
         "queue": "Fila",
         "timeleft": "Tempo restante"
     },
     "rutorrent": {
         "active": "Ativo",
-        "upload": "Upload",
-        "download": "Download"
+        "upload": "Carregar",
+        "download": "Descarregar"
     },
     "transmission": {
-        "download": "Download",
-        "upload": "Upload",
+        "download": "Descarregar",
+        "upload": "Carregar",
         "leech": "Leech",
         "seed": "Seed"
     },
     "qbittorrent": {
-        "download": "Download",
-        "upload": "Upload",
+        "download": "Descarregar",
+        "upload": "Carregar",
         "leech": "Leech",
         "seed": "Seed"
     },
@@ -223,8 +223,8 @@
         "invalid": "Inválido"
     },
     "deluge": {
-        "download": "Download",
-        "upload": "Upload",
+        "download": "Descarregar",
+        "upload": "Carregar",
         "leech": "Leech",
         "seed": "Seed"
     },
@@ -233,25 +233,25 @@
         "cachemissbytes": "Bytes de Falha de Cache"
     },
     "downloadstation": {
-        "download": "Download",
-        "upload": "Upload",
+        "download": "Descarregar",
+        "upload": "Carregar",
         "leech": "Leech",
         "seed": "Seed"
     },
     "sonarr": {
         "wanted": "Desejada",
         "queued": "Em fila",
-        "series": "Series",
-        "queue": "Queue",
-        "unknown": "Unknown"
+        "series": "Séries",
+        "queue": "Fila",
+        "unknown": "Desconhecido"
     },
     "radarr": {
         "wanted": "Wanted",
         "missing": "Faltando",
-        "queued": "Queued",
-        "movies": "Movies",
-        "queue": "Queue",
-        "unknown": "Unknown"
+        "queued": "Em fila",
+        "movies": "Filmes",
+        "queue": "Fila",
+        "unknown": "Desconhecido"
     },
     "lidarr": {
         "wanted": "Wanted",

public/locales/sr/common.json

@@ -276,7 +276,7 @@
         "pending": "На чекању",
         "approved": "Одобрено",
         "available": "Доступно",
-        "issues": "Open Issues"
+        "issues": "Отворених питања"
     },
     "overseerr": {
         "pending": "На чекању",
@@ -1108,11 +1108,11 @@
         "poolFree": "{{pool}} слободно"
     },
     "backrest": {
-        "num_plans": "Plans",
-        "num_success_30": "Successes",
-        "num_failure_30": "Failures",
-        "num_success_latest": "Succeeding",
-        "num_failure_latest": "Failing",
-        "bytes_added_30": "Bytes Added"
+        "num_plans": "Планови",
+        "num_success_30": "Успешно",
+        "num_failure_30": "Неуспешно",
+        "num_success_latest": "Успевајући",
+        "num_failure_latest": "Неуспешно",
+        "bytes_added_30": "Додати бајтови"
     }
 }

public/locales/zh-Hans/common.json

@@ -367,7 +367,7 @@
         "unknown": "Unknown"
     },
     "navidrome": {
-        "nothing_streaming": "No Active Streams",
+        "nothing_streaming": "",
         "please_wait": "请等待"
     },
     "npm": {

requirements.txt

@@ -1,21 +1,37 @@
 Babel==2.12.1
+backrefs==5.9
+cairocffi==1.7.1
+CairoSVG==2.7.1
 certifi==2023.7.22
+cffi==1.17.1
+cfgv==3.4.0
 charset-normalizer==3.2.0
 click==8.1.7
 colorama==0.4.6
+cssselect2==0.7.0
+defusedxml==0.7.1
+distlib==0.3.9
+filelock==3.17.0
 ghp-import==2.1.0
+identify==2.6.7
 idna==3.4
 Jinja2==3.1.2
 Markdown==3.4.4
 MarkupSafe==2.1.3
 mergedeep==1.3.4
-mkdocs==1.6
-mkdocs-material==9.5.26
+mkdocs==1.6.0
+mkdocs-get-deps==0.2.0
+mkdocs-material==9.6.18
 mkdocs-material-extensions==1.3.1
+mkdocs-redirects==1.2.1
+nodeenv==1.9.1
 packaging==23.1
 paginate==0.5.6
 pathspec==0.11.2
+pillow==10.4.0
 platformdirs==3.10.0
+pre-commit==3.5.0
+pycparser==2.22
 Pygments==2.16.1
 pymdown-extensions==10.3
 python-dateutil==2.8.2
@@ -24,8 +40,8 @@ pyyaml_env_tag==0.1
 regex==2023.8.8
 requests==2.31.0
 six==1.16.0
+tinycss2==1.4.0
 urllib3==2.0.5
+virtualenv==20.29.2
 watchdog==3.0.0
-pre-commit==3.5.0
-mkdocs-material[imaging]==9.5.26
-mkdocs-redirects==1.2.1
+webencodings==0.5.1

src/components/quicklaunch.jsx

@@ -1,13 +1,21 @@
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { FiSearch } from "react-icons/fi";
 import useSWR from "swr";
 import { SettingsContext } from "utils/contexts/settings";
 
 import ResolvedIcon from "./resolvedicon";
 import { getStoredProvider, searchProviders } from "./widgets/search/search";
 
-export default function QuickLaunch({ servicesAndBookmarks, searchString, setSearchString, isOpen, close }) {
+const MOBILE_BUTTON_POSITIONS = {
+  "top-left": "top-4 left-4",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+};
+
+export default function QuickLaunch({ servicesAndBookmarks, searchString, setSearchString, isOpen, setSearching }) {
   const { t } = useTranslation();
 
   const { settings } = useContext(SettingsContext);
@@ -49,6 +57,10 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
     );
   }
 
+  let mobileButtonPosition = settings.quicklaunch?.mobileButtonPosition
+    ? MOBILE_BUTTON_POSITIONS[settings.quicklaunch.mobileButtonPosition]
+    : null;
+
   function openCurrentItem(newWindow) {
     const result = results[currentItemIndex];
     window.open(
@@ -59,13 +71,13 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
   }
 
   const closeAndReset = useCallback(() => {
-    close(false);
+    setSearching(false);
     setTimeout(() => {
       setSearchString("");
       setCurrentItemIndex(null);
       setSearchSuggestions([]);
     }, 200); // delay a little for animations
-  }, [close, setSearchString, setCurrentItemIndex, setSearchSuggestions]);
+  }, [setSearching, setSearchString, setCurrentItemIndex, setSearchSuggestions]);
 
   function handleSearchChange(event) {
     const rawSearchString = event.target.value;
@@ -245,86 +257,98 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
   }
 
   return (
-    <div
-      className={classNames(
-        "relative z-40 ease-in-out duration-300 transition-opacity",
-        hidden && !isOpen && "hidden",
-        !hidden && isOpen && "opacity-100",
-        !isOpen && "opacity-0",
-      )}
-      role="dialog"
-      aria-modal="true"
-    >
-      <div className="fixed inset-0 bg-gray-500 opacity-50" />
-      <div className="fixed inset-0 z-20 overflow-y-auto">
-        <div className="flex min-h-full min-w-full items-start justify-center text-center">
-          <dialog className="mt-[10%] mx-auto min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
-            <input
-              placeholder="Search"
-              className={classNames(
-                results.length > 0 && "rounded-t-md",
-                results.length === 0 && "rounded-md",
-                "w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800",
-              )}
-              type="text"
-              autoCorrect="false"
-              ref={searchField}
-              value={searchString}
-              onChange={handleSearchChange}
-              onKeyDown={handleSearchKeyDown}
-            />
-            {results.length > 0 && (
-              <ul className="max-h-[60vh] overflow-y-auto m-2">
-                {results.map((r, i) => (
-                  <li key={[r.name, r.container, r.app, r.href].filter((s) => s).join("-")}>
-                    <button
-                      type="button"
-                      data-index={i}
-                      onMouseEnter={handleItemHover}
-                      onClick={handleItemClick}
-                      onKeyDown={handleItemKeyDown}
-                      className={classNames(
-                        "flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
-                        i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
-                      )}
-                    >
-                      <div className="flex flex-row items-center mr-4 pointer-events-none">
-                        {(r.icon || r.abbr) && (
-                          <div className="w-5 text-xs mr-4">
-                            {r.icon && <ResolvedIcon icon={r.icon} />}
-                            {r.abbr && r.abbr}
-                          </div>
+    <>
+      <div
+        className={classNames(
+          "relative z-40 ease-in-out duration-300 transition-opacity",
+          hidden && !isOpen && "hidden",
+          !hidden && isOpen && "opacity-100",
+          !isOpen && "opacity-0",
+        )}
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="fixed inset-0 bg-gray-500 opacity-50" />
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full min-w-full items-start justify-center text-center">
+            <dialog className="mt-[10%] mx-auto min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
+              <input
+                placeholder="Search"
+                className={classNames(
+                  results.length > 0 && "rounded-t-md",
+                  results.length === 0 && "rounded-md",
+                  "w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800",
+                )}
+                type="text"
+                autoCorrect="false"
+                ref={searchField}
+                value={searchString}
+                onChange={handleSearchChange}
+                onKeyDown={handleSearchKeyDown}
+              />
+              {results.length > 0 && (
+                <ul className="max-h-[60vh] overflow-y-auto m-2">
+                  {results.map((r, i) => (
+                    <li key={[r.name, r.container, r.app, r.href].filter((s) => s).join("-")}>
+                      <button
+                        type="button"
+                        data-index={i}
+                        onMouseEnter={handleItemHover}
+                        onClick={handleItemClick}
+                        onKeyDown={handleItemKeyDown}
+                        className={classNames(
+                          "flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
+                          i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
                         )}
-                        <div className="flex flex-col md:flex-row text-left items-baseline mr-4 pointer-events-none">
-                          {r.type !== "searchSuggestion" && <span className="mr-4">{r.name}</span>}
-                          {r.type === "searchSuggestion" && (
-                            <div className="flex-nowrap">
-                              <span className="whitespace-pre">
-                                {r.name.indexOf(searchString) === 0 ? searchString : ""}
-                              </span>
-                              <span className="whitespace-pre opacity-50">
-                                {r.name.indexOf(searchString) === 0 ? r.name.substring(searchString.length) : r.name}
-                              </span>
+                      >
+                        <div className="flex flex-row items-center mr-4 pointer-events-none">
+                          {(r.icon || r.abbr) && (
+                            <div className="w-5 text-xs mr-4">
+                              {r.icon && <ResolvedIcon icon={r.icon} />}
+                              {r.abbr && r.abbr}
                             </div>
                           )}
-                          {r.description && (
-                            <span className="text-xs text-theme-600 text-light">
-                              {searchDescriptions && r.priority < 2 ? highlightText(r.description) : r.description}
-                            </span>
-                          )}
+                          <div className="flex flex-col md:flex-row text-left items-baseline mr-4 pointer-events-none">
+                            {r.type !== "searchSuggestion" && <span className="mr-4">{r.name}</span>}
+                            {r.type === "searchSuggestion" && (
+                              <div className="flex-nowrap">
+                                <span className="whitespace-pre">
+                                  {r.name.indexOf(searchString) === 0 ? searchString : ""}
+                                </span>
+                                <span className="whitespace-pre opacity-50">
+                                  {r.name.indexOf(searchString) === 0 ? r.name.substring(searchString.length) : r.name}
+                                </span>
+                              </div>
+                            )}
+                            {r.description && (
+                              <span className="text-xs text-theme-600 text-light">
+                                {searchDescriptions && r.priority < 2 ? highlightText(r.description) : r.description}
+                              </span>
+                            )}
+                          </div>
                         </div>
-                      </div>
-                      <div className="text-xs text-theme-600 font-bold pointer-events-none">
-                        {t(`quicklaunch.${r.type ? r.type.toLowerCase() : "bookmark"}`)}
-                      </div>
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </dialog>
+                        <div className="text-xs text-theme-600 font-bold pointer-events-none">
+                          {t(`quicklaunch.${r.type ? r.type.toLowerCase() : "bookmark"}`)}
+                        </div>
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </dialog>
+          </div>
         </div>
       </div>
-    </div>
+      {mobileButtonPosition && (
+        <button
+          type="button"
+          onClick={setSearching.bind(this, !isOpen)}
+          className={`fixed ${mobileButtonPosition} z-40 p-2 rounded-full sm:hidden text-theme-700 dark:text-theme-200 bg-theme-50 dark:bg-theme-800 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 transition-opacity duration-100`}
+          style={{ opacity: isOpen ? 0 : 1 }}
+        >
+          <FiSearch className="w-4 h-4" />
+        </button>
+      )}
+    </>
   );
 }

src/components/services/widget/block.jsx

@@ -1,16 +1,47 @@
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
+import { useContext, useMemo } from "react";
 
-export default function Block({ value, label }) {
+import { BlockHighlightContext } from "./highlight-context";
+
+import { evaluateHighlight, getHighlightClass } from "utils/highlights";
+
+export default function Block({ value, label, field }) {
   const { t } = useTranslation();
+  const highlightConfig = useContext(BlockHighlightContext);
+
+  const highlight = useMemo(() => {
+    if (!highlightConfig) return null;
+    const labels = Array.isArray(label) ? label : [label];
+    const candidates = [];
+    if (typeof field === "string") candidates.push(field);
+    for (const candidateLabel of labels) {
+      if (typeof candidateLabel === "string") candidates.push(candidateLabel);
+    }
+
+    for (const candidate of candidates) {
+      const result = evaluateHighlight(candidate, value, highlightConfig);
+      if (result) return result;
+    }
+
+    return null;
+  }, [field, label, value, highlightConfig]);
+
+  const highlightClass = useMemo(() => {
+    if (!highlight?.level) return undefined;
+    return getHighlightClass(highlight.level, highlightConfig);
+  }, [highlight, highlightConfig]);
 
   return (
     <div
       className={classNames(
         "bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
         value === undefined ? "animate-pulse" : "",
+        highlightClass,
         "service-block",
       )}
+      data-highlight-level={highlight?.level}
+      data-highlight-source={highlight?.source}
     >
       <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
       <div className="font-bold text-xs uppercase">{t(label)}</div>

src/components/services/widget/container.jsx

@@ -1,7 +1,10 @@
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { SettingsContext } from "utils/contexts/settings";
 
 import Error from "./error";
+import { BlockHighlightContext } from "./highlight-context";
+
+import { buildHighlightConfig } from "utils/highlights";
 
 const ALIASED_WIDGETS = {
   pialert: "netalertx",
@@ -11,6 +14,11 @@ const ALIASED_WIDGETS = {
 export default function Container({ error = false, children, service }) {
   const { settings } = useContext(SettingsContext);
 
+  const highlightConfig = useMemo(
+    () => buildHighlightConfig(settings?.blockHighlights, service?.widget?.highlight, service?.widget?.type),
+    [settings?.blockHighlights, service?.widget?.highlight, service?.widget?.type],
+  );
+
   if (error) {
     if (settings.hideErrors || service.widget.hide_errors) {
       return null;
@@ -51,6 +59,11 @@ export default function Container({ error = false, children, service }) {
       }),
     );
   }
+  const content = <div className="relative flex flex-row w-full service-container">{visibleChildren}</div>;
 
-  return <div className="relative flex flex-row w-full service-container">{visibleChildren}</div>;
+  if (!highlightConfig) {
+    return content;
+  }
+
+  return <BlockHighlightContext.Provider value={highlightConfig}>{content}</BlockHighlightContext.Provider>;
 }

src/components/services/widget/highlight-context.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const BlockHighlightContext = createContext(null);

src/components/widgets/glances/glances.jsx

@@ -113,7 +113,7 @@ export default function Widget({ options }) {
         <Resource
           icon={FaMemory}
           value={t("common.bytes", {
-            value: data.mem.free,
+            value: data.mem.available,
             maximumFractionDigits: 1,
             binary: true,
           })}

src/components/widgets/queue/queueEntry.jsx

@@ -1,4 +1,4 @@
-export default function QueueEntry({ title, activity, timeLeft, progress }) {
+export default function QueueEntry({ title, activity, timeLeft, progress, size }) {
   return (
     <div className="text-theme-700 dark:text-theme-200 relative h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 m-1 px-1 flex">
       <div
@@ -11,6 +11,7 @@ export default function QueueEntry({ title, activity, timeLeft, progress }) {
         <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden text-left">{title}</div>
       </div>
       <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
+        {size && `${size} - `}
         {timeLeft ? `${activity} - ${timeLeft}` : activity}
       </div>
     </div>

src/pages/index.jsx

@@ -417,6 +417,7 @@ function Home({ initialSettings }) {
         )}
         <meta name="msapplication-TileColor" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
         <meta name="theme-color" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
+        <meta name="color-scheme" content="dark light"></meta>
       </Head>
 
       <Script src="/api/config/custom.js" />
@@ -432,7 +433,7 @@ function Home({ initialSettings }) {
           searchString={searchString}
           setSearchString={setSearchString}
           isOpen={searching}
-          close={setSearching}
+          setSearching={setSearching}
         />
         <div
           id="information-widgets"
@@ -499,6 +500,7 @@ function Home({ initialSettings }) {
 
 export default function Wrapper({ initialSettings, fallback }) {
   const { theme } = useContext(ThemeContext);
+  const { color } = useContext(ColorContext);
   let backgroundImage = "";
   let opacity = initialSettings?.backgroundOpacity ?? 0;
   let backgroundBlur = false;
@@ -527,41 +529,59 @@ export default function Wrapper({ initialSettings, fallback }) {
     html.classList.toggle("dark", theme === "dark");
     html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
 
-    html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-")));
-    html.classList.add(`theme-${initialSettings.color || "slate"}`);
+    const desiredThemeClass = `theme-${color || initialSettings.color || "slate"}`;
+    const themeClassesToRemove = Array.from(html.classList).filter(
+      (cls) => cls.startsWith("theme-") && cls !== desiredThemeClass,
+    );
+    if (themeClassesToRemove.length) {
+      html.classList.remove(...themeClassesToRemove);
+    }
+    if (!html.classList.contains(desiredThemeClass)) {
+      html.classList.add(desiredThemeClass);
+    }
 
-    // Remove any previously applied inline styles
-    body.style.backgroundImage = "";
-    body.style.backgroundColor = "";
-    body.style.backgroundAttachment = "";
-  }, [backgroundImage, opacity, theme, initialSettings.color]);
+    if (backgroundImage) {
+      const safeBackgroundImage = backgroundImage.replace(/'/g, "\\'");
+      body.style.backgroundImage = `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${safeBackgroundImage}')`;
+      body.style.backgroundSize = "cover";
+      body.style.backgroundPosition = "center";
+      body.style.backgroundAttachment = "fixed";
+      body.style.backgroundRepeat = "no-repeat";
+      body.style.backgroundColor = "";
+    } else {
+      body.style.backgroundImage = "none";
+      body.style.backgroundColor = "rgb(var(--bg-color))";
+      body.style.backgroundSize = "";
+      body.style.backgroundPosition = "";
+      body.style.backgroundAttachment = "";
+      body.style.backgroundRepeat = "";
+    }
+
+    return () => {
+      body.style.backgroundImage = "";
+      body.style.backgroundColor = "";
+      body.style.backgroundSize = "";
+      body.style.backgroundPosition = "";
+      body.style.backgroundAttachment = "";
+      body.style.backgroundRepeat = "";
+    };
+  }, [backgroundImage, opacity, theme, color, initialSettings.color]);
 
   return (
-    <>
-      {backgroundImage && (
-        <div
-          id="background"
-          aria-hidden="true"
-          style={{
-            backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
-          }}
-        />
-      )}
-      <div id="page_wrapper" className="relative h-full">
-        <div
-          id="inner_wrapper"
-          tabIndex="-1"
-          className={classNames(
-            "w-full h-full overflow-auto",
-            backgroundBlur &&
-              `backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
-            backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
-            backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
-          )}
-        >
-          <Index initialSettings={initialSettings} fallback={fallback} />
-        </div>
+    <div id="page_wrapper" className="relative min-h-screen">
+      <div
+        id="inner_wrapper"
+        tabIndex="-1"
+        className={classNames(
+          "w-full min-h-screen overflow-auto",
+          backgroundBlur &&
+            `backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
+          backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
+          backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
+        )}
+      >
+        <Index initialSettings={initialSettings} fallback={fallback} />
       </div>
-    </>
+    </div>
   );
 }

src/styles/globals.css

@@ -30,18 +30,6 @@ body,
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: rgb(var(--bg-color));
-}
-
-#background {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: scroll;
-  pointer-events: none;
 }
 
 html,

src/utils/config/service-helpers.js

@@ -254,6 +254,7 @@ export function cleanServiceGroups(groups) {
           // all widgets
           fields,
           hideErrors,
+          highlight,
           type,
 
           // azuredevops
@@ -284,6 +285,7 @@ export function cleanServiceGroups(groups) {
 
           // deluge, qbittorrent
           enableLeechProgress,
+          enableLeechSize,
 
           // diskstation
           volume,
@@ -408,6 +410,9 @@ export function cleanServiceGroups(groups) {
           // wgeasy
           threshold,
 
+          // yourspotify
+          interval,
+
           // technitium
           range,
 
@@ -437,6 +442,21 @@ export function cleanServiceGroups(groups) {
           index,
         };
 
+        if (highlight) {
+          let parsedHighlight = highlight;
+          if (typeof highlight === "string") {
+            try {
+              parsedHighlight = JSON.parse(highlight);
+            } catch (e) {
+              logger.error("Invalid highlight configuration detected in config for service '%s'", service.name);
+              parsedHighlight = null;
+            }
+          }
+          if (parsedHighlight && typeof parsedHighlight === "object") {
+            widget.highlight = parsedHighlight;
+          }
+        }
+
         if (type === "azuredevops") {
           if (userEmail) widget.userEmail = userEmail;
           if (repositoryId) widget.repositoryId = repositoryId;
@@ -490,6 +510,7 @@ export function cleanServiceGroups(groups) {
         }
         if (["deluge", "qbittorrent"].includes(type)) {
           if (enableLeechProgress !== undefined) widget.enableLeechProgress = JSON.parse(enableLeechProgress);
+          if (enableLeechSize !== undefined) widget.enableLeechSize = JSON.parse(enableLeechSize);
         }
         if (["opnsense", "pfsense"].includes(type)) {
           if (wan) widget.wan = wan;
@@ -623,6 +644,11 @@ export function cleanServiceGroups(groups) {
           if (pool3) widget.pool3 = pool3;
           if (pool4) widget.pool4 = pool4;
         }
+        if (type === "yourspotify") {
+          if (interval !== undefined) {
+            widget.interval = interval;
+          }
+        }
         return widget;
       });
       return cleanedService;

src/utils/highlights.js

@@ -0,0 +1,257 @@
+const DEFAULT_LEVEL_CLASSES = {
+  good: "bg-emerald-500/40 text-emerald-950 dark:bg-emerald-900/60 dark:text-emerald-400",
+  warn: "bg-amber-300/30 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200",
+  danger: "bg-rose-700/45 text-rose-200 dark:bg-rose-950/70 dark:text-rose-400",
+};
+
+const normalizeFieldKeys = (fields, widgetType) => {
+  if (!fields || typeof fields !== "object") return {};
+
+  return Object.entries(fields).reduce((acc, [key, value]) => {
+    if (value === null || value === undefined) return acc;
+    if (typeof key !== "string") return acc;
+    const trimmedKey = key.trim();
+    if (trimmedKey === "") return acc;
+
+    acc[trimmedKey] = value;
+
+    if (widgetType && !trimmedKey.includes(".")) {
+      const namespacedKey = `${widgetType}.${trimmedKey}`;
+      if (!(namespacedKey in acc)) {
+        acc[namespacedKey] = value;
+      }
+    }
+
+    return acc;
+  }, {});
+};
+
+export const buildHighlightConfig = (globalConfig, widgetConfig, widgetType) => {
+  const levels = {
+    ...DEFAULT_LEVEL_CLASSES,
+    ...(globalConfig?.levels || {}),
+    ...(widgetConfig?.levels || {}),
+  };
+
+  const { levels: _levels, ...fields } = widgetConfig || {};
+  const normalizedFields = normalizeFieldKeys(fields, widgetType);
+
+  const hasLevels = Object.values(levels).some(Boolean);
+  const hasFields = Object.keys(normalizedFields).length > 0;
+
+  if (!hasLevels && !hasFields) return null;
+
+  return { levels, fields: normalizedFields };
+};
+
+const NUMERIC_OPERATORS = {
+  gt: (value, target) => value > target,
+  gte: (value, target) => value >= target,
+  lt: (value, target) => value < target,
+  lte: (value, target) => value <= target,
+  eq: (value, target) => value === target,
+  ne: (value, target) => value !== target,
+};
+
+const STRING_OPERATORS = {
+  equals: (value, target, caseSensitive) =>
+    caseSensitive ? value === target : value.toLowerCase() === target.toLowerCase(),
+  includes: (value, target, caseSensitive) =>
+    caseSensitive ? value.includes(target) : value.toLowerCase().includes(target.toLowerCase()),
+  startsWith: (value, target, caseSensitive) =>
+    caseSensitive ? value.startsWith(target) : value.toLowerCase().startsWith(target.toLowerCase()),
+  endsWith: (value, target, caseSensitive) =>
+    caseSensitive ? value.endsWith(target) : value.toLowerCase().endsWith(target.toLowerCase()),
+};
+
+const toNumber = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) {
+    const trimmed = value.trim();
+    const candidate = Number(trimmed);
+    if (!Number.isNaN(candidate)) return candidate;
+  }
+  return undefined;
+};
+
+const parseNumericValue = (value) => {
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return undefined;
+
+    const direct = Number(trimmed);
+    if (!Number.isNaN(direct)) return direct;
+
+    const compact = trimmed.replace(/\s+/g, "");
+    if (!compact || !/^[-+]?[0-9.,]+$/.test(compact)) return undefined;
+
+    const commaCount = (compact.match(/,/g) || []).length;
+    const dotCount = (compact.match(/\./g) || []).length;
+
+    if (commaCount && dotCount) {
+      const lastComma = compact.lastIndexOf(",");
+      const lastDot = compact.lastIndexOf(".");
+      if (lastComma > lastDot) {
+        const asDecimal = compact.replace(/\./g, "").replace(/,/g, ".");
+        const parsed = Number(asDecimal);
+        return Number.isNaN(parsed) ? undefined : parsed;
+      }
+      const asThousands = compact.replace(/,/g, "");
+      const parsed = Number(asThousands);
+      return Number.isNaN(parsed) ? undefined : parsed;
+    }
+
+    if (commaCount) {
+      const parts = compact.split(",");
+      if (commaCount === 1 && parts[1]?.length <= 2) {
+        const parsed = Number(compact.replace(",", "."));
+        if (!Number.isNaN(parsed)) return parsed;
+      }
+      const isGrouped = parts.length > 1 && parts.slice(1).every((part) => part.length === 3);
+      if (isGrouped) {
+        const parsed = Number(compact.replace(/,/g, ""));
+        if (!Number.isNaN(parsed)) return parsed;
+      }
+      return undefined;
+    }
+
+    if (dotCount) {
+      const parts = compact.split(".");
+      if (dotCount === 1 && parts[1]?.length <= 2) {
+        const parsed = Number(compact);
+        if (!Number.isNaN(parsed)) return parsed;
+      }
+      const isGrouped = parts.length > 1 && parts.slice(1).every((part) => part.length === 3);
+      if (isGrouped) {
+        const parsed = Number(compact.replace(/\./g, ""));
+        if (!Number.isNaN(parsed)) return parsed;
+      }
+      const parsed = Number(compact);
+      return Number.isNaN(parsed) ? undefined : parsed;
+    }
+
+    const parsed = Number(compact);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  }
+
+  if (typeof value === "object" && value !== null && "props" in value) {
+    return undefined;
+  }
+
+  return undefined;
+};
+
+const evaluateNumericRule = (value, rule) => {
+  if (!rule || typeof rule !== "object") return false;
+  const operator = rule.when && NUMERIC_OPERATORS[rule.when];
+  const numericValue = toNumber(rule.value);
+  if (operator && numericValue !== undefined) {
+    const passes = operator(value, numericValue);
+    return rule.negate ? !passes : passes;
+  }
+
+  if (rule.when === "between") {
+    const min = toNumber(rule.min ?? rule.value?.min);
+    const max = toNumber(rule.max ?? rule.value?.max);
+    if (min === undefined && max === undefined) return false;
+    const lowerBound = min ?? Number.NEGATIVE_INFINITY;
+    const upperBound = max ?? Number.POSITIVE_INFINITY;
+    const passes = value >= lowerBound && value <= upperBound;
+    return rule.negate ? !passes : passes;
+  }
+
+  if (rule.when === "outside") {
+    const min = toNumber(rule.min ?? rule.value?.min);
+    const max = toNumber(rule.max ?? rule.value?.max);
+    if (min === undefined && max === undefined) return false;
+    const passes = value < (min ?? Number.NEGATIVE_INFINITY) || value > (max ?? Number.POSITIVE_INFINITY);
+    return rule.negate ? !passes : passes;
+  }
+
+  return false;
+};
+
+const evaluateStringRule = (value, rule) => {
+  if (!rule || typeof rule !== "object") return false;
+  if (rule.when === "regex" && typeof rule.value === "string") {
+    try {
+      const flags = rule.flags || (rule.caseSensitive ? "" : "i");
+      const regex = new RegExp(rule.value, flags);
+      const passes = regex.test(value);
+      return rule.negate ? !passes : passes;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  const operator = rule.when && STRING_OPERATORS[rule.when];
+  if (!operator || typeof rule.value !== "string") return false;
+  const passes = operator(value, rule.value, Boolean(rule.caseSensitive));
+  return rule.negate ? !passes : passes;
+};
+
+const ensureArray = (value) => {
+  if (Array.isArray(value)) return value;
+  if (value === undefined || value === null) return [];
+  return [value];
+};
+
+const findHighlightLevel = (ruleSet, numericValue, stringValue) => {
+  const { numeric, string } = ruleSet;
+
+  if (numeric && numericValue !== undefined) {
+    const numericRules = ensureArray(numeric);
+    const numericCandidates = Array.isArray(numericValue) ? numericValue : [numericValue];
+    for (const candidate of numericCandidates) {
+      for (const rule of numericRules) {
+        if (rule?.level && evaluateNumericRule(candidate, rule)) {
+          return { level: rule.level, source: "numeric", rule };
+        }
+      }
+    }
+  }
+
+  if (string && stringValue !== undefined) {
+    const stringRules = ensureArray(string);
+    for (const rule of stringRules) {
+      if (rule?.level && evaluateStringRule(stringValue, rule)) {
+        return { level: rule.level, source: "string", rule };
+      }
+    }
+  }
+
+  return null;
+};
+
+export const evaluateHighlight = (fieldKey, value, highlightConfig) => {
+  if (!highlightConfig || !fieldKey) return null;
+  const { fields } = highlightConfig;
+  if (!fields || typeof fields !== "object") return null;
+
+  const ruleSet = fields[fieldKey];
+  if (!ruleSet) return null;
+
+  const numericValue = parseNumericValue(value);
+  let stringValue;
+  if (typeof value === "string") {
+    stringValue = value;
+  } else if (typeof value === "number" || typeof value === "bigint") {
+    stringValue = String(value);
+  } else if (typeof value === "boolean") {
+    stringValue = value ? "true" : "false";
+  }
+
+  const normalizedString = typeof stringValue === "string" ? stringValue.trim() : stringValue;
+
+  return findHighlightLevel(ruleSet, numericValue, normalizedString);
+};
+
+export const getHighlightClass = (level, highlightConfig) => {
+  if (!level || !highlightConfig) return undefined;
+  return highlightConfig.levels?.[level];
+};
+
+export const getDefaultHighlightLevels = () => DEFAULT_LEVEL_CLASSES;

src/utils/proxy/handlers/credentialed.js

@@ -8,6 +8,10 @@ import widgets from "widgets/widgets";
 
 const logger = createLogger("credentialedProxyHandler");
 
+function basicAuthHeader(widget) {
+  return `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+}
+
 export default async function credentialedProxyHandler(req, res, map) {
   const { group, service, endpoint, index } = req.query;
 
@@ -61,7 +65,7 @@ export default async function credentialedProxyHandler(req, res, map) {
         if (widget.key) {
           headers.Authorization = `Bearer ${widget.key}`;
         } else {
-          headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+          headers.Authorization = basicAuthHeader(widget);
         }
       } else if (widget.type === "proxmox") {
         headers.Authorization = `PVEAPIToken=${widget.username}=${widget.password}`;
@@ -78,31 +82,31 @@ export default async function credentialedProxyHandler(req, res, map) {
         if (widget.key) {
           headers["NC-Token"] = `${widget.key}`;
         } else {
-          headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+          headers.Authorization = basicAuthHeader(widget);
         }
       } else if (widget.type === "paperlessngx") {
         if (widget.key) {
           headers.Authorization = `Token ${widget.key}`;
         } else {
-          headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+          headers.Authorization = basicAuthHeader(widget);
         }
       } else if (widget.type === "azuredevops") {
         headers.Authorization = `Basic ${Buffer.from(`$:${widget.key}`).toString("base64")}`;
       } else if (widget.type === "glances") {
-        headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+        headers.Authorization = basicAuthHeader(widget);
       } else if (widget.type === "plantit") {
         headers.Key = `${widget.key}`;
       } else if (widget.type === "myspeed") {
         headers.Password = `${widget.password}`;
       } else if (widget.type === "esphome") {
         if (widget.username && widget.password) {
-          headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+          headers.Authorization = basicAuthHeader(widget);
         } else if (widget.key) {
           headers.Cookie = `authenticated=${widget.key}`;
         }
       } else if (widget.type === "wgeasy") {
         if (widget.username && widget.password) {
-          headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+          headers.Authorization = basicAuthHeader(widget);
         } else {
           headers.Authorization = widget.password;
         }

src/widgets/backrest/proxy.js

@@ -24,10 +24,11 @@ function buildResponse(plans) {
 
   plans.forEach((plan) => {
     const statuses = plan?.recentBackups?.status;
+    // See https://github.com/garethgeorge/backrest/blob/4357295a17cb2e71639473c9929a060c4dd1b624/proto/v1/operations.proto#L78-L87
     if (Array.isArray(statuses) && statuses.length > 0) {
       if (statuses[0] === "STATUS_SUCCESS") {
         numSuccessLatest++;
-      } else {
+      } else if (statuses[0] === "STATUS_ERROR") {
         numFailureLatest++;
       }
     }

src/widgets/components.js

@@ -150,6 +150,7 @@ const components = {
   wgeasy: dynamic(() => import("./wgeasy/component")),
   whatsupdocker: dynamic(() => import("./whatsupdocker/component")),
   xteve: dynamic(() => import("./xteve/component")),
+  yourspotify: dynamic(() => import("./yourspotify/component")),
   zabbix: dynamic(() => import("./zabbix/component")),
 };
 

src/widgets/emby/component.jsx

@@ -205,13 +205,14 @@ export default function Component({ service }) {
   const { t } = useTranslation();
 
   const { widget } = service;
+  const enableNowPlaying = service.widget?.enableNowPlaying ?? true;
 
   const {
     data: sessionsData,
     error: sessionsError,
     mutate: sessionMutate,
-  } = useWidgetAPI(widget, "Sessions", {
-    refreshInterval: 5000,
+  } = useWidgetAPI(widget, enableNowPlaying ? "Sessions" : "", {
+    refreshInterval: enableNowPlaying ? 5000 : undefined,
   });
 
   const { data: countData, error: countError } = useWidgetAPI(widget, "Count", {
@@ -239,13 +240,12 @@ export default function Component({ service }) {
   }
 
   const enableBlocks = service.widget?.enableBlocks;
-  const enableNowPlaying = service.widget?.enableNowPlaying ?? true;
   const enableMediaControl = service.widget?.enableMediaControl !== false; // default is true
   const enableUser = !!service.widget?.enableUser; // default is false
   const expandOneStreamToTwoRows = service.widget?.expandOneStreamToTwoRows !== false; // default is true
   const showEpisodeNumber = !!service.widget?.showEpisodeNumber; // default is false
 
-  if (!sessionsData || !countData) {
+  if ((enableNowPlaying && !sessionsData) || !countData) {
     return (
       <>
         {enableBlocks && <CountBlocks service={service} countData={null} />}

src/widgets/glances/metrics/memory.jsx

@@ -27,7 +27,7 @@ export default function Component({ service }) {
   useEffect(() => {
     if (data) {
       setDataPoints((prevDataPoints) => {
-        const newDataPoints = [...prevDataPoints, { a: data.used, b: data.free }];
+        const newDataPoints = [...prevDataPoints, { a: data.used, b: data.available }];
         if (newDataPoints.length > pointsLimit) {
           newDataPoints.shift();
         }
@@ -67,10 +67,10 @@ export default function Component({ service }) {
 
       {data && !error && (
         <Block position="bottom-3 left-3">
-          {data.free && chart && (
+          {data.available && chart && (
             <div className="text-xs opacity-50">
               {t("common.bytes", {
-                value: data.free,
+                value: data.available,
                 maximumFractionDigits: 1,
                 binary: true,
               })}{" "}
@@ -93,10 +93,10 @@ export default function Component({ service }) {
 
       {!chart && (
         <Block position="top-3 right-3">
-          {data.free && (
+          {data.available && (
             <div className="text-xs opacity-50">
               {t("common.bytes", {
-                value: data.free,
+                value: data.available,
                 maximumFractionDigits: 1,
                 binary: true,
               })}{" "}

src/widgets/myspeed/component.jsx

@@ -33,14 +33,6 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block
-        label="myspeed.ping"
-        value={t("common.ms", {
-          value: data[0].ping,
-          style: "unit",
-          unit: "millisecond",
-        })}
-      />
       <Block
         label="myspeed.download"
         value={t("common.bitrate", {
@@ -55,6 +47,14 @@ export default function Component({ service }) {
           decimals: 2,
         })}
       />
+      <Block
+        label="myspeed.ping"
+        value={t("common.ms", {
+          value: data[0].ping,
+          style: "unit",
+          unit: "millisecond",
+        })}
+      />
     </Container>
   );
 }

src/widgets/omada/proxy.js

@@ -66,7 +66,7 @@ export default async function omadaProxyHandler(req, res) {
 
       const controllerVersionMajor = parseInt(controllerVersion.split(".")[0], 10);
 
-      if (![3, 4, 5].includes(controllerVersionMajor)) {
+      if (![3, 4, 5, 6].includes(controllerVersionMajor)) {
         return res.status(500).json({ error: { message: "Error determining controller version", data } });
       }
 
@@ -80,6 +80,7 @@ export default async function omadaProxyHandler(req, res) {
           loginUrl = `${url}/api/v2/login`;
           break;
         case 5:
+        case 6:
           loginUrl = `${url}/${cId}/api/v2/login`;
           break;
         default:
@@ -122,6 +123,7 @@ export default async function omadaProxyHandler(req, res) {
           sitesUrl = `${url}/api/v2/sites?token=${token}&currentPage=1&currentPageSize=1000`;
           break;
         case 5:
+        case 6:
           sitesUrl = `${url}/${cId}/api/v2/sites?token=${token}&currentPage=1&currentPageSize=1000`;
           break;
         default:
@@ -207,8 +209,8 @@ export default async function omadaProxyHandler(req, res) {
         connectedAp = siteResponseData.result.connectedAp;
         activeUser = siteResponseData.result.activeUser;
         alerts = siteResponseData.result.alerts;
-      } else if (controllerVersionMajor === 4 || controllerVersionMajor === 5) {
-        const siteName = controllerVersionMajor === 5 ? site.id : site.key;
+      } else if ([4, 5, 6].includes(controllerVersionMajor)) {
+        const siteName = controllerVersionMajor > 4 ? site.id : site.key;
         const siteStatsUrl =
           controllerVersionMajor === 4
             ? `${url}/api/v2/sites/${siteName}/dashboard/overviewDiagram?token=${token}&currentPage=1&currentPageSize=1000`

src/widgets/qbittorrent/component.jsx

@@ -80,6 +80,11 @@ export default function Component({ service }) {
             timeLeft={t("common.duration", { value: queueEntry.eta })}
             title={queueEntry.name}
             activity={queueEntry.state}
+            size={
+              widget?.enableLeechSize
+                ? t("common.bbytes", { value: queueEntry.size, maximumFractionDigits: 1 })
+                : undefined
+            }
             key={`${queueEntry.name}-${queueEntry.amount_left}`}
           />
         ))}

src/widgets/uptimerobot/component.jsx

@@ -52,6 +52,7 @@ export default function Component({ service }) {
   let status;
   let uptime = 0;
   let logIndex = 0;
+  const hasLogs = Array.isArray(monitor.logs) && monitor.logs.length > 0;
 
   switch (monitor.status) {
     case 0:
@@ -62,7 +63,7 @@ export default function Component({ service }) {
       break;
     case 2:
       status = t("uptimerobot.up");
-      uptime = t("common.duration", { value: monitor.logs[0].duration });
+      uptime = t("common.duration", { value: hasLogs ? monitor.logs[0].duration : 0 });
       logIndex = 1;
       break;
     case 8:
@@ -76,14 +77,14 @@ export default function Component({ service }) {
       break;
   }
 
-  const lastDown = new Date(monitor.logs[logIndex].datetime * 1000).toLocaleString();
-  const downDuration = t("common.duration", { value: monitor.logs[logIndex].duration });
-  const hideDown = logIndex === 1 && monitor.logs[logIndex].type !== 1;
+  const lastDown = hasLogs ? new Date(monitor.logs[logIndex].datetime * 1000).toLocaleString() : "";
+  const downDuration = t("common.duration", { value: hasLogs ? monitor.logs[logIndex].duration : 0 });
+  const hideDown = !hasLogs || (logIndex === 1 && monitor.logs[logIndex].type !== 1);
 
   return (
     <Container service={service}>
       <Block label="uptimerobot.status" value={status} />
-      <Block label="uptimerobot.uptime" value={uptime} />
+      {hasLogs && <Block label="uptimerobot.uptime" value={uptime} />}
       {!hideDown && <Block label="uptimerobot.lastDown" value={lastDown} />}
       {!hideDown && <Block label="uptimerobot.downDuration" value={downDuration} />}
     </Container>

src/widgets/widgets.js

@@ -141,6 +141,7 @@ import watchtower from "./watchtower/widget";
 import wgeasy from "./wgeasy/widget";
 import whatsupdocker from "./whatsupdocker/widget";
 import xteve from "./xteve/widget";
+import yourspotify from "./yourspotify/widget";
 import zabbix from "./zabbix/widget";
 
 const widgets = {
@@ -291,6 +292,7 @@ const widgets = {
   wgeasy,
   whatsupdocker,
   xteve,
+  yourspotify,
   zabbix,
 };
 

src/widgets/yourspotify/component.jsx

@@ -0,0 +1,76 @@
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+import { useTranslation } from "next-i18next";
+import { useMemo } from "react";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+function getStartDate(interval) {
+  const d = new Date();
+  switch (interval) {
+    case "day":
+      d.setDate(d.getDate() - 1);
+      break;
+    case "week":
+      d.setDate(d.getDate() - 7);
+      break;
+    case "month":
+      d.setMonth(d.getMonth() - 1);
+      break;
+    case "year":
+      d.setFullYear(d.getFullYear() - 1);
+      break;
+  }
+  return d.toISOString();
+}
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+
+  const interval = widget?.interval || "week";
+
+  const date = useMemo(() => {
+    return interval === "all" ? "2006-04-23T00:00:00.000Z" : getStartDate(interval);
+  }, [interval]);
+
+  const params = {
+    timeSplit: "all",
+    start: date,
+  };
+
+  const { data: songsListened, error: songsError } = useWidgetAPI(widget, "songs", params);
+  const { data: timeListened, error: timeError } = useWidgetAPI(widget, "time", params);
+  const { data: artistsListened, error: artistsError } = useWidgetAPI(widget, "artists", params);
+
+  if (songsError || timeError || artistsError) {
+    return <Container service={service} error={songsError ?? timeError ?? artistsError} />;
+  }
+
+  if (isNaN(songsListened) || isNaN(timeListened) || isNaN(artistsListened)) {
+    return (
+      <Container service={service}>
+        <Block label="yourspotify.songs" />
+        <Block label="yourspotify.time" />
+        <Block label="yourspotify.artists" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="yourspotify.songs" value={t("common.number", { value: songsListened })} />
+
+      <Block
+        label="yourspotify.time"
+        value={t(
+          timeListened > 0 ? "common.duration" : "common.number", // Display 0 if duration is 0
+          {
+            value: timeListened / 1000,
+          },
+        )}
+      />
+      <Block label="yourspotify.artists" value={t("common.number", { value: artistsListened })} />
+    </Container>
+  );
+}

src/widgets/yourspotify/widget.js

@@ -0,0 +1,27 @@
+import { asJson } from "utils/proxy/api-helpers";
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/spotify/{endpoint}?token={key}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    songs: {
+      endpoint: "songs_per",
+      params: ["start", "timeSplit"],
+      map: (data) => asJson(data)[0]?.count || 0,
+    },
+    time: {
+      endpoint: "time_per",
+      params: ["start", "timeSplit"],
+      map: (data) => asJson(data)[0]?.count || 0,
+    },
+    artists: {
+      endpoint: "different_artists_per",
+      params: ["start", "timeSplit"],
+      map: (data) => asJson(data)[0]?.artists?.length || 0,
+    },
+  },
+};
+
+export default widget;