Chore: full react hooks eslint compliance (#7040)

src/widgets/arcane/component.jsx

@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-const MAX_FIELDS = 4;
+const DEFAULT_FIELDS = ["running", "stopped", "total", "image_updates"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields) {
-    widget.fields = ["running", "stopped", "total", "image_updates"];
-  } else if (widget.fields.length > MAX_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_FIELDS);
-  }
-
   const envNotSet = widget.env == null || widget.env === "";
 
   const { data: containers, error: containersError } = useWidgetAPI(widget, envNotSet ? "" : "containers");

src/widgets/arcane/component.test.jsx

@@ -57,7 +57,7 @@ describe("widgets/arcane/component", () => {
     expect(screen.getByText("arcane.image_updates")).toBeInTheDocument();
   });
 
-  it("truncates custom fields to the max allowed", () => {
+  it("renders only the first four custom fields without mutating the input", () => {
     useWidgetAPI.mockImplementation(() => ({ data: undefined, error: undefined }));
 
     const service = {
@@ -65,7 +65,8 @@ describe("widgets/arcane/component", () => {
     };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    // sliced to first four entries
+    // The helper caps the copied fields used for rendering and leaves the configured service unchanged.
+    expect(service.widget.fields).toEqual(["running", "stopped", "total", "images", "images_unused"]);
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("docker.running")).toBeInTheDocument();
     expect(screen.getByText("dockhand.stopped")).toBeInTheDocument();

src/widgets/argocd/component.jsx

@@ -2,19 +2,14 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["apps", "synced", "outOfSync", "healthy"];
+
+export default function Component({ service: configuredService }) {
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields) {
-    widget.fields = ["apps", "synced", "outOfSync", "healthy"];
-  }
-
-  const MAX_ALLOWED_FIELDS = 4;
-  if (widget.fields.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   const { data: appsData, error: appsError } = useWidgetAPI(widget, "applications");
 
   const appCounts = widget.fields.map((status) => {

src/widgets/argocd/component.test.jsx

@@ -25,7 +25,7 @@ describe("widgets/argocd/component", () => {
     const service = { widget: { type: "argocd", fields: ["apps", "synced", "outOfSync", "healthy", "extra"] } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["apps", "synced", "outOfSync", "healthy"]);
+    expect(service.widget.fields).toEqual(["apps", "synced", "outOfSync", "healthy", "extra"]);
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("argocd.apps")).toBeInTheDocument();
     expect(screen.getByText("argocd.synced")).toBeInTheDocument();

src/widgets/authentik/component.jsx

@@ -2,10 +2,14 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
+import useCurrentTime from "utils/hooks/use-current-time";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+const DAY = 24 * 60 * 60 * 1000;
+
 export default function Component({ service }) {
   const { t } = useTranslation();
+  const currentTime = useCurrentTime();
 
   const { widget } = service;
   const isV2 = widget.version === 2;
@@ -45,7 +49,7 @@ export default function Component({ service }) {
   switch (widget.version) {
     // v1 is default
     default:
-      const yesterday = new Date(Date.now()).setHours(-24);
+      const yesterday = currentTime - DAY;
       loginsLast24H = loginsData.reduce(
         (total, current) => (current.x_cord >= yesterday ? total + current.y_cord : total),
         0,

src/widgets/authentik/component.test.jsx

@@ -71,7 +71,8 @@ describe("widgets/authentik/component", () => {
 
   it("computes v1 login/failed counts for entries within the last 24h window", () => {
     vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-01-02T00:00:00Z"));
+    // Use midday so a mistaken previous-midnight cutoff would include the 25-hour-old entries.
+    vi.setSystemTime(new Date("2026-01-02T12:00:00Z"));
 
     const now = Date.now();
     const oneHourAgo = now - 60 * 60 * 1000;

src/widgets/backrest/component.jsx

@@ -3,13 +3,14 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 const BACKREST_DEFAULT_FIELDS = ["num_success_latest", "num_failure_latest", "num_failure_30", "bytes_added_30"];
-const MAX_ALLOWED_FIELDS = 4;
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, BACKREST_DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data, error } = useWidgetAPI(widget, "summary");
@@ -18,12 +19,6 @@ export default function Component({ service }) {
     return <Container service={service} error={error} />;
   }
 
-  if (!widget.fields?.length) {
-    widget.fields = BACKREST_DEFAULT_FIELDS;
-  } else if (widget.fields.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!data) {
     return (
       <Container service={service}>

src/widgets/backrest/component.test.jsx

@@ -24,12 +24,7 @@ describe("widgets/backrest/component", () => {
     const service = { widget: { type: "backrest" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual([
-      "num_success_latest",
-      "num_failure_latest",
-      "num_failure_30",
-      "bytes_added_30",
-    ]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
 
     expect(screen.getByText("backrest.num_success_latest")).toBeInTheDocument();
@@ -48,7 +43,7 @@ describe("widgets/backrest/component", () => {
 
     renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["a", "b", "c", "d"]);
+    expect(service.widget.fields).toEqual(["a", "b", "c", "d", "e"]);
   });
 
   it("renders values and respects field filtering", () => {

src/widgets/beszel/component.jsx

@@ -3,23 +3,21 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const SUMMARY_FIELDS = ["systems", "up"];
+const SYSTEM_FIELDS = ["name", "status", "cpu", "memory"];
+
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const defaultFields = configuredService.widget.systemId ? SYSTEM_FIELDS : SUMMARY_FIELDS;
+  const service = withWidgetFields(configuredService, defaultFields);
   const { widget } = service;
   const { systemId } = widget;
 
   const { data: systems, error: systemsError } = useWidgetAPI(widget, "systems");
 
-  const MAX_ALLOWED_FIELDS = 4;
-  if (!widget.fields?.length > 0) {
-    widget.fields = systemId ? ["name", "status", "cpu", "memory"] : ["systems", "up"];
-  }
-  if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   let system = null;
   let finalError = systemsError;
 

src/widgets/beszel/component.test.jsx

@@ -23,7 +23,7 @@ describe("widgets/beszel/component", () => {
     const service = { widget: { type: "beszel" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["systems", "up"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(2);
     expect(screen.getByText("beszel.systems")).toBeInTheDocument();
     expect(screen.getByText("beszel.up")).toBeInTheDocument();
@@ -66,7 +66,7 @@ describe("widgets/beszel/component", () => {
     const service = { widget: { type: "beszel", systemId: "sys1" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["name", "status", "cpu", "memory"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
 
     expectBlockValue(container, "beszel.name", "MySystem");

src/widgets/calendar/component.jsx

@@ -38,16 +38,16 @@ const colorVariants = {
 export default function Component({ service }) {
   const { widget } = service;
   const { i18n } = useTranslation();
-  const [showDate, setShowDate] = useState(null);
   const [events, setEvents] = useState({});
   const nowDate = DateTime.now().setLocale(i18n.language);
   const currentDate = widget?.timezone ? nowDate.setZone(widget?.timezone).startOf("day") : nowDate;
+  const [showDate, setShowDate] = useState(null);
   const { settings } = useContext(SettingsContext);
 
   useEffect(() => {
-    if (!showDate) {
-      setShowDate(currentDate);
-    }
+    // seeded after mount, not during render: "today" is client-only and would break hydration
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    if (!showDate) setShowDate(currentDate);
   }, [showDate, currentDate]);
 
   // params for API fetch

src/widgets/calendar/integrations/ical.jsx

@@ -1,7 +1,7 @@
 import ICAL from "ical.js";
 import { DateTime } from "luxon";
 import { useTranslation } from "next-i18next/pages";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 import Error from "../../../components/services/widget/error";
 import useWidgetAPI from "../../../utils/proxy/use-widget-api";
@@ -17,65 +17,67 @@ function simpleHash(str) {
   return Math.abs(hash).toString(36);
 }
 
+function buildEvent(event, type) {
+  return {
+    id: event.getFirstPropertyValue("uid"),
+    type,
+    title: event.getFirstPropertyValue("summary"),
+    rrule: event.getFirstPropertyValue("rrule"),
+    dtstart:
+      event.getFirstPropertyValue("dtstart") ||
+      event.getFirstPropertyValue("due") ||
+      event.getFirstPropertyValue("completed") ||
+      ICAL.Time.now(), // handles events without a date
+    dtend:
+      event.getFirstPropertyValue("dtend") ||
+      event.getFirstPropertyValue("due") ||
+      event.getFirstPropertyValue("completed") ||
+      ICAL.Time.now(), // handles events without a date
+    location: event.getFirstPropertyValue("location"),
+    status: event.getFirstPropertyValue("status"),
+    url: event.getFirstPropertyValue("url"),
+  };
+}
+
 export default function Integration({ config, params, setEvents, hideErrors, timezone }) {
   const { t } = useTranslation();
   const { data: icalData, error: icalError } = useWidgetAPI(config, config.name, {
     refreshInterval: 300000, // 5 minutes
   });
 
+  const { events, dataError } = useMemo(() => {
+    if (icalError || !icalData || icalData.error) {
+      return { events: [], dataError: undefined };
+    }
+
+    if (!icalData.data) {
+      return {
+        events: [],
+        dataError: { message: `'${config.name}': ${t("calendar.errorWhenLoadingData")}` },
+      };
+    }
+
+    const jCal = ICAL.parse(icalData.data);
+    const vCalendar = new ICAL.Component(jCal);
+    const parsedEvents = [
+      ...vCalendar.getAllSubcomponents("vevent").map((event) => buildEvent(event, "vevent")),
+      ...vCalendar.getAllSubcomponents("vtodo").map((todo) => buildEvent(todo, "vtodo")),
+    ];
+
+    return {
+      events: parsedEvents,
+      dataError:
+        parsedEvents.length === 0 ? { message: `'${config.name}': ${t("calendar.noEventsFound")}` } : undefined,
+    };
+  }, [icalData, icalError, config.name, t]);
+
   useEffect(() => {
     const { showName = false } = config?.params || {};
-    let events = [];
-
-    if (!icalError && icalData && !icalData.error) {
-      if (!icalData.data) {
-        icalData.error = { message: `'${config.name}': ${t("calendar.errorWhenLoadingData")}` };
-        return;
-      }
-
-      const jCal = ICAL.parse(icalData.data);
-      const vCalendar = new ICAL.Component(jCal);
-
-      const buildEvent = (event, type) => {
-        return {
-          id: event.getFirstPropertyValue("uid"),
-          type,
-          title: event.getFirstPropertyValue("summary"),
-          rrule: event.getFirstPropertyValue("rrule"),
-          dtstart:
-            event.getFirstPropertyValue("dtstart") ||
-            event.getFirstPropertyValue("due") ||
-            event.getFirstPropertyValue("completed") ||
-            ICAL.Time.now(), // handles events without a date
-          dtend:
-            event.getFirstPropertyValue("dtend") ||
-            event.getFirstPropertyValue("due") ||
-            event.getFirstPropertyValue("completed") ||
-            ICAL.Time.now(), // handles events without a date
-          location: event.getFirstPropertyValue("location"),
-          status: event.getFirstPropertyValue("status"),
-          url: event.getFirstPropertyValue("url"),
-        };
-      };
-
-      const getEvents = () => {
-        const vEvents = vCalendar.getAllSubcomponents("vevent").map((event) => buildEvent(event, "vevent"));
-
-        const vTodos = vCalendar.getAllSubcomponents("vtodo").map((todo) => buildEvent(todo, "vtodo"));
-
-        return [...vEvents, ...vTodos];
-      };
-
-      events = getEvents();
-      if (events.length === 0) {
-        icalData.error = { message: `'${config.name}': ${t("calendar.noEventsFound")}` };
-      }
-    }
 
     const startDate = DateTime.fromISO(params.start);
     const endDate = DateTime.fromISO(params.end);
 
-    if (icalError || events.length === 0 || !startDate.isValid || !endDate.isValid) {
+    if (events.length === 0 || !startDate.isValid || !endDate.isValid) {
       return;
     }
 
@@ -113,7 +115,7 @@ export default function Integration({ config, params, setEvents, hideErrors, tim
       return occurrences;
     };
 
-    const eventsToAdd = [];
+    const eventsToAdd = {};
     events.forEach((event) => {
       const occurrences = getOcurrencesFromRange(event);
 
@@ -154,8 +156,8 @@ export default function Integration({ config, params, setEvents, hideErrors, tim
     });
 
     setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
-  }, [icalData, icalError, config, params, setEvents, timezone, t]);
+  }, [events, config, params, setEvents, timezone]);
 
-  const error = icalError ?? icalData?.error;
+  const error = icalError ?? icalData?.error ?? dataError;
   return error && !hideErrors && <Error error={{ message: `${config.type}: ${error.message ?? error}` }} />;
 }

src/widgets/calendar/integrations/ical.test.jsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { render, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 const { useWidgetAPI } = vi.hoisted(() => ({
@@ -12,6 +12,45 @@ vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
 import Integration from "./ical";
 
 describe("widgets/calendar/integrations/ical", () => {
+  it("reports a missing calendar payload without mutating the response", () => {
+    const data = {};
+    useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+    render(
+      <Integration
+        config={{ name: "Work", type: "ical" }}
+        params={{ start: "2099-01-01", end: "2099-01-02" }}
+        setEvents={vi.fn()}
+        hideErrors={false}
+        timezone="utc"
+      />,
+    );
+
+    expect(screen.getByText(/'Work': calendar\.errorWhenLoadingData/)).toBeInTheDocument();
+    expect(data).toEqual({});
+  });
+
+  it("reports a calendar with no events without mutating the response", () => {
+    const data = {
+      data: ["BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//Test//EN", "END:VCALENDAR", ""].join("\n"),
+    };
+    const originalData = structuredClone(data);
+    useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+    render(
+      <Integration
+        config={{ name: "Empty", type: "ical" }}
+        params={{ start: "2099-01-01", end: "2099-01-02" }}
+        setEvents={vi.fn()}
+        hideErrors={false}
+        timezone="utc"
+      />,
+    );
+
+    expect(screen.getByText(/'Empty': calendar\.noEventsFound/)).toBeInTheDocument();
+    expect(data).toEqual(originalData);
+  });
+
   it("adds parsed events within the date range", async () => {
     useWidgetAPI.mockReturnValue({
       data: {

src/widgets/dockhand/component.jsx

@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-const MAX_FIELDS = 4;
+const DEFAULT_FIELDS = ["running", "total", "cpu", "memory"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields) {
-    widget.fields = ["running", "total", "cpu", "memory"];
-  } else if (widget.fields.length > MAX_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_FIELDS);
-  }
-
   const { data: stats, error: statsError } = useWidgetAPI(widget, "dashboard/stats");
 
   if (statsError) {

src/widgets/dockhand/component.test.jsx

@@ -22,7 +22,11 @@ describe("widgets/dockhand/component", () => {
     const service = { widget: { type: "dockhand" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["running", "total", "cpu", "memory"]);
+    expect(service.widget.fields).toBeUndefined();
+    expect(useWidgetAPI).toHaveBeenCalledWith(
+      { type: "dockhand", fields: ["running", "total", "cpu", "memory"] },
+      "dashboard/stats",
+    );
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("dockhand.running")).toBeInTheDocument();
     expect(screen.getByText("dockhand.total")).toBeInTheDocument();

src/widgets/duplicati/component.jsx

@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 const DEFAULT_FIELDS = ["jobs", "errors", "lastBackup", "nextRun"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields?.length) {
-    widget.fields = DEFAULT_FIELDS;
-  } else if (widget.fields?.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   const { data, error } = useWidgetAPI(widget);
 
   if (error) {

src/widgets/esphome/component.jsx

@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["online", "offline", "offline_alt", "total"];
+
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
   const { data: resultData, error: resultError } = useWidgetAPI(widget);
 
@@ -14,12 +18,6 @@ export default function Component({ service }) {
     return <Container service={service} error={resultError} />;
   }
 
-  if (!widget.fields || widget.fields.length === 0) {
-    widget.fields = ["online", "offline", "offline_alt", "total"];
-  } else if (widget.fields.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   if (!resultData) {
     return (
       <Container service={service}>

src/widgets/esphome/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/esphome/component", () => {
     const service = { widget: { type: "esphome" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["online", "offline", "offline_alt", "total"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("esphome.online")).toBeInTheDocument();
     expect(screen.getByText("esphome.offline")).toBeInTheDocument();

src/widgets/fritzbox/component.jsx

@@ -3,11 +3,13 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 export const fritzboxDefaultFields = ["connectionStatus", "uptime", "maxDown", "maxUp"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, fritzboxDefaultFields);
   const { widget } = service;
   const { data: fritzboxData, error: fritzboxError } = useWidgetAPI(widget, "status");
 
@@ -15,16 +17,6 @@ export default function Component({ service }) {
     return <Container service={service} error={fritzboxError} />;
   }
 
-  // Default fields
-  if (!widget.fields?.length > 0) {
-    widget.fields = fritzboxDefaultFields;
-  }
-  const MAX_ALLOWED_FIELDS = 4;
-  // Limits max number of displayed fields
-  if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!fritzboxData) {
     return (
       <Container service={service}>

src/widgets/fritzbox/component.test.jsx

@@ -9,7 +9,7 @@ import { expectBlockValue } from "test-utils/widget-assertions";
 const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
 vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
 
-import Component, { fritzboxDefaultFields } from "./component";
+import Component from "./component";
 
 describe("widgets/fritzbox/component", () => {
   beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/fritzbox/component", () => {
     const service = { widget: { type: "fritzbox", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(fritzboxDefaultFields);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("fritzbox.connectionStatus")).toBeInTheDocument();
     expect(screen.getByText("fritzbox.uptime")).toBeInTheDocument();
@@ -43,7 +43,14 @@ describe("widgets/fritzbox/component", () => {
 
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["down", "up", "received", "sent"]);
+    expect(service.widget.fields).toEqual([
+      "down",
+      "up",
+      "received",
+      "sent",
+      "externalIPAddress",
+      "externalIPv6Prefix",
+    ]);
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("fritzbox.down")).toBeInTheDocument();
     expect(screen.getByText("fritzbox.up")).toBeInTheDocument();

src/widgets/gamedig/component.jsx

@@ -3,8 +3,12 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["map", "currentPlayers", "ping"];
+
+export default function Component({ service: configuredService }) {
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
   const { data: serverData, error: serverError } = useWidgetAPI(widget, "status");
   const { t } = useTranslation();
@@ -13,16 +17,6 @@ export default function Component({ service }) {
     return <Container service={service} error={serverError} />;
   }
 
-  // Default fields
-  if (widget.fields == null || widget.fields.length === 0) {
-    widget.fields = ["map", "currentPlayers", "ping"];
-  }
-  const MAX_ALLOWED_FIELDS = 4;
-  // Limits max number of displayed fields
-  if (widget.fields != null && widget.fields.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!serverData) {
     return (
       <Container service={service}>

src/widgets/gamedig/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/gamedig/component", () => {
     const service = { widget: { type: "gamedig", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["map", "currentPlayers", "ping"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("gamedig.map")).toBeInTheDocument();
     expect(screen.getByText("gamedig.currentPlayers")).toBeInTheDocument();
@@ -54,7 +54,7 @@ describe("widgets/gamedig/component", () => {
 
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["status", "name", "map", "currentPlayers"]);
+    expect(service.widget.fields).toEqual(["status", "name", "map", "currentPlayers", "ping"]);
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
 
     expectBlockValue(container, "gamedig.status", "gamedig.online");

src/widgets/glances/components/custom_tooltip.jsx

@@ -3,7 +3,7 @@ export default function Tooltip({ active, payload, formatter }) {
     return (
       <div className="bg-theme-800/80 rounded-md text-theme-200 px-2 py-0">
         {payload.map((pld, id) => (
-          <div key={Math.random()} className="first-of-type:pt-0 pt-0.5">
+          <div key={`${pld.dataKey ?? pld.name ?? "series"}-${id}`} className="first-of-type:pt-0 pt-0.5">
             <div>
               {formatter(pld.value)} {payload[id].name}
             </div>

src/widgets/glances/metrics/containers.jsx

@@ -41,7 +41,7 @@ export default function Component({ service }) {
     );
   }
 
-  data.splice(chart ? 5 : 1);
+  const visibleData = data.slice(0, chart ? 5 : 1);
   let headerYPosition = "top-4";
   let listYPosition = "bottom-4";
   if (chart) {
@@ -61,7 +61,7 @@ export default function Component({ service }) {
 
       <Block position={`${listYPosition} right-3 left-3`}>
         <div className="pointer-events-none text-theme-900 dark:text-theme-200">
-          {data.map((item) => (
+          {visibleData.map((item) => (
             <div key={item[idKey]} className="text-[0.75rem] h-[0.8rem]">
               <div className="flex items-center">
                 <div className="w-3 h-3 mr-1.5 opacity-50">{statusMap[item[statusKey]]}</div>

src/widgets/glances/metrics/containers.test.jsx

@@ -103,5 +103,6 @@ describe("widgets/glances/metrics/containers", () => {
     expect(screen.getByText("item-0")).toBeInTheDocument();
     expect(screen.getByText("item-4")).toBeInTheDocument();
     expect(screen.queryByText("item-5")).not.toBeInTheDocument();
+    expect(data).toHaveLength(6);
   });
 });

src/widgets/glances/metrics/cpu.jsx

@@ -1,10 +1,12 @@
 import { useTranslation } from "next-i18next/pages";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import Block from "../components/block";
 import Container from "../components/container";
 
+import useDataPoints from "./use-data-points";
+
 import { parseVersionForUrl } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
@@ -19,26 +21,26 @@ export default function Component({ service }) {
   const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
   const apiVersion = parseVersionForUrl(version, 3);
 
-  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+  const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { value: 0 });
 
-  const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/cpu`, {
-    refreshInterval: Math.max(defaultInterval, refreshInterval),
-  });
+  const handleData = useCallback(
+    (newData) => {
+      if (newData) addDataPoint({ value: newData.total });
+    },
+    [addDataPoint],
+  );
+
+  const { data, error } = useWidgetAPI(
+    service.widget,
+    `${apiVersion}/cpu`,
+    {
+      refreshInterval: Math.max(defaultInterval, refreshInterval),
+    },
+    { onSuccess: handleData },
+  );
 
   const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, `${apiVersion}/quicklook`);
 
-  useEffect(() => {
-    if (data) {
-      setDataPoints((prevDataPoints) => {
-        const newDataPoints = [...prevDataPoints, { value: data.total }];
-        if (newDataPoints.length > pointsLimit) {
-          newDataPoints.shift();
-        }
-        return newDataPoints;
-      });
-    }
-  }, [data, pointsLimit]);
-
   if (error) {
     return <Container error={error} widget={widget} />;
   }

src/widgets/glances/metrics/disk.jsx

@@ -1,10 +1,12 @@
 import { useTranslation } from "next-i18next/pages";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import Block from "../components/block";
 import Container from "../components/container";
 
+import useDataPoints from "./use-data-points";
+
 import { parseVersionForUrl } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
@@ -20,39 +22,37 @@ export default function Component({ service }) {
   const apiVersion = parseVersionForUrl(version, 3);
   const [, diskName] = widget.metric.split(":");
 
-  const [dataPoints, setDataPoints] = useState(
-    new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit),
-  );
-  const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
-
-  const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/diskio`, {
-    refreshInterval: Math.max(defaultInterval, refreshInterval),
+  const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, {
+    read_bytes: 0,
+    write_bytes: 0,
+    time_since_update: 0,
   });
 
+  const handleData = useCallback(
+    (newData) => {
+      if (!newData?.error) {
+        const diskData = newData.find((item) => item.disk_name === diskName);
+        if (diskData) addDataPoint(diskData);
+      }
+    },
+    [addDataPoint, diskName],
+  );
+
+  const { data, error } = useWidgetAPI(
+    service.widget,
+    `${apiVersion}/diskio`,
+    {
+      refreshInterval: Math.max(defaultInterval, refreshInterval),
+    },
+    { onSuccess: handleData },
+  );
+
   const calculateRates = (d) =>
     d.map((item) => ({
       a: item.read_bytes / item.time_since_update,
       b: item.write_bytes / item.time_since_update,
     }));
 
-  useEffect(() => {
-    if (data && !data.error) {
-      const diskData = data.find((item) => item.disk_name === diskName);
-
-      setDataPoints((prevDataPoints) => {
-        const newDataPoints = [...prevDataPoints, diskData];
-        if (newDataPoints.length > pointsLimit) {
-          newDataPoints.shift();
-        }
-        return newDataPoints;
-      });
-    }
-  }, [data, diskName, pointsLimit]);
-
-  useEffect(() => {
-    setRatePoints(calculateRates(dataPoints));
-  }, [dataPoints]);
-
   if (error || (data && data.error)) {
     const finalError = error || data.error;
     return <Container error={finalError} widget={widget} />;
@@ -83,7 +83,7 @@ export default function Component({ service }) {
     <Container chart={chart}>
       {chart && (
         <ChartDual
-          dataPoints={ratePoints}
+          dataPoints={diskRates}
           label={[t("glances.read"), t("glances.write")]}
           max={diskData.critical}
           formatter={(value) =>

src/widgets/glances/metrics/gpu.jsx

@@ -1,10 +1,12 @@
 import { useTranslation } from "next-i18next/pages";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import Block from "../components/block";
 import Container from "../components/container";
 
+import useDataPoints from "./use-data-points";
+
 import { parseVersionForUrl } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
@@ -20,27 +22,26 @@ export default function Component({ service }) {
   const apiVersion = parseVersionForUrl(version, 3);
   const [, gpuName] = widget.metric.split(":");
 
-  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
+  const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { a: 0, b: 0 });
 
-  const { data, error } = useWidgetAPI(widget, `${apiVersion}/gpu`, {
-    refreshInterval: Math.max(defaultInterval, refreshInterval),
-  });
-
-  useEffect(() => {
-    if (data && !data.error) {
-      const gpuData = data.find((item) => item[item.key] == gpuName);
-
-      if (gpuData) {
-        setDataPoints((prevDataPoints) => {
-          const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
-          if (newDataPoints.length > pointsLimit) {
-            newDataPoints.shift();
-          }
-          return newDataPoints;
-        });
+  const handleData = useCallback(
+    (newData) => {
+      if (!newData?.error) {
+        const gpuData = newData.find((item) => item[item.key] == gpuName);
+        if (gpuData) addDataPoint({ a: gpuData.mem, b: gpuData.proc });
       }
-    }
-  }, [data, gpuName, pointsLimit]);
+    },
+    [addDataPoint, gpuName],
+  );
+
+  const { data, error } = useWidgetAPI(
+    widget,
+    `${apiVersion}/gpu`,
+    {
+      refreshInterval: Math.max(defaultInterval, refreshInterval),
+    },
+    { onSuccess: handleData },
+  );
 
   if (error || (data && data.error)) {
     const finalError = error || data.error;

src/widgets/glances/metrics/memory.jsx

@@ -1,10 +1,12 @@
 import { useTranslation } from "next-i18next/pages";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import Block from "../components/block";
 import Container from "../components/container";
 
+import useDataPoints from "./use-data-points";
+
 import { parseVersionForUrl } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
@@ -20,23 +22,23 @@ export default function Component({ service }) {
   const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit, version = 3 } = widget;
   const apiVersion = parseVersionForUrl(version, 3);
 
-  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+  const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { a: 0, b: 0 });
 
-  const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/mem`, {
-    refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
-  });
+  const handleData = useCallback(
+    (newData) => {
+      if (newData) addDataPoint({ a: newData.used, b: newData.available });
+    },
+    [addDataPoint],
+  );
 
-  useEffect(() => {
-    if (data) {
-      setDataPoints((prevDataPoints) => {
-        const newDataPoints = [...prevDataPoints, { a: data.used, b: data.available }];
-        if (newDataPoints.length > pointsLimit) {
-          newDataPoints.shift();
-        }
-        return newDataPoints;
-      });
-    }
-  }, [data, pointsLimit]);
+  const { data, error } = useWidgetAPI(
+    service.widget,
+    `${apiVersion}/mem`,
+    {
+      refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
+    },
+    { onSuccess: handleData },
+  );
 
   if (error) {
     return <Container error={error} widget={widget} />;

src/widgets/glances/metrics/net.jsx

@@ -1,10 +1,12 @@
 import { useTranslation } from "next-i18next/pages";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import Block from "../components/block";
 import Container from "../components/container";
 
+import useDataPoints from "./use-data-points";
+
 import { parseVersionForUrl } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
@@ -25,33 +27,32 @@ export default function Component({ service }) {
 
   const [, interfaceName] = metric.split(":");
 
-  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+  const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { a: 0, b: 0 });
 
-  const { data, error } = useWidgetAPI(widget, `${apiVersion}/network`, {
-    refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
-  });
+  const handleData = useCallback(
+    (newData) => {
+      if (!newData?.error) {
+        const interfaceData = newData.find((item) => item[item.key] === interfaceName);
 
-  useEffect(() => {
-    if (data && !data.error) {
-      const interfaceData = data.find((item) => item[item.key] === interfaceName);
-
-      if (interfaceData) {
-        setDataPoints((prevDataPoints) => {
-          const newDataPoints = [
-            ...prevDataPoints,
-            {
-              a: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
-              b: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
-            },
-          ];
-          if (newDataPoints.length > pointsLimit) {
-            newDataPoints.shift();
-          }
-          return newDataPoints;
-        });
+        if (interfaceData) {
+          addDataPoint({
+            a: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
+            b: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
+          });
+        }
       }
-    }
-  }, [data, interfaceName, pointsLimit, rxKey, txKey]);
+    },
+    [addDataPoint, interfaceName, rxKey, txKey],
+  );
+
+  const { data, error } = useWidgetAPI(
+    widget,
+    `${apiVersion}/network`,
+    {
+      refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
+    },
+    { onSuccess: handleData },
+  );
 
   if (error || (data && data.error)) {
     const finalError = error || data.error;

src/widgets/glances/metrics/process.jsx

@@ -43,7 +43,7 @@ export default function Component({ service }) {
     );
   }
 
-  data.splice(chart ? 5 : 1);
+  const visibleData = data.slice(0, chart ? 5 : 1);
   let headerYPosition = "top-4";
   let listYPosition = "bottom-4";
   if (chart) {
@@ -63,7 +63,7 @@ export default function Component({ service }) {
 
       <Block position={`${listYPosition} right-3 left-3`}>
         <div className="pointer-events-none text-theme-900 dark:text-theme-200">
-          {data.map((item) => (
+          {visibleData.map((item) => (
             <div key={item.pid} className="text-[0.75rem] h-[0.8rem]">
               <div className="flex items-center">
                 <div className="w-3 h-3 mr-1.5 opacity-50">{statusMap[item.status]}</div>

src/widgets/glances/metrics/process.test.jsx

@@ -19,4 +19,20 @@ describe("widgets/glances/metrics/process", () => {
     });
     expect(screen.getByText("-")).toBeInTheDocument();
   });
+
+  it("limits displayed processes without modifying the response", () => {
+    const data = [
+      { pid: 1, status: "R", name: "first", cpu_percent: 1, memory_info: [100] },
+      { pid: 2, status: "S", name: "second", cpu_percent: 2, memory_info: [200] },
+    ];
+    useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+    renderWithProviders(<Component service={{ widget: { chart: false, version: 3 } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getByText("first")).toBeInTheDocument();
+    expect(screen.queryByText("second")).not.toBeInTheDocument();
+    expect(data).toHaveLength(2);
+  });
 });

src/widgets/glances/metrics/sensor.jsx

@@ -1,10 +1,12 @@
 import { useTranslation } from "next-i18next/pages";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import Block from "../components/block";
 import Container from "../components/container";
 
+import useDataPoints from "./use-data-points";
+
 import { parseVersionForUrl } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
@@ -20,32 +22,29 @@ export default function Component({ service }) {
   const apiVersion = parseVersionForUrl(version, 3);
   const [, sensorName] = widget.metric.split(":");
 
-  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+  const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { value: 0 });
 
-  const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/sensors`, {
-    refreshInterval: Math.max(defaultInterval, refreshInterval),
-  });
-
-  useEffect(() => {
-    if (data && !data.error) {
-      const sensorData = data.find((item) => item.label === sensorName);
-      if (sensorData) {
-        setDataPoints((prevDataPoints) => {
-          const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
-          if (newDataPoints.length > pointsLimit) {
-            newDataPoints.shift();
-          }
-          return newDataPoints;
-        });
-      } else {
-        data.error = true;
+  const handleData = useCallback(
+    (newData) => {
+      if (!newData?.error) {
+        const sensorData = newData.find((item) => item.label === sensorName);
+        if (sensorData) addDataPoint({ value: sensorData.value });
       }
-    }
-  }, [data, sensorName, pointsLimit]);
+    },
+    [addDataPoint, sensorName],
+  );
 
-  if (error || (data && data.error)) {
-    const finalError = error || data.error;
-    return <Container error={finalError} widget={widget} />;
+  const { data, error } = useWidgetAPI(
+    service.widget,
+    `${apiVersion}/sensors`,
+    {
+      refreshInterval: Math.max(defaultInterval, refreshInterval),
+    },
+    { onSuccess: handleData },
+  );
+
+  if (error || data?.error) {
+    return <Container error={error || data.error} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/sensor.test.jsx

@@ -22,4 +22,17 @@ describe("widgets/glances/metrics/sensor", () => {
     );
     expect(screen.getByText("-")).toBeInTheDocument();
   });
+
+  it("renders a placeholder for a missing sensor without modifying the response", () => {
+    const data = [{ label: "Other", value: 42 }];
+    useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+    renderWithProviders(
+      <Component service={{ widget: { chart: false, version: 3, pointsLimit: 3, metric: "sensor:CPU" } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(screen.getByText("-")).toBeInTheDocument();
+    expect(data).toEqual([{ label: "Other", value: 42 }]);
+  });
 });

src/widgets/glances/metrics/use-data-points.js

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+export default function useDataPoints(pointsLimit, initialPoint) {
+  const [dataPoints, setDataPoints] = useState(() => new Array(pointsLimit).fill(initialPoint));
+
+  const addDataPoint = useCallback(
+    (dataPoint) => {
+      setDataPoints((currentDataPoints) => {
+        if (pointsLimit <= 0) return [];
+        return [...currentDataPoints, dataPoint].slice(-pointsLimit);
+      });
+    },
+    [pointsLimit],
+  );
+
+  return [dataPoints, addDataPoint];
+}

src/widgets/glances/metrics/use-data-points.test.jsx

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import useDataPoints from "./use-data-points";
+
+describe("widgets/glances/metrics/use-data-points", () => {
+  it("appends data points while keeping the requested history length", () => {
+    const { result, rerender } = renderHook(({ pointsLimit }) => useDataPoints(pointsLimit, { value: 0 }), {
+      initialProps: { pointsLimit: 3 },
+    });
+
+    expect(result.current[0]).toEqual([{ value: 0 }, { value: 0 }, { value: 0 }]);
+
+    act(() => result.current[1]({ value: 1 }));
+    expect(result.current[0]).toEqual([{ value: 0 }, { value: 0 }, { value: 1 }]);
+
+    rerender({ pointsLimit: 2 });
+    act(() => result.current[1]({ value: 2 }));
+    expect(result.current[0]).toEqual([{ value: 1 }, { value: 2 }]);
+  });
+});

src/widgets/gluetun/component.jsx

@@ -2,14 +2,14 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["public_ip", "region", "country"];
+
+export default function Component({ service: configuredService }) {
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields) {
-    widget.fields = ["public_ip", "region", "country"];
-  }
-
   const { data: gluetunData, error: gluetunError } = useWidgetAPI(widget, "ip");
   const includePF = widget.fields.includes("port_forwarded");
   const pfEndpoint = widget.version > 1 ? "port_forwarded_v2" : "port_forwarded";

src/widgets/gluetun/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/gluetun/component", () => {
     const service = { widget: { type: "gluetun", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["public_ip", "region", "country"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("gluetun.public_ip")).toBeInTheDocument();
     expect(screen.getByText("gluetun.region")).toBeInTheDocument();

src/widgets/hdhomerun/component.jsx

@@ -2,8 +2,12 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["channels", "hd"];
+
+export default function Component({ service: configuredService }) {
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
   const { tuner = 0 } = widget;
 
@@ -24,15 +28,6 @@ export default function Component({ service }) {
     );
   }
 
-  // Provide a default if not set in the config
-  if (!widget.fields) {
-    widget.fields = ["channels", "hd"];
-  }
-  // Limit to a maximum of 4 at a time
-  if (widget.fields.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   return (
     <Container service={service}>
       <Block label="hdhomerun.channels" value={channelsData?.length} />

src/widgets/hdhomerun/component.test.jsx

@@ -58,7 +58,7 @@ describe("widgets/hdhomerun/component", () => {
 
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["channels", "hd", "tunerCount", "channelNumber"]);
+    expect(service.widget.fields).toEqual(["channels", "hd", "tunerCount", "channelNumber", "signalStrength"]);
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("hdhomerun.channels")).toBeInTheDocument();
     expect(screen.getByText("hdhomerun.hd")).toBeInTheDocument();

src/widgets/homebox/component.jsx

@@ -3,11 +3,13 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 export const homeboxDefaultFields = ["items", "locations", "totalValue"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, homeboxDefaultFields);
   const { widget } = service;
   const { data: homeboxData, error: homeboxError } = useWidgetAPI(widget);
 
@@ -15,16 +17,6 @@ export default function Component({ service }) {
     return <Container service={service} error={homeboxError} />;
   }
 
-  // Default fields
-  if (!widget.fields?.length > 0) {
-    widget.fields = homeboxDefaultFields;
-  }
-  const MAX_ALLOWED_FIELDS = 4;
-  // Limits max number of displayed fields
-  if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!homeboxData) {
     return (
       <Container service={service}>

src/widgets/homebox/component.test.jsx

@@ -9,7 +9,7 @@ import { expectBlockValue } from "test-utils/widget-assertions";
 const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
 vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
 
-import Component, { homeboxDefaultFields } from "./component";
+import Component from "./component";
 
 describe("widgets/homebox/component", () => {
   beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/homebox/component", () => {
     const service = { widget: { type: "homebox", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(homeboxDefaultFields);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("homebox.items")).toBeInTheDocument();
     expect(screen.getByText("homebox.locations")).toBeInTheDocument();

src/widgets/jellyfin/component.jsx

@@ -6,6 +6,9 @@ import { MdOutlineSmartDisplay } from "react-icons/md";
 
 import { getURLSearchParams } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
+
+const DEFAULT_FIELDS = ["movies", "series", "episodes", "songs"];
 
 function ticksToTime(ticks) {
   const milliseconds = ticks / 10000;
@@ -178,12 +181,6 @@ function CountBlocks({ service, countData }) {
   const { t } = useTranslation();
   const { widget } = service;
 
-  if (!widget.fields || widget.fields.length === 0) {
-    widget.fields = ["movies", "series", "episodes", "songs"];
-  } else if (widget.fields?.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   if (!countData) {
     return (
       <Container service={service}>
@@ -207,9 +204,10 @@ function CountBlocks({ service, countData }) {
   );
 }
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
   const version = widget?.version ?? 1;
   const useJellyfinV2 = version === 2;

src/widgets/jellyfin/component.test.jsx

@@ -109,7 +109,7 @@ describe("widgets/jellyfin/component", () => {
 
     renderWithProviders(<Component service={service} />);
 
-    expect(service.widget.fields).toEqual(["movies", "series", "episodes", "albums"]);
+    expect(service.widget.fields).toEqual(["movies", "series", "episodes", "albums", "songs"]);
     expect(screen.getByText("jellyfin.albums")).toBeInTheDocument();
     expect(screen.getByText("5")).toBeInTheDocument();
     expect(screen.queryByText("jellyfin.songs")).not.toBeInTheDocument();

src/widgets/jellystat/component.jsx

@@ -3,13 +3,13 @@ import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
-export default function Component({ service }) {
-  const { widget } = service;
+export default function Component({ service: configuredService }) {
+  const configuredDays = configuredService.widget.days;
+  const days = Number.isInteger(configuredDays) && configuredDays > 0 ? configuredDays : 30;
+  const widget = { ...configuredService.widget, days };
+  const service = { ...configuredService, widget };
 
-  // Days validation
-  if (!(Number.isInteger(widget.days) && 0 < widget.days)) widget.days = 30;
-
-  const { data: viewsData, error: viewsError } = useWidgetAPI(widget, "getViewsByLibraryType", { days: widget.days });
+  const { data: viewsData, error: viewsError } = useWidgetAPI(widget, "getViewsByLibraryType", { days });
 
   const error = viewsError || viewsData?.message;
   if (error) {

src/widgets/jellystat/component.test.jsx

@@ -26,8 +26,8 @@ describe("widgets/jellystat/component", () => {
     const service = { widget: { type: "jellystat", days: -1 } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.days).toBe(30);
-    expect(useWidgetAPI).toHaveBeenCalledWith(service.widget, "getViewsByLibraryType", { days: 30 });
+    expect(service.widget.days).toBe(-1);
+    expect(useWidgetAPI).toHaveBeenCalledWith({ type: "jellystat", days: 30 }, "getViewsByLibraryType", { days: 30 });
 
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("jellystat.songs")).toBeInTheDocument();

src/widgets/karakeep/component.jsx

@@ -3,12 +3,13 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 export const karakeepDefaultFields = ["bookmarks", "favorites", "archived", "highlights"];
-const MAX_ALLOWED_FIELDS = 4;
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, karakeepDefaultFields);
   const { widget } = service;
 
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats");
@@ -17,12 +18,6 @@ export default function Component({ service }) {
     return <Container service={service} error={statsError} />;
   }
 
-  if (!widget.fields || widget.fields.length === 0) {
-    widget.fields = karakeepDefaultFields;
-  } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!statsData) {
     return (
       <Container service={service}>

src/widgets/karakeep/component.test.jsx

@@ -9,7 +9,7 @@ import { expectBlockValue } from "test-utils/widget-assertions";
 const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
 vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
 
-import Component, { karakeepDefaultFields } from "./component";
+import Component from "./component";
 
 describe("widgets/karakeep/component", () => {
   beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/karakeep/component", () => {
     const service = { widget: { type: "karakeep", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(karakeepDefaultFields);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("karakeep.bookmarks")).toBeInTheDocument();
     expect(screen.getByText("karakeep.favorites")).toBeInTheDocument();
@@ -38,7 +38,7 @@ describe("widgets/karakeep/component", () => {
     const service = { widget: { type: "karakeep", fields: ["tags", "lists", "bookmarks", "favorites", "archived"] } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["tags", "lists", "bookmarks", "favorites"]);
+    expect(service.widget.fields).toEqual(["tags", "lists", "bookmarks", "favorites", "archived"]);
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("karakeep.tags")).toBeInTheDocument();
     expect(screen.getByText("karakeep.lists")).toBeInTheDocument();

src/widgets/komodo/component.jsx

@@ -3,11 +3,21 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-const MAX_ALLOWED_FIELDS = 4;
+const SUMMARY_FIELDS = ["servers", "stacks", "containers"];
+const STACK_FIELDS = ["total", "running", "down", "unhealthy"];
+const CONTAINER_FIELDS = ["total", "running", "stopped", "unhealthy"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const configuredWidget = configuredService.widget;
+  const defaultFields = configuredWidget.showSummary
+    ? SUMMARY_FIELDS
+    : configuredWidget.showStacks
+      ? STACK_FIELDS
+      : CONTAINER_FIELDS;
+  const service = withWidgetFields(configuredService, defaultFields);
   const { widget } = service;
   const containersEndpoint = !(!widget.showSummary && widget.showStacks) ? "containers" : "";
   const { data: containersData, error: containersError } = useWidgetAPI(widget, containersEndpoint);
@@ -20,16 +30,6 @@ export default function Component({ service }) {
     return <Container service={service} error={containersError ?? stacksError ?? serversError} />;
   }
 
-  if (!widget.fields || widget.fields.length === 0) {
-    widget.fields = widget.showSummary
-      ? ["servers", "stacks", "containers"]
-      : widget.showStacks
-        ? ["total", "running", "down", "unhealthy"]
-        : ["total", "running", "stopped", "unhealthy"];
-  } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (
     (!widget.showStacks && !containersData) ||
     (widget.showSummary && (!containersData || !stacksData || !serversData)) ||

src/widgets/komodo/component.test.jsx

@@ -25,7 +25,7 @@ describe("widgets/komodo/component", () => {
     const service = { widget: { type: "komodo", showStacks: true, showSummary: false } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["total", "running", "down", "unhealthy"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(useWidgetAPI.mock.calls[0][1]).toBe(""); // containersEndpoint
     expect(useWidgetAPI.mock.calls[1][1]).toBe("stacks");
     expect(useWidgetAPI.mock.calls[2][1]).toBe(""); // serversEndpoint
@@ -39,6 +39,20 @@ describe("widgets/komodo/component", () => {
     expect(screen.queryByText("komodo.unknown")).toBeNull();
   });
 
+  it("defaults fields for the containers view without modifying the service", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = { widget: { type: "komodo", showStacks: false, showSummary: false } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toBeUndefined();
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("komodo.total")).toBeInTheDocument();
+    expect(screen.getByText("komodo.running")).toBeInTheDocument();
+    expect(screen.getByText("komodo.stopped")).toBeInTheDocument();
+    expect(screen.getByText("komodo.unhealthy")).toBeInTheDocument();
+  });
+
   it("renders computed down=stopped+down for stacks view", () => {
     useWidgetAPI
       .mockReturnValueOnce({ data: undefined, error: undefined }) // containers (disabled)

src/widgets/maintainerr/component.jsx

@@ -3,20 +3,15 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 const DEFAULT_FIELDS = ["itemsHandled", "episodesHandled", "moviesHandled", "reclaimable"];
-const MAX_FIELDS = 4;
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields?.length) {
-    widget.fields = DEFAULT_FIELDS;
-  } else if (widget.fields.length > MAX_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_FIELDS);
-  }
-
   const { data, error } = useWidgetAPI(widget);
 
   if (error) {

src/widgets/ntfy/component.jsx

@@ -3,6 +3,9 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
+
+const DEFAULT_FIELDS = ["title", "message", "priority", "lastReceived"];
 
 const priorityLabels = {
   1: "min",
@@ -20,8 +23,9 @@ function Truncated({ text }) {
   );
 }
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data: messagesData, error: messagesError } = useWidgetAPI(widget, "messages");
@@ -30,12 +34,6 @@ export default function Component({ service }) {
     return <Container service={service} error={messagesError} />;
   }
 
-  if (!widget.fields || widget.fields.length === 0) {
-    widget.fields = ["title", "message", "priority", "lastReceived"];
-  } else if (widget.fields?.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   if (!messagesData) {
     return (
       <Container service={service}>

src/widgets/omada/component.jsx

@@ -3,10 +3,14 @@ import { useTranslation } from "next-i18next/pages";
 import Block from "../../components/services/widget/block";
 import Container from "../../components/services/widget/container";
 import useWidgetAPI from "../../utils/proxy/use-widget-api";
+import withWidgetFields from "../../utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["connectedAp", "activeUser", "alerts", "connectedGateways"];
+
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data: omadaData, error: omadaAPIError } = useWidgetAPI(widget, "info", {
@@ -17,12 +21,6 @@ export default function Component({ service }) {
     return <Container service={service} error={omadaAPIError} />;
   }
 
-  if (!widget.fields) {
-    widget.fields = ["connectedAp", "activeUser", "alerts", "connectedGateways"];
-  } else if (widget.fields?.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   if (!omadaData) {
     return (
       <Container service={service}>

src/widgets/pangolin/component.jsx

@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-const MAX_ALLOWED_FIELDS = 4;
+const DEFAULT_FIELDS = ["sites", "resources", "targets", "traffic"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields) {
-    widget.fields = ["sites", "resources", "targets", "traffic"];
-  } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   const { data: sitesData, error: sitesError } = useWidgetAPI(widget, "sites");
   const { data: resourcesData, error: resourcesError } = useWidgetAPI(widget, "resources");
 

src/widgets/pangolin/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/pangolin/component", () => {
     const service = { widget: { type: "pangolin" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["sites", "resources", "targets", "traffic"]);
+    expect(service.widget.fields).toBeUndefined();
     // Container filters by widget.fields, so only the default 4 blocks are visible.
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("pangolin.sites")).toBeInTheDocument();
@@ -39,7 +39,7 @@ describe("widgets/pangolin/component", () => {
     const service = { widget: { type: "pangolin", fields: ["sites", "resources", "targets", "traffic", "extra"] } };
     renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["sites", "resources", "targets", "traffic"]);
+    expect(service.widget.fields).toEqual(["sites", "resources", "targets", "traffic", "extra"]);
   });
 
   it("renders computed site/resource/target totals and traffic bytes", () => {

src/widgets/peanut/component.jsx

@@ -25,18 +25,12 @@ export default function Component({ service }) {
   }
 
   // backwards compatibility with peanut v1
-  if ("battery.charge" in upsData) {
-    upsData.battery_charge = upsData["battery.charge"];
-  }
-  if ("ups.load" in upsData) {
-    upsData.ups_load = upsData["ups.load"];
-  }
-  if ("ups.status" in upsData) {
-    upsData.ups_status = upsData["ups.status"];
-  }
+  const batteryCharge = "battery.charge" in upsData ? upsData["battery.charge"] : upsData.battery_charge;
+  const upsLoad = "ups.load" in upsData ? upsData["ups.load"] : upsData.ups_load;
+  const upsStatus = "ups.status" in upsData ? upsData["ups.status"] : upsData.ups_status;
 
   let status;
-  switch (upsData.ups_status) {
+  switch (upsStatus) {
     case "OL":
       status = t("peanut.online");
       break;
@@ -47,21 +41,17 @@ export default function Component({ service }) {
       status = t("peanut.low_battery");
       break;
     default:
-      status = upsData.ups_status;
+      status = upsStatus;
   }
 
   return (
     <Container service={service}>
       <Block
         label="peanut.battery_charge"
-        value={t("common.percent", { value: upsData.battery_charge })}
-        highlightValue={upsData.battery_charge}
-      />
-      <Block
-        label="peanut.ups_load"
-        value={t("common.percent", { value: upsData.ups_load })}
-        highlightValue={upsData.ups_load}
+        value={t("common.percent", { value: batteryCharge })}
+        highlightValue={batteryCharge}
       />
+      <Block label="peanut.ups_load" value={t("common.percent", { value: upsLoad })} highlightValue={upsLoad} />
       <Block label="peanut.ups_status" value={status} />
     </Container>
   );

src/widgets/peanut/component.test.jsx

@@ -34,12 +34,13 @@ describe("widgets/peanut/component", () => {
   });
 
   it("renders legacy field mapping and status translation", () => {
+    const data = {
+      "battery.charge": 55,
+      "ups.load": 12,
+      "ups.status": "OL",
+    };
     useWidgetAPI.mockReturnValue({
-      data: {
-        "battery.charge": 55,
-        "ups.load": 12,
-        "ups.status": "OL",
-      },
+      data,
       error: undefined,
     });
 
@@ -48,5 +49,6 @@ describe("widgets/peanut/component", () => {
     expect(screen.getByText("55")).toBeInTheDocument();
     expect(screen.getByText("12")).toBeInTheDocument();
     expect(screen.getByText("peanut.online")).toBeInTheDocument();
+    expect(data).toEqual({ "battery.charge": 55, "ups.load": 12, "ups.status": "OL" });
   });
 });

src/widgets/pihole/component.jsx

@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["queries", "blocked", "gravity"];
+
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data: piholeData, error: piholeError } = useWidgetAPI(widget);
@@ -15,10 +19,6 @@ export default function Component({ service }) {
     return <Container service={service} error={piholeError} />;
   }
 
-  if (!widget.fields) {
-    widget.fields = ["queries", "blocked", "gravity"];
-  }
-
   if (!piholeData) {
     return (
       <Container service={service}>

src/widgets/portainer/component.jsx

@@ -2,14 +2,16 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DOCKER_FIELDS = ["running", "stopped", "total"];
+const KUBERNETES_FIELDS = ["applications", "services", "namespaces"];
+
+export default function Component({ service: configuredService }) {
+  const defaultFields = configuredService.widget.kubernetes ? KUBERNETES_FIELDS : DOCKER_FIELDS;
+  const service = withWidgetFields(configuredService, defaultFields);
   const { widget } = service;
 
-  if (!widget.fields) {
-    widget.fields = widget.kubernetes ? ["applications", "services", "namespaces"] : ["running", "stopped", "total"];
-  }
-
   const { data: containersCount, error: containersError } = useWidgetAPI(
     widget,
     widget.kubernetes ? "" : "docker/containers",

src/widgets/portainer/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/portainer/component", () => {
     const service = { widget: { type: "portainer", kubernetes: false } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["running", "stopped", "total"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("portainer.running")).toBeInTheDocument();
     expect(screen.getByText("portainer.stopped")).toBeInTheDocument();
@@ -50,7 +50,7 @@ describe("widgets/portainer/component", () => {
     const service = { widget: { type: "portainer", kubernetes: true } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["applications", "services", "namespaces"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("portainer.applications")).toBeInTheDocument();
     expect(screen.getByText("portainer.services")).toBeInTheDocument();

src/widgets/prometheusmetric/component.jsx

@@ -54,23 +54,19 @@ export default function Component({ service }) {
 
   const { metrics = [], refreshInterval = 10000 } = widget;
 
-  let prometheusmetricError;
+  const metricResults = metrics.slice(0, 4).map((metric) => {
+    // disable the rule that hooks should not be called from a callback,
+    // because we don't need a strong guarantee of hook execution order here.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { data, error } = useWidgetAPI(widget, "query", {
+      query: metric.query,
+      refreshInterval: Math.max(1000, metric.refreshInterval ?? refreshInterval),
+    });
+    return { key: metric.key ?? metric.label, data, error };
+  });
 
-  const prometheusmetricData = new Map(
-    metrics.slice(0, 4).map((metric) => {
-      // disable the rule that hooks should not be called from a callback,
-      // because we don't need a strong guarantee of hook execution order here.
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const { data: resultData, error: resultError } = useWidgetAPI(widget, "query", {
-        query: metric.query,
-        refreshInterval: Math.max(1000, metric.refreshInterval ?? refreshInterval),
-      });
-      if (resultError) {
-        prometheusmetricError = resultError;
-      }
-      return [metric.key ?? metric.label, resultData];
-    }),
-  );
+  const prometheusmetricError = metricResults.find(({ error }) => error)?.error;
+  const prometheusmetricData = new Map(metricResults.map(({ key, data }) => [key, data]));
 
   if (prometheusmetricError) {
     return <Container service={service} error={prometheusmetricError} />;

src/widgets/proxmoxbackupserver/component.jsx

@@ -2,20 +2,28 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
+import useCurrentTime from "utils/hooks/use-current-time";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+const HOUR = 60 * 60 * 1000;
+
 export default function Component({ service }) {
   const { t } = useTranslation();
+  // hourly is plenty of precision for a 24 hour window, and `since` is part of the request key
+  const currentTime = useCurrentTime(HOUR);
 
   const { widget } = service;
   const taskQueryParams = {
     errors: true,
     limit: 100,
-    since: Math.floor(Date.now() / 1000) - 24 * 60 * 60,
+    // omitted until mounted, so the request key doesn't churn during hydration
+    ...(currentTime !== null && { since: Math.floor(currentTime / 1000) - 24 * 60 * 60 }),
   };
 
   const { data: datastoreData, error: datastoreError } = useWidgetAPI(widget, "status/datastore-usage");
-  const { data: tasksData, error: tasksError } = useWidgetAPI(widget, "nodes/localhost/tasks", taskQueryParams);
+  const { data: tasksData, error: tasksError } = useWidgetAPI(widget, "nodes/localhost/tasks", taskQueryParams, {
+    keepPreviousData: true, // `since` rotates the key, don't blank the whole widget while it refetches
+  });
   const { data: hostData, error: hostError } = useWidgetAPI(widget, "nodes/localhost/status");
 
   if (datastoreError || tasksError || hostError) {

src/widgets/proxmoxbackupserver/component.test.jsx

@@ -15,16 +15,20 @@ vi.mock("utils/proxy/use-widget-api", () => ({
 
 import Component from "./component";
 
+const empty = { data: undefined, error: undefined };
+
+// keyed by endpoint rather than call order, since the component renders more than once
+function mockEndpoints(byEndpoint = {}) {
+  useWidgetAPI.mockImplementation((widget, endpoint) => byEndpoint[endpoint] ?? empty);
+}
+
 describe("widgets/proxmoxbackupserver/component", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
   it("renders placeholders while loading", () => {
-    useWidgetAPI
-      .mockReturnValueOnce({ data: undefined, error: undefined }) // datastore
-      .mockReturnValueOnce({ data: undefined, error: undefined }) // tasks
-      .mockReturnValueOnce({ data: undefined, error: undefined }); // host
+    mockEndpoints();
 
     const { container } = renderWithProviders(<Component service={{ widget: { type: "proxmoxbackupserver" } }} />, {
       settings: { hideErrors: false },
@@ -38,10 +42,7 @@ describe("widgets/proxmoxbackupserver/component", () => {
   });
 
   it("renders error UI when any endpoint errors", () => {
-    useWidgetAPI
-      .mockReturnValueOnce({ data: undefined, error: undefined })
-      .mockReturnValueOnce({ data: undefined, error: { message: "nope" } })
-      .mockReturnValueOnce({ data: undefined, error: undefined });
+    mockEndpoints({ "nodes/localhost/tasks": { data: undefined, error: { message: "nope" } } });
 
     renderWithProviders(<Component service={{ widget: { type: "proxmoxbackupserver" } }} />, {
       settings: { hideErrors: false },
@@ -51,8 +52,8 @@ describe("widgets/proxmoxbackupserver/component", () => {
   });
 
   it("renders computed values and caps failed tasks at 99+", () => {
-    useWidgetAPI
-      .mockReturnValueOnce({
+    mockEndpoints({
+      "status/datastore-usage": {
         data: {
           data: [
             { store: "ds1", used: 50, total: 100 },
@@ -60,9 +61,10 @@ describe("widgets/proxmoxbackupserver/component", () => {
           ],
         },
         error: undefined,
-      })
-      .mockReturnValueOnce({ data: { total: 1000 }, error: undefined })
-      .mockReturnValueOnce({ data: { data: { cpu: 0.2, memory: { used: 1, total: 4 } } }, error: undefined });
+      },
+      "nodes/localhost/tasks": { data: { total: 1000 }, error: undefined },
+      "nodes/localhost/status": { data: { data: { cpu: 0.2, memory: { used: 1, total: 4 } } }, error: undefined },
+    });
 
     renderWithProviders(<Component service={{ widget: { type: "proxmoxbackupserver", datastore: "ds2" } }} />, {
       settings: { hideErrors: false },
@@ -78,19 +80,21 @@ describe("widgets/proxmoxbackupserver/component", () => {
   it("requests failed tasks with a 24 hour since filter in epoch seconds", () => {
     vi.spyOn(Date, "now").mockReturnValue(1_776_519_498_000);
 
-    useWidgetAPI
-      .mockReturnValueOnce({ data: undefined, error: undefined })
-      .mockReturnValueOnce({ data: undefined, error: undefined })
-      .mockReturnValueOnce({ data: undefined, error: undefined });
+    mockEndpoints();
 
     renderWithProviders(<Component service={{ widget: { type: "proxmoxbackupserver" } }} />, {
       settings: { hideErrors: false },
     });
 
-    expect(useWidgetAPI).toHaveBeenNthCalledWith(2, { type: "proxmoxbackupserver" }, "nodes/localhost/tasks", {
-      errors: true,
-      limit: 100,
-      since: 1_776_433_098,
-    });
+    expect(useWidgetAPI).toHaveBeenCalledWith(
+      { type: "proxmoxbackupserver" },
+      "nodes/localhost/tasks",
+      {
+        errors: true,
+        limit: 100,
+        since: 1_776_433_098,
+      },
+      { keepPreviousData: true },
+    );
   });
 });

src/widgets/romm/component.jsx

@@ -3,11 +3,12 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 const ROMM_DEFAULT_FIELDS = ["platforms", "totalRoms", "saves", "states"];
-const MAX_ALLOWED_FIELDS = 4;
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
+  const service = withWidgetFields(configuredService, ROMM_DEFAULT_FIELDS);
   const { widget } = service;
   const { t } = useTranslation();
   const { data: response, error: responseError } = useWidgetAPI(widget, "statistics");
@@ -16,12 +17,6 @@ export default function Component({ service }) {
     return <Container service={service} error={responseError} />;
   }
 
-  if (!widget.fields?.length > 0) {
-    widget.fields = ROMM_DEFAULT_FIELDS;
-  } else if (widget.fields.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!response) {
     return (
       <Container service={service}>

src/widgets/romm/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/romm/component", () => {
     const service = { widget: { type: "romm" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("romm.platforms")).toBeInTheDocument();
     expect(screen.getByText("romm.totalRoms")).toBeInTheDocument();
@@ -38,7 +38,7 @@ describe("widgets/romm/component", () => {
     const service = { widget: { type: "romm", fields: ["platforms", "totalRoms", "saves", "states", "screenshots"] } };
     renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states"]);
+    expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states", "screenshots"]);
   });
 
   it("renders values when loaded (and includes additional fields when explicitly selected)", () => {

src/widgets/seerr/component.jsx

@@ -2,13 +2,13 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 export const seerrDefaultFields = ["pending", "approved", "completed"];
-const MAX_ALLOWED_FIELDS = 4;
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
+  const service = withWidgetFields(configuredService, seerrDefaultFields);
   const { widget } = service;
-  widget.fields = widget?.fields?.length ? widget.fields.slice(0, MAX_ALLOWED_FIELDS) : seerrDefaultFields;
   const isIssueEnabled = widget.fields.includes("issues");
 
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
@@ -30,16 +30,20 @@ export default function Component({ service }) {
     );
   }
 
-  if (
-    statsData.completed === undefined &&
-    (widget.fields.includes("completed") || widget.fields.includes("available"))
-  ) {
-    // Fallback to "available" if "completed" requested but not available
-    widget.fields = widget.fields.map((field) => (field === "completed" ? "available" : field));
+  // Older Seerr versions expose "available" instead of "completed".
+  let renderedService = service;
+  if (statsData.completed === undefined && service.widget.fields.includes("completed")) {
+    renderedService = {
+      ...service,
+      widget: {
+        ...service.widget,
+        fields: service.widget.fields.map((field) => (field === "completed" ? "available" : field)),
+      },
+    };
   }
 
   return (
-    <Container service={service}>
+    <Container service={renderedService}>
       <Block field="seerr.pending" label="seerr.pending" value={statsData.pending} />
       <Block field="seerr.approved" label="seerr.approved" value={statsData.approved} />
       <Block field="seerr.available" label="seerr.available" value={statsData.available} />

src/widgets/seerr/component.test.jsx

@@ -8,7 +8,7 @@ import { renderWithProviders } from "test-utils/render-with-providers";
 const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
 vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
 
-import Component, { seerrDefaultFields } from "./component";
+import Component from "./component";
 
 describe("widgets/seerr/component", () => {
   beforeEach(() => {
@@ -23,7 +23,7 @@ describe("widgets/seerr/component", () => {
     const service = { widget: { type: "seerr", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(seerrDefaultFields);
+    expect(service.widget.fields).toBeUndefined();
     expect(useWidgetAPI.mock.calls[1][1]).toBe("");
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("seerr.pending")).toBeInTheDocument();
@@ -42,7 +42,7 @@ describe("widgets/seerr/component", () => {
     const service = { widget: { type: "jellyseerr", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(seerrDefaultFields);
+    expect(service.widget.fields).toBeUndefined();
     expect(useWidgetAPI.mock.calls[1][1]).toBe("");
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("seerr.pending")).toBeInTheDocument();
@@ -58,7 +58,7 @@ describe("widgets/seerr/component", () => {
     const service = { widget: { type: "overseerr", url: "http://x" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(seerrDefaultFields);
+    expect(service.widget.fields).toBeUndefined();
     expect(useWidgetAPI.mock.calls[1][1]).toBe("");
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("seerr.pending")).toBeInTheDocument();
@@ -110,7 +110,7 @@ describe("widgets/seerr/component", () => {
 
     renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["pending", "approved", "available"]);
+    expect(service.widget.fields).toEqual(["pending", "approved", "completed"]);
     expect(screen.getByText("3")).toBeInTheDocument();
     expect(screen.queryByText("seerr.completed")).toBeNull();
   });

src/widgets/slskd/component.jsx

@@ -3,12 +3,13 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 const slskdDefaultFields = ["slskStatus", "downloads", "uploads", "sharedFiles"];
-const MAX_ALLOWED_FIELDS = 4;
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, slskdDefaultFields);
   const { widget } = service;
 
   const { data: appData, error: appError } = useWidgetAPI(widget, "application");
@@ -19,12 +20,6 @@ export default function Component({ service }) {
     return <Container service={service} error={appError ?? downError ?? upError} />;
   }
 
-  if (!widget.fields || widget.fields.length === 0) {
-    widget.fields = slskdDefaultFields;
-  } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!appData || !downData || !upData) {
     return (
       <Container service={service}>

src/widgets/slskd/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/slskd/component", () => {
     const service = { widget: { type: "slskd" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["slskStatus", "downloads", "uploads", "sharedFiles"]);
+    expect(service.widget.fields).toBeUndefined();
     // Container filters children by widget.fields.
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("slskd.slskStatus")).toBeInTheDocument();
@@ -38,7 +38,7 @@ describe("widgets/slskd/component", () => {
     const service = { widget: { type: "slskd", fields: ["a", "b", "c", "d", "e"] } };
     renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["a", "b", "c", "d"]);
+    expect(service.widget.fields).toEqual(["a", "b", "c", "d", "e"]);
   });
 
   it("renders status and counts when loaded", () => {

src/widgets/stash/component.jsx

@@ -4,23 +4,27 @@ import { useTranslation } from "next-i18next/pages";
 import { useEffect, useState } from "react";
 
 import { formatProxyUrl } from "utils/proxy/api-helpers";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["scenes", "images"];
+
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
-  const { widget } = service;
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
+  const requestWidget = configuredService.widget;
   const [stats, setStats] = useState(null);
 
   useEffect(() => {
     async function fetchStats() {
-      const url = formatProxyUrl(widget, "stats");
+      const url = formatProxyUrl(requestWidget, "stats");
       const res = await fetch(url, { method: "POST" });
       setStats(await res.json());
     }
     if (!stats) {
       fetchStats();
     }
-  }, [widget, stats]);
+  }, [requestWidget, stats]);
 
   if (!stats) {
     return (
@@ -31,16 +35,6 @@ export default function Component({ service }) {
     );
   }
 
-  // Provide a default if not set in the config
-  if (!widget.fields) {
-    widget.fields = ["scenes", "images"];
-  }
-
-  // Limit to a maximum of 4 at a time
-  if (widget.fields.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   return (
     <Container service={service}>
       <Block label="stash.scenes" value={t("common.number", { value: stats.scene_count })} />

src/widgets/suwayomi/component.jsx

@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["download", "nondownload", "read", "unread"];
+
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data: suwayomiData, error: suwayomiError } = useWidgetAPI(widget);
@@ -16,11 +20,6 @@ export default function Component({ service }) {
   }
 
   if (!suwayomiData) {
-    if (!widget.fields || widget.fields.length === 0) {
-      widget.fields = ["download", "nondownload", "read", "unread"];
-    } else if (widget.fields.length > 4) {
-      widget.fields = widget.fields.slice(0, 4);
-    }
     return (
       <Container service={service}>
         {widget.fields.map((field) => (

src/widgets/suwayomi/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/suwayomi/component", () => {
     const service = { widget: { type: "suwayomi" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["download", "nondownload", "read", "unread"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("suwayomi.download")).toBeInTheDocument();
     expect(screen.getByText("suwayomi.nondownload")).toBeInTheDocument();

src/widgets/tailscale/component.jsx

@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["address", "last_seen", "expires"];
+
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data: tailscaleData, error: tailscaleError } = useWidgetAPI(widget, "device");
@@ -25,13 +29,6 @@ export default function Component({ service }) {
     );
   }
 
-  const MAX_ALLOWED_FIELDS = 4;
-  if (widget.fields?.length == 0 || !widget.fields) {
-    widget.fields = ["address", "last_seen", "expires"];
-  } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   const {
     addresses: [address],
     keyExpiryDisabled,

src/widgets/tautulli/component.jsx

@@ -166,7 +166,7 @@ export default function Component({ service }) {
     );
   }
 
-  const playing = activityData.response.data.sessions.sort((a, b) => {
+  const playing = [...activityData.response.data.sessions].sort((a, b) => {
     if (a.view_offset > b.view_offset) {
       return 1;
     }

src/widgets/technitium/component.jsx

@@ -3,14 +3,14 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
-
-const MAX_ALLOWED_FIELDS = 4;
+import withWidgetFields from "utils/widget-fields";
 
 export const technitiumDefaultFields = ["totalQueries", "totalAuthoritative", "totalCached", "totalServerFailure"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
 
+  const service = withWidgetFields(configuredService, technitiumDefaultFields);
   const { widget } = service;
 
   const params = {
@@ -20,16 +20,6 @@ export default function Component({ service }) {
 
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats", params);
 
-  // Default fields
-  if (!widget.fields?.length > 0) {
-    widget.fields = technitiumDefaultFields;
-  }
-
-  // Limits max number of displayed fields
-  if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (statsError) {
     return <Container service={service} error={statsError} />;
   }

src/widgets/technitium/component.test.jsx

@@ -9,7 +9,7 @@ import { expectBlockValue, findServiceBlockByLabel } from "test-utils/widget-ass
 const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
 vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
 
-import Component, { technitiumDefaultFields } from "./component";
+import Component from "./component";
 
 describe("widgets/technitium/component", () => {
   beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/technitium/component", () => {
     const service = { widget: { type: "technitium" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(technitiumDefaultFields);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("technitium.totalQueries")).toBeInTheDocument();
     expect(screen.getByText("technitium.totalAuthoritative")).toBeInTheDocument();

src/widgets/tracearr/component.jsx

@@ -232,7 +232,7 @@ export default function Component({ service }) {
     );
   }
 
-  const playing = activityData.data.sort((a, b) => a.progressMs - b.progressMs);
+  const playing = [...activityData.data].sort((a, b) => a.progressMs - b.progressMs);
   const { summary } = activityData;
 
   if (view === "summary") {

src/widgets/unraid/component.jsx

@@ -3,9 +3,9 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 const UNRAID_DEFAULT_FIELDS = ["status", "cpu", "memoryPercent", "notifications"];
-const MAX_ALLOWED_FIELDS = 4;
 
 const POOLS = ["pool1", "pool2", "pool3", "pool4"];
 const POOL_FIELDS = [
@@ -14,8 +14,9 @@ const POOL_FIELDS = [
   { param: "UsedPercent", label: "poolUsed", valueKey: "fsUsedPercent", valueType: "common.percent" },
 ];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, UNRAID_DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data, error } = useWidgetAPI(widget);
@@ -24,12 +25,6 @@ export default function Component({ service }) {
     return <Container service={service} error={error} />;
   }
 
-  if (!widget.fields?.length) {
-    widget.fields = UNRAID_DEFAULT_FIELDS;
-  } else if (widget.fields.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   if (!data) {
     return (
       <Container service={service}>

src/widgets/unraid/component.test.jsx

@@ -20,14 +20,17 @@ describe("widgets/unraid/component", () => {
     vi.clearAllMocks();
   });
 
-  it("defaults widget.fields and filters down to 4 visible blocks while loading", () => {
+  it("defaults fields and filters down to 4 visible blocks while loading", () => {
     useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
 
     const service = { widget: { type: "unraid" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    // Component sets default fields
-    expect(service.widget.fields).toEqual(["status", "cpu", "memoryPercent", "notifications"]);
+    expect(service.widget.fields).toBeUndefined();
+    expect(useWidgetAPI).toHaveBeenCalledWith({
+      type: "unraid",
+      fields: ["status", "cpu", "memoryPercent", "notifications"],
+    });
 
     // Container filters the many placeholder Blocks down to the selected fields.
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);

src/widgets/vikunja/component.jsx

@@ -2,10 +2,14 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
+import useCurrentTime from "utils/hooks/use-current-time";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+const WEEK = 7 * 24 * 60 * 60 * 1000;
+
 export default function Component({ service }) {
   const { t } = useTranslation();
+  const currentTime = useCurrentTime();
   const { widget } = service;
 
   const version = widget.version ?? 1;
@@ -32,10 +36,10 @@ export default function Component({ service }) {
 
   const projects = projectsData.filter((project) => project.id > 0); // saved filters have id < 0
 
-  const oneWeekFromNow = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+  const oneWeekFromNow = new Date(currentTime + WEEK);
   const tasksWithDueDate = tasksData.filter((task) => !task.dueDateIsDefault);
   const tasks7d = tasksWithDueDate.filter((task) => new Date(task.dueDate) <= oneWeekFromNow);
-  const tasksOverdue = tasksWithDueDate.filter((task) => new Date(task.dueDate) <= new Date(Date.now()));
+  const tasksOverdue = tasksWithDueDate.filter((task) => new Date(task.dueDate) <= new Date(currentTime));
   const tasksInProgress = tasksData.filter((task) => task.inProgress);
 
   return (

src/widgets/wallos/component.jsx

@@ -3,8 +3,9 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-const MAX_ALLOWED_FIELDS = 4;
+const DEFAULT_FIELDS = ["activeSubscriptions", "nextRenewingSubscription", "thisMonthlyCost", "nextMonthlyCost"];
 
 const todayDate = new Date();
 function toApiMonthYear(offset = 0) {
@@ -16,16 +17,11 @@ function toApiMonthYear(offset = 0) {
   };
 }
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
-  if (!widget.fields) {
-    widget.fields = ["activeSubscriptions", "nextRenewingSubscription", "thisMonthlyCost", "nextMonthlyCost"];
-  } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
-    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
-  }
-
   const subscriptionsEndPoint =
     widget.fields.includes("activeSubscriptions") || widget.fields.includes("nextRenewingSubscription")
       ? "get_subscriptions"

src/widgets/wallos/component.test.jsx

@@ -22,12 +22,7 @@ describe("widgets/wallos/component", () => {
     const service = { widget: { type: "wallos" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual([
-      "activeSubscriptions",
-      "nextRenewingSubscription",
-      "thisMonthlyCost",
-      "nextMonthlyCost",
-    ]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("wallos.activeSubscriptions")).toBeInTheDocument();
     expect(screen.getByText("wallos.nextRenewingSubscription")).toBeInTheDocument();

src/widgets/wgeasy/component.jsx

@@ -2,18 +2,18 @@ import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["connected", "enabled", "total"];
+
+export default function Component({ service: configuredService }) {
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
   const endpoint = widget.version === 2 ? "clientv2" : "client";
 
   const { data: infoData, error: infoError } = useWidgetAPI(widget, endpoint);
 
-  if (!widget.fields) {
-    widget.fields = ["connected", "enabled", "total"];
-  }
-
   if (infoError || infoData?.statusCode > 400) {
     return <Container service={service} error={infoError ?? { message: infoData.statusMessage, data: infoData }} />;
   }

src/widgets/wgeasy/component.test.jsx

@@ -28,7 +28,7 @@ describe("widgets/wgeasy/component", () => {
     const service = { widget: { type: "wgeasy" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["connected", "enabled", "total"]);
+    expect(service.widget.fields).toBeUndefined();
     // Container filters by widget.fields; "disabled" is not included by default.
     expect(container.querySelectorAll(".service-block")).toHaveLength(3);
     expect(screen.getByText("wgeasy.connected")).toBeInTheDocument();

src/widgets/zabbix/component.jsx

@@ -3,6 +3,7 @@ import Container from "components/services/widget/container";
 import { useTranslation } from "next-i18next/pages";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
 
 const PriorityUnclassified = "0";
 const PriorityInformation = "1";
@@ -10,9 +11,11 @@ const PriorityWarning = "2";
 const PriorityAverage = "3";
 const PriorityHigh = "4";
 const PriorityDisaster = "5";
+const DEFAULT_FIELDS = ["warning", "average", "high", "disaster"];
 
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
   const { t } = useTranslation();
+  const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
   const { widget } = service;
 
   const { data: zabbixData, error: zabbixError } = useWidgetAPI(widget, "trigger");
@@ -21,12 +24,6 @@ export default function Component({ service }) {
     return <Container service={service} error={zabbixError} />;
   }
 
-  if (!widget.fields) {
-    widget.fields = ["warning", "average", "high", "disaster"];
-  } else if (widget.fields?.length > 4) {
-    widget.fields = widget.fields.slice(0, 4);
-  }
-
   if (!zabbixData) {
     return (
       <Container service={service}>

src/widgets/zabbix/component.test.jsx

@@ -22,7 +22,7 @@ describe("widgets/zabbix/component", () => {
     const service = { widget: { type: "zabbix" } };
     const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
 
-    expect(service.widget.fields).toEqual(["warning", "average", "high", "disaster"]);
+    expect(service.widget.fields).toBeUndefined();
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("zabbix.warning")).toBeInTheDocument();
     expect(screen.getByText("zabbix.average")).toBeInTheDocument();