fix hidden scrollbars

this was an adventure
improved static styles and x-browser scrollbars
2025-12-06 21:57:48 +01:00 · 2022-09-30 23:34:48 +03:00 · 2022-09-30 22:13:37 +03:00 · 2022-09-30 21:56:22 +03:00 · 2022-09-30 21:51:34 +03:00 · 2022-09-30 09:22:30 +02:00
195 changed files with 3814 additions and 4283 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -2,6 +2,12 @@
  "extends": ["airbnb", "next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
+    "import/no-cycle": [
+      "error",
+      {
+        "maxDepth": 1
+      }
+    ],
    "import/order": [
      "error",
      {
--- a/README.md
+++ b/README.md
@@ -1,4 +1,18 @@
-![Homepage Preview](/images/preview.png)
+<p align="center">
+  <br>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="images/homepage-dark.png">
+    <img src="images/homepage-light.png" width="65%">
+  </picture>
+  <br><br>
+  <img src="images/1.png" />
+  <br>
+  <img src="images/2.png" width="19%" />
+  <img src="images/3.png" width="19%" />
+  <img src="images/4.png" width="19%" />
+  <img src="images/5.png" width="19%" />
+  <img src="images/6.png" width="19%" />
+</p>

 <p align="center">
  <a href="https://discord.gg/k4ruYNrudu"><img src="https://img.shields.io/badge/Discord - Chat-blue?logo=discord&logoColor=white" /></a>
@@ -10,7 +24,6 @@
 <a href="https://hosted.weblate.org/engage/homepage/"><img src="https://hosted.weblate.org/widgets/homepage/-/homepage/svg-badge.svg" alt="Weblate"></a>
 </p>

-
 ## Features

 - Fast! The entire site is statically generated at build time, so you can expect instant load times
--- a/images/1.png
+++ b/images/1.png
--- a/images/2.png
+++ b/images/2.png
--- a/images/3.png
+++ b/images/3.png
--- a/images/4.png
+++ b/images/4.png
--- a/images/5.png
+++ b/images/5.png
--- a/images/6.png
+++ b/images/6.png
--- a/images/homepage-dark.png
+++ b/images/homepage-dark.png
--- a/images/homepage-light.png
+++ b/images/homepage-light.png
--- a/images/preview.png
+++ b/images/preview.png
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -0,0 +1,124 @@
+// prettyBytes taken from https://github.com/sindresorhus/pretty-bytes
+
+/* eslint-disable no-param-reassign */
+const BYTE_UNITS = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+const BIBYTE_UNITS = ["B", "kiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+
+const BIT_UNITS = ["b", "kbit", "Mbit", "Gbit", "Tbit", "Pbit", "Ebit", "Zbit", "Ybit"];
+
+const BIBIT_UNITS = ["b", "kibit", "Mibit", "Gibit", "Tibit", "Pibit", "Eibit", "Zibit", "Yibit"];
+
+/*
+Formats the given number using `Number#toLocaleString`.
+- If locale is a string, the value is expected to be a locale-key (for example: `de`).
+- If locale is true, the system default locale is used for translation.
+- If no value for locale is specified, the number is returned unmodified.
+*/
+const toLocaleString = (number, locale, options) => {
+  let result = number;
+  if (typeof locale === "string" || Array.isArray(locale)) {
+    result = number.toLocaleString(locale, options);
+  } else if (locale === true || options !== undefined) {
+    result = number.toLocaleString(undefined, options);
+  }
+
+  return result;
+};
+
+function prettyBytes(number, options) {
+  if (!Number.isFinite(number)) {
+    throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
+  }
+
+  options = {
+    bits: false,
+    binary: false,
+    ...options,
+  };
+
+  // eslint-disable-next-line no-nested-ternary
+  const UNITS = options.bits ? (options.binary ? BIBIT_UNITS : BIT_UNITS) : options.binary ? BIBYTE_UNITS : BYTE_UNITS;
+
+  if (options.signed && number === 0) {
+    return ` 0 ${UNITS[0]}`;
+  }
+
+  const isNegative = number < 0;
+  // eslint-disable-next-line no-nested-ternary
+  const prefix = isNegative ? "-" : options.signed ? "+" : "";
+
+  if (isNegative) {
+    number = -number;
+  }
+
+  let localeOptions;
+
+  if (options.minimumFractionDigits !== undefined) {
+    localeOptions = { minimumFractionDigits: options.minimumFractionDigits };
+  }
+
+  if (options.maximumFractionDigits !== undefined) {
+    localeOptions = { maximumFractionDigits: options.maximumFractionDigits, ...localeOptions };
+  }
+
+  if (number < 1) {
+    const numberString = toLocaleString(number, options.locale, localeOptions);
+    return `${prefix + numberString} ${UNITS[0]}`;
+  }
+
+  const exponent = Math.min(
+    Math.floor(options.binary ? Math.log(number) / Math.log(1024) : Math.log10(number) / 3),
+    UNITS.length - 1
+  );
+  number /= (options.binary ? 1024 : 1000) ** exponent;
+
+  if (!localeOptions) {
+    number = number.toPrecision(3);
+  }
+
+  const numberString = toLocaleString(Number(number), options.locale, localeOptions);
+
+  const unit = UNITS[exponent];
+
+  return `${prefix + numberString} ${unit}`;
+}
+
+module.exports = {
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  serializeConfig: false,
+  use: [
+    {
+      init: (i18next) => {
+        i18next.services.formatter.add("bytes", (value, lng, options) =>
+          prettyBytes(parseFloat(value), { locale: lng, ...options })
+        );
+
+        i18next.services.formatter.add("rate", (value, lng, options) => {
+          if (value === 0) return "0 Bps";
+
+          const bits = options.bits ? value : value / 8;
+          const k = 1024;
+          const dm = options.decimals ? options.decimals : 0;
+          const sizes = ["Bps", "Kbps", "Mbps", "Gbps", "Tbps", "Pbps", "Ebps", "Zbps", "Ybps"];
+
+          const i = Math.floor(Math.log(bits) / Math.log(k));
+
+          const formatted = new Intl.NumberFormat(lng, { maximumFractionDigits: dm, minimumFractionDigits: dm }).format(
+            parseFloat(bits / k ** i)
+          );
+
+          return `${formatted} ${sizes[i]}`;
+        });
+
+        i18next.services.formatter.add("percent", (value, lng, options) =>
+          new Intl.NumberFormat(lng, { style: "percent", ...options }).format(parseFloat(value) / 100.0)
+        );
+      },
+      type: "3rdParty",
+    },
+  ],
+};
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,5 @@
+const { i18n } = require("./next-i18next.config");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: true,
@@ -7,6 +9,7 @@ const nextConfig = {
    domains: ["cdn.jsdelivr.net"],
    unoptimized: true,
  },
+  i18n,
 };

 module.exports = nextConfig;
--- a/package.json
+++ b/package.json
@@ -10,19 +10,17 @@
    "telemetry": "next telemetry disable"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.0",
-    "@tailwindcss/forms": "^0.5.3",
-    "classnames": "^2.3.1",
+    "@headlessui/react": "^1.7.2",
+    "classnames": "^2.3.2",
    "compare-versions": "^5.0.1",
    "dockerode": "^3.3.4",
    "follow-redirects": "^1.15.2",
-    "i18next": "^21.9.1",
-    "i18next-browser-languagedetector": "^6.1.5",
-    "i18next-http-backend": "^1.4.1",
+    "i18next": "^21.9.2",
    "js-yaml": "^4.1.0",
    "json-rpc-2.0": "^1.4.1",
    "memory-cache": "^0.2.0",
-    "next": "^12.3.0",
+    "next": "^12.3.1",
+    "next-i18next": "^12.0.1",
    "node-os-utils": "^1.3.7",
    "pretty-bytes": "^6.0.0",
    "raw-body": "^2.5.1",
@@ -33,15 +31,15 @@
    "rutorrent-promise": "^2.0.0",
    "shvl": "^3.0.0",
    "swr": "^1.3.0",
-    "tailwind-scrollbar": "^2.0.1",
    "tough-cookie": "^4.1.2",
    "winston": "^3.8.2"
  },
  "devDependencies": {
-    "autoprefixer": "^10.4.9",
-    "eslint": "^8.23.1",
+    "@tailwindcss/forms": "^0.5.3",
+    "autoprefixer": "^10.4.12",
+    "eslint": "^8.24.0",
    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^12.3.0",
+    "eslint-config-next": "^12.3.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -50,6 +48,7 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.16",
    "prettier": "^2.7.1",
+    "tailwind-scrollbar": "^2.0.1",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.8.3"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/locales/ca/common.json
+++ b/public/locales/ca/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connexions",
        "dataRelayed": "Transmès",
        "transferRate": "Velocitat"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/de/common.json
+++ b/public/locales/de/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Verbindungen",
        "dataRelayed": "Weitergeleitet",
        "transferRate": "Bewerten"
+    },
+    "authentik": {
+        "users": "Benutzer",
+        "loginsLast24H": "Anmeldungen (24h)",
+        "failedLoginsLast24H": "fehlerhafte Anmeldungen (24h)"
    }
 }
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -179,5 +179,10 @@
        "user_count": "Users",
        "status_count": "Posts",
        "domain_count": "Domains"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -14,10 +14,10 @@
        "load": "Carga"
    },
    "docker": {
-        "rx": "Recibido",
-        "tx": "Transmitido",
-        "mem": "Memoria",
-        "cpu": "Procesador",
+        "rx": "RX",
+        "tx": "TX",
+        "mem": "MEM",
+        "cpu": "CPU",
        "offline": "Desconectado"
    },
    "emby": {
@@ -38,17 +38,17 @@
        "download": "Bajada"
    },
    "sonarr": {
-        "wanted": "Más deseado",
+        "wanted": "Buscando",
        "queued": "En cola",
        "series": "Series"
    },
    "radarr": {
-        "wanted": "Más deseado",
+        "wanted": "Buscando",
        "queued": "En cola",
        "movies": "Películas"
    },
    "readarr": {
-        "wanted": "Más deseado",
+        "wanted": "Buscando",
        "queued": "En cola",
        "books": "Libros"
    },
@@ -143,7 +143,7 @@
    },
    "lidarr": {
        "queued": "En cola",
-        "wanted": "Más deseado",
+        "wanted": "Buscando",
        "albums": "Álbumes"
    },
    "adguard": {
@@ -168,5 +168,10 @@
        "numConnections": "Conexiones",
        "dataRelayed": "Retransmitido",
        "transferRate": "Velocidad"
+    },
+    "authentik": {
+        "users": "Usuarios",
+        "loginsLast24H": "Accesos (24h)",
+        "failedLoginsLast24H": "Accesos Fallidos (24h)"
    }
 }
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -87,17 +87,6 @@
        "disabled": "Désactivé",
        "total": "Total"
    },
-    "common": {
-        "bbytes": "{{value, bytes(binary: true)}}",
-        "bytes": "{{value, bytes}}",
-        "bits": "{{value, bytes(bits: true)}}",
-        "bbits": "{{value, bytes(bits: true, binary: true)}}",
-        "number": "{{value, number}}",
-        "byterate": "{{value, bytes}}",
-        "bitrate": "{{value, bytes(bits: true)}}",
-        "percent": "{{value, percent}}",
-        "ms": "{{value, number}}"
-    },
    "weather": {
        "current": "Localisation actuelle",
        "allow": "Cliquez pour autoriser",
@@ -179,5 +168,10 @@
        "numConnections": "Cnx",
        "dataRelayed": "Relayé",
        "transferRate": "Débit"
+    },
+    "authentik": {
+        "users": "Utilisateurs",
+        "loginsLast24H": "Cnx. (24h)",
+        "failedLoginsLast24H": "Cnx. échouées (24h)"
    }
 }
