refactor(widgets): migrate new integration widgets from useSuspenseQuery to useQuery

Convert Uptime Kuma, Paperless-ngx, audio-stats, and UPS widgets
to use useQuery with WidgetEmptyState fallback, consistent with the
query cache persistence pattern from PR #5811.

packages/widgets/src/audio-stats/component.tsx

@@ -2,13 +2,17 @@
 
 import { clientApi } from "@homarr/api/client";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { AudioStatsContent } from "./audio-stats-content";
 
 export default function AudioStatsWidget({ integrationIds, options, width }: WidgetComponentProps<"audioStats">) {
-  const [response] = clientApi.widget.audioStats.getStats.useSuspenseQuery({
-    integrationId: integrationIds[0] ?? "",
-  });
+  const { data: response } = clientApi.widget.audioStats.getStats.useQuery(
+    { integrationId: integrationIds[0] ?? "" },
+    { staleTime: 5 * 60 * 1000 },
+  );
+
+  if (!response) return <WidgetEmptyState />;
 
   return <AudioStatsContent backend={response.kind} stats={response.data} options={options} width={width} />;
 }

packages/widgets/src/paperless-ngx/component.tsx

@@ -8,6 +8,7 @@ import { IconFileDescription, IconFileText, IconInbox, IconTag, IconUsers } from
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.css";
 
@@ -71,9 +72,12 @@ const heroPartVisibility = {
 
 export default function PaperlessNgxWidget({ integrationIds, options, width }: WidgetComponentProps<"paperlessNgx">) {
   const t = useScopedI18n("widget.paperlessNgx");
-  const [stats] = clientApi.widget.paperlessNgx.getStats.useSuspenseQuery({
-    integrationId: integrationIds[0] ?? "",
-  });
+  const { data: stats } = clientApi.widget.paperlessNgx.getStats.useQuery(
+    { integrationId: integrationIds[0] ?? "" },
+    { staleTime: 5 * 60 * 1000 },
+  );
+
+  if (!stats) return <WidgetEmptyState />;
 
   const canShowInboxHero = options.showDocumentsInbox && options.showDocumentsTotal;
   const showHero = options.showInboxRatio && canShowInboxHero;

packages/widgets/src/ups/component.tsx

@@ -8,6 +8,7 @@ import type { UpsStatus, UpsSummary } from "@homarr/integrations/types";
 import type { ScopedTranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import { NoIntegrationSelectedError } from "../errors/no-integration-selected";
@@ -39,7 +40,10 @@ interface UpsContentProps {
 
 function UpsContent({ integrationIds, options, isEditMode, width }: UpsContentProps) {
   const t = useScopedI18n("widget.ups");
-  const [data] = clientApi.widget.ups.getSummaries.useSuspenseQuery({ integrationIds });
+  const { data } = clientApi.widget.ups.getSummaries.useQuery(
+    { integrationIds },
+    { staleTime: 30 * 1000 },
+  );
 
   const utils = clientApi.useUtils();
   clientApi.widget.ups.subscribeSummaries.useSubscription(
@@ -59,6 +63,8 @@ function UpsContent({ integrationIds, options, isEditMode, width }: UpsContentPr
     },
   );
 
+  if (!data) return <WidgetEmptyState />;
+
   const devices = data.flatMap((instance) =>
     instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
   );

packages/widgets/src/uptime-kuma/component.tsx

@@ -9,6 +9,7 @@ import { formatNumber } from "@homarr/common";
 import type { UptimeKumaDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
@@ -106,7 +107,10 @@ interface UptimeKumaContentProps {
 
 function UptimeKumaContent({ integrationIds, isEditMode, options, width }: UptimeKumaContentProps) {
   const t = useScopedI18n("widget.uptimeKuma");
-  const [dashboardData] = clientApi.widget.uptimeKuma.getDashboard.useSuspenseQuery({ integrationIds });
+  const { data: dashboardData } = clientApi.widget.uptimeKuma.getDashboard.useQuery(
+    { integrationIds },
+    { staleTime: 30 * 1000 },
+  );
 
   const utils = clientApi.useUtils();
   clientApi.widget.uptimeKuma.subscribeToDashboard.useSubscription(
@@ -127,6 +131,8 @@ function UptimeKumaContent({ integrationIds, isEditMode, options, width }: Uptim
     },
   );
 
+  if (!dashboardData) return <WidgetEmptyState />;
+
   const combined = dashboardData.reduce<UptimeKumaDashboardData>(
     (acc, item) => ({
       totalMonitors: acc.totalMonitors + item.dashboard.totalMonitors,