tweak widget layouts for mobile

fix theme selector on mobile
Translated using Weblate (Dutch)
2025-12-06 21:57:48 +01:00 · 2022-09-11 21:02:33 +03:00 · 2022-09-11 19:11:58 +03:00 · 2022-09-11 16:24:48 +02:00 · 2022-09-11 16:24:48 +02:00 · 2022-09-11 16:24:48 +02:00
43 changed files with 1269 additions and 345 deletions
--- a/3
+++ b/3
@@ -28,9 +28,8 @@ COPY . .
 RUN <<EOF
    set -xe
    yarn next telemetry disable
-    mkdir config
+    mkdir config && echo '-' > config/settings.yaml
    npm run build
-    rm -rf config
 EOF

 # Production image, copy all the files and run next
--- a/README.md
+++ b/README.md
@@ -6,20 +6,23 @@
 ## Features

  * Fast! The entire site is statically generated at build time, so you can expect instant load times.
+  * Images built for AMD64 (x86_64), ARM64, ARMv7 and ARMv6 ([schklom](https://github.com/benphelps/homepage/pull/3) and [modem7](https://github.com/benphelps/homepage/pull/62))
+    - Supports all Raspberry Pi's, most SBCs & Apple Silicon
  * Full i18n support with automatic language detection.
-    - Human translations for English, Norwegian Bokmål ([comradekingu](https://github.com/benphelps/homepage/commits?author=comradekingu)) and Spanish ([AmadeusGraves](https://github.com/benphelps/homepage/commits?author=AmadeusGraves)).
-    - Machine translations for Portuguese, French, German, Russian and Chinese (simplified).
+    - Human translations for English, Norwegian Bokmål ([comradekingu](https://github.com/benphelps/homepage/commits?author=comradekingu)), Spanish ([AmadeusGraves](https://github.com/benphelps/homepage/commits?author=AmadeusGraves)), French (J. Lavoie), Dutch ([deffcolony](https://github.com/benphelps/homepage/commits?author=deffcolony)), Chinese ([nicedc](https://github.com/nicedc)) and Russian ([desolaris](https://github.com/benphelps/homepage/commits?author=desolaris)).
+    - Machine translations for Portuguese and German.
    - Want to help translate? [Join the Weblate project](https://hosted.weblate.org/engage/homepage/).
-  * Complete Docker support, including AMD64, ARM64, ARMv7 and ARMv6 support ([schklom](https://github.com/benphelps/homepage/pull/3) and [modem7](https://github.com/benphelps/homepage/pull/62))
  * Service & Web Bookmarks
  * Docker Integration
-    - Status light + CPU, Memory & Network Reporting *(click on the status light)*
+    - Container status (Running / Stopped) & statistics (CPU, Memory, Network)
+    - Automatic service discovery (via labels)
  * Service Integration
-    - Currently supports Sonarr, Radarr, Ombi, Emby, Jellyfin, Tautulli (Plex), Jellyseerr ([ilusi0n](https://github.com/benphelps/homepage/pull/34)), NZBGet, ruTorrent
+    - Currently supports Sonarr, Radarr, Ombi, Emby, Jellyfin, Tautulli (Plex), Overseerr, Jellyseerr ([ilusi0n](https://github.com/benphelps/homepage/pull/34)), NZBGet, ruTorrent
    - Portainer, Traefik, Speedtest Tracker, PiHole, Nginx Proxy Manager ([aidenpwnz](https://github.com/benphelps/homepage/pull/45))
  * Information & Utility Widgets
    - System Stats (Disk, CPU, Memory)
    - Weather via WeatherAPI.com or OpenWeatherMap ([AlexFullmoon](https://github.com/benphelps/homepage/pull/25))
+      - Automatic location detection (with HTTPS), or manual location selection
    - Search Bar ([aidenpwnz](https://github.com/benphelps/homepage/pull/45))
  * Customizable
    - 21 theme colors with light and dark mode support
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
    "react-i18next": "^11.18.5",
    "react-icons": "^4.4.0",
    "rutorrent-promise": "^2.0.0",
+    "shvl": "^3.0.0",
    "swr": "^1.3.0"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,7 @@ specifiers:
  react-i18next: ^11.18.5
  react-icons: ^4.4.0
  rutorrent-promise: ^2.0.0
+  shvl: ^3.0.0
  swr: ^1.3.0
  tailwindcss: ^3.1.8
  typescript: ^4.8.2
@@ -56,6 +57,7 @@ dependencies:
  react-i18next: 11.18.5_4sidbwfhen5r7txudrvpua6nty
  react-icons: 4.4.0_react@18.2.0
  rutorrent-promise: 2.0.0
+  shvl: 3.0.0
  swr: 1.3.0_react@18.2.0

 devDependencies:
@@ -2354,6 +2356,10 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /shvl/3.0.0:
+    resolution: {integrity: sha512-5IomAM3ykE/g9K9L6lhODc+TpCuN03rrhlboegeKyyfh66DDdpRD5JN37DYhNHH+RaYjiIDx64K/Ms/xQYOR5w==}
+    dev: false
+
  /side-channel/1.0.4:
    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
    dependencies:
--- a/public/locales/de/common.json
+++ b/public/locales/de/common.json
@@ -1,87 +1,100 @@
 {
-  "widget":{
-     "missing_type":"Fehlender Widget-Typ: {{type}}",
-     "api_error":"API-Fehler",
-     "status":"Status"
-  },
-  "search":{
-     "placeholder":"Suche…"
-  },
-  "resources":{
-     "total":"Gesamt",
-     "free":"Frei",
-     "used":"Gebraucht"
-  },
-  "docker":{
-     "rx":"Rx",
-     "tx":"Tx",
-     "mem":"Mem",
-     "cpu":"Zentralprozessor",
-     "offline":"Offline"
-  },
-  "emby":{
-     "playing":"Spielen",
-     "transcoding":"Transcodierung",
-     "bitrate":"Bitrate"
-  },
-  "tautulli":{
-     "playing":"Spielen",
-     "transcoding":"Transcodierung",
-     "bitrate":"Bitrate"
-  },
-  "nzbget":{
-     "rate":"Rate",
-     "remaining":"Verblieben",
-     "downloaded":"Heruntergeladen"
-  },
-  "rutorrent":{
-     "active":"Aktiv",
-     "upload":"Hochladen",
-     "download":"Download"
-  },
-  "sonarr":{
-     "wanted":"Gesucht",
-     "queued":"In Warteschlange",
-     "series":"Serie"
-  },
-  "radarr":{
-     "wanted":"Gesucht",
-     "queued":"In Warteschlange",
-     "movies":"Filme"
-  },
-  "ombi":{
-     "pending":"Ausstehend",
-     "approved":"Genehmigt",
-     "available":"Verfügbar"
-  },
-  "jellyseerr":{
-     "pending":"Ausstehend",
-     "approved":"Genehmigt",
-     "available":"Verfügbar"
-  },
-  "pihole":{
-     "queries":"Abfragen",
-     "blocked":"verstopft",
-     "gravity":"Schwere"
-  },
-  "speedtest":{
-     "upload":"Hochladen",
-     "download":"Download",
-     "ping":"Klingeln"
-  },
-  "portainer":{
-     "running":"Betrieb",
-     "stopped":"Gestoppt",
-     "total":"Gesamt"
-  },
-  "traefik":{
-     "routers":"Router",
-     "services":"Dienstleistungen",
-     "middleware":"Middleware"
-  },
-  "npm":{
-     "enabled":"Ermöglicht",
-     "disabled":"Deaktiviert",
-     "total":"Gesamt"
-  }
+    "widget": {
+        "missing_type": "Fehlender Widget-Typ: {{type}}",
+        "api_error": "API-Fehler",
+        "status": "Status"
+    },
+    "search": {
+        "placeholder": "Suche…"
+    },
+    "resources": {
+        "total": "Gesamt",
+        "free": "Frei",
+        "used": "Gebraucht"
+    },
+    "docker": {
+        "rx": "Rx",
+        "tx": "Tx",
+        "mem": "Mem",
+        "cpu": "Prozessor",
+        "offline": "Offline"
+    },
+    "emby": {
+        "playing": "Spielen",
+        "transcoding": "Transcodierung",
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
+    },
+    "tautulli": {
+        "playing": "Spielen",
+        "transcoding": "Transcodierung",
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
+    },
+    "nzbget": {
+        "rate": "Rate",
+        "remaining": "Verblieben",
+        "downloaded": "Heruntergeladen"
+    },
+    "rutorrent": {
+        "active": "Aktiv",
+        "upload": "Hochladen",
+        "download": "Download"
+    },
+    "sonarr": {
+        "wanted": "Gesucht",
+        "queued": "In Warteschlange",
+        "series": "Serie"
+    },
+    "radarr": {
+        "wanted": "Gesucht",
+        "queued": "In Warteschlange",
+        "movies": "Filme"
+    },
+    "ombi": {
+        "pending": "Ausstehend",
+        "approved": "Genehmigt",
+        "available": "Verfügbar"
+    },
+    "jellyseerr": {
+        "pending": "Ausstehend",
+        "approved": "Genehmigt",
+        "available": "Verfügbar"
+    },
+    "pihole": {
+        "queries": "Abfragen",
+        "blocked": "Blockiert",
+        "gravity": "Gravity"
+    },
+    "speedtest": {
+        "upload": "Upload",
+        "download": "Download",
+        "ping": "Ping"
+    },
+    "portainer": {
+        "running": "Betrieb",
+        "stopped": "Gestoppt",
+        "total": "Gesamt"
+    },
+    "traefik": {
+        "routers": "Router",
+        "services": "Services",
+        "middleware": "Middleware"
+    },
+    "npm": {
+        "enabled": "Aktiviert",
+        "disabled": "Deaktiviert",
+        "total": "Gesamt"
+    },
+    "weather": {
+        "current": "Aktueller Standort",
+        "allow": "Zum Zulassen anklicken",
+        "updating": "Aktualisieren",
+        "wait": "Bitte warten"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
+    }
 }
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -15,6 +15,12 @@
        "api_error": "API Error",
        "status": "Status"
    },
+    "weather": {
+      "current": "Current Location",
+      "allow": "Click to allow",
+      "updating": "Updating",
+      "wait": "Please wait"
+    },
    "search": {
        "placeholder": "Search…"
    },
@@ -33,12 +39,14 @@
    "emby": {
        "playing": "Playing",
        "transcoding": "Transcoding",
-        "bitrate": "Bitrate"
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
    },
    "tautulli": {
        "playing": "Playing",
        "transcoding": "Transcoding",
-        "bitrate": "Bitrate"
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
    },
    "nzbget": {
        "rate": "Rate",
@@ -70,6 +78,11 @@
        "approved": "Approved",
        "available": "Available"
    },
+    "overseerr": {
+      "pending": "Pending",
+      "approved": "Approved",
+      "available": "Available"
+  },
    "pihole": {
        "queries": "Queries",
        "blocked": "Blocked",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -13,8 +13,8 @@
        "used": "Usado"
    },
    "docker": {
-        "rx": "RX",
-        "tx": "TX",
+        "rx": "Recibido",
+        "tx": "Transmitido",
        "mem": "Memoria",
        "cpu": "Procesador",
        "offline": "Desconectado"
@@ -22,12 +22,14 @@
    "emby": {
        "playing": "En ejecución",
        "transcoding": "Transcodificando",
-        "bitrate": "Tasa de Bits"
+        "bitrate": "Tasa de Bits",
+        "no_active": "No Active Streams"
    },
    "tautulli": {
        "playing": "En ejecución",
        "transcoding": "Transcodificación",
-        "bitrate": "Tasa de bits"
+        "bitrate": "Tasa de bits",
+        "no_active": "No Active Streams"
    },
    "nzbget": {
        "rate": "Velocidad",
@@ -83,5 +85,16 @@
        "enabled": "Activado",
        "disabled": "Desactivado",
        "total": "Total"
+    },
+    "weather": {
+        "current": "Ubicación Actual",
+        "allow": "Haga clic para permitir",
+        "updating": "Actualizando",
+        "wait": "Espere, por favor"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
    }
 }
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -5,7 +5,7 @@
        "status": "Statut"
    },
    "search": {
-        "placeholder": "Chercher…"
+        "placeholder": "Recherche…"
    },
    "resources": {
        "total": "Totale",
@@ -22,12 +22,14 @@
    "emby": {
        "playing": "En jouant",
        "transcoding": "Transcoding",
-        "bitrate": "Débiter"
+        "bitrate": "Débiter",
+        "no_active": "No Active Streams"
    },
    "tautulli": {
        "playing": "En jouant",
        "transcoding": "Transcoding",
-        "bitrate": "Débiter"
+        "bitrate": "Débiter",
+        "no_active": "No Active Streams"
    },
    "nzbget": {
        "rate": "Évaluer",
@@ -36,7 +38,7 @@
    },
    "rutorrent": {
        "active": "Active",
-        "upload": "Télécharger",
+        "upload": "Téléverser",
        "download": "Télécharger"
    },
    "sonarr": {
@@ -65,8 +67,8 @@
        "gravity": "La gravité"
    },
    "speedtest": {
-        "upload": "Télécharger",
-        "download": "Télécharger",
+        "upload": "Téléversement",
+        "download": "Téléchargement",
        "ping": "Ping-ping"
    },
    "portainer": {
@@ -94,5 +96,16 @@
        "bitrate": "{{value, bytes(bits: true)}}",
        "percent": "{{value, percent}}",
        "ms": "{{value, number}}"
+    },
+    "weather": {
+        "current": "Localisation actuelle",
+        "allow": "Cliquez pour autoriser",
+        "updating": "Mise à jour",
+        "wait": "Veuillez patienter"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
    }
 }
--- a/public/locales/it/common.json
+++ b/public/locales/it/common.json
@@ -9,12 +9,14 @@
    "emby": {
        "playing": "Playing",
        "transcoding": "Transcoding",
-        "bitrate": "Bitrate"
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
    },
    "tautulli": {
        "playing": "Playing",
        "transcoding": "Transcoding",
-        "bitrate": "Bitrate"
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
    },
    "speedtest": {
        "upload": "Upload",
@@ -83,5 +85,16 @@
        "enabled": "Enabled",
        "disabled": "Disabled",
        "total": "Total"
+    },
+    "weather": {
+        "current": "Current Location",
+        "allow": "Click to allow",
+        "updating": "Updating",
+        "wait": "Please wait"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
    }
 }
--- a/public/locales/nb-NO/common.json
+++ b/public/locales/nb-NO/common.json
@@ -22,12 +22,14 @@
    "emby": {
        "playing": "Spiller",
        "transcoding": "Transkoding",
-        "bitrate": "Bitrate"
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
    },
    "tautulli": {
        "playing": "Spiller",
        "transcoding": "Transkoding",
-        "bitrate": "Bitrate"
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
    },
    "nzbget": {
        "rate": "Takt",
@@ -83,5 +85,16 @@
        "enabled": "Påskrudd",
        "disabled": "Avskrudd",
        "total": "Totalt"
+    },
+    "weather": {
+        "allow": "Klikk for å tillate",
+        "updating": "Oppdaterer …",
+        "wait": "Vent litt …",
+        "current": "Nåværende posisjon"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
    }
 }
--- a/public/locales/nl/common.json
+++ b/public/locales/nl/common.json
@@ -0,0 +1,100 @@
+{
+    "widget": {
+        "missing_type": "Missing Widget Type: {{type}}",
+        "api_error": "API Error",
+        "status": "Status"
+    },
+    "resources": {
+        "total": "Totaal",
+        "free": "Vrij",
+        "used": "Gebruikt"
+    },
+    "docker": {
+        "rx": "RX",
+        "tx": "TX",
+        "mem": "MEM",
+        "cpu": "CPU",
+        "offline": "Offline"
+    },
+    "nzbget": {
+        "rate": "Rate",
+        "remaining": "Overgebleven",
+        "downloaded": "Gedownload"
+    },
+    "speedtest": {
+        "upload": "Upload",
+        "download": "Download",
+        "ping": "Ping"
+    },
+    "portainer": {
+        "running": "Draaiend",
+        "stopped": "Gestopt",
+        "total": "Totaal"
+    },
+    "weather": {
+        "updating": "Updaten",
+        "wait": "Even geduld",
+        "current": "Huidige Locatie",
+        "allow": "Klik om toe te staan"
+    },
+    "search": {
+        "placeholder": "Zoeken…"
+    },
+    "emby": {
+        "playing": "Afspelen",
+        "transcoding": "Transcodering",
+        "bitrate": "Bitsnelheid",
+        "no_active": "No Active Streams"
+    },
+    "tautulli": {
+        "playing": "Afspelen",
+        "transcoding": "Transcodering",
+        "bitrate": "Bitsnelheid",
+        "no_active": "No Active Streams"
+    },
+    "rutorrent": {
+        "active": "Actief",
+        "upload": "Upload",
+        "download": "Download"
+    },
+    "sonarr": {
+        "wanted": "Gezocht",
+        "queued": "In de wachtrij",
+        "series": "Series"
+    },
+    "radarr": {
+        "movies": "Films",
+        "wanted": "Gezocht",
+        "queued": "In de wachtrij"
+    },
+    "ombi": {
+        "pending": "In afwachting",
+        "approved": "Goedgekeurd",
+        "available": "Beschikbaar"
+    },
+    "jellyseerr": {
+        "pending": "In afwachting",
+        "approved": "Goedgekeurd",
+        "available": "Beschikbaar"
+    },
+    "pihole": {
+        "queries": "Queries",
+        "blocked": "Geblokkeerd",
+        "gravity": "Gravity"
+    },
+    "traefik": {
+        "routers": "Routers",
+        "services": "Services",
+        "middleware": "Middleware"
+    },
+    "npm": {
+        "enabled": "Ingeschakeld",
+        "disabled": "Uitgeschakeld",
+        "total": "Totaal"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
+    }
+}
--- a/public/locales/pt/common.json
+++ b/public/locales/pt/common.json
@@ -5,7 +5,7 @@
        "status": "Status"
    },
    "search": {
-        "placeholder": "Procurar…"
+        "placeholder": "Pesquisar…"
    },
    "resources": {
        "total": "Total",
@@ -20,32 +20,34 @@
        "offline": "Desligada"
    },
    "emby": {
-        "playing": "Jogando",
+        "playing": "A reproduzir",
        "transcoding": "Transcodificação",
-        "bitrate": "Taxa de bits"
+        "bitrate": "Taxa de bits",
+        "no_active": "No Active Streams"
    },
    "tautulli": {
-        "playing": "Jogando",
+        "playing": "Reproduzindo",
        "transcoding": "Transcodificação",
-        "bitrate": "Taxa de bits"
+        "bitrate": "Taxa de bits",
+        "no_active": "No Active Streams"
    },
    "nzbget": {
        "rate": "Avaliar",
-        "remaining": "Remanescente",
+        "remaining": "Em falta",
        "downloaded": "Baixada"
    },
    "rutorrent": {
        "active": "Ativa",
        "upload": "Envio",
-        "download": "Download"
+        "download": "ReceçãoDownload"
    },
    "sonarr": {
        "wanted": "Desejada",
-        "queued": "Enfileiradas",
-        "series": "Series"
+        "queued": "Em fila",
+        "series": "Séries"
    },
    "radarr": {
-        "wanted": "Desejada",
+        "wanted": "Desejado",
        "queued": "Enfileiradas",
        "movies": "Filmes"
    },
@@ -94,5 +96,16 @@
        "ms": "{{value, number}}",
        "bitrate": "{{value, bytes(bits: true)}}",
        "percent": "{{value, percent}}"
+    },
+    "weather": {
+        "current": "Localização atual",
+        "allow": "Clicar para permitir",
+        "updating": "A atualizar",
+        "wait": "Por favor aguarde"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
    }
 }
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -10,29 +10,31 @@
    "resources": {
        "total": "Общий",
        "free": "Свободно",
-        "used": "Использовал"
+        "used": "Использовано"
    },
    "docker": {
        "rx": "Rx",
-        "tx": "Техас",
-        "mem": "Мем",
+        "tx": "Тx",
+        "mem": "Память",
        "cpu": "Процессор",
        "offline": "Не в сети"
    },
    "emby": {
-        "playing": "Игра",
+        "playing": "Воспроизведение",
        "transcoding": "Транскодирование",
-        "bitrate": "Битрейт"
+        "bitrate": "Битрейт",
+        "no_active": "No Active Streams"
    },
    "tautulli": {
-        "playing": "Игра",
+        "playing": "Воспроизведение",
        "transcoding": "Транскодирование",
-        "bitrate": "Битрейт"
+        "bitrate": "Битрейт",
+        "no_active": "No Active Streams"
    },
    "nzbget": {
-        "rate": "Оценивать",
-        "remaining": "Оставшийся",
-        "downloaded": "Загружен"
+        "rate": "Оценка",
+        "remaining": "Осталось",
+        "downloaded": "Загружено"
    },
    "rutorrent": {
        "active": "Активный",
@@ -50,38 +52,49 @@
        "movies": "Фильмы"
    },
    "ombi": {
-        "pending": "В ожидании",
-        "approved": "Одобренный",
-        "available": "Доступный"
+        "pending": "Ожидание",
+        "approved": "Одобрено",
+        "available": "Доступно"
    },
    "jellyseerr": {
-        "pending": "В ожидании",
-        "approved": "Одобренный",
-        "available": "Доступный"
+        "pending": "Ожидание",
+        "approved": "Одобрено",
+        "available": "Доступно"
    },
    "pihole": {
        "queries": "Запросы",
-        "blocked": "Заблокированный",
+        "blocked": "Заблокировано",
        "gravity": "Сила тяжести"
    },
    "speedtest": {
-        "upload": "Загрузить",
+        "upload": "Загрузка",
        "download": "Скачать",
        "ping": "пинг"
    },
    "portainer": {
-        "running": "Бег",
-        "stopped": "Остановился",
-        "total": "Общий"
+        "running": "Запущено",
+        "stopped": "Остановлено",
+        "total": "Всего"
    },
    "traefik": {
        "routers": "Маршрутизаторы",
-        "services": "Услуги",
+        "services": "Сервисы",
        "middleware": "Промежуточное программное обеспечение"
    },
    "npm": {
        "enabled": "Включено",
-        "disabled": "Неполноценный",
-        "total": "Общий"
+        "disabled": "Отключено",
+        "total": "Всего"
+    },
+    "weather": {
+        "wait": "Пожалуйста подождите",
+        "current": "Текущее местоположение",
+        "allow": "Click to allow",
+        "updating": "Обновление"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
    }
 }
--- a/public/locales/vi/common.json
+++ b/public/locales/vi/common.json
@@ -0,0 +1,100 @@
+{
+    "widget": {
+        "missing_type": "Thiếu loại Widget: {{type}}",
+        "api_error": "Lỗi API",
+        "status": "Trạng thái"
+    },
+    "search": {
+        "placeholder": "Tìm kiếm…"
+    },
+    "resources": {
+        "total": "Tổng",
+        "free": "Dư",
+        "used": "Đã dùng"
+    },
+    "docker": {
+        "rx": "RX",
+        "tx": "TX",
+        "mem": "BỘ NHỚ",
+        "cpu": "CPU",
+        "offline": "Ngoại tuyến"
+    },
+    "emby": {
+        "playing": "Đang chơi",
+        "transcoding": "Chuyển định dạng",
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
+    },
+    "tautulli": {
+        "playing": "Đang chơi",
+        "transcoding": "Chuyển định dạng",
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams"
+    },
+    "nzbget": {
+        "rate": "Rate",
+        "remaining": "Còn lại",
+        "downloaded": "Đã tải"
+    },
+    "rutorrent": {
+        "active": "Hoạt động",
+        "upload": "Tải lên",
+        "download": "Tải xuống"
+    },
+    "sonarr": {
+        "wanted": "Wanted",
+        "queued": "Queued",
+        "series": "Series"
+    },
+    "radarr": {
+        "wanted": "Wanted",
+        "queued": "Queued",
+        "movies": "Movies"
+    },
+    "ombi": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
+    },
+    "jellyseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
+    },
+    "pihole": {
+        "queries": "Queries",
+        "blocked": "Blocked",
+        "gravity": "Gravity"
+    },
+    "speedtest": {
+        "upload": "Upload",
+        "download": "Download",
+        "ping": "Ping"
+    },
+    "portainer": {
+        "running": "Running",
+        "stopped": "Stopped",
+        "total": "Total"
+    },
+    "traefik": {
+        "routers": "Routers",
+        "services": "Services",
+        "middleware": "Middleware"
+    },
+    "npm": {
+        "enabled": "Enabled",
+        "disabled": "Disabled",
+        "total": "Total"
+    },
+    "weather": {
+        "current": "Current Location",
+        "allow": "Click to allow",
+        "updating": "Updating",
+        "wait": "Please wait"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
+    }
+}
--- a/public/locales/zh-CN/common.json
+++ b/public/locales/zh-CN/common.json
@@ -1,87 +1,100 @@
 {
-  "widget":{
-     "missing_type":"缺少小部件类型：{{type}}",
-     "api_error":"API错误",
-     "status":"地位"
-  },
-  "search":{
-     "placeholder":"搜索…"
-  },
-  "resources":{
-     "total":"全部的",
-     "free":"自由的",
-     "used":"用过的"
-  },
-  "docker":{
-     "rx":"rx",
-     "tx":"TX",
-     "mem":"mem",
-     "cpu":"中央处理器",
-     "offline":"离线"
-  },
-  "emby":{
-     "playing":"玩",
-     "transcoding":"转码",
-     "bitrate":"比特率"
-  },
-  "tautulli":{
-     "playing":"玩",
-     "transcoding":"转码",
-     "bitrate":"比特率"
-  },
-  "nzbget":{
-     "rate":"速度",
-     "remaining":"其余的",
-     "downloaded":"下载"
-  },
-  "rutorrent":{
-     "active":"积极的",
-     "upload":"上传",
-     "download":"下载"
-  },
-  "sonarr":{
-     "wanted":"通缉",
-     "queued":"排队",
-     "series":"系列"
-  },
-  "radarr":{
-     "wanted":"通缉",
-     "queued":"排队",
-     "movies":"电影"
-  },
-  "ombi":{
-     "pending":"待办的",
-     "approved":"得到正式认可的",
-     "available":"可用的"
-  },
-  "jellyseerr":{
-     "pending":"待办的",
-     "approved":"得到正式认可的",
-     "available":"可用的"
-  },
-  "pihole":{
-     "queries":"查询",
-     "blocked":"阻止",
-     "gravity":"重力"
-  },
-  "speedtest":{
-     "upload":"上传",
-     "download":"下载",
-     "ping":"ping"
-  },
-  "portainer":{
-     "running":"跑步",
-     "stopped":"停了下来",
-     "total":"全部的"
-  },
-  "traefik":{
-     "routers":"路由器",
-     "services":"服务",
-     "middleware":"中间件"
-  },
-  "npm":{
-     "enabled":"已启用",
-     "disabled":"禁用",
-     "total":"全部的"
-  }
+    "widget": {
+        "missing_type": "缺少小部件类型：{{type}}",
+        "api_error": "API错误",
+        "status": "地位"
+    },
+    "search": {
+        "placeholder": "搜索…"
+    },
+    "resources": {
+        "total": "全部的",
+        "free": "自由的",
+        "used": "用过的"
+    },
+    "docker": {
+        "rx": "rx",
+        "tx": "TX",
+        "mem": "mem",
+        "cpu": "中央处理器",
+        "offline": "离线"
+    },
+    "emby": {
+        "playing": "玩",
+        "transcoding": "转码",
+        "bitrate": "比特率",
+        "no_active": "No Active Streams"
+    },
+    "tautulli": {
+        "playing": "玩",
+        "transcoding": "转码",
+        "bitrate": "比特率",
+        "no_active": "No Active Streams"
+    },
+    "nzbget": {
+        "rate": "速度",
+        "remaining": "其余的",
+        "downloaded": "下载"
+    },
+    "rutorrent": {
+        "active": "积极的",
+        "upload": "上传",
+        "download": "下载"
+    },
+    "sonarr": {
+        "wanted": "通缉",
+        "queued": "排队",
+        "series": "系列"
+    },
+    "radarr": {
+        "wanted": "通缉",
+        "queued": "排队",
+        "movies": "电影"
+    },
+    "ombi": {
+        "pending": "待办的",
+        "approved": "得到正式认可的",
+        "available": "可用的"
+    },
+    "jellyseerr": {
+        "pending": "待办的",
+        "approved": "得到正式认可的",
+        "available": "可用的"
+    },
+    "pihole": {
+        "queries": "查询",
+        "blocked": "阻止",
+        "gravity": "重力"
+    },
+    "speedtest": {
+        "upload": "上传",
+        "download": "下载",
+        "ping": "ping"
+    },
+    "portainer": {
+        "running": "跑步",
+        "stopped": "停了下来",
+        "total": "全部的"
+    },
+    "traefik": {
+        "routers": "路由器",
+        "services": "服务",
+        "middleware": "中间件"
+    },
+    "npm": {
+        "enabled": "已启用",
+        "disabled": "禁用",
+        "total": "全部的"
+    },
+    "weather": {
+        "current": "Current Location",
+        "allow": "Click to allow",
+        "updating": "Updating",
+        "wait": "Please wait"
+    },
+    "overseerr": {
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
+    }
 }
--- a/src/components/bookmarks/item.jsx
+++ b/src/components/bookmarks/item.jsx
@@ -6,7 +6,7 @@ export default function Item({ bookmark }) {
      <button
        type="button"
        onClick={() => window.open(bookmark.href, "_blank").focus()}
-        className="w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20"
+        className="w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md"
      >
        <div className="flex">
          <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
--- a/src/components/color-toggle.jsx
+++ b/src/components/color-toggle.jsx
@@ -56,7 +56,7 @@ export default function ColorToggle() {
          leaveTo="opacity-0 translate-y-1"
        >
          <Popover.Panel className="absolute -top-[75px] left-0">
-            <div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
+            <div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5 w-[85vw] sm:w-full">
              <div className="relative grid gap-2 p-2 grid-cols-11 bg-white/50 dark:bg-white/10 shadow-black/10 dark:shadow-black/20 rounded-md shadow-md">
                {colors.map((color) => (
                  <button type="button" onClick={() => setColor(color)} key={color}>
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -28,7 +28,7 @@ export default function Item({ service }) {
        <div
          className={`${
            service.href && service.href !== "#" ? "cursor-pointer " : "cursor-default "
-          }transition-all h-15 overflow-hidden mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20`}
+          }transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md`}
        >
          <div className="flex">
            {service.icon && (
@@ -54,7 +54,7 @@ export default function Item({ service }) {
              }}
              className="flex-1 flex items-center justify-between rounded-r-md "
            >
-              <div className="flex-1 px-2 py-2 text-sm">
+              <div className="flex-1 px-2 py-2 text-sm text-left">
                {service.name}
                <p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p>
              </div>
--- a/src/components/services/widget.jsx
+++ b/src/components/services/widget.jsx
@@ -13,6 +13,7 @@ import Jellyfin from "./widgets/service/jellyfin";
 import Speedtest from "./widgets/service/speedtest";
 import Traefik from "./widgets/service/traefik";
 import Jellyseerr from "./widgets/service/jellyseerr";
+import Overseerr from "./widgets/service/overseerr";
 import Npm from "./widgets/service/npm";
 import Tautulli from "./widgets/service/tautulli";

@@ -30,6 +31,7 @@ const widgetMappings = {
  speedtest: Speedtest,
  traefik: Traefik,
  jellyseerr: Jellyseerr,
+  overseerr: Overseerr,
  npm: Npm,
  tautulli: Tautulli,
 };
--- a/src/components/services/widgets/service/emby.jsx
+++ b/src/components/services/widgets/service/emby.jsx
@@ -1,17 +1,148 @@
 import useSWR from "swr";
 import { useTranslation } from "react-i18next";
+import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill } from "react-icons/bs";

 import Widget from "../widget";
-import Block from "../block";

 import { formatApiUrl } from "utils/api-helpers";

+function ticksToTime(ticks) {
+  const milliseconds = ticks / 10000;
+  const seconds = Math.floor((milliseconds / 1000) % 60);
+  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
+  const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
+  return { hours, minutes, seconds };
+}
+
+function ticksToString(ticks) {
+  const { hours, minutes, seconds } = ticksToTime(ticks);
+  const parts = [];
+  if (hours > 0) {
+    parts.push(hours);
+  }
+  parts.push(minutes);
+  parts.push(seconds);
+
+  return parts.map((part) => part.toString().padStart(2, "0")).join(":");
+}
+
+function SingleSessionEntry({ playCommand, session }) {
+  const {
+    NowPlayingItem: { Name, SeriesName, RunTimeTicks },
+    PlayState: { PositionTicks, IsPaused, IsMuted },
+  } = session;
+  const percent = (PositionTicks / RunTimeTicks) * 100;
+
+  return (
+    <>
+      <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+        <div className="text-xs z-10 self-center ml-2">
+          <span>
+            {Name}
+            {SeriesName && ` - ${SeriesName}`}
+          </span>
+        </div>
+        <div className="grow" />
+        <div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
+      </div>
+
+      <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+        <div
+          className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+          style={{
+            width: `${percent}%`,
+          }}
+        />
+        <div className="text-xs z-10 self-center ml-1">
+          {IsPaused && (
+            <BsFillPlayFill
+              onClick={() => {
+                playCommand(session, "Unpause");
+              }}
+              className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+            />
+          )}
+          {!IsPaused && (
+            <BsPauseFill
+              onClick={() => {
+                playCommand(session, "Pause");
+              }}
+              className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+            />
+          )}
+        </div>
+        <div className="grow " />
+        <div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div>
+      </div>
+    </>
+  );
+}
+
+function SessionEntry({ playCommand, session }) {
+  const {
+    NowPlayingItem: { Name, SeriesName, RunTimeTicks },
+    PlayState: { PositionTicks, IsPaused, IsMuted },
+  } = session;
+  const percent = (PositionTicks / RunTimeTicks) * 100;
+
+  return (
+    <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+      <div
+        className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+        style={{
+          width: `${percent}%`,
+        }}
+      />
+      <div className="text-xs z-10 self-center ml-1">
+        {IsPaused && (
+          <BsFillPlayFill
+            onClick={() => {
+              playCommand(session, "Unpause");
+            }}
+            className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+          />
+        )}
+        {!IsPaused && (
+          <BsPauseFill
+            onClick={() => {
+              playCommand(session, "Pause");
+            }}
+            className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+          />
+        )}
+        <span>
+          {Name}
+          {SeriesName && ` - ${SeriesName}`}
+        </span>
+      </div>
+      <div className="grow " />
+      <div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
+      <div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div>
+    </div>
+  );
+}
+
 export default function Emby({ service }) {
  const { t } = useTranslation();

  const config = service.widget;

-  const { data: sessionsData, error: sessionsError } = useSWR(formatApiUrl(config, "Sessions"));
+  const {
+    data: sessionsData,
+    error: sessionsError,
+    mutate: sessionMutate,
+  } = useSWR(formatApiUrl(config, "Sessions"), {
+    refreshInterval: 5000,
+  });
+
+  async function handlePlayCommand(session, command) {
+    const url = formatApiUrl(config, `Sessions/${session.Id}/Playing/${command}`);
+    await fetch(url, {
+      method: "POST",
+    }).then(() => {
+      sessionMutate();
+    });
+  }

  if (sessionsError) {
    return <Widget error={t("widget.api_error")} />;
@@ -19,26 +150,63 @@ export default function Emby({ service }) {

  if (!sessionsData) {
    return (
-      <Widget>
-        <Block label={t("emby.playing")} />
-        <Block label={t("emby.transcoding")} />
-        <Block label={t("emby.bitrate")} />
-      </Widget>
+      <div className="flex flex-col pb-1">
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        </div>
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        </div>
+      </div>
    );
  }

-  const playing = sessionsData.filter((session) => session?.NowPlayingItem);
-  const transcoding = sessionsData.filter(
-    (session) => session?.PlayState && session.PlayState.PlayMethod === "Transcode"
-  );
+  const playing = sessionsData
+    .filter((session) => session?.NowPlayingItem)
+    .sort((a, b) => {
+      if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
+        return 1;
+      }
+      if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
+        return -1;
+      }
+      return 0;
+    });

-  const bitrate = playing.reduce((acc, session) => acc + session.NowPlayingItem.Bitrate, 0);
+  if (playing.length === 0) {
+    return (
+      <div className="flex flex-col pb-1">
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">{t("emby.no_active")}</span>
+        </div>
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (playing.length === 1) {
+    const session = playing[0];
+    return (
+      <div className="flex flex-col pb-1">
+        <SingleSessionEntry
+          playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+          session={session}
+        />
+      </div>
+    );
+  }

  return (
-    <Widget>
-      <Block label={t("emby.playing")} value={playing.length} />
-      <Block label={t("emby.transcoding")} value={transcoding.length} />
-      <Block label={t("emby.bitrate")} value={t("common.bitrate", { value: bitrate })} />
-    </Widget>
+    <div className="flex flex-col pb-1">
+      {playing.map((session) => (
+        <SessionEntry
+          key={session.Id}
+          playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+          session={session}
+        />
+      ))}
+    </div>
  );
 }
--- a/src/components/services/widgets/service/jellyfin.jsx
+++ b/src/components/services/widgets/service/jellyfin.jsx
@@ -1,6 +1,5 @@
 import Emby from "./emby";

-// Jellyfin and Emby share the same API, so proxy the Emby widget to Jellyfin.
 export default function Jellyfin({ service }) {
  return <Emby service={service} />;
 }
--- a/src/components/services/widgets/service/overseerr.jsx
+++ b/src/components/services/widgets/service/overseerr.jsx
@@ -0,0 +1,37 @@
+import useSWR from "swr";
+import { useTranslation } from "react-i18next";
+
+import Widget from "../widget";
+import Block from "../block";
+
+import { formatApiUrl } from "utils/api-helpers";
+
+export default function Overseerr({ service }) {
+  const { t } = useTranslation();
+
+  const config = service.widget;
+
+  const { data: statsData, error: statsError } = useSWR(formatApiUrl(config, `request/count`));
+
+  if (statsError) {
+    return <Widget error={t("widget.api_error")} />;
+  }
+
+  if (!statsData) {
+    return (
+      <Widget>
+        <Block label={t("overseerr.pending")} />
+        <Block label={t("overseerr.approved")} />
+        <Block label={t("overseerr.available")} />
+      </Widget>
+    );
+  }
+
+  return (
+    <Widget>
+      <Block label={t("overseerr.pending")} value={statsData.pending} />
+      <Block label={t("overseerr.approved")} value={statsData.approved} />
+      <Block label={t("overseerr.available")} value={statsData.available} />
+    </Widget>
+  );
+}
--- a/src/components/services/widgets/service/tautulli.jsx
+++ b/src/components/services/widgets/service/tautulli.jsx
@@ -1,39 +1,157 @@
+/* eslint-disable camelcase */
 import useSWR from "swr";
 import { useTranslation } from "react-i18next";
+import { BsFillPlayFill, BsPauseFill } from "react-icons/bs";

 import Widget from "../widget";
-import Block from "../block";

 import { formatApiUrl } from "utils/api-helpers";

+function millisecondsToTime(milliseconds) {
+  const seconds = Math.floor((milliseconds / 1000) % 60);
+  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
+  const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
+  return { hours, minutes, seconds };
+}
+
+function millisecondsToString(milliseconds) {
+  const { hours, minutes, seconds } = millisecondsToTime(milliseconds);
+  const parts = [];
+  if (hours > 0) {
+    parts.push(hours);
+  }
+  parts.push(minutes);
+  parts.push(seconds);
+
+  return parts.map((part) => part.toString().padStart(2, "0")).join(":");
+}
+
+function SingleSessionEntry({ session }) {
+  const { full_title, duration, view_offset, progress_percent, state, year, grandparent_year } = session;
+
+  return (
+    <>
+      <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+        <div className="text-xs z-10 self-center ml-2">
+          <span>{full_title}</span>
+        </div>
+        <div className="grow" />
+        <div className="self-center text-xs flex justify-end mr-2">{year || grandparent_year}</div>
+      </div>
+
+      <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+        <div
+          className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+          style={{
+            width: `${progress_percent}%`,
+          }}
+        />
+        <div className="text-xs z-10 self-center ml-1">
+          {state === "paused" && (
+            <BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
+          )}
+          {state !== "paused" && (
+            <BsPauseFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
+          )}
+        </div>
+        <div className="grow " />
+        <div className="self-center text-xs flex justify-end mr-2">
+          {millisecondsToString(view_offset)} / {millisecondsToString(duration)}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function SessionEntry({ session }) {
+  const { full_title, view_offset, progress_percent, state } = session;
+
+  return (
+    <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+      <div
+        className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+        style={{
+          width: `${progress_percent}%`,
+        }}
+      />
+      <div className="text-xs z-10 self-center ml-1">
+        {state === "paused" && (
+          <BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
+        )}
+        {state !== "paused" && (
+          <BsPauseFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
+        )}
+        <span>{full_title}</span>
+      </div>
+      <div className="grow " />
+      <div className="self-center text-xs flex justify-end mr-2">{millisecondsToString(view_offset)}</div>
+    </div>
+  );
+}
+
 export default function Tautulli({ service }) {
  const { t } = useTranslation();

  const config = service.widget;

-  const { data: statsData, error: statsError } = useSWR(formatApiUrl(config, "get_activity"));
+  const { data: activityData, error: activityError } = useSWR(formatApiUrl(config, "get_activity"), {
+    refreshInterval: 5000,
+  });

-  if (statsError) {
+  if (activityError) {
    return <Widget error={t("widget.api_error")} />;
  }

-  if (!statsData) {
+  if (!activityData) {
    return (
-      <Widget>
-        <Block label={t("tautulli.playing")} />
-        <Block label={t("tautulli.transcoding")} />
-        <Block label={t("tautulli.bitrate")} />
-      </Widget>
+      <div className="flex flex-col pb-1">
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        </div>
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        </div>
+      </div>
    );
  }

-  const { data } = statsData.response;
+  const playing = activityData.response.data.sessions.sort((a, b) => {
+    if (a.view_offset > b.view_offset) {
+      return 1;
+    }
+    if (a.view_offset < b.view_offset) {
+      return -1;
+    }
+    return 0;
+  });
+
+  if (playing.length === 0) {
+    return (
+      <div className="flex flex-col pb-1">
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">{t("tautulli.no_active")}</span>
+        </div>
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (playing.length === 1) {
+    const session = playing[0];
+    return (
+      <div className="flex flex-col pb-1">
+        <SingleSessionEntry session={session} />
+      </div>
+    );
+  }

  return (
-    <Widget>
-      <Block label={t("tautulli.playing")} value={data.stream_count} />
-      <Block label={t("tautulli.transcoding")} value={data.stream_count_transcode} />
-      <Block label={t("tautulli.bitrate")} value={t("common.bitrate", { value: data.total_bandwidth })} />
-    </Widget>
+    <div className="flex flex-col pb-1">
+      {playing.map((session) => (
+        <SessionEntry key={session.Id} session={session} />
+      ))}
+    </div>
  );
 }
--- a/src/components/widgets/openweathermap/weather.jsx
+++ b/src/components/widgets/openweathermap/weather.jsx
@@ -1,25 +1,28 @@
 import useSWR from "swr";
+import { useState } from "react";
 import { BiError } from "react-icons/bi";
+import { WiCloudDown } from "react-icons/wi";
+import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
 import { useTranslation } from "react-i18next";

 import Icon from "./icon";

-export default function OpenWeatherMap({ options }) {
+function Widget({ options }) {
  const { t, i18n } = useTranslation();

  const { data, error } = useSWR(
    `/api/widgets/openweathermap?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`
  );

-  if (error || data?.cod === 401) {
+  if (error || data?.cod === 401 || data?.error) {
    return (
-      <div className="flex flex-col">
+      <div className="flex flex-col justify-center">
        <div className="flex flex-row items-center justify-end">
          <div className="flex flex-col items-center">
            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">API</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
+              <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
            </div>
          </div>
        </div>
@@ -28,11 +31,19 @@ export default function OpenWeatherMap({ options }) {
  }

  if (!data) {
-    return <div className="flex flex-row items-center" />;
-  }
-
-  if (data.error) {
-    return <div className="flex flex-row items-center" />;
+    return (
+      <div className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
+          </div>
+        </div>
+      </div>
+    );
  }

  const unit = options.units === "metric" ? "celsius" : "fahrenheit";
@@ -57,3 +68,55 @@ export default function OpenWeatherMap({ options }) {
    </div>
  );
 }
+
+export default function OpenWeatherMap({ options }) {
+  const { t } = useTranslation();
+  const [location, setLocation] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+
+  if (!location && options.latitude && options.longitude) {
+    setLocation({ latitude: options.latitude, longitude: options.longitude });
+  }
+
+  const requestLocation = () => {
+    setRequesting(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude });
+        setRequesting(false);
+      },
+      () => {
+        setRequesting(false);
+      },
+      {
+        enableHighAccuracy: true,
+        maximumAge: 1000 * 60 * 60 * 3,
+        timeout: 1000 * 30,
+      }
+    );
+  };
+
+  if (!requesting && !location) requestLocation();
+
+  if (!location) {
+    return (
+      <button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            {requesting ? (
+              <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
+            ) : (
+              <MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
+            )}
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
+          </div>
+        </div>
+      </button>
+    );
+  }
+
+  return <Widget options={{ ...location, ...options }} />;
+}
--- a/src/components/widgets/resources/cpu.jsx
+++ b/src/components/widgets/resources/cpu.jsx
@@ -14,7 +14,7 @@ export default function Cpu() {

  if (error || data?.error) {
    return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
        <div className="flex flex-col ml-3 text-left">
          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@@ -25,7 +25,7 @@ export default function Cpu() {

  if (!data) {
    return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
        <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
        <div className="flex flex-col ml-3 text-left">
          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@@ -37,11 +37,12 @@ export default function Cpu() {
  const percent = data.cpu.usage;

  return (
-    <div className="flex-none flex flex-row items-center justify-center">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
      <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left font-mono min-w-[50px]">
+      <div className="flex flex-col ml-3 text-left font-mono min-w-[80px]">
        <div className="text-theme-800 dark:text-theme-200 text-xs">
-          {t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}
+          {t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}{" "}
+          {t("docker.cpu")}
        </div>
        <UsageBar percent={percent} />
      </div>
--- a/src/components/widgets/resources/disk.jsx
+++ b/src/components/widgets/resources/disk.jsx
@@ -14,7 +14,7 @@ export default function Disk({ options }) {

  if (error || data?.error) {
    return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
        <div className="flex flex-col ml-3 text-left">
          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@@ -25,7 +25,7 @@ export default function Disk({ options }) {

  if (!data) {
    return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
        <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
        <div className="flex flex-col ml-3 text-left">
          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@@ -37,9 +37,9 @@ export default function Disk({ options }) {
  const percent = Math.round((data.drive.usedGb / data.drive.totalGb) * 100);

  return (
-    <div className="flex-none flex flex-row items-center justify-center group">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
      <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left ">
+      <div className="flex flex-col ml-3 text-left min-w-[80px]">
        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
          {t("common.bytes", { value: data.drive.freeGb * 1024 * 1024 * 1024 })} {t("resources.free")}
        </span>
--- a/src/components/widgets/resources/memory.jsx
+++ b/src/components/widgets/resources/memory.jsx
@@ -14,7 +14,7 @@ export default function Memory() {

  if (error || data?.error) {
    return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
        <div className="flex flex-col ml-3 text-left">
          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@@ -25,7 +25,7 @@ export default function Memory() {

  if (!data) {
    return (
-      <div className="flex-none flex flex-row items-center justify-center">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
        <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
        <div className="flex flex-col ml-3 text-left">
          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@@ -37,9 +37,9 @@ export default function Memory() {
  const percent = Math.round((data.memory.usedMemMb / data.memory.totalMemMb) * 100);

  return (
-    <div className="flex-none flex flex-row items-center justify-center group">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
      <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left">
+      <div className="flex flex-col ml-3 text-left min-w-[80px]">
        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
          {t("common.bytes", { value: data.memory.freeMemMb * 1024 * 1024 })} {t("resources.free")}
        </span>
--- a/src/components/widgets/resources/resources.jsx
+++ b/src/components/widgets/resources/resources.jsx
@@ -4,11 +4,13 @@ import Memory from "./memory";

 export default function Resources({ options }) {
  return (
-    <div className="flex flex-col max-w:full basis-1/2 sm:basis-auto self-center">
-      <div className="flex flex-row space-x-4 self-center">
+    <div className="flex flex-col max-w:full sm:basis-auto self-center m-auto flex-wrap">
+      <div className="flex flex-row self-center flex-wrap justify-between">
        {options.cpu && <Cpu />}
        {options.memory && <Memory />}
-        {options.disk && <Disk options={options} />}
+        {Array.isArray(options.disk)
+          ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} />)
+          : options.disk && <Disk options={options} />}
      </div>
      {options.label && (
        <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
--- a/src/components/widgets/resources/usage-bar.jsx
+++ b/src/components/widgets/resources/usage-bar.jsx
@@ -1,6 +1,6 @@
 export default function UsageBar({ percent }) {
  return (
-    <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-white/20">
+    <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-white/20 backdrop-blur-md">
      <div
        className="bg-theme-800/70 h-1 rounded-full dark:bg-white/50"
        style={{
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -51,7 +51,7 @@ export default function Search({ options }) {
  }

  return (
-    <form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow" onSubmit={handleSubmit}>
+    <form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow mr-4" onSubmit={handleSubmit}>
      <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
      <input
        type="text"
@@ -62,7 +62,8 @@ export default function Search({ options }) {
          bg-white/50 dark:bg-white/10
          focus:ring-theme-500 dark:focus:ring-white/50
          focus:border-theme-500 dark:focus:border-white/50
-          border border-theme-300 dark:border-theme-200/50"
+          border border-theme-300 dark:border-theme-200/50
+          backdrop-blur-md"
        placeholder={t("search.placeholder")}
        onChange={(s) => setQuery(s.currentTarget.value)}
        required
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -1,25 +1,28 @@
 import useSWR from "swr";
+import { useState } from "react";
 import { BiError } from "react-icons/bi";
+import { WiCloudDown } from "react-icons/wi";
+import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
 import { useTranslation } from "react-i18next";

 import Icon from "./icon";

-export default function WeatherApi({ options }) {
+function Widget({ options }) {
  const { t, i18n } = useTranslation();

  const { data, error } = useSWR(
    `/api/widgets/weather?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`
  );

-  if (error) {
+  if (error || data?.error) {
    return (
-      <div className="flex flex-col">
+      <div className="flex flex-col justify-center">
        <div className="flex flex-row items-center justify-end">
          <div className="flex flex-col items-center">
            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">API</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
+              <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
            </div>
          </div>
        </div>
@@ -28,11 +31,19 @@ export default function WeatherApi({ options }) {
  }

  if (!data) {
-    return <div className="flex flex-row items-center justify-end" />;
-  }
-
-  if (data.error) {
-    return <div className="flex flex-row items-center justify-end" />;
+    return (
+      <div className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
+          </div>
+        </div>
+      </div>
+    );
  }

  const unit = options.units === "metric" ? "celsius" : "fahrenheit";
@@ -58,3 +69,55 @@ export default function WeatherApi({ options }) {
    </div>
  );
 }
+
+export default function WeatherApi({ options }) {
+  const { t } = useTranslation();
+  const [location, setLocation] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+
+  if (!location && options.latitude && options.longitude) {
+    setLocation({ latitude: options.latitude, longitude: options.longitude });
+  }
+
+  const requestLocation = () => {
+    setRequesting(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude });
+        setRequesting(false);
+      },
+      () => {
+        setRequesting(false);
+      },
+      {
+        enableHighAccuracy: true,
+        maximumAge: 1000 * 60 * 60 * 3,
+        timeout: 1000 * 30,
+      }
+    );
+  };
+
+  if (!requesting && !location) requestLocation();
+
+  if (!location) {
+    return (
+      <button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            {requesting ? (
+              <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
+            ) : (
+              <MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
+            )}
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
+          </div>
+        </div>
+      </button>
+    );
+  }
+
+  return <Widget options={{ ...location, ...options }} />;
+}
--- a/src/pages/api/docker/stats/[...service].js
+++ b/src/pages/api/docker/stats/[...service].js
@@ -14,7 +14,7 @@ export default async function handler(req, res) {
  }

  try {
-    const docker = new Docker(await getDockerArguments(containerServer));
+    const docker = new Docker(getDockerArguments(containerServer));
    const containers = await docker.listContainers({
      all: true,
    });
--- a/src/pages/api/docker/status/[...service].js
+++ b/src/pages/api/docker/status/[...service].js
@@ -13,7 +13,7 @@ export default async function handler(req, res) {
  }

  try {
-    const docker = new Docker(await getDockerArguments(containerServer));
+    const docker = new Docker(getDockerArguments(containerServer));
    const containers = await docker.listContainers({
      all: true,
    });
--- a/src/pages/api/services/index.js
+++ b/src/pages/api/services/index.js
@@ -1,40 +1,41 @@
-import { promises as fs } from "fs";
-import path from "path";
-
-import yaml from "js-yaml";
-
-import checkAndCopyConfig from "utils/config";
+/* eslint-disable no-console */
+import { servicesFromConfig, servicesFromDocker, cleanServiceGroups } from "utils/service-helpers";

 export default async function handler(req, res) {
-  checkAndCopyConfig("services.yaml");
+  let discoveredServices;
+  let configuredServices;

-  const servicesYaml = path.join(process.cwd(), "config", "services.yaml");
-  const fileContents = await fs.readFile(servicesYaml, "utf8");
-  const services = yaml.load(fileContents);
+  try {
+    discoveredServices = cleanServiceGroups(await servicesFromDocker());
+  } catch {
+    console.error("Failed to discover services, please check docker.yaml for errors");
+    discoveredServices = [];
+  }

-  // map easy to write YAML objects into easy to consume JS arrays
-  const servicesArray = services.map((group) => ({
-    name: Object.keys(group)[0],
-    services: group[Object.keys(group)[0]].map((entries) => {
-      const { widget, ...service } = entries[Object.keys(entries)[0]];
-      const result = {
-        name: Object.keys(entries)[0],
-        ...service,
-      };
+  try {
+    configuredServices = cleanServiceGroups(await servicesFromConfig());
+  } catch {
+    console.error("Failed to load services.yaml, please check for errors");
+    configuredServices = [];
+  }

-      if (widget) {
-        const { type } = widget;
+  const mergedGroupsNames = [
+    ...new Set([discoveredServices.map((group) => group.name), configuredServices.map((group) => group.name)].flat()),
+  ];

-        result.widget = {
-          type,
-          service_group: Object.keys(group)[0],
-          service_name: Object.keys(entries)[0],
-        };
-      }
+  const mergedGroups = [];

-      return result;
-    }),
-  }));
+  mergedGroupsNames.forEach((groupName) => {
+    const discoveredGroup = discoveredServices.find((group) => group.name === groupName) || { services: [] };
+    const configuredGroup = configuredServices.find((group) => group.name === groupName) || { services: [] };

-  res.send(servicesArray);
+    const mergedGroup = {
+      name: groupName,
+      services: [...discoveredGroup.services, ...configuredGroup.services].filter((service) => service),
+    };
+
+    mergedGroups.push(mergedGroup);
+  });
+
+  res.send(mergedGroups);
 }
--- a/src/pages/api/services/proxy.js
+++ b/src/pages/api/services/proxy.js
@@ -17,6 +17,7 @@ const serviceProxyHandlers = {
  // uses X-API-Key header auth
  portainer: credentialedProxyHandler,
  jellyseerr: credentialedProxyHandler,
+  overseerr: credentialedProxyHandler,
  ombi: credentialedProxyHandler,
  // super specific handlers
  rutorrent: rutorrentProxyHandler,
--- a/src/pages/api/widgets/resources.js
+++ b/src/pages/api/widgets/resources.js
@@ -1,3 +1,5 @@
+import { existsSync } from "fs";
+
 import { cpu, drive, mem } from "node-os-utils";

 export default async function handler(req, res) {
@@ -13,6 +15,12 @@ export default async function handler(req, res) {
  }

  if (type === "disk") {
+    if (!existsSync(target)) {
+      return res.status(404).json({
+        error: "Target not found",
+      });
+    }
+
    return res.status(200).json({
      drive: await drive.info(target || "/"),
    });
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -49,7 +49,7 @@ export default function Home({ settings }) {
        </Head>
        <div className="fixed w-full h-full m-0 p-0" style={wrappedStyle} />
        <div className="relative w-full container m-auto flex flex-col h-screen justify-between">
-          <div className="flex flex-row flex-wrap space-x-0 sm:space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between md:justify-start">
+          <div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
            {widgets && (
              <>
                {widgets
@@ -58,7 +58,7 @@ export default function Home({ settings }) {
                    <Widget key={i} widget={widget} />
                  ))}

-                <div className="flex flex-wrap basis-full space-x-0 sm:space-x-4 grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
+                <div className="ml-4 flex flex-wrap basis-full grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
                  {widgets
                    .filter((widget) => rightAlignedWidgets.includes(widget.type))
                    .map((widget, i) => (
--- a/src/utils/api-helpers.js
+++ b/src/utils/api-helpers.js
@@ -10,6 +10,7 @@ const formats = {
  portainer: `{url}/api/endpoints/{env}/{endpoint}`,
  rutorrent: `{url}/plugins/httprpc/action.php`,
  jellyseerr: `{url}/api/v1/{endpoint}`,
+  overseerr: `{url}/api/v1/{endpoint}`,
  ombi: `{url}/api/v1/{endpoint}`,
  npm: `{url}/api/{endpoint}`,
 };
--- a/src/utils/docker.js
+++ b/src/utils/docker.js
@@ -1,15 +1,15 @@
 import path from "path";
-import { promises as fs } from "fs";
+import { readFileSync } from "fs";

 import yaml from "js-yaml";

 import checkAndCopyConfig from "utils/config";

-export default async function getDockerArguments(server) {
+export default function getDockerArguments(server) {
  checkAndCopyConfig("docker.yaml");

  const configFile = path.join(process.cwd(), "config", "docker.yaml");
-  const configData = await fs.readFile(configFile, "utf8");
+  const configData = readFileSync(configFile, "utf8");
  const servers = yaml.load(configData);

  if (!server) {
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -11,7 +11,7 @@ i18n
  .init({
    fallbackLng: "en",
    ns: ["common"],
-    debug: process.env.NODE_ENV === "development",
+    // debug: process.env.NODE_ENV === "development",
    defaultNS: "common",
    nonExplicitSupportedLngs: true,
    interpolation: {
--- a/src/utils/proxies/credentialed.js
+++ b/src/utils/proxies/credentialed.js
@@ -11,6 +11,7 @@ export default async function credentialedProxyHandler(req, res) {
    if (widget) {
      const url = new URL(formatApiCall(widget.type, { endpoint, ...widget }));
      const [status, contentType, data] = await httpProxy(url, {
+        method: req.method,
        withCredentials: true,
        credentials: "include",
        headers: {
@@ -19,6 +20,10 @@ export default async function credentialedProxyHandler(req, res) {
        },
      });

+      if (status === 204 || status === 304) {
+        return res.status(status).end();
+      }
+
      if (contentType) res.setHeader("Content-Type", contentType);
      return res.status(status).send(data);
    }
--- a/src/utils/proxies/generic.js
+++ b/src/utils/proxies/generic.js
@@ -10,9 +10,16 @@ export default async function genericProxyHandler(req, res) {

    if (widget) {
      const url = new URL(formatApiCall(widget.type, { endpoint, ...widget }));
-      const [status, contentType, data] = await httpProxy(url);
+      const [status, contentType, data] = await httpProxy(url, {
+        method: req.method,
+      });

      if (contentType) res.setHeader("Content-Type", contentType);
+
+      if (status === 204 || status === 304) {
+        return res.status(status).end();
+      }
+
      return res.status(status).send(data);
    }
  }
--- a/src/utils/service-helpers.js
+++ b/src/utils/service-helpers.js
@@ -2,12 +2,23 @@ import { promises as fs } from "fs";
 import path from "path";

 import yaml from "js-yaml";
+import Docker from "dockerode";
+import * as shvl from "shvl";
+
+import checkAndCopyConfig from "utils/config";
+import getDockerArguments from "utils/docker";
+
+export async function servicesFromConfig() {
+  checkAndCopyConfig("services.yaml");

-export default async function getServiceWidget(group, service) {
  const servicesYaml = path.join(process.cwd(), "config", "services.yaml");
  const fileContents = await fs.readFile(servicesYaml, "utf8");
  const services = yaml.load(fileContents);

+  if (!services) {
+    return [];
+  }
+
  // map easy to write YAML objects into easy to consume JS arrays
  const servicesArray = services.map((servicesGroup) => ({
    name: Object.keys(servicesGroup)[0],
@@ -17,7 +28,106 @@ export default async function getServiceWidget(group, service) {
    })),
  }));

-  const serviceGroup = servicesArray.find((g) => g.name === group);
+  return servicesArray;
+}
+
+export async function servicesFromDocker() {
+  checkAndCopyConfig("docker.yaml");
+
+  const dockerYaml = path.join(process.cwd(), "config", "docker.yaml");
+  const dockerFileContents = await fs.readFile(dockerYaml, "utf8");
+  const servers = yaml.load(dockerFileContents);
+
+  if (!servers) {
+    return [];
+  }
+
+  const serviceServers = await Promise.all(
+    Object.keys(servers).map(async (serverName) => {
+      const docker = new Docker(getDockerArguments(serverName));
+      const containers = await docker.listContainers({
+        all: true,
+      });
+
+      // bad docker connections can result in a <Buffer ...> object?
+      // in any case, this ensures the result is the expected array
+      if (!Array.isArray(containers)) {
+        return [];
+      }
+
+      const discovered = containers.map((container) => {
+        let constructedService = null;
+
+        Object.keys(container.Labels).forEach((label) => {
+          if (label.startsWith("homepage")) {
+            if (!constructedService) {
+              constructedService = {
+                container: container.Names[0].replace(/^\//, ""),
+                server: serverName,
+              };
+            }
+            shvl.set(constructedService, label.replace("homepage.", ""), container.Labels[label]);
+          }
+        });
+
+        return constructedService;
+      });
+
+      return { server: serverName, services: discovered.filter((filteredService) => filteredService) };
+    })
+  );
+
+  const mappedServiceGroups = [];
+
+  serviceServers.forEach((server) => {
+    server.services.forEach((serverService) => {
+      let serverGroup = mappedServiceGroups.find((searchedGroup) => searchedGroup.name === serverService.group);
+      if (!serverGroup) {
+        mappedServiceGroups.push({
+          name: serverService.group,
+          services: [],
+        });
+        serverGroup = mappedServiceGroups[mappedServiceGroups.length - 1];
+      }
+
+      const { name: serviceName, group: serverServiceGroup, ...pushedService } = serverService;
+      const result = {
+        name: serviceName,
+        ...pushedService,
+      };
+
+      serverGroup.services.push(result);
+    });
+  });
+
+  return mappedServiceGroups;
+}
+
+export function cleanServiceGroups(groups) {
+  return groups.map((serviceGroup) => ({
+    name: serviceGroup.name,
+    services: serviceGroup.services.map((service) => {
+      const cleanedService = { ...service };
+
+      if (cleanedService.widget) {
+        const { type } = cleanedService.widget;
+
+        cleanedService.widget = {
+          type,
+          service_name: service.name,
+          service_group: serviceGroup.name,
+        };
+      }
+
+      return cleanedService;
+    }),
+  }));
+}
+
+export default async function getServiceWidget(group, service) {
+  const configuredServices = await servicesFromConfig();
+
+  const serviceGroup = configuredServices.find((g) => g.name === group);
  if (serviceGroup) {
    const serviceEntry = serviceGroup.services.find((s) => s.name === service);
    if (serviceEntry) {
@@ -26,5 +136,16 @@ export default async function getServiceWidget(group, service) {
    }
  }

+  const discoveredServices = await servicesFromDocker();
+
+  const dockerServiceGroup = discoveredServices.find((g) => g.name === group);
+  if (dockerServiceGroup) {
+    const dockerServiceEntry = dockerServiceGroup.services.find((s) => s.name === service);
+    if (dockerServiceEntry) {
+      const { widget } = dockerServiceEntry;
+      return widget;
+    }
+  }
+
  return false;
 }
Author	SHA1	Message	Date
Ben Phelps	ffbb1f5f0b	tweak widget layouts for mobile	2022-09-11 21:02:33 +03:00
Ben Phelps	ad53119088	fix theme selector on mobile	2022-09-11 19:11:58 +03:00
Anonymous	fe1c525fb7	Translated using Weblate (Dutch) Currently translated at 88.4% (61 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nl/	2022-09-11 16:24:48 +02:00
Anonymous	323375e8e4	Translated using Weblate (Vietnamese) Currently translated at 46.3% (32 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/vi/	2022-09-11 16:24:48 +02:00
Anonymous	8af27ea86d	Translated using Weblate (Norwegian Bokmål) Currently translated at 92.7% (64 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nb_NO/	2022-09-11 16:24:48 +02:00
Anonymous	9335be0049	Translated using Weblate (Italian) Currently translated at 13.0% (9 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/it/	2022-09-11 16:24:47 +02:00
Anonymous	8e0f265080	Translated using Weblate (Chinese (Simplified)) Currently translated at 86.9% (60 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/zh_Hans/	2022-09-11 16:24:47 +02:00
Anonymous	ae357159ef	Translated using Weblate (Russian) Currently translated at 14.4% (10 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ru/	2022-09-11 16:24:47 +02:00
Anonymous	387d40910f	Translated using Weblate (Portuguese) Currently translated at 30.4% (21 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt/	2022-09-11 16:24:47 +02:00
Anonymous	5344485a4f	Translated using Weblate (French) Currently translated at 26.0% (18 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/fr/	2022-09-11 16:24:46 +02:00
Anonymous	21f2f2a215	Translated using Weblate (Spanish) Currently translated at 92.7% (64 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/	2022-09-11 16:24:46 +02:00
Anonymous	9586fac665	Translated using Weblate (German) Currently translated at 92.7% (64 of 69 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/de/	2022-09-11 16:24:46 +02:00
Ben Phelps	4aedda7ba2	add Overseerr widget	2022-09-11 17:24:33 +03:00
Ben Phelps	f79213c9d3	update language attributions	2022-09-11 17:24:12 +03:00
Anonymous	eeddcb26a0	Translated using Weblate (Dutch) Currently translated at 92.4% (61 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nl/	2022-09-11 16:02:46 +02:00
Anonymous	725922db78	Translated using Weblate (Vietnamese) Currently translated at 48.4% (32 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/vi/	2022-09-11 16:02:46 +02:00
Anonymous	1846dcaba9	Translated using Weblate (Norwegian Bokmål) Currently translated at 96.9% (64 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nb_NO/	2022-09-11 16:02:45 +02:00
Anonymous	ab96d88ebe	Translated using Weblate (Italian) Currently translated at 13.6% (9 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/it/	2022-09-11 16:02:45 +02:00
Anonymous	a3bf28915d	Translated using Weblate (Chinese (Simplified)) Currently translated at 90.9% (60 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/zh_Hans/	2022-09-11 16:02:45 +02:00
Anonymous	47920a5f7a	Translated using Weblate (Russian) Currently translated at 15.1% (10 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ru/	2022-09-11 16:02:45 +02:00
Anonymous	1c10903823	Translated using Weblate (Portuguese) Currently translated at 31.8% (21 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt/	2022-09-11 16:02:45 +02:00
Anonymous	96e4133517	Translated using Weblate (French) Currently translated at 27.2% (18 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/fr/	2022-09-11 16:02:44 +02:00
Anonymous	8b5167a911	Translated using Weblate (Spanish) Currently translated at 96.9% (64 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/	2022-09-11 16:02:44 +02:00
Anonymous	45edab5d88	Translated using Weblate (German) Currently translated at 96.9% (64 of 66 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/de/	2022-09-11 16:02:44 +02:00
desolaris	b4375fb6fc	Translated using Weblate (Russian) Currently translated at 15.6% (10 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ru/	2022-09-11 16:02:39 +02:00
Ben Phelps	bd2b28a7ac	redesigned media streaming widgets	2022-09-11 17:01:51 +03:00
Ben Phelps	53149df5f1	handle proxy methods other than GET	2022-09-11 14:30:28 +03:00
Ben Phelps	bc2025b3ba	handle 204 and 304 proxy responses	2022-09-11 14:30:14 +03:00
Ben Phelps	236450f6f1	add error logging to services fetching	2022-09-11 14:28:29 +03:00
Ben Phelps	fb9e03b31d	attempt to fix layout shift on resource widgets	2022-09-11 14:28:12 +03:00
Ben Phelps	31ccb9c933	fix no disk case	2022-09-11 14:21:16 +03:00
Ben Phelps	6e01a743df	support array of disks, for disk resource widget	2022-09-11 14:13:58 +03:00
Ben Phelps	ed65c89516	blur backdrops for better background image support	2022-09-11 13:46:01 +03:00
Ben Phelps	b8b8dad9fb	Update README.md	2022-09-11 11:35:00 +03:00
Ben Phelps	690d17e132	Merge branch 'main' of github.com:benphelps/homepage	2022-09-11 11:34:00 +03:00
Ben Phelps	a1e9912b36	update readme	2022-09-11 11:33:36 +03:00
deffcolony	26914bfb09	Translated using Weblate (Dutch) Currently translated at 95.3% (61 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nl/	2022-09-11 10:23:22 +02:00
J. Lavoie	079fdb3011	Translated using Weblate (French) Currently translated at 28.1% (18 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/fr/	2022-09-11 10:23:22 +02:00
Ángel Fernández Sánchez	102cdbd53a	Translated using Weblate (Spanish) Currently translated at 100.0% (64 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/	2022-09-11 10:23:22 +02:00
Ben Phelps	d861264ecf	fix error case cause failure to load anything	2022-09-11 11:13:54 +03:00
Ben Phelps	e3237b9022	fix text alignment	2022-09-10 21:43:14 +03:00
Ben Phelps	3882dd4f5a	fix cases where configurations are empty	2022-09-09 22:01:01 +03:00
Ben Phelps	d66326b41d	implement docker service discovery via labels	2022-09-09 21:53:05 +03:00
Anonymous	ef1c5dbcc9	Translated using Weblate (Dutch) Currently translated at 100.0% (0 of 0 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nl/	2022-09-09 14:59:59 +02:00
Allan Nordhøy	c45c8e93de	Translated using Weblate (Norwegian Bokmål) Currently translated at 100.0% (64 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nb_NO/	2022-09-09 14:59:58 +02:00
Francisco Coelho	1e93bf3ec4	Translated using Weblate (Portuguese) Currently translated at 32.8% (21 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt/	2022-09-09 14:59:58 +02:00
Bernhard Großer	4bff209bd7	Translated using Weblate (German) Currently translated at 100.0% (64 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/de/	2022-09-09 14:59:58 +02:00
Ben Phelps	e5ee937c38	Added translation using Weblate (Dutch)	2022-09-09 14:59:54 +02:00
Ben Phelps	c418efe007	fix fallback to / in disk resource widget	2022-09-09 15:27:42 +03:00
Ben Phelps	5677254b46	add new weather feature to readme	2022-09-09 13:07:20 +03:00
Ben Phelps	cb76a8165d	pre-create settings.yaml for build process	2022-09-09 13:07:09 +03:00
Ben Phelps	a7a1eca0cd	attempt to fix weird race condition in builds?	2022-09-09 12:59:43 +03:00
Ben Phelps	85bc078c46	always attempt location fetch if it fails, then we just fallback to user interaction	2022-09-09 12:57:15 +03:00
Anonymous	5c347d9427	Translated using Weblate (Vietnamese) Currently translated at 50.0% (32 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/vi/	2022-09-09 11:44:50 +02:00
Anonymous	6c17efc2ab	Translated using Weblate (Norwegian Bokmål) Currently translated at 93.7% (60 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nb_NO/	2022-09-09 11:44:50 +02:00
Anonymous	a6e929ba86	Translated using Weblate (Italian) Currently translated at 14.0% (9 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/it/	2022-09-09 11:44:50 +02:00
Anonymous	f9886f7c63	Translated using Weblate (Chinese (Simplified)) Currently translated at 93.7% (60 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/zh_Hans/	2022-09-09 11:44:49 +02:00
Anonymous	ec937f6212	Translated using Weblate (Russian) Currently translated at 14.0% (9 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ru/	2022-09-09 11:44:49 +02:00
Anonymous	b7427c3409	Translated using Weblate (Portuguese) Currently translated at 14.0% (9 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt/	2022-09-09 11:44:49 +02:00
Anonymous	5bd9cf46ea	Translated using Weblate (French) Currently translated at 14.0% (9 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/fr/	2022-09-09 11:44:49 +02:00
Anonymous	c340c42ef3	Translated using Weblate (Spanish) Currently translated at 93.7% (60 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/	2022-09-09 11:44:48 +02:00
Anonymous	27c5b4227d	Translated using Weblate (German) Currently translated at 93.7% (60 of 64 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/de/	2022-09-09 11:44:48 +02:00
Trung Le	914e869778	Translated using Weblate (Vietnamese) Currently translated at 53.3% (32 of 60 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/vi/	2022-09-09 11:44:42 +02:00
Ben Phelps	e4ea30becc	implement weather geolocation	2022-09-09 12:44:34 +03:00
Ben Phelps	61f91f0e45	remove logging	2022-09-09 11:51:36 +03:00
Ben Phelps	c6d8668e69	fix jellyfin integration	2022-09-09 11:42:08 +03:00
Anonymous	3c73b000df	Translated using Weblate (Vietnamese) Currently translated at 100.0% (0 of 0 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/vi/	2022-09-09 08:11:36 +02:00
Trung Le	ed5a5ae86f	Added translation using Weblate (Vietnamese)	2022-09-09 08:11:33 +02:00