--- a/public/locales/he/common.json
+++ b/public/locales/he/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/hr/common.json
+++ b/public/locales/hr/common.json
@@ -1,172 +1,177 @@
 {
    "weather": {
-        "current": "Current Location",
-        "allow": "Click to allow",
-        "updating": "Updating",
-        "wait": "Please wait"
+        "current": "Tranutačna lokacija",
+        "allow": "Pritisni za dozvoljavanje",
+        "updating": "Aktualiziranje",
+        "wait": "Pričekaj"
    },
    "search": {
-        "placeholder": "Search…"
+        "placeholder": "Traži …"
    },
    "resources": {
-        "total": "Total",
-        "free": "Free",
-        "used": "Used",
-        "load": "Load"
+        "total": "Ukupno",
+        "free": "Slobodno",
+        "used": "Korišteno",
+        "load": "Opterećenje"
    },
    "sabnzbd": {
-        "rate": "Rate",
-        "queue": "Queue",
-        "timeleft": "Time Left"
+        "rate": "Stopa",
+        "queue": "Red",
+        "timeleft": "Preostalo vrijeme"
    },
    "overseerr": {
-        "available": "Available",
-        "pending": "Pending",
-        "approved": "Approved"
+        "available": "Dostupno",
+        "pending": "Predstoji",
+        "approved": "Odobreno"
    },
    "pihole": {
-        "queries": "Queries",
-        "blocked": "Blocked",
-        "gravity": "Gravity"
+        "queries": "Upiti",
+        "blocked": "Blokirano",
+        "gravity": "Ozbiljnost"
    },
    "adguard": {
-        "latency": "Latency",
-        "queries": "Queries",
-        "blocked": "Blocked",
-        "filtered": "Filtered"
+        "latency": "Kašnjenje",
+        "queries": "Upiti",
+        "blocked": "Blokirano",
+        "filtered": "Filtrirano"
    },
    "npm": {
-        "total": "Total",
-        "enabled": "Enabled",
-        "disabled": "Disabled"
+        "total": "Ukupno",
+        "enabled": "Aktivirano",
+        "disabled": "Deaktivirano"
    },
    "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
+        "configure": "Konfiguriraj jednu ili više kripto valuta za praćenje",
+        "1hour": "1 sat",
+        "1day": "1 dan",
+        "7days": "7 dana",
+        "30days": "30 dana"
    },
    "prowlarr": {
-        "enableIndexers": "Indexers",
-        "numberOfGrabs": "Grabs",
-        "numberOfQueries": "Queries",
-        "numberOfFailGrabs": "Fail Grabs",
-        "numberOfFailQueries": "Fail Queries"
+        "enableIndexers": "Indeksatori",
+        "numberOfGrabs": "Dohvaćanja",
+        "numberOfQueries": "Upiti",
+        "numberOfFailGrabs": "Neuspjela dohvaćanja",
+        "numberOfFailQueries": "Neuspjeli upiti"
    },
    "widget": {
-        "missing_type": "Missing Widget Type: {{type}}",
-        "api_error": "API Error",
-        "status": "Status"
+        "missing_type": "Nedostajuća vrsta widgeta: {{type}}",
+        "api_error": "API greška",
+        "status": "Stanje"
    },
    "docker": {
        "rx": "RX",
        "tx": "TX",
        "mem": "MEM",
        "cpu": "CPU",
-        "offline": "Offline"
+        "offline": "Odspojen"
    },
    "emby": {
-        "playing": "Playing",
-        "transcoding": "Transcoding",
-        "bitrate": "Bitrate",
-        "no_active": "No Active Streams"
+        "playing": "Reprodukcija",
+        "transcoding": "Prekodiranje",
+        "bitrate": "Brzina prijenosa",
+        "no_active": "Nema aktivnih prijenosa"
    },
    "tautulli": {
-        "playing": "Playing",
-        "transcoding": "Transcoding",
-        "bitrate": "Bitrate",
-        "no_active": "No Active Streams"
+        "playing": "Reprodukcija",
+        "transcoding": "Prekodiranje",
+        "bitrate": "Brzina prijenosa",
+        "no_active": "Nema aktivnih prijenosa"
    },
    "nzbget": {
-        "rate": "Rate",
-        "remaining": "Remaining",
-        "downloaded": "Downloaded"
+        "rate": "Stopa",
+        "remaining": "Preostalo",
+        "downloaded": "Preuzeto"
    },
    "rutorrent": {
-        "upload": "Upload",
-        "download": "Download",
-        "active": "Active"
+        "upload": "Prijenos",
+        "download": "Preuzimanje",
+        "active": "Aktivno"
    },
    "transmission": {
-        "download": "Download",
-        "upload": "Upload",
-        "leech": "Leech",
-        "seed": "Seed"
+        "download": "Preuzimanje",
+        "upload": "Prijenos",
+        "leech": "Krvopija",
+        "seed": "Prijenos preuzetog sadržaja"
    },
    "sonarr": {
-        "wanted": "Wanted",
-        "queued": "Queued",
-        "series": "Series"
+        "wanted": "Željeno",
+        "queued": "U redu čekanja",
+        "series": "Serije"
    },
    "radarr": {
-        "wanted": "Wanted",
-        "queued": "Queued",
-        "movies": "Movies"
+        "wanted": "Željeno",
+        "queued": "U redu čekanja",
+        "movies": "Filmovi"
    },
    "lidarr": {
-        "wanted": "Wanted",
-        "queued": "Queued",
-        "albums": "Albums"
+        "wanted": "Željeno",
+        "queued": "U redu čekanja",
+        "albums": "Albumi"
    },
    "readarr": {
-        "wanted": "Wanted",
-        "queued": "Queued",
-        "books": "Books"
+        "wanted": "Željeno",
+        "queued": "U redu čekanja",
+        "books": "Knjige"
    },
    "bazarr": {
-        "missingEpisodes": "Missing Episodes",
-        "missingMovies": "Missing Movies"
+        "missingEpisodes": "Nedostajuće epizode",
+        "missingMovies": "Nedostajući filmovi"
    },
    "ombi": {
-        "pending": "Pending",
-        "approved": "Approved",
-        "available": "Available"
+        "pending": "Predstoji",
+        "approved": "Odobreno",
+        "available": "Dostupno"
    },
    "jellyseerr": {
-        "pending": "Pending",
-        "approved": "Approved",
-        "available": "Available"
+        "pending": "Predstoji",
+        "approved": "Odobreno",
+        "available": "Dostupno"
    },
    "speedtest": {
-        "upload": "Upload",
-        "download": "Download",
+        "upload": "Prijenos",
+        "download": "Preuzimanje",
        "ping": "Ping"
    },
    "portainer": {
-        "running": "Running",
-        "stopped": "Stopped",
-        "total": "Total"
+        "running": "Pokrenuto",
+        "stopped": "Prekinuto",
+        "total": "Ukupno"
    },
    "traefik": {
-        "routers": "Routers",
-        "services": "Services",
+        "routers": "Ruteri",
+        "services": "Usluge",
        "middleware": "Middleware"
    },
    "gotify": {
-        "clients": "Clients",
-        "messages": "Messages",
-        "apps": "Applications"
+        "clients": "Klijenti",
+        "messages": "Poruke",
+        "apps": "Programi"
    },
    "jackett": {
-        "configured": "Configured",
-        "errored": "Errored"
+        "configured": "Konfigurirano",
+        "errored": "S greškom"
    },
    "qbittorrent": {
-        "download": "Download",
-        "upload": "Upload",
-        "leech": "Leech",
-        "seed": "Seed"
+        "download": "Preuzimanje",
+        "upload": "Prijenos",
+        "leech": "Krvopija",
+        "seed": "Prijenos preuzetog sadržaja"
    },
    "mastodon": {
-        "user_count": "Users",
-        "status_count": "Posts",
-        "domain_count": "Domains"
+        "user_count": "Korisnici",
+        "status_count": "Objave",
+        "domain_count": "Domene"
    },
    "strelaysrv": {
-        "numActiveSessions": "Sessions",
-        "numConnections": "Connections",
-        "dataRelayed": "Relayed",
-        "transferRate": "Rate"
+        "numActiveSessions": "Sesije",
+        "numConnections": "Veze",
+        "dataRelayed": "Proslijeđeno",
+        "transferRate": "Stopa"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/hu/common.json
+++ b/public/locales/hu/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/it/common.json
+++ b/public/locales/it/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/nb-NO/common.json
+++ b/public/locales/nb-NO/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/nl/common.json
+++ b/public/locales/nl/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/pl/common.json
+++ b/public/locales/pl/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/pt-BR/common.json
+++ b/public/locales/pt-BR/common.json
@@ -0,0 +1,177 @@
+{
+    "sabnzbd": {
+        "timeleft": "Tempo restante",
+        "rate": "Taxa",
+        "queue": "Fila"
+    },
+    "rutorrent": {
+        "active": "Ativo",
+        "upload": "Envio",
+        "download": "Download"
+    },
+    "portainer": {
+        "total": "Total",
+        "running": "Funcionando",
+        "stopped": "Parado"
+    },
+    "coinmarketcap": {
+        "7days": "7 Dias",
+        "configure": "Configure uma ou mais criptomoedas para rastrear",
+        "1hour": "1 Hora",
+        "1day": "1 Dia",
+        "30days": "30 Dias"
+    },
+    "strelaysrv": {
+        "numConnections": "Conexões",
+        "numActiveSessions": "Sessões",
+        "dataRelayed": "Retransmitido",
+        "transferRate": "Taxa"
+    },
+    "widget": {
+        "missing_type": "Tipo de Widget ausente: {{type}}",
+        "api_error": "Erro da API",
+        "status": "Status"
+    },
+    "weather": {
+        "current": "Localização atual",
+        "allow": "Clique para permitir",
+        "updating": "Atualizando",
+        "wait": "Aguarde, por favor"
+    },
+    "search": {
+        "placeholder": "Buscar…"
+    },
+    "resources": {
+        "total": "Total",
+        "free": "Livre",
+        "used": "Usado",
+        "load": "Carregamento"
+    },
+    "docker": {
+        "rx": "Rx",
+        "tx": "Tx",
+        "mem": "Mem",
+        "cpu": "CPU",
+        "offline": "Desligado"
+    },
+    "emby": {
+        "playing": "Reproduzindo",
+        "transcoding": "Transcodificando",
+        "bitrate": "Taxa de bits",
+        "no_active": "Sem transmissões ativas"
+    },
+    "tautulli": {
+        "playing": "Reproduzindo",
+        "transcoding": "Transcodificando",
+        "bitrate": "Taxa de bits",
+        "no_active": "Sem transmissões ativas"
+    },
+    "nzbget": {
+        "rate": "Taxa",
+        "remaining": "Restando",
+        "downloaded": "Baixado"
+    },
+    "transmission": {
+        "download": "Download",
+        "upload": "Upload",
+        "leech": "Leech",
+        "seed": "Seed"
+    },
+    "qbittorrent": {
+        "download": "Download",
+        "upload": "Upload",
+        "leech": "Leech",
+        "seed": "Seed"
+    },
+    "sonarr": {
+        "wanted": "Desejado",
+        "queued": "Na fila",
+        "series": "Séries"
+    },
+    "radarr": {
+        "wanted": "Desejado",
+        "queued": "Na fila",
+        "movies": "Filmes"
+    },
+    "lidarr": {
+        "wanted": "Desejado",
+        "queued": "Na fila",
+        "albums": "Álbuns"
+    },
+    "readarr": {
+        "wanted": "Desejado",
+        "queued": "Na fila",
+        "books": "Livros"
+    },
+    "bazarr": {
+        "missingEpisodes": "Episódios Ausentes",
+        "missingMovies": "Filmes Ausentes"
+    },
+    "ombi": {
+        "pending": "Pendente",
+        "approved": "Aprovado",
+        "available": "Disponível"
+    },
+    "jellyseerr": {
+        "pending": "Pendente",
+        "approved": "Aprovado",
+        "available": "Disponível"
+    },
+    "overseerr": {
+        "pending": "Pendente",
+        "approved": "Aprovado",
+        "available": "Disponível"
+    },
+    "pihole": {
+        "queries": "Consultas",
+        "blocked": "Bloquado",
+        "gravity": "Gravity"
+    },
+    "adguard": {
+        "queries": "Consultas",
+        "blocked": "Bloqueado",
+        "filtered": "Filtrado",
+        "latency": "Latência"
+    },
+    "speedtest": {
+        "upload": "Envio",
+        "download": "Receber",
+        "ping": "Ping"
+    },
+    "traefik": {
+        "routers": "Rotas",
+        "services": "Serviços",
+        "middleware": "Middleware"
+    },
+    "npm": {
+        "enabled": "Habilitado",
+        "disabled": "Desabilitado",
+        "total": "Total"
+    },
+    "gotify": {
+        "apps": "Aplicações",
+        "clients": "Clientes",
+        "messages": "Mensagens"
+    },
+    "prowlarr": {
+        "enableIndexers": "Indexadores",
+        "numberOfGrabs": "Grabs",
+        "numberOfQueries": "Queries",
+        "numberOfFailGrabs": "Fail Grabs",
+        "numberOfFailQueries": "Fail Queries"
+    },
+    "jackett": {
+        "configured": "Configurado",
+        "errored": "Erro"
+    },
+    "mastodon": {
+        "user_count": "Usuários",
+        "status_count": "Postagens",
+        "domain_count": "Domínios"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
+    }
+}
--- a/public/locales/pt/common.json
+++ b/public/locales/pt/common.json
@@ -179,5 +179,10 @@
        "numConnections": "Conexões",
        "dataRelayed": "Retransmitido",
        "transferRate": "Taxa"
+    },
+    "authentik": {
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)",
+        "users": "Users"
    }
 }
--- a/public/locales/ro/common.json
+++ b/public/locales/ro/common.json
@@ -0,0 +1,177 @@
+{
+    "resources": {
+        "used": "Utilizați",
+        "load": "Sarcină",
+        "total": "Total",
+        "free": "Disponibili"
+    },
+    "docker": {
+        "rx": "RX",
+        "tx": "TX",
+        "mem": "MEM",
+        "cpu": "CPU",
+        "offline": "Offline"
+    },
+    "jellyseerr": {
+        "approved": "Aprobate",
+        "available": "Disponibile",
+        "pending": "În așteptare"
+    },
+    "overseerr": {
+        "pending": "În așteptare",
+        "approved": "Aprobate",
+        "available": "Disponibile"
+    },
+    "pihole": {
+        "queries": "Cereri",
+        "blocked": "Blocate",
+        "gravity": "Gravity"
+    },
+    "adguard": {
+        "blocked": "Blocate",
+        "filtered": "Filtrate",
+        "queries": "Cereri",
+        "latency": "Latentă"
+    },
+    "traefik": {
+        "services": "Servicii",
+        "middleware": "Middleware",
+        "routers": "Routere"
+    },
+    "npm": {
+        "enabled": "Activat",
+        "disabled": "Dezactivat",
+        "total": "Total"
+    },
+    "coinmarketcap": {
+        "configure": "Configurați una sau mai multe criptomonede pe care să le urmăriți",
+        "1hour": "1 Oră",
+        "1day": "1 Zi",
+        "7days": "7 Zile",
+        "30days": "30 Zile"
+    },
+    "weather": {
+        "allow": "Click pentru a permite",
+        "updating": "Se actualizează",
+        "current": "Locația Curentă",
+        "wait": "Va rugăm așteptați"
+    },
+    "widget": {
+        "missing_type": "Lipsește Tipul de Widget: {{type}}",
+        "api_error": "Eroare API",
+        "status": "Status"
+    },
+    "search": {
+        "placeholder": "Caută…"
+    },
+    "tautulli": {
+        "no_active": "Niciun stream activ",
+        "playing": "Activ",
+        "transcoding": "Transcodare",
+        "bitrate": "Bitrate"
+    },
+    "nzbget": {
+        "rate": "Rată",
+        "remaining": "Rămas",
+        "downloaded": "Descărcat"
+    },
+    "emby": {
+        "playing": "Activ",
+        "transcoding": "Transcodare",
+        "bitrate": "Bitrate",
+        "no_active": "Niciun stream activ"
+    },
+    "sabnzbd": {
+        "rate": "Rată",
+        "queue": "Coadă",
+        "timeleft": "Timp rămas"
+    },
+    "transmission": {
+        "leech": "Leech",
+        "seed": "Seed",
+        "download": "Descarcă",
+        "upload": "Încarcă"
+    },
+    "rutorrent": {
+        "active": "Activ",
+        "upload": "Încarcă",
+        "download": "Descarcă"
+    },
+    "qbittorrent": {
+        "download": "Descarcă",
+        "upload": "Încarcă",
+        "leech": "Leech",
+        "seed": "Seed"
+    },
+    "sonarr": {
+        "wanted": "Dorite",
+        "queued": "În coadă",
+        "series": "Seriale"
+    },
+    "radarr": {
+        "queued": "În coadă",
+        "wanted": "Dorite",
+        "movies": "Filme"
+    },
+    "lidarr": {
+        "wanted": "Dorite",
+        "queued": "În coadă",
+        "albums": "Albume"
+    },
+    "readarr": {
+        "wanted": "Dorite",
+        "queued": "În coadă",
+        "books": "Cărți"
+    },
+    "bazarr": {
+        "missingEpisodes": "Episoade lipsă",
+        "missingMovies": "Filme lipsă"
+    },
+    "ombi": {
+        "pending": "În așteptare",
+        "approved": "Aprobate",
+        "available": "Disponibile"
+    },
+    "speedtest": {
+        "upload": "Încarcă",
+        "download": "Descarcă",
+        "ping": "Ping"
+    },
+    "portainer": {
+        "running": "Activ",
+        "stopped": "Oprit",
+        "total": "Total"
+    },
+    "gotify": {
+        "apps": "Aplicații",
+        "clients": "Clienți",
+        "messages": "Mesaje"
+    },
+    "prowlarr": {
+        "numberOfFailGrabs": "Descărcări eșuate",
+        "numberOfFailQueries": "Cereri eșuate",
+        "enableIndexers": "Indexatori",
+        "numberOfGrabs": "Descărcate",
+        "numberOfQueries": "Cereri"
+    },
+    "jackett": {
+        "configured": "Configurat",
+        "errored": "Cu erori"
+    },
+    "strelaysrv": {
+        "numActiveSessions": "Sesiuni",
+        "numConnections": "Conexiuni",
+        "dataRelayed": "Retransmise",
+        "transferRate": "Rată"
+    },
+    "mastodon": {
+        "user_count": "Utilizatori",
+        "status_count": "Postări",
+        "domain_count": "Domenii"
+    },
+    "authentik": {
+        "users": "Utilizatori",
+        "loginsLast24H": "Autentificări (24h)",
+        "failedLoginsLast24H": "Conectări eșuate (24h)"
+    }
+}
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -168,5 +168,10 @@
        "dataRelayed": "Relayed",
        "transferRate": "Rate",
        "numActiveSessions": "Sessions"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/sv/common.json
+++ b/public/locales/sv/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Anslutningar",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/vi/common.json
+++ b/public/locales/vi/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/yue/common.json
+++ b/public/locales/yue/common.json
@@ -0,0 +1,177 @@
+{
+    "emby": {
+        "transcoding": "轉碼緊",
+        "bitrate": "比特率",
+        "playing": "播放緊",
+        "no_active": "無任何活動"
+    },
+    "tautulli": {
+        "playing": "播放緊",
+        "no_active": "無任何活動",
+        "transcoding": "轉碼緊",
+        "bitrate": "比特率"
+    },
+    "transmission": {
+        "download": "下載速度",
+        "upload": "上傳速度",
+        "leech": "下載緊",
+        "seed": "做種緊"
+    },
+    "widget": {
+        "missing_type": "缺少小部件類型：{{type}}",
+        "api_error": "API 錯誤",
+        "status": "狀況"
+    },
+    "weather": {
+        "current": "依家位置",
+        "allow": "點擊允許",
+        "updating": "更新緊",
+        "wait": "請稍後"
+    },
+    "search": {
+        "placeholder": "搜索緊…"
+    },
+    "resources": {
+        "total": "全部",
+        "free": "剩餘",
+        "used": "用咗",
+        "load": "負荷"
+    },
+    "docker": {
+        "rx": "接收",
+        "tx": "發送",
+        "mem": "內存",
+        "cpu": "處理器",
+        "offline": "離線"
+    },
+    "nzbget": {
+        "rate": "速度",
+        "remaining": "剩餘",
+        "downloaded": "下載咗"
+    },
+    "sabnzbd": {
+        "rate": "速度",
+        "queue": "隊列",
+        "timeleft": "用時"
+    },
+    "rutorrent": {
+        "active": "激活",
+        "upload": "上傳",
+        "download": "下載"
+    },
+    "qbittorrent": {
+        "download": "下載速度",
+        "upload": "上傳速度",
+        "leech": "下載緊",
+        "seed": "做種緊"
+    },
+    "sonarr": {
+        "wanted": "想睇",
+        "queued": "排緊隊",
+        "series": "電視劇"
+    },
+    "radarr": {
+        "wanted": "想睇",
+        "queued": "排緊隊",
+        "movies": "電影"
+    },
+    "lidarr": {
+        "wanted": "想睇",
+        "queued": "排緊隊",
+        "albums": "專輯"
+    },
+    "readarr": {
+        "wanted": "想睇",
+        "queued": "排緊隊",
+        "books": "書"
+    },
+    "bazarr": {
+        "missingEpisodes": "缺少嘅劇集",
+        "missingMovies": "缺少電影"
+    },
+    "ombi": {
+        "pending": "待定",
+        "approved": "批准",
+        "available": "可用"
+    },
+    "jellyseerr": {
+        "pending": "提交咗",
+        "approved": "批准咗",
+        "available": "可睇嘅總量"
+    },
+    "overseerr": {
+        "pending": "待定",
+        "approved": "批准",
+        "available": "可用"
+    },
+    "pihole": {
+        "queries": "查詢",
+        "blocked": "封鎖",
+        "gravity": "重力"
+    },
+    "adguard": {
+        "queries": "查詢",
+        "blocked": "封鎖",
+        "filtered": "過濾",
+        "latency": "延遲"
+    },
+    "speedtest": {
+        "upload": "上傳速率",
+        "download": "下載速率",
+        "ping": "Ping值"
+    },
+    "portainer": {
+        "running": "運行緊",
+        "stopped": "暫停",
+        "total": "全部"
+    },
+    "traefik": {
+        "routers": "路由器",
+        "services": "服務項",
+        "middleware": "中間件"
+    },
+    "coinmarketcap": {
+        "1day": "1 日",
+        "configure": "配置一個或多個加密貨幣以進行跟蹤",
+        "1hour": "1 個鐘",
+        "7days": "7 日",
+        "30days": "30日"
+    },
+    "npm": {
+        "enabled": "啟用",
+        "disabled": "停用咗",
+        "total": "全部"
+    },
+    "gotify": {
+        "apps": "應用",
+        "clients": "客戶端",
+        "messages": "消息"
+    },
+    "prowlarr": {
+        "enableIndexers": "索引",
+        "numberOfGrabs": "抓住",
+        "numberOfQueries": "查詢",
+        "numberOfFailGrabs": "失敗抓取",
+        "numberOfFailQueries": "查詢失敗"
+    },
+    "jackett": {
+        "configured": "配置",
+        "errored": "已錯誤"
+    },
+    "strelaysrv": {
+        "numActiveSessions": "會話",
+        "numConnections": "連接",
+        "dataRelayed": "傳遞",
+        "transferRate": "速度"
+    },
+    "mastodon": {
+        "user_count": "用戶",
+        "status_count": "職位",
+        "domain_count": "域"
+    },
+    "authentik": {
+        "users": "用戶",
+        "loginsLast24H": "登錄（ 24小时）",
+        "failedLoginsLast24H": "登錄失敗（ 24鐘頭）"
+    }
+}
--- a/public/locales/zh-CN/common.json
+++ b/public/locales/zh-CN/common.json
@@ -168,5 +168,10 @@
        "dataRelayed": "Relayed",
        "numConnections": "Connections",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/public/locales/zh-Hant/common.json
+++ b/public/locales/zh-Hant/common.json
@@ -168,5 +168,10 @@
        "numConnections": "Connections",
        "dataRelayed": "Relayed",
        "transferRate": "Rate"
+    },
+    "authentik": {
+        "users": "Users",
+        "loginsLast24H": "Logins (24h)",
+        "failedLoginsLast24H": "Failed Logins (24h)"
    }
 }
--- a/src/components/bookmarks/item.jsx
+++ b/src/components/bookmarks/item.jsx
@@ -1,6 +1,6 @@
 import { useContext } from "react";

-import { SettingsContext } from "utils/settings-context";
+import { SettingsContext } from "utils/contexts/settings";

 export default function Item({ bookmark }) {
  const { hostname } = new URL(bookmark.href);
@@ -12,7 +12,7 @@ export default function Item({ bookmark }) {
        href={bookmark.href}
        title={bookmark.name}
        target={settings.target ?? "_blank"}
-        className="block 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="block w-full text-left cursor-pointer transition-all h-15 mb-3 rounded-md 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-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10"
      >
        <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">
@@ -20,7 +20,7 @@ export default function Item({ bookmark }) {
          </div>
          <div className="flex-1 flex items-center justify-between rounded-r-md ">
            <div className="flex-1 grow pl-3 py-2 text-xs">{bookmark.name}</div>
-            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-400 opacity-50 text-xs">{hostname}</div>
+            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-300 text-xs">{hostname}</div>
          </div>
        </div>
      </a>
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -1,12 +1,12 @@
 import Image from "next/future/image";
-import { useContext } from "react";
-import { Disclosure } from "@headlessui/react";
+import classNames from "classnames";
+import { useContext, useState } from "react";

 import Status from "./status";
 import Widget from "./widget";
-import Docker from "./widgets/service/docker";

-import { SettingsContext } from "utils/settings-context";
+import Docker from "widgets/docker/component";
+import { SettingsContext } from "utils/contexts/settings";

 function resolveIcon(icon) {
  if (icon.startsWith("http")) {
@@ -27,72 +27,90 @@ function resolveIcon(icon) {
 export default function Item({ service }) {
  const hasLink = service.href && service.href !== "#";
  const { settings } = useContext(SettingsContext);
+  const [statsOpen, setStatsOpen] = useState(false);
+  const [statsClosing, setStatsClosing] = useState(false);
+
+  // set stats to closed after 300ms
+  const closeStats = () => {
+    if (statsOpen) {
+      setStatsClosing(true);
+      setTimeout(() => {
+        setStatsOpen(false);
+        setStatsClosing(false);
+      }, 300);
+    }
+  };

  return (
    <li key={service.name}>
-      <Disclosure>
-        <div
-          className={`${
-            hasLink ? "cursor-pointer " : " "
-          }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`}
-        >
-          <div className="flex select-none">
-            {service.icon &&
-              (hasLink ? (
-                <a
-                  href={service.href}
-                  target={settings.target ?? "_blank"}
-                  rel="noreferrer"
-                  className="flex-shrink-0 flex items-center justify-center w-12 "
-                >
-                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
-                </a>
-              ) : (
-                <div className="flex-shrink-0 flex items-center justify-center w-12 ">
-                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
-                </div>
-              ))}
-
-            {hasLink ? (
+      <div
+        className={`${
+          hasLink ? "cursor-pointer " : " "
+        }transition-all h-15 mb-3 p-1 rounded-md 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-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10`}
+      >
+        <div className="flex select-none">
+          {service.icon &&
+            (hasLink ? (
              <a
                href={service.href}
                target={settings.target ?? "_blank"}
                rel="noreferrer"
-                className="flex-1 flex items-center justify-between rounded-r-md "
+                className="flex-shrink-0 flex items-center justify-center w-12 "
              >
-                <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>
+                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
              </a>
            ) : (
-              <div className="flex-1 flex items-center justify-between rounded-r-md ">
-                <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>
+              <div className="flex-shrink-0 flex items-center justify-center w-12 ">
+                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
              </div>
-            )}
+            ))}

-            {service.container && (
-              <Disclosure.Button
-                as="div"
-                className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
-              >
-                <Status service={service} />
-              </Disclosure.Button>
-            )}
-          </div>
-
-          <Disclosure.Panel>
-            <div className="w-full">
-              <Docker service={{ widget: { container: service.container, server: service.server } }} />
+          {hasLink ? (
+            <a
+              href={service.href}
+              target={settings.target ?? "_blank"}
+              rel="noreferrer"
+              className="flex-1 flex items-center justify-between rounded-r-md "
+            >
+              <div className="flex-1 px-2 py-2 text-sm text-left">
+                {service.name}
+                <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
+              </div>
+            </a>
+          ) : (
+            <div className="flex-1 flex items-center justify-between rounded-r-md ">
+              <div className="flex-1 px-2 py-2 text-sm text-left">
+                {service.name}
+                <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
+              </div>
            </div>
-          </Disclosure.Panel>
+          )}

-          {service.widget && <Widget service={service} />}
+          {service.container && (
+            <button
+              type="button"
+              onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
+              className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
+            >
+              <Status service={service} />
+              <span className="sr-only">View container stats</span>
+            </button>
+          )}
        </div>
-      </Disclosure>
+
+        {service.container && service.server && (
+          <div
+            className={classNames(
+              statsOpen && !statsClosing ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
+              "w-full overflow-hidden transition-all duration-300 ease-in-out"
+            )}
+          >
+            {statsOpen && <Docker service={{ widget: { container: service.container, server: service.server } }} />}
+          </div>
+        )}
+
+        {service.widget && <Widget service={service} />}
+      </div>
    </li>
  );
 }
--- a/src/components/services/widget.jsx
+++ b/src/components/services/widget.jsx
@@ -1,72 +1,11 @@
-import { useTranslation } from "react-i18next";
-import dynamic from "next/dynamic";
+import { useTranslation } from "next-i18next";

-const Sonarr = dynamic(() => import("./widgets/service/sonarr"));
-const Radarr = dynamic(() => import("./widgets/service/radarr"));
-const Lidarr = dynamic(() => import("./widgets/service/lidarr"));
-const Readarr = dynamic(() => import("./widgets/service/readarr"));
-const Bazarr = dynamic(() => import("./widgets/service/bazarr"));
-const Ombi = dynamic(() => import("./widgets/service/ombi"));
-const Portainer = dynamic(() => import("./widgets/service/portainer"));
-const Emby = dynamic(() => import("./widgets/service/emby"));
-const Nzbget = dynamic(() => import("./widgets/service/nzbget"));
-const SABnzbd = dynamic(() => import("./widgets/service/sabnzbd"));
-const Transmission = dynamic(() => import("./widgets/service/transmission"));
-const QBittorrent = dynamic(() => import("./widgets/service/qbittorrent"));
-const Docker = dynamic(() => import("./widgets/service/docker"));
-const Pihole = dynamic(() => import("./widgets/service/pihole"));
-const Rutorrent = dynamic(() => import("./widgets/service/rutorrent"));
-const Jellyfin = dynamic(() => import("./widgets/service/jellyfin"));
-const Speedtest = dynamic(() => import("./widgets/service/speedtest"));
-const Traefik = dynamic(() => import("./widgets/service/traefik"));
-const Jellyseerr = dynamic(() => import("./widgets/service/jellyseerr"));
-const Overseerr = dynamic(() => import("./widgets/service/overseerr"));
-const Npm = dynamic(() => import("./widgets/service/npm"));
-const Tautulli = dynamic(() => import("./widgets/service/tautulli"));
-const CoinMarketCap = dynamic(() => import("./widgets/service/coinmarketcap"));
-const Gotify = dynamic(() => import("./widgets/service/gotify"));
-const Prowlarr = dynamic(() => import("./widgets/service/prowlarr"));
-const Jackett = dynamic(() => import("./widgets/service/jackett"));
-const AdGuard = dynamic(() => import("./widgets/service/adguard"));
-const StRelaySrv = dynamic(() => import("./widgets/service/strelaysrv"));
-const Mastodon = dynamic(() => import("./widgets/service/mastodon"));
-
-const widgetMappings = {
-  docker: Docker,
-  sonarr: Sonarr,
-  radarr: Radarr,
-  lidarr: Lidarr,
-  readarr: Readarr,
-  bazarr: Bazarr,
-  ombi: Ombi,
-  portainer: Portainer,
-  emby: Emby,
-  jellyfin: Jellyfin,
-  nzbget: Nzbget,
-  sabnzbd: SABnzbd,
-  transmission: Transmission,
-  qbittorrent: QBittorrent,
-  pihole: Pihole,
-  rutorrent: Rutorrent,
-  speedtest: Speedtest,
-  traefik: Traefik,
-  jellyseerr: Jellyseerr,
-  overseerr: Overseerr,
-  coinmarketcap: CoinMarketCap,
-  npm: Npm,
-  tautulli: Tautulli,
-  gotify: Gotify,
-  prowlarr: Prowlarr,
-  jackett: Jackett,
-  adguard: AdGuard,
-  strelaysrv: StRelaySrv,
-  mastodon: Mastodon,
-};
+import components from "widgets/components";

 export default function Widget({ service }) {
  const { t } = useTranslation("common");

-  const ServiceWidget = widgetMappings[service.widget.type];
+  const ServiceWidget = components[service.widget.type];

  if (ServiceWidget) {
    return <ServiceWidget service={service} />;
--- a/src/components/services/widget/block.jsx
+++ b/src/components/services/widget/block.jsx
@@ -0,0 +1,18 @@
+import { useTranslation } from "next-i18next";
+import classNames from "classnames";
+
+export default function Block({ value, label }) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classNames(
+        "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1",
+        value === undefined ? "animate-pulse" : ""
+      )}
+    >
+      <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
+      <div className="font-bold text-xs uppercase">{t(label)}</div>
+    </div>
+  );
+}
--- a/src/components/services/widget/container.jsx
+++ b/src/components/services/widget/container.jsx
@@ -0,0 +1,18 @@
+export default function Container({ error = false, children, service }) {
+  if (error) {
+    return (
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">{error}</div>
+      </div>
+    );
+  }
+
+  let visibleChildren = children;
+  const fields = service?.widget?.fields;
+  const type = service?.widget?.type;
+  if (fields && type) {
+    visibleChildren = children.filter(child => fields.some(field => `${type}.${field}` === child.props?.label));
+  }
+
+  return <div className="relative flex flex-row w-full">{visibleChildren}</div>;
+}
--- a/src/components/services/widgets/block.jsx
+++ b/src/components/services/widgets/block.jsx
@@ -1,8 +0,0 @@
-export default function Block({ value, label }) {
-  return (
-    <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
-      <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
-      <div className="font-bold text-xs uppercase">{label}</div>
-    </div>
-  );
-}
--- a/src/components/services/widgets/service/adguard.jsx
+++ b/src/components/services/widgets/service/adguard.jsx
@@ -1,45 +0,0 @@
-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 AdGuard({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: adguardData, error: adguardError } = useSWR(formatApiUrl(config, "stats"));
-
-  if (adguardError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!adguardData) {
-    return (
-      <Widget>
-        <Block label={t("adguard.queries")} />
-        <Block label={t("adguard.blocked")} />
-        <Block label={t("adguard.filtered")} />
-        <Block label={t("adguard.latency")} />
-      </Widget>
-    );
-  }
-
-  const filtered =
-    adguardData.num_replaced_safebrowsing + adguardData.num_replaced_safesearch + adguardData.num_replaced_parental;
-
-  return (
-    <Widget>
-      <Block label={t("adguard.queries")} value={t("common.number", { value: adguardData.num_dns_queries })} />
-      <Block label={t("adguard.blocked")} value={t("common.number", { value: adguardData.num_blocked_filtering })} />
-      <Block label={t("adguard.filtered")} value={t("common.number", { value: filtered })} />
-      <Block
-        label={t("adguard.latency")}
-        value={t("common.ms", { value: adguardData.avg_processing_time * 1000, style: "unit", unit: "millisecond" })}
-      />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/bazarr.jsx
+++ b/src/components/services/widgets/service/bazarr.jsx
@@ -1,36 +0,0 @@
-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 Bazarr({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: episodesData, error: episodesError } = useSWR(formatApiUrl(config, "episodes"));
-  const { data: moviesData, error: moviesError } = useSWR(formatApiUrl(config, "movies"));
-
-  if (episodesError || moviesError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!episodesData || !moviesData) {
-    return (
-      <Widget>
-        <Block label={t("bazarr.missingEpisodes")} />
-        <Block label={t("bazarr.missingMovies")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("bazarr.missingEpisodes")} value={t("common.number", { value: episodesData.total })} />
-      <Block label={t("bazarr.missingMovies")} value={t("common.number", { value: moviesData.total })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/docker.jsx
+++ b/src/components/services/widgets/service/docker.jsx
@@ -1,63 +0,0 @@
-import useSWR from "swr";
-import { useTranslation } from "react-i18next";
-
-import Widget from "../widget";
-import Block from "../block";
-
-import calculateCPUPercent from "utils/stats-helpers";
-
-export default function Docker({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: statusData, error: statusError } = useSWR(
-    `/api/docker/status/${config.container}/${config.server || ""}`,
-    {
-      refreshInterval: 5000,
-    }
-  );
-
-  const { data: statsData, error: statsError } = useSWR(
-    `/api/docker/stats/${config.container}/${config.server || ""}`,
-    {
-      refreshInterval: 5000,
-    }
-  );
-
-  if (statsError || statusError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (statusData && statusData.status !== "running") {
-    return (
-      <Widget>
-        <Block label={t("widget.status")} value={t("docker.offline")} />
-      </Widget>
-    );
-  }
-
-  if (!statsData || !statusData) {
-    return (
-      <Widget>
-        <Block label={t("docker.cpu")} />
-        <Block label={t("docker.mem")} />
-        <Block label={t("docker.rx")} />
-        <Block label={t("docker.tx")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("docker.cpu")} value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
-      <Block label={t("docker.mem")} value={t("common.bytes", { value: statsData.stats.memory_stats.usage })} />
-      {statsData.stats.networks && (
-        <>
-          <Block label={t("docker.rx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.rx_bytes })} />
-          <Block label={t("docker.tx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.tx_bytes })} />
-        </>
-      )}
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/gotify.jsx
+++ b/src/components/services/widgets/service/gotify.jsx
@@ -1,29 +0,0 @@
-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 Gotify({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: appsData, error: appsError } = useSWR(formatApiUrl(config, `application`));
-  const { data: messagesData, error: messagesError } = useSWR(formatApiUrl(config, `message`));
-  const { data: clientsData, error: clientsError } = useSWR(formatApiUrl(config, `client`));
-
-  if (appsError || messagesError || clientsError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  return (
-    <Widget>
-      <Block label={t("gotify.apps")} value={appsData?.length} />
-      <Block label={t("gotify.clients")} value={clientsData?.length} />
-      <Block label={t("gotify.messages")} value={messagesData?.messages?.length} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/jackett.jsx
+++ b/src/components/services/widgets/service/jackett.jsx
@@ -1,37 +0,0 @@
-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 Jackett({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: indexersData, error: indexersError } = useSWR(formatApiUrl(config, "indexers"));
-
-  if (indexersError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!indexersData) {
-    return (
-      <Widget>
-        <Block label={t("jackett.configured")} />
-        <Block label={t("jackett.errored")} />
-      </Widget>
-    );
-  }
-
-  const errored = indexersData.filter((indexer) => indexer.last_error);
-
-  return (
-    <Widget>
-      <Block label={t("jackett.configured")} value={t("common.number", { value: indexersData.length })} />
-      <Block label={t("jackett.errored")} value={t("common.number", { value: errored.length })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/jellyfin.jsx
+++ b/src/components/services/widgets/service/jellyfin.jsx
@@ -1,5 +0,0 @@
-import Emby from "./emby";
-
-export default function Jellyfin({ service }) {
-  return <Emby service={service} />;
-}
--- a/src/components/services/widgets/service/jellyseerr.jsx
+++ b/src/components/services/widgets/service/jellyseerr.jsx
@@ -1,37 +0,0 @@
-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 Jellyseerr({ 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("jellyseerr.pending")} />
-        <Block label={t("jellyseerr.approved")} />
-        <Block label={t("jellyseerr.available")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("jellyseerr.pending")} value={statsData.pending} />
-      <Block label={t("jellyseerr.approved")} value={statsData.approved} />
-      <Block label={t("jellyseerr.available")} value={statsData.available} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/lidarr.jsx
+++ b/src/components/services/widgets/service/lidarr.jsx
@@ -1,39 +0,0 @@
-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 Lidarr({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: albumsData, error: albumsError } = useSWR(formatApiUrl(config, "album"));
-  const { data: wantedData, error: wantedError } = useSWR(formatApiUrl(config, "wanted/missing"));
-  const { data: queueData, error: queueError } = useSWR(formatApiUrl(config, "queue/status"));
-
-  if (albumsError || wantedError || queueError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!albumsData || !wantedData || !queueData) {
-    return (
-      <Widget>
-        <Block label={t("lidarr.wanted")} />
-        <Block label={t("lidarr.queued")} />
-        <Block label={t("lidarr.albums")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("lidarr.wanted")} value={t("common.number", { value: wantedData.totalRecords })} />
-      <Block label={t("lidarr.queued")} value={t("common.number", { value: queueData.totalCount })} />
-      <Block label={t("lidarr.albums")} value={t("common.number", { value: albumsData.have })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/mastodon.jsx
+++ b/src/components/services/widgets/service/mastodon.jsx
@@ -1,37 +0,0 @@
-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 Mastodon({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: statsData, error: statsError } = useSWR(formatApiUrl(config, `instance`));
-
-  if (statsError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!statsData) {
-    return (
-      <Widget>
-        <Block label={t("mastodon.user_count")} />
-        <Block label={t("mastodon.status_count")} />
-        <Block label={t("mastodon.domain_count")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("mastodon.user_count")}   value={t("common.number", { value: statsData.stats.user_count })} />
-      <Block label={t("mastodon.status_count")} value={t("common.number", { value: statsData.stats.status_count })} />
-      <Block label={t("mastodon.domain_count")} value={t("common.number", { value: statsData.stats.domain_count })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/npm.jsx
+++ b/src/components/services/widgets/service/npm.jsx
@@ -1,41 +0,0 @@
-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 Npm({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: infoData, error: infoError } = useSWR(formatApiUrl(config, "nginx/proxy-hosts"));
-
-  if (infoError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!infoData) {
-    return (
-      <Widget>
-        <Block label={t("npm.enabled")} />
-        <Block label={t("npm.disabled")} />
-        <Block label={t("npm.total")} />
-      </Widget>
-    );
-  }
-
-  const enabled = infoData.filter((c) => c.enabled === 1).length;
-  const disabled = infoData.filter((c) => c.enabled === 0).length;
-  const total = infoData.length;
-
-  return (
-    <Widget>
-      <Block label={t("npm.enabled")} value={enabled} />
-      <Block label={t("npm.disabled")} value={disabled} />
-      <Block label={t("npm.total")} value={total} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/nzbget.jsx
+++ b/src/components/services/widgets/service/nzbget.jsx
@@ -1,43 +0,0 @@
-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 Nzbget({ service }) {
-  const { t } = useTranslation("common");
-
-  const config = service.widget;
-
-  const { data: statusData, error: statusError } = useSWR(formatApiUrl(config, "status"));
-
-  if (statusError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!statusData) {
-    return (
-      <Widget>
-        <Block label={t("nzbget.rate")} />
-        <Block label={t("nzbget.remaining")} />
-        <Block label={t("nzbget.downloaded")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("nzbget.rate")} value={t("common.bitrate", { value: statusData.DownloadRate })} />
-      <Block
-        label={t("nzbget.remaining")}
-        value={t("common.bytes", { value: statusData.RemainingSizeMB * 1024 * 1024 })}
-      />
-      <Block
-        label={t("nzbget.downloaded")}
-        value={t("common.bytes", { value: statusData.DownloadedSizeMB * 1024 * 1024 })}
-      />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/ombi.jsx
+++ b/src/components/services/widgets/service/ombi.jsx
@@ -1,37 +0,0 @@
-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 Ombi({ 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("ombi.pending")} />
-        <Block label={t("ombi.approved")} />
-        <Block label={t("ombi.available")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("ombi.pending")} value={statsData.pending} />
-      <Block label={t("ombi.approved")} value={statsData.approved} />
-      <Block label={t("ombi.available")} value={statsData.available} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/overseerr.jsx
+++ b/src/components/services/widgets/service/overseerr.jsx
@@ -1,37 +0,0 @@
-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/pihole.jsx
+++ b/src/components/services/widgets/service/pihole.jsx
@@ -1,37 +0,0 @@
-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 Pihole({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: piholeData, error: piholeError } = useSWR(formatApiUrl(config, "api.php"));
-
-  if (piholeError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!piholeData) {
-    return (
-      <Widget>
-        <Block label={t("pihole.queries")} />
-        <Block label={t("pihole.blocked")} />
-        <Block label={t("pihole.gravity")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("pihole.queries")} value={t("common.number", { value: piholeData.dns_queries_today })} />
-      <Block label={t("pihole.blocked")} value={t("common.number", { value: piholeData.ads_blocked_today })} />
-      <Block label={t("pihole.gravity")} value={t("common.number", { value: piholeData.domains_being_blocked })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/portainer.jsx
+++ b/src/components/services/widgets/service/portainer.jsx
@@ -1,45 +0,0 @@
-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 Portainer({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: containersData, error: containersError } = useSWR(formatApiUrl(config, `docker/containers/json?all=1`));
-
-  if (containersError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!containersData) {
-    return (
-      <Widget>
-        <Block label={t("portainer.running")} />
-        <Block label={t("portainer.stopped")} />
-        <Block label={t("portainer.total")} />
-      </Widget>
-    );
-  }
-
-  if (containersData.error) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  const running = containersData.filter((c) => c.State === "running").length;
-  const stopped = containersData.filter((c) => c.State === "exited").length;
-  const total = containersData.length;
-
-  return (
-    <Widget>
-      <Block label={t("portainer.running")} value={running} />
-      <Block label={t("portainer.stopped")} value={stopped} />
-      <Block label={t("portainer.total")} value={total} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/prowlarr.jsx
+++ b/src/components/services/widgets/service/prowlarr.jsx
@@ -1,55 +0,0 @@
-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 Prowlarr({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: indexersData, error: indexersError } = useSWR(formatApiUrl(config, "indexer"));
-  const { data: grabsData, error: grabsError } = useSWR(formatApiUrl(config, "indexerstats"));
-  
-  if (indexersError || grabsError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!indexersData || !grabsData) {
-    return (
-      <Widget>
-        <Block label={t("prowlarr.enableIndexers")} />
-        <Block label={t("prowlarr.numberOfGrabs")} />
-        <Block label={t("prowlarr.numberOfQueries")} />
-        <Block label={t("prowlarr.numberOfFailGrabs")} />
-        <Block label={t("prowlarr.numberOfFailQueries")} />
-      </Widget>
-    );
-  }
-
-  const indexers = indexersData?.filter((indexer) => indexer.enable === true);
-
-  let numberOfGrabs = 0
-  let numberOfQueries = 0
-  let numberOfFailedGrabs = 0
-  let numberOfFailedQueries = 0
-  grabsData?.indexers?.forEach(element => {
-    numberOfGrabs += element.numberOfGrabs;
-    numberOfQueries += element.numberOfQueries;
-    numberOfFailedGrabs += numberOfFailedGrabs + element.numberOfFailedGrabs;
-    numberOfFailedQueries += numberOfFailedQueries + element.numberOfFailedQueries;
-  });
-
-  return (
-    <Widget>
-      <Block label={t("prowlarr.enableIndexers")} value={indexers.length} />
-      <Block label={t("prowlarr.numberOfGrabs")} value={numberOfGrabs} />
-      <Block label={t("prowlarr.numberOfQueries")} value={numberOfQueries} />
-      <Block label={t("prowlarr.numberOfFailGrabs")} value={numberOfFailedGrabs} />
-      <Block label={t("prowlarr.numberOfFailQueries")} value={numberOfFailedQueries} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/qbittorrent.jsx
+++ b/src/components/services/widgets/service/qbittorrent.jsx
@@ -1,69 +0,0 @@
-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 QBittorrent ({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: torrentData, error: torrentError } = useSWR(formatApiUrl(config, "torrents/info"));
-
-  if (torrentError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!torrentData) {
-    return (
-      <Widget>
-        <Block label={t("qbittorrent.leech")} />
-        <Block label={t("qbittorrent.download")} />
-        <Block label={t("qbittorrent.seed")} />
-        <Block label={t("qbittorrent.upload")} />
-      </Widget>
-    );
-  }
-
-  let rateDl = 0;
-  let rateUl = 0;
-  let completed = 0;
-
-  for (let i = 0; i < torrentData.length; i += 1) {
-    const torrent = torrentData[i];
-    rateDl += torrent.dlspeed;
-    rateUl += torrent.upspeed;
-    if (torrent.progress === 1) {
-      completed += 1;
-    }
-  }
-
-  const leech = torrentData.length - completed;
-
-  let unitsDl = "KB/s";
-  let unitsUl = "KB/s";
-  rateDl /= 1024;
-  rateUl /= 1024;
-
-  if (rateDl > 1024) {
-    rateDl /= 1024;
-    unitsDl = "MB/s";
-  }
-
-  if (rateUl > 1024) {
-    rateUl /= 1024;
-    unitsUl = "MB/s";
-  }
-
-  return (
-    <Widget>
-      <Block label={t("qbittorrent.leech")} value={t("common.number", { value: leech })} />
-      <Block label={t("qbittorrent.download")} value={`${rateDl.toFixed(2)} ${unitsDl}`} />
-      <Block label={t("qbittorrent.seed")} value={t("common.number", { value: completed })} />
-      <Block label={t("qbittorrent.upload")} value={`${rateUl.toFixed(2)} ${unitsUl}`} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/radarr.jsx
+++ b/src/components/services/widgets/service/radarr.jsx
@@ -1,38 +0,0 @@
-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 Radarr({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: moviesData, error: moviesError } = useSWR(formatApiUrl(config, "movie"));
-  const { data: queuedData, error: queuedError } = useSWR(formatApiUrl(config, "queue/status"));
-
-  if (moviesError || queuedError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!moviesData || !queuedData) {
-    return (
-      <Widget>
-        <Block label={t("radarr.wanted")} />
-        <Block label={t("radarr.queued")} />
-        <Block label={t("radarr.movies")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("radarr.wanted")} value={moviesData.wanted} />
-      <Block label={t("radarr.queued")} value={queuedData.totalCount} />
-      <Block label={t("radarr.movies")} value={moviesData.have} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/readarr.jsx
+++ b/src/components/services/widgets/service/readarr.jsx
@@ -1,39 +0,0 @@
-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 Readarr({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: booksData, error: booksError } = useSWR(formatApiUrl(config, "book"));
-  const { data: wantedData, error: wantedError } = useSWR(formatApiUrl(config, "wanted/missing"));
-  const { data: queueData, error: queueError } = useSWR(formatApiUrl(config, "queue/status"));
-
-  if (booksError || wantedError || queueError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!booksData || !wantedData || !queueData) {
-    return (
-      <Widget>
-        <Block label={t("readarr.wanted")} />
-        <Block label={t("readarr.queued")} />
-        <Block label={t("readarr.books")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("readarr.wanted")} value={t("common.number", { value: wantedData.totalRecords })} />
-      <Block label={t("readarr.queued")} value={t("common.number", { value: queueData.totalCount })} />
-      <Block label={t("readarr.books")} value={t("common.number", { value: booksData.have })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/rutorrent.jsx
+++ b/src/components/services/widgets/service/rutorrent.jsx
@@ -1,43 +0,0 @@
-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 Rutorrent({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: statusData, error: statusError } = useSWR(formatApiUrl(config));
-
-  if (statusError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!statusData) {
-    return (
-      <Widget>
-        <Block label={t("rutorrent.active")} />
-        <Block label={t("rutorrent.upload")} />
-        <Block label={t("rutorrent.download")} />
-      </Widget>
-    );
-  }
-
-  const upload = statusData.reduce((acc, torrent) => acc + parseInt(torrent["d.get_up_rate"], 10), 0);
-
-  const download = statusData.reduce((acc, torrent) => acc + parseInt(torrent["d.get_down_rate"], 10), 0);
-
-  const active = statusData.filter((torrent) => torrent["d.get_state"] === "1");
-
-  return (
-    <Widget>
-      <Block label={t("rutorrent.active")} value={active.length} />
-      <Block label={t("rutorrent.upload")} value={t("common.bitrate", { value: upload })} />
-      <Block label={t("rutorrent.download")} value={t("common.bitrate", { value: download })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/sabnzbd.jsx
+++ b/src/components/services/widgets/service/sabnzbd.jsx
@@ -1,37 +0,0 @@
-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 SABnzbd({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: queueData, error: queueError } = useSWR(formatApiUrl(config, "queue"));
-
-  if (queueError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!queueData) {
-    return (
-      <Widget>
-        <Block label={t("sabnzbd.rate")} />
-        <Block label={t("sabnzbd.queue")} />
-        <Block label={t("sabnzbd.timeleft")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("sabnzbd.rate")} value={`${queueData.queue.speed}B/s`} />
-      <Block label={t("sabnzbd.queue")} value={t("common.number", { value: queueData.queue.noofslots })} />
-      <Block label={t("sabnzbd.timeleft")} value={queueData.queue.timeleft} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/sonarr.jsx
+++ b/src/components/services/widgets/service/sonarr.jsx
@@ -1,39 +0,0 @@
-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 Sonarr({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: wantedData, error: wantedError } = useSWR(formatApiUrl(config, "wanted/missing"));
-  const { data: queuedData, error: queuedError } = useSWR(formatApiUrl(config, "queue"));
-  const { data: seriesData, error: seriesError } = useSWR(formatApiUrl(config, "series"));
-
-  if (wantedError || queuedError || seriesError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!wantedData || !queuedData || !seriesData) {
-    return (
-      <Widget>
-        <Block label={t("sonarr.wanted")} />
-        <Block label={t("sonarr.queued")} />
-        <Block label={t("sonarr.series")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("sonarr.wanted")} value={wantedData.totalRecords} />
-      <Block label={t("sonarr.queued")} value={queuedData.totalRecords} />
-      <Block label={t("sonarr.series")} value={seriesData.total} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/speedtest.jsx
+++ b/src/components/services/widgets/service/speedtest.jsx
@@ -1,46 +0,0 @@
-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 Speedtest({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: speedtestData, error: speedtestError } = useSWR(formatApiUrl(config, "speedtest/latest"));
-
-  if (speedtestError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!speedtestData) {
-    return (
-      <Widget>
-        <Block label={t("speedtest.download")} />
-        <Block label={t("speedtest.upload")} />
-        <Block label={t("speedtest.ping")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block
-        label={t("speedtest.download")}
-        value={t("common.bitrate", { value: speedtestData.data.download * 1024 * 1024 })}
-      />
-      <Block
-        label={t("speedtest.upload")}
-        value={t("common.bitrate", { value: speedtestData.data.upload * 1024 * 1024 })}
-      />
-      <Block
-        label={t("speedtest.ping")}
-        value={t("common.ms", { value: speedtestData.data.ping, style: "unit", unit: "millisecond" })}
-      />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/strelaysrv.jsx
+++ b/src/components/services/widgets/service/strelaysrv.jsx
@@ -1,38 +0,0 @@
-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 StRelaySrv({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: statsData, error: statsError } = useSWR(formatApiUrl(config, `status`));
-
-  if (statsError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!statsData) {
-    return (
-      <Widget>
-        <Block label={t("strelaysrv.numActiveSessions")} />
-        <Block label={t("strelaysrv.numConnections")} />
-        <Block label={t("strelaysrv.bytesProxied")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("strelaysrv.numActiveSessions")} value={t("common.number", { value: statsData.numActiveSessions })} />
-      <Block label={t("strelaysrv.numConnections")}    value={t("common.number", { value: statsData.numConnections })} />
-      <Block label={t("strelaysrv.dataRelayed")}       value={t("common.bytes",  { value: statsData.bytesProxied })} />
-      <Block label={t("strelaysrv.transferRate")}      value={t("common.bitrate",{ value: statsData.kbps10s1m5m15m30m60m[5] })} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/traefik.jsx
+++ b/src/components/services/widgets/service/traefik.jsx
@@ -1,37 +0,0 @@
-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 Traefik({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: traefikData, error: traefikError } = useSWR(formatApiUrl(config, "overview"));
-
-  if (traefikError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!traefikData) {
-    return (
-      <Widget>
-        <Block label={t("traefik.routers")} />
-        <Block label={t("traefik.services")} />
-        <Block label={t("traefik.middleware")} />
-      </Widget>
-    );
-  }
-
-  return (
-    <Widget>
-      <Block label={t("traefik.routers")} value={traefikData.http.routers.total} />
-      <Block label={t("traefik.services")} value={traefikData.http.services.total} />
-      <Block label={t("traefik.middleware")} value={traefikData.http.middlewares.total} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/service/transmission.jsx
+++ b/src/components/services/widgets/service/transmission.jsx
@@ -1,70 +0,0 @@
-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 Transmission({ service }) {
-  const { t } = useTranslation();
-
-  const config = service.widget;
-
-  const { data: torrentData, error: torrentError } = useSWR(formatApiUrl(config));
-
-  if (torrentError) {
-    return <Widget error={t("widget.api_error")} />;
-  }
-
-  if (!torrentData) {
-    return (
-      <Widget>
-        <Block label={t("transmission.leech")} />
-        <Block label={t("transmission.download")} />
-        <Block label={t("transmission.seed")} />
-        <Block label={t("transmission.upload")} />
-      </Widget>
-    );
-  }
-
-  const { torrents } = torrentData.arguments;
-  let rateDl = 0;
-  let rateUl = 0;
-  let completed = 0;
-
-  for (let i = 0; i < torrents.length; i += 1) {
-    const torrent = torrents[i];
-    rateDl += torrent.rateDownload;
-    rateUl += torrent.rateUpload;
-    if (torrent.percentDone  === 1) {
-      completed += 1;
-    }
-  }
-
-  const leech = torrents.length - completed;
-
-  let unitsDl = "KB/s";
-  let unitsUl = "KB/s";
-  rateDl /= 1024;
-  rateUl /= 1024;
-
-  if (rateDl > 1024) {
-    rateDl /= 1024;
-    unitsDl = "MB/s";
-  }
-
-  if (rateUl > 1024) {
-    rateUl /= 1024;
-    unitsUl = "MB/s";
-  }
-
-  return (
-    <Widget>
-      <Block label={t("transmission.leech")} value={t("common.number", { value: leech })} />
-      <Block label={t("transmission.download")} value={`${rateDl.toFixed(2)} ${unitsDl}`} />
-      <Block label={t("transmission.seed")} value={t("common.number", { value: completed })} />
-      <Block label={t("transmission.upload")} value={`${rateUl.toFixed(2)} ${unitsUl}`} />
-    </Widget>
-  );
-}
--- a/src/components/services/widgets/widget.jsx
+++ b/src/components/services/widgets/widget.jsx
@@ -1,11 +0,0 @@
-export default function Widget({ error = false, children }) {
-  if (error) {
-    return (
-      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
-        <div className="font-thin text-sm">{error}</div>
-      </div>
-    );
-  }
-
-  return <div className="relative flex flex-row w-full">{children}</div>;
-}
--- a/src/components/toggles/color.jsx
+++ b/src/components/toggles/color.jsx
@@ -3,7 +3,7 @@ import { IoColorPalette } from "react-icons/io5";
 import { Popover, Transition } from "@headlessui/react";
 import classNames from "classnames";

-import { ColorContext } from "utils/color-context";
+import { ColorContext } from "utils/contexts/color";

 const colors = [
  "slate",
@@ -45,6 +45,7 @@ export default function ColorToggle() {
            className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
            aria-hidden="true"
          />
+          <span className="sr-only">Change color</span>
        </Popover.Button>
        <Transition
          as={Fragment}
@@ -67,6 +68,7 @@ export default function ColorToggle() {
                        `rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-400`
                      )}
                    />
+                    <span className="sr-only">{color}</span>
                  </button>
                ))}
              </div>
--- a/src/components/toggles/revalidate.jsx
+++ b/src/components/toggles/revalidate.jsx
--- a/src/components/toggles/theme.jsx
+++ b/src/components/toggles/theme.jsx
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { MdDarkMode, MdLightMode, MdToggleOff, MdToggleOn } from "react-icons/md";

-import { ThemeContext } from "utils/theme-context";
+import { ThemeContext } from "utils/contexts/theme";

 export default function ThemeToggle() {
  const { theme, setTheme } = useContext(ThemeContext);
--- a/src/components/version.jsx
+++ b/src/components/version.jsx
@@ -1,8 +1,10 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import useSWR from "swr";
 import { compareVersions } from "compare-versions";
 import { MdNewReleases } from "react-icons/md";

+import cachedFetch from "utils/proxy/cached-fetch";
+
 export default function Version() {
  const { t, i18n } = useTranslation();

@@ -10,7 +12,9 @@ export default function Version() {
  const revision = process.env.NEXT_PUBLIC_REVISION ?? "dev";
  const version = process.env.NEXT_PUBLIC_VERSION ?? "dev";

-  const { data: releaseData } = useSWR("https://api.github.com/repos/benphelps/homepage/releases");
+  const cachedFetcher = (resource) => cachedFetch(resource, 5).then((res) => res.json());
+
+  const { data: releaseData } = useSWR("https://api.github.com/repos/benphelps/homepage/releases", cachedFetcher);

  // use Intl.DateTimeFormat to format the date
  const formatDate = (date) => {
@@ -26,10 +30,10 @@ export default function Version() {

  return (
    <div className="flex flex-row items-center">
-      <span className="text-xs text-theme-500 opacity-50">
+      <span className="text-xs text-theme-500 dark:text-theme-400">
        {version} ({revision.substring(0, 7)}, {formatDate(buildTime)})
      </span>
-      {version === "main" || version === "dev"
+      {version === "main" || version === "dev" || version === "nightly"
        ? null
        : releaseData &&
          compareVersions(latestRelease.tag_name, version) > 0 && (
@@ -37,7 +41,7 @@ export default function Version() {
              href={latestRelease.html_url}
              target="_blank"
              rel="noopener noreferrer"
-              className="ml-2 text-xs text-theme-500 opacity-50 flex flex-row items-center"
+              className="ml-2 text-xs text-theme-500 dark:text-theme-400 flex flex-row items-center"
            >
              <MdNewReleases className="mr-1" /> {t("Update Available")}
            </a>
--- a/src/components/widget.jsx
+++ b/src/components/widget.jsx
@@ -1,30 +0,0 @@
-import WeatherApi from "components/widgets/weather/weather";
-import OpenWeatherMap from "components/widgets/openweathermap/weather";
-import Resources from "components/widgets/resources/resources";
-import Search from "components/widgets/search/search";
-import Greeting from "components/widgets/greeting/greeting";
-import DateTime from "components/widgets/datetime/datetime";
-
-const widgetMappings = {
-  weather: WeatherApi, // This key will be deprecated in the future
-  weatherapi: WeatherApi,
-  openweathermap: OpenWeatherMap,
-  resources: Resources,
-  search: Search,
-  greeting: Greeting,
-  datetime: DateTime,
-};
-
-export default function Widget({ widget }) {
-  const InfoWidget = widgetMappings[widget.type];
-
-  if (InfoWidget) {
-    return <InfoWidget options={widget.options} />;
-  }
-
-  return (
-    <div className="flex-none flex flex-row items-center justify-center">
-      Missing <strong>{widget.type}</strong>
-    </div>
-  );
-}
--- a/src/components/widgets/datetime/datetime.jsx
+++ b/src/components/widgets/datetime/datetime.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";

 const textSizes = {
  "4xl": "text-4xl",
--- a/src/components/widgets/openweathermap/icon.jsx
+++ b/src/components/widgets/openweathermap/icon.jsx
@@ -1,4 +1,4 @@
-import mapIcon from "utils/owm-condition-map";
+import mapIcon from "utils/weather/owm-condition-map";

 export default function Icon({ condition, timeOfDay }) {
  const IconComponent = mapIcon(condition, timeOfDay);
--- a/src/components/widgets/openweathermap/weather.jsx
+++ b/src/components/widgets/openweathermap/weather.jsx
@@ -3,7 +3,7 @@ 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 { useTranslation } from "next-i18next";

 import Icon from "./icon";

@@ -80,23 +80,25 @@ export default function OpenWeatherMap({ options }) {

  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 (typeof window !== "undefined") {
+      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 (!requesting && !location) requestLocation();

  if (!location) {
    return (
--- a/src/components/widgets/resources/cpu.jsx
+++ b/src/components/widgets/resources/cpu.jsx
@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { FiCpu } from "react-icons/fi";
 import { BiError } from "react-icons/bi";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";

 import UsageBar from "./usage-bar";

@@ -25,10 +25,20 @@ export default function Cpu({ expanded }) {

  if (!data) {
    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
        <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>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("docker.cpu")}</div>
+          </div>
+          {expanded && (
+            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.load")}</div>
+            </div>
+          )}
+          <UsageBar percent={100} />
        </div>
      </div>
    );
--- a/src/components/widgets/resources/disk.jsx
+++ b/src/components/widgets/resources/disk.jsx
@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { FiHardDrive } from "react-icons/fi";
 import { BiError } from "react-icons/bi";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";

 import UsageBar from "./usage-bar";

@@ -25,10 +25,20 @@ export default function Disk({ options, expanded }) {

  if (!data) {
    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
        <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>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={100} />
        </div>
      </div>
    );
--- a/src/components/widgets/resources/memory.jsx
+++ b/src/components/widgets/resources/memory.jsx
@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { FaMemory } from "react-icons/fa";
 import { BiError } from "react-icons/bi";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";

 import UsageBar from "./usage-bar";

@@ -25,10 +25,20 @@ export default function Memory({ expanded }) {

  if (!data) {
    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
        <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>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={100} />
        </div>
      </div>
    );
--- a/src/components/widgets/resources/usage-bar.jsx
+++ b/src/components/widgets/resources/usage-bar.jsx
@@ -1,8 +1,8 @@
 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-theme-200/20">
      <div
-        className="bg-theme-800/70 h-1 rounded-full dark:bg-white/50"
+        className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000"
        style={{
          width: `${percent}%`,
        }}
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
-import { SiDuckduckgo, SiMicrosoftbing, SiGoogle } from "react-icons/si";
+import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu } from "react-icons/si";

 const providers = {
  google: {
@@ -19,6 +19,11 @@ const providers = {
    url: "https://www.bing.com/search?q=",
    icon: SiMicrosoftbing,
  },
+  baidu: {
+    name: "Baidu",
+    url: "https://www.baidu.com/s?wd=",
+    icon: SiBaidu,
+  },
  custom: {
    name: "Custom",
    url: false,
@@ -81,6 +86,7 @@ export default function Search({ options }) {
        focus:ring-theme-500 dark:focus:ring-white/50"
      >
        <provider.icon className="text-white w-3 h-3" />
+        <span className="sr-only">{t("search.search")}</span>
      </button>
    </form>
  );
--- a/src/components/widgets/weather/icon.jsx
+++ b/src/components/widgets/weather/icon.jsx
@@ -1,4 +1,4 @@
-import mapIcon from "utils/condition-map";
+import mapIcon from "utils/weather/condition-map";

 export default function Icon({ condition, timeOfDay }) {
  const IconComponent = mapIcon(condition, timeOfDay);
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -3,7 +3,7 @@ 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 { useTranslation } from "next-i18next";

 import Icon from "./icon";

@@ -81,23 +81,25 @@ export default function WeatherApi({ options }) {

  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 (typeof window !== "undefined") {
+      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 (!requesting && !location) requestLocation();

  if (!location) {
    return (
--- a/src/components/widgets/widget.jsx
+++ b/src/components/widgets/widget.jsx
@@ -0,0 +1,24 @@
+import dynamic from "next/dynamic";
+
+const widgetMappings = {
+  weatherapi: dynamic(() => import("components/widgets/weather/weather")),
+  openweathermap: dynamic(() => import("components/widgets/openweathermap/weather")),
+  resources: dynamic(() => import("components/widgets/resources/resources")),
+  search: dynamic(() => import("components/widgets/search/search")),
+  greeting: dynamic(() => import("components/widgets/greeting/greeting")),
+  datetime: dynamic(() => import("components/widgets/datetime/datetime")),
+};
+
+export default function Widget({ widget }) {
+  const InfoWidget = widgetMappings[widget.type];
+
+  if (InfoWidget) {
+    return <InfoWidget options={widget.options} />;
+  }
+
+  return (
+    <div className="flex-none flex flex-row items-center justify-center">
+      Missing <strong>{widget.type}</strong>
+    </div>
+  );
+}
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,14 +1,15 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { SWRConfig } from "swr";
+import { appWithTranslation } from "next-i18next";

 import "styles/globals.css";
-import "styles/weather-icons.css";
 import "styles/theme.css";
+import "styles/manrope.css";
+import nextI18nextConfig from "../../next-i18next.config";

-import "utils/i18n";
-import { ColorProvider } from "utils/color-context";
-import { ThemeProvider } from "utils/theme-context";
-import { SettingsProvider } from "utils/settings-context";
+import { ColorProvider } from "utils/contexts/color";
+import { ThemeProvider } from "utils/contexts/theme";
+import { SettingsProvider } from "utils/contexts/settings";

 function MyApp({ Component, pageProps }) {
  return (
@@ -28,4 +29,4 @@ function MyApp({ Component, pageProps }) {
  );
 }

-export default MyApp;
+export default appWithTranslation(MyApp, nextI18nextConfig);
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -4,14 +4,12 @@ export default function Document() {
  return (
    <Html>
      <Head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap"
-          rel="stylesheet"
+        <meta
+          name="description"
+          content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
        />
      </Head>
-      <body className="relative w-full h-full bg-theme-50 dark:bg-theme-800 transition duration-150 ease-in-out">
+      <body>
        <Main />
        <NextScript />
      </body>
--- a/src/pages/api/bookmarks.js
+++ b/src/pages/api/bookmarks.js
@@ -1,25 +1,5 @@
-import { promises as fs } from "fs";
-import path from "path";
-
-import yaml from "js-yaml";
-
-import checkAndCopyConfig from "utils/config";
+import { bookmarksResponse } from "utils/config/api-response";

 export default async function handler(req, res) {
-  checkAndCopyConfig("bookmarks.yaml");
-
-  const bookmarksYaml = path.join(process.cwd(), "config", "bookmarks.yaml");
-  const fileContents = await fs.readFile(bookmarksYaml, "utf8");
-  const bookmarks = yaml.load(fileContents);
-
-  // map easy to write YAML objects into easy to consume JS arrays
-  const bookmarksArray = bookmarks.map((group) => ({
-    name: Object.keys(group)[0],
-    bookmarks: group[Object.keys(group)[0]].map((entries) => ({
-      name: Object.keys(entries)[0],
-      ...entries[Object.keys(entries)[0]][0],
-    })),
-  }));
-
-  res.send(bookmarksArray);
+  res.send(await bookmarksResponse());
 }
--- a/src/pages/api/docker/stats/[...service].js
+++ b/src/pages/api/docker/stats/[...service].js
@@ -1,6 +1,6 @@
 import Docker from "dockerode";

-import getDockerArguments from "utils/docker";
+import getDockerArguments from "utils/config/docker";

 export default async function handler(req, res) {
  const { service } = req.query;
--- a/src/pages/api/docker/status/[...service].js
+++ b/src/pages/api/docker/status/[...service].js
@@ -1,6 +1,6 @@
 import Docker from "dockerode";

-import getDockerArguments from "utils/docker";
+import getDockerArguments from "utils/config/docker";

 export default async function handler(req, res) {
  const { service } = req.query;
--- a/src/pages/api/hash.js
+++ b/src/pages/api/hash.js
@@ -0,0 +1,27 @@
+import { join } from "path";
+import { createHash } from "crypto";
+import { readFileSync } from "fs";
+
+import checkAndCopyConfig from "utils/config/config";
+
+const configs = ["docker.yaml", "settings.yaml", "services.yaml", "bookmarks.yaml", "widgets.yaml"];
+
+function hash(buffer) {
+  const hashSum = createHash("sha256");
+  hashSum.update(buffer);
+  return hashSum.digest("hex");
+}
+
+export default async function handler(req, res) {
+  const hashes = configs.map((config) => {
+    checkAndCopyConfig(config);
+    const configYaml = join(process.cwd(), "config", config);
+    return hash(readFileSync(configYaml, "utf8"));
+  });
+
+  const combinedHash = hash(hashes.join(""));
+
+  res.send({
+    hash: combinedHash,
+  });
+}
--- a/src/pages/api/proxy.js
+++ b/src/pages/api/proxy.js
@@ -2,7 +2,7 @@ import https from "https";

 import getRawBody from "raw-body";

-import { httpRequest, httpsRequest } from "utils/http";
+import { httpRequest, httpsRequest } from "utils/proxy/http";

 export const config = {
  api: {
--- a/src/pages/api/services/index.js
+++ b/src/pages/api/services/index.js
@@ -1,43 +1,5 @@
-/* eslint-disable no-console */
-import { servicesFromConfig, servicesFromDocker, cleanServiceGroups } from "utils/service-helpers";
+import { servicesResponse } from "utils/config/api-response";

 export default async function handler(req, res) {
-  let discoveredServices;
-  let configuredServices;
-
-  try {
-    discoveredServices = cleanServiceGroups(await servicesFromDocker());
-  } catch (e) {
-    console.error("Failed to discover services, please check docker.yaml for errors or remove example entries.");
-    console.error(e);
-    discoveredServices = [];
-  }
-
-  try {
-    configuredServices = cleanServiceGroups(await servicesFromConfig());
-  } catch (e) {
-    console.error("Failed to load services.yaml, please check for errors");
-    console.error(e);
-    configuredServices = [];
-  }
-
-  const mergedGroupsNames = [
-    ...new Set([discoveredServices.map((group) => group.name), configuredServices.map((group) => group.name)].flat()),
-  ];
-
-  const mergedGroups = [];
-
-  mergedGroupsNames.forEach((groupName) => {
-    const discoveredGroup = discoveredServices.find((group) => group.name === groupName) || { services: [] };
-    const configuredGroup = configuredServices.find((group) => group.name === groupName) || { services: [] };
-
-    const mergedGroup = {
-      name: groupName,
-      services: [...discoveredGroup.services, ...configuredGroup.services].filter((service) => service),
-    };
-
-    mergedGroups.push(mergedGroup);
-  });
-
-  res.send(mergedGroups);
+  res.send(await servicesResponse());
 }
--- a/src/pages/api/services/proxy.js
+++ b/src/pages/api/services/proxy.js
@@ -1,128 +1,63 @@
+import { formatApiCall } from "utils/proxy/api-helpers";
 import createLogger from "utils/logger";
-import genericProxyHandler from "utils/proxies/generic";
-import credentialedProxyHandler from "utils/proxies/credentialed";
-import rutorrentProxyHandler from "utils/proxies/rutorrent";
-import nzbgetProxyHandler from "utils/proxies/nzbget";
-import npmProxyHandler from "utils/proxies/npm";
-import transmissionProxyHandler from "utils/proxies/transmission";
-import qbittorrentProxyHandler from "utils/proxies/qbittorrent";
+import genericProxyHandler from "utils/proxy/handlers/generic";
+import widgets from "widgets/widgets";

-const logger = createLogger('servicesProxy');
-
-function asJson(data) {
-  if (data?.length > 0) {
-    const json = JSON.parse(data.toString());
-    return json;
-  }
-  return data;
-}
-
-function jsonArrayTransform(data, transform) {
-  const json = asJson(data);
-  if (json instanceof Array) {
-    return transform(json);
-  }
-  return json;
-}
-
-function jsonArrayFilter(data, filter) {
-  return jsonArrayTransform(data, (items) => items.filter(filter));
-}
-
-const serviceProxyHandlers = {
-  // uses query param auth
-  emby: genericProxyHandler,
-  jellyfin: genericProxyHandler,
-  pihole: genericProxyHandler,
-  radarr: {
-    proxy: genericProxyHandler,
-    maps: {
-      movie: (data) => ({
-        wanted: jsonArrayFilter(data, (item) => item.isAvailable === false).length,
-        have: jsonArrayFilter(data, (item) => item.isAvailable === true).length,
-      }),
-    },
-  },
-  sonarr: {
-    proxy: genericProxyHandler,
-    maps: {
-      series: (data) => ({
-        total: asJson(data).length,
-      }),
-    },
-  },
-  lidarr: {
-    proxy: genericProxyHandler,
-    maps: {
-      album: (data) => ({
-        have: jsonArrayFilter(data, (item) => item?.statistics?.percentOfTracks === 100).length,
-      }),
-    },
-  },
-  readarr: {
-    proxy: genericProxyHandler,
-    maps: {
-      book: (data) => ({
-        have: jsonArrayFilter(data, (item) => item?.statistics?.bookFileCount > 0).length,
-      }),
-    },
-  },
-  bazarr: {
-    proxy: genericProxyHandler,
-    maps: {
-      movies: (data) => ({
-        total: asJson(data).total,
-      }),
-      episodes: (data) => ({
-        total: asJson(data).total,
-      }),
-    },
-  },
-  speedtest: genericProxyHandler,
-  tautulli: genericProxyHandler,
-  traefik: genericProxyHandler,
-  sabnzbd: genericProxyHandler,
-  jackett: genericProxyHandler,
-  adguard: genericProxyHandler,
-  strelaysrv: genericProxyHandler,
-  mastodon: genericProxyHandler,
-  // uses X-API-Key (or similar) header auth
-  gotify: credentialedProxyHandler,
-  portainer: credentialedProxyHandler,
-  jellyseerr: credentialedProxyHandler,
-  overseerr: credentialedProxyHandler,
-  ombi: credentialedProxyHandler,
-  coinmarketcap: credentialedProxyHandler,
-  prowlarr: credentialedProxyHandler,
-  // super specific handlers
-  rutorrent: rutorrentProxyHandler,
-  nzbget: nzbgetProxyHandler,
-  npm: npmProxyHandler,
-  transmission: transmissionProxyHandler,
-  qbittorrent: qbittorrentProxyHandler,
-};
+const logger = createLogger("servicesProxy");

 export default async function handler(req, res) {
  try {
    const { type } = req.query;
+    const widget = widgets[type];

-    const serviceProxyHandler = serviceProxyHandlers[type];
+    if (!widget) {
+      logger.debug("Unknown proxy service type: %s", type);
+      return res.status(403).json({ error: "Unkown proxy service type" });
+    }

-    if (serviceProxyHandler) {
-      if (serviceProxyHandler instanceof Function) {
-        return serviceProxyHandler(req, res);
-      }
-  
-      const { proxy, maps } = serviceProxyHandler;
-      if (proxy) {
-        return proxy(req, res, maps);
+    const serviceProxyHandler = widget.proxyHandler || genericProxyHandler;
+
+    if (serviceProxyHandler instanceof Function) {
+      // map opaque endpoints to their actual endpoint
+      if (widget?.mappings) {
+        const mapping = widget?.mappings?.[req.query.endpoint];
+        const mappingParams = mapping?.params;
+        const map = mapping?.map;
+        const endpoint = mapping?.endpoint;
+        const endpointProxy = mapping?.proxyHandler || serviceProxyHandler;
+
+        if (!endpoint) {
+          logger.debug("Unsupported service endpoint: %s", type);
+          return res.status(403).json({ error: "Unsupported service endpoint" });
+        }
+
+        req.method = mapping?.method || "GET";
+        req.query.endpoint = endpoint;
+
+        if (req.query.segments) {
+          const segments = JSON.parse(req.query.segments);
+          req.query.endpoint = formatApiCall(endpoint, segments);
+        }
+
+        if (req.query.query && mappingParams) {
+          const queryParams = JSON.parse(req.query.query);
+          const query = new URLSearchParams(mappingParams.map((p) => [p, queryParams[p]]));
+          req.query.endpoint = `${req.query.endpoint}?${query}`;
+        }
+
+        if (endpointProxy instanceof Function) {
+          return endpointProxy(req, res, map);
+        }
+
+        return serviceProxyHandler(req, res, map);
      }
+
+      return serviceProxyHandler(req, res);
    }

    logger.debug("Unknown proxy service type: %s", type);
    return res.status(403).json({ error: "Unkown proxy service type" });
-  }
-  catch (ex) {
+  } catch (ex) {
    logger.error(ex);
    return res.status(500).send({ error: "Unexpected error" });
  }
--- a/src/pages/api/validate.js
+++ b/src/pages/api/validate.js
@@ -1,4 +1,4 @@
-import checkAndCopyConfig from "utils/config";
+import checkAndCopyConfig from "utils/config/config";

 const configs = ["docker.yaml", "settings.yaml", "services.yaml", "bookmarks.yaml"];

--- a/src/pages/api/widgets/index.js
+++ b/src/pages/api/widgets/index.js
@@ -1,22 +1,5 @@
-import { promises as fs } from "fs";
-import path from "path";
-
-import yaml from "js-yaml";
-
-import checkAndCopyConfig from "utils/config";
+import { widgetsResponse } from "utils/config/api-response";

 export default async function handler(req, res) {
-  checkAndCopyConfig("widgets.yaml");
-
-  const widgetsYaml = path.join(process.cwd(), "config", "widgets.yaml");
-  const fileContents = await fs.readFile(widgetsYaml, "utf8");
-  const widgets = yaml.load(fileContents);
-
-  // map easy to write YAML objects into easy to consume JS arrays
-  const widgetsArray = widgets.map((group) => ({
-    type: Object.keys(group)[0],
-    options: { ...group[Object.keys(group)[0]] },
-  }));
-
-  res.send(widgetsArray);
+  res.send(await widgetsResponse());
 }
--- a/src/pages/api/widgets/openweathermap.js
+++ b/src/pages/api/widgets/openweathermap.js
@@ -1,5 +1,5 @@
-import cachedFetch from "utils/cached-fetch";
-import { getSettings } from "utils/config";
+import cachedFetch from "utils/proxy/cached-fetch";
+import { getSettings } from "utils/config/config";

 export default async function handler(req, res) {
  const { latitude, longitude, units, provider, cache, lang } = req.query;
--- a/src/pages/api/widgets/weather.js
+++ b/src/pages/api/widgets/weather.js
@@ -1,5 +1,5 @@
-import cachedFetch from "utils/cached-fetch";
-import { getSettings } from "utils/config";
+import cachedFetch from "utils/proxy/cached-fetch";
+import { getSettings } from "utils/config/config";

 export default async function handler(req, res) {
  const { latitude, longitude, provider, cache, lang } = req.query;
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,26 +1,30 @@
 /* eslint-disable react/no-array-index-key */
-import useSWR from "swr";
+import useSWR, { SWRConfig } from "swr";
 import Head from "next/head";
 import dynamic from "next/dynamic";
-import { useTranslation } from "react-i18next";
-import { useEffect, useContext } from "react";
+import classNames from "classnames";
+import { useTranslation } from "next-i18next";
+import { useEffect, useContext, useState } from "react";
 import { BiError } from "react-icons/bi";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";

 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
-import Widget from "components/widget";
-import Revalidate from "components/revalidate";
+import Widget from "components/widgets/widget";
+import Revalidate from "components/toggles/revalidate";
 import createLogger from "utils/logger";
-import { getSettings } from "utils/config";
-import { ColorContext } from "utils/color-context";
-import { ThemeContext } from "utils/theme-context";
-import { SettingsContext } from "utils/settings-context";
+import useWindowFocus from "utils/hooks/window-focus";
+import { getSettings } from "utils/config/config";
+import { ColorContext } from "utils/contexts/color";
+import { ThemeContext } from "utils/contexts/theme";
+import { SettingsContext } from "utils/contexts/settings";
+import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";

-const ThemeToggle = dynamic(() => import("components/theme-toggle"), {
+const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
  ssr: false,
 });

-const ColorToggle = dynamic(() => import("components/color-toggle"), {
+const ColorToggle = dynamic(() => import("components/toggles/color"), {
  ssr: false,
 });

@@ -30,15 +34,26 @@ const Version = dynamic(() => import("components/version"), {

 const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"];

-export function getStaticProps() {
+export async function getStaticProps() {
  let logger;
  try {
    logger = createLogger("index");
    const { providers, ...settings } = getSettings();

+    const services = await servicesResponse();
+    const bookmarks = await bookmarksResponse();
+    const widgets = await widgetsResponse();
+
    return {
      props: {
        initialSettings: settings,
+        fallback: {
+          "/api/services": services,
+          "/api/bookmarks": bookmarks,
+          "/api/widgets": widgets,
+          "/api/hash": false,
+        },
+        ...(await serverSideTranslations(settings.language ?? "en")),
      },
    };
  } catch (e) {
@@ -48,17 +63,64 @@ export function getStaticProps() {
    return {
      props: {
        initialSettings: {},
+        fallback: {
+          "/api/services": [],
+          "/api/bookmarks": [],
+          "/api/widgets": [],
+          "/api/hash": false,
+        },
+        ...(await serverSideTranslations("en")),
      },
    };
  }
 }

-export default function Index({ initialSettings }) {
+function Index({ initialSettings, fallback }) {
+  const windowFocused = useWindowFocus();
+  const [stale, setStale] = useState(false);
  const { data: errorsData } = useSWR("/api/validate");
+  const { data: hashData, mutate: mutateHash } = useSWR("/api/hash");
+
+  useEffect(() => {
+    if (windowFocused) {
+      mutateHash();
+    }
+  }, [windowFocused, mutateHash]);
+
+  useEffect(() => {
+    if (hashData) {
+      if (typeof window !== "undefined") {
+        const previousHash = localStorage.getItem("hash");
+
+        if (!previousHash) {
+          localStorage.setItem("hash", hashData.hash);
+        }
+
+        if (previousHash && previousHash !== hashData.hash) {
+          setStale(true);
+          localStorage.setItem("hash", hashData.hash);
+
+          fetch("/api/revalidate").then((res) => {
+            if (res.ok) {
+              window.location.reload();
+            }
+          });
+        }
+      }
+    }
+  }, [hashData]);
+
+  if (stale) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="w-24 h-24 border-2 border-theme-400 border-solid rounded-full animate-spin border-t-transparent" />
+      </div>
+    );
+  }

  if (errorsData && errorsData.length > 0) {
    return (
-      <div className="w-full container m-auto justify-center p-10">
+      <div className="w-full h-screen container m-auto justify-center p-10 pointer-events-none">
        <div className="flex flex-col">
          {errorsData.map((error, i) => (
            <div
@@ -80,7 +142,11 @@ export default function Index({ initialSettings }) {
    );
  }

-  return <Home initialSettings={initialSettings} />;
+  return (
+    <SWRConfig value={{ fallback, fetcher: (resource, init) => fetch(resource, init).then((res) => res.json()) }}>
+      <Home initialSettings={initialSettings} />
+    </SWRConfig>
+  );
 }

 function Home({ initialSettings }) {
@@ -97,13 +163,6 @@ function Home({ initialSettings }) {
  const { data: bookmarks } = useSWR("/api/bookmarks");
  const { data: widgets } = useSWR("/api/widgets");

-  const wrappedStyle = {};
-  if (settings && settings.background) {
-    wrappedStyle.backgroundImage = `url(${settings.background})`;
-    wrappedStyle.backgroundSize = "cover";
-    wrappedStyle.opacity = settings.backgroundOpacity ?? 1;
-  }
-
  useEffect(() => {
    if (settings.language) {
      i18n.changeLanguage(settings.language);
@@ -121,12 +180,11 @@ function Home({ initialSettings }) {
  return (
    <>
      <Head>
-        <title>{settings.title || "Homepage"}</title>
-        {settings.base && <base href={settings.base} />}
-        {settings.favicon && <link rel="icon" href={settings.favicon} />}
+        <title>{initialSettings.title || "Homepage"}</title>
+        {initialSettings.base && <base href={initialSettings.base} />}
+        {initialSettings.favicon && <link rel="icon" href={initialSettings.favicon} />}
      </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="relative container m-auto flex flex-col justify-between z-10">
        <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 && (
            <>
@@ -150,7 +208,7 @@ function Home({ initialSettings }) {
        {services && (
          <div className="flex flex-wrap p-8 items-start">
            {services.map((group) => (
-              <ServicesGroup key={group.name} services={group} layout={settings.layout?.[group.name]} />
+              <ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
            ))}
          </div>
        )}
@@ -164,9 +222,9 @@ function Home({ initialSettings }) {
        )}

        <div className="flex p-8 pb-0 w-full justify-end">
-          {!settings?.color && <ColorToggle />}
+          {!initialSettings?.color && <ColorToggle />}
          <Revalidate />
-          {!settings?.theme && <ThemeToggle />}
+          {!initialSettings?.theme && <ThemeToggle />}
        </div>

        <div className="flex p-8 pt-4 w-full justify-end">
@@ -176,3 +234,40 @@ function Home({ initialSettings }) {
    </>
  );
 }
+
+export default function Wrapper({ initialSettings, fallback }) {
+  const wrappedStyle = {};
+  if (initialSettings && initialSettings.background) {
+    // wrappedStyle.backgroundImage = `url(${initialSettings.background})`;
+    // wrappedStyle.backgroundSize = "cover";
+    const opacity = initialSettings.backgroundOpacity ?? 1;
+    const opacityValue = 1 - opacity;
+    wrappedStyle.backgroundImage = `
+      linear-gradient(
+        rgb(var(--bg-color) / ${opacityValue}),
+        rgb(var(--bg-color) / ${opacityValue})
+      ),
+      url(${initialSettings.background})`;
+    wrappedStyle.backgroundPosition = "center";
+    wrappedStyle.backgroundSize = "cover";
+  }
+
+  return (
+    <div
+      id="page_wrapper"
+      className={classNames(
+        "relative",
+        initialSettings.theme && initialSettings.theme,
+        initialSettings.color && `theme-${initialSettings.color}`
+      )}
+    >
+      <div
+        id="page_container"
+        className="fixed overflow-auto w-full h-full bg-theme-50 dark:bg-theme-800 transition-all"
+        style={wrappedStyle}
+      >
+        <Index initialSettings={initialSettings} fallback={fallback} />
+      </div>
+    </div>
+  );
+}
--- a/src/styles/font/Manrope.woff2
+++ b/src/styles/font/Manrope.woff2
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ben Phelps	de4ce73a9a	fix hidden scrollbars this was an adventure	2022-09-30 23:34:48 +03:00
Ben Phelps	f52c6f3b41	improved static styles and x-browser scrollbars	2022-09-30 22:13:37 +03:00
Ben Phelps	2271cc0044	cache github response for 5 min	2022-09-30 21:56:22 +03:00
Ben Phelps	931ffe4c84	Merge pull request #309 from JazzFisch/configurable-widget-fields Allow widget field visibility to be configurable	2022-09-30 21:51:34 +03:00
lok	45f39120da	Translated using Weblate (Yue) Currently translated at 100.0% (118 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/yue/	2022-09-30 09:22:30 +02:00
FunsKiTo	000e15640a	Translated using Weblate (Spanish) Currently translated at 100.0% (118 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/	2022-09-30 09:22:30 +02:00
Jason Fischer	d4ad11a63f	Slightly simplify container.jsx	2022-09-29 21:20:01 -07:00
Jason Fischer	c533966050	Merge branch 'main' into configurable-widget-fields	2022-09-29 21:15:56 -07:00
Jason Fischer	9b7d6b196f	Allow widget field visibility to be configurable	2022-09-29 21:15:25 -07:00
C8opmBM	512a6cd4b9	Translated using Weblate (Romanian) Currently translated at 100.0% (118 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ro/	2022-09-29 10:41:07 +02:00
Nonoss117	6b0659af1f	Translated using Weblate (French) Currently translated at 100.0% (118 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/fr/	2022-09-29 10:41:07 +02:00
Sascha Jelinek	12279e9bda	Translated using Weblate (German) Currently translated at 100.0% (118 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/de/	2022-09-29 10:41:07 +02:00
Ben Phelps	dadd501843	fix case with empty bookmarks and widgets	2022-09-29 11:40:09 +03:00
Jason Fischer	756f6310af	Merge pull request #302 from JazzFisch/fix-prowlarr Fix Prowlarr show API Error	2022-09-28 16:06:46 -07:00
Jason Fischer	7a19bedc25	Fix Prowlarr show API Error	2022-09-28 15:36:08 -07:00
Ben Phelps	a10a30a22c	fix some error edge cases	2022-09-28 22:40:54 +03:00
Ben Phelps	57e4ca355b	add widgets to config hash	2022-09-28 21:58:43 +03:00
Anonymous	fed3102492	Translated using Weblate (Yue) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/yue/	2022-09-28 19:17:58 +02:00
Anonymous	64e0e256ce	Translated using Weblate (Portuguese (Brazil)) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt_BR/	2022-09-28 19:17:58 +02:00
Anonymous	287581025e	Translated using Weblate (Romanian) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ro/	2022-09-28 19:17:58 +02:00
Anonymous	3184b9ea0d	Translated using Weblate (Hebrew) Currently translated at 85.5% (101 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/he/	2022-09-28 19:17:57 +02:00
Anonymous	233eb7e785	Translated using Weblate (Hungarian) Currently translated at 91.5% (108 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/hu/	2022-09-28 19:17:57 +02:00
Anonymous	a801f8f65f	Translated using Weblate (Croatian) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/hr/	2022-09-28 19:17:57 +02:00
Anonymous	4afe654bcc	Translated using Weblate (Swedish) Currently translated at 90.6% (107 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/sv/	2022-09-28 19:17:57 +02:00
Anonymous	926be245a9	Translated using Weblate (Polish) Currently translated at 83.0% (98 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pl/	2022-09-28 19:17:57 +02:00
Anonymous	f1615e6660	Translated using Weblate (Catalan) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ca/	2022-09-28 19:17:56 +02:00
Anonymous	ac6ecf21a0	Translated using Weblate (Chinese (Traditional)) Currently translated at 7.6% (9 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/zh_Hant/	2022-09-28 19:17:56 +02:00
Anonymous	8629f0a26d	Translated using Weblate (Dutch) Currently translated at 53.3% (63 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nl/	2022-09-28 19:17:56 +02:00
Anonymous	7a6ef23adb	Translated using Weblate (Vietnamese) Currently translated at 37.2% (44 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/vi/	2022-09-28 19:17:56 +02:00
Anonymous	dfa19c96b9	Translated using Weblate (Norwegian Bokmål) Currently translated at 66.9% (79 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/nb_NO/	2022-09-28 19:17:55 +02:00
Anonymous	334c023b4f	Translated using Weblate (Italian) Currently translated at 65.2% (77 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/it/	2022-09-28 19:17:55 +02:00
Anonymous	1f373e0b3e	Translated using Weblate (Chinese (Simplified)) Currently translated at 92.3% (109 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/zh_Hans/	2022-09-28 19:17:55 +02:00
Anonymous	47fc4040d5	Translated using Weblate (Russian) Currently translated at 19.4% (23 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ru/	2022-09-28 19:17:54 +02:00
Anonymous	f5e47ab61a	Translated using Weblate (Portuguese) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt/	2022-09-28 19:17:54 +02:00
Anonymous	83cdb2ed2b	Translated using Weblate (French) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/fr/	2022-09-28 19:17:54 +02:00
Anonymous	d67eca8882	Translated using Weblate (Spanish) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/	2022-09-28 19:17:54 +02:00
Anonymous	a0044dd3ad	Translated using Weblate (German) Currently translated at 97.4% (115 of 118 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/de/	2022-09-28 19:17:53 +02:00
Jason Fischer	149ed8c266	Fix transmission leech and seed showing NaN	2022-09-28 09:58:01 -07:00
Jason Fischer	65755a08aa	Better login strategy for qbittorrent proxy - Additional logging in httpProxy	2022-09-28 09:55:18 -07:00
Jason Fischer	1ea8e38372	Fix Transmission proxy error with URL and CSRF caching	2022-09-28 08:57:04 -07:00
Ben Phelps	69adb3fde2	Merge branch 'main' into widget-refactor	2022-09-28 17:51:30 +03:00
lok	28be9b5988	Translated using Weblate (Yue) Currently translated at 100.0% (115 of 115 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/yue/	2022-09-28 16:18:58 +02:00
Ben Phelps	0590896453	display as ms, not millisec or milliseconds	2022-09-28 10:15:18 +03:00
Ben Phelps	8f59c4a236	trim url trailing slashes	2022-09-28 10:14:44 +03:00
Jason Fischer	550af91030	Add Lidarr as a recognized widget type	2022-09-27 21:22:26 -07:00
Ben Phelps	bb5721c473	ui polish	2022-09-28 02:32:39 +03:00
Ben Phelps	68c93c65e6	bring all transfer rates inline, using bitrate	2022-09-28 02:32:30 +03:00
Ben Phelps	d36efa5796	styled scollbars lets see how this one lands	2022-09-27 22:59:29 +03:00
Ben Phelps	0a58f259ff	wrapped proxy calls via useWidgetAPI	2022-09-27 22:59:14 +03:00
Ben Phelps	649f0038bc	update images	2022-09-27 20:49:49 +03:00
Ben Phelps	9697e302d7	add a little more spacing	2022-09-27 20:41:19 +03:00
Ben Phelps	415d59eeb3	header spacing	2022-09-27 20:40:50 +03:00
Ben Phelps	3cb06eb526	smaller text	2022-09-27 20:40:21 +03:00
Ben Phelps	2087c775fc	actually styling	2022-09-27 20:38:10 +03:00
Ben Phelps	4dd4363e91	readme styling	2022-09-27 20:37:13 +03:00
Ben Phelps	314050b568	Merge branch 'main' into widget-refactor	2022-09-27 19:26:37 +03:00
Jason Fischer	1765a97f31	Merge pull request #284 from josways/main support Baidu search engine	2022-09-27 08:48:38 -07:00
Ben Phelps	30ac8cb41c	new preview image	2022-09-27 17:44:50 +03:00
Anonymous	959b778cd7	Translated using Weblate (Yue) Currently translated at 100.0% (0 of 0 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/yue/	2022-09-27 15:38:18 +02:00
Juan Manuel Bennàssar Carretero	ca87a5527d	Translated using Weblate (Spanish) Currently translated at 100.0% (115 of 115 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/es/	2022-09-27 15:38:17 +02:00
lok	711c3d1b67	Added translation using Weblate (Yue)	2022-09-27 15:38:07 +02:00
Ben Phelps	5210a68cc6	remove debug	2022-09-27 10:51:00 +03:00
Ben Phelps	616e56e3f5	fix qbittorrent widget	2022-09-27 10:49:03 +03:00
Ben Phelps	8e0075ff90	expire all cookies after 1 hour	2022-09-27 10:48:52 +03:00
Ben Phelps	c980c70798	revalidate config changes, check on focus changes	2022-09-26 22:54:12 +03:00
Josway	fa2763d8cd	support Baidu search engine	2022-09-26 23:06:42 +08:00
Josway	d18e472623	support Baidu search engine	2022-09-26 23:02:59 +08:00
Ben Phelps	5f0c1ec70a	tweak styles	2022-09-26 16:56:20 +03:00
Ben Phelps	4386999c38	further restructuring	2022-09-26 15:25:10 +03:00
Ben Phelps	9b07f3eb90	Merge branch 'main' into widget-refactor	2022-09-26 15:06:26 +03:00
Ben Phelps	b280e18651	fix nightly issue	2022-09-26 15:06:14 +03:00
Ben Phelps	086bfa310f	lighthouse requirements	2022-09-26 15:03:02 +03:00
Ben Phelps	990ae8464e	only render en by default	2022-09-26 14:43:03 +03:00
Ben Phelps	e4c82b5e8d	fix always loading docker stats block	2022-09-26 14:42:40 +03:00
Ben Phelps	4d790feaae	formatting cleanup	2022-09-26 14:42:31 +03:00
Ben Phelps	b72dca0e2e	only create each logger once	2022-09-26 14:42:13 +03:00
Ben Phelps	e1a3a82f75	utils cleanup, initial static generation	2022-09-26 12:04:37 +03:00
Ben Phelps	ec8700f3e9	fix widgets without mappings	2022-09-26 10:58:31 +03:00
Ben Phelps	d999bb3f09	fix portainer widget	2022-09-26 10:58:22 +03:00
Ben Phelps	a83d5132d9	refactor lidarr widget	2022-09-26 10:58:14 +03:00
Jason Fischer	1840e9a57a	Add authentik	2022-09-25 17:42:16 -07:00
Jason Fischer	d876ba30d4	Merge branch 'main' into widget-refactor	2022-09-25 16:23:31 -07:00
Ben Phelps	47bc073fb4	widget refactoring and cleanup	2022-09-26 02:23:02 +03:00
Jason Fischer	808e79e2ac	Add Docker, Emby, Gotify, Jackett, and JellySeerr widgets	2022-09-25 16:15:47 -07:00
Mauricio Kalil	371eacb354	Translated using Weblate (Portuguese (Brazil)) Currently translated at 100.0% (115 of 115 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt_BR/	2022-09-26 00:26:59 +02:00
Ben Phelps	f04f5921e1	fix fr number formatting	2022-09-26 01:26:55 +03:00
Ben Phelps	035dd25ece	widget refactoring	2022-09-26 00:35:54 +03:00
Jason Fischer	03fa2f86d7	Add AdGuard, Bazarr, and Coin Market Cap widgets - Allow setting HTTP method in widget.js - Allow sending allow listed query params to proxy	2022-09-25 14:31:41 -07:00
Jason Fischer	f999f4a467	Add Sonarr refactor	2022-09-25 10:13:31 -07:00
Ben Phelps	5cfadaea7f	Merge branch 'main' into widget-refactor	2022-09-25 19:44:22 +03:00
Ben Phelps	562235f828	starting of widget refactoring	2022-09-25 19:43:47 +03:00
Ben Phelps	d6f6ea9dba	add meta tag	2022-09-25 19:43:27 +03:00
Ben Phelps	8bc240b934	refactor i18n to be server side	2022-09-25 19:43:00 +03:00
Ben Phelps	3ae4113043	refactor docker stats open/close	2022-09-25 19:38:02 +03:00
Anonymous	1f52435bc1	Translated using Weblate (Portuguese (Brazil)) Currently translated at 100.0% (0 of 0 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/pt_BR/	2022-09-25 15:20:25 +02:00
Mauricio Kalil	4d0dfcca61	Added translation using Weblate (Portuguese (Brazil))	2022-09-25 15:20:17 +02:00
C8opmBM	ea9076652a	Translated using Weblate (Romanian) Currently translated at 100.0% (115 of 115 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ro/	2022-09-25 15:18:08 +02:00
Milo Ivir	af1a464d87	Translated using Weblate (Croatian) Currently translated at 100.0% (115 of 115 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/hr/	2022-09-25 15:18:08 +02:00
Ben Phelps	50fe6041f0	better fallback support	2022-09-24 15:13:14 +03:00
Ben Phelps	555a4b6b05	extralight is extra… light	2022-09-24 14:54:37 +03:00
Ben Phelps	7709be8118	fix Head	2022-09-24 14:53:46 +03:00
Ben Phelps	130ac76e0c	update packages	2022-09-24 14:52:54 +03:00
Ben Phelps	ae315f1789	use new Manrope font, remove external font dep	2022-09-24 14:51:12 +03:00
Ben Phelps	4782e72d88	remove unused font	2022-09-24 14:49:14 +03:00
C8opmBM	d69cafee01	Translated using Weblate (Romanian) Currently translated at 10.4% (12 of 115 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ro/	2022-09-24 13:45:23 +02:00
Anonymous	e066ed58ca	Translated using Weblate (Romanian) Currently translated at 100.0% (0 of 0 strings) Translation: Homepage/Homepage Translate-URL: https://hosted.weblate.org/projects/homepage/homepage/ro/	2022-09-24 13:42:48 +02:00
C8opmBM	05a65cbf9d	Added translation using Weblate (Romanian)	2022-09-24 13:42:39 +02:00