feat: refine mobile dashboard experience

packages/widgets/src/beszel/_shared/mobile-summary.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";
+
+import { WidgetMobileLoading, WidgetMobileSummary } from "../../common/mobile-summary";
+import { useBeszelFilteredSystems } from "./hooks";
+
+interface BeszelSystemsMobileSummaryProps {
+  integrationIds: string[];
+  label: string;
+  statusFilter: string;
+}
+
+export const BeszelSystemsMobileSummary = ({
+  integrationIds,
+  label,
+  statusFilter,
+}: BeszelSystemsMobileSummaryProps) => {
+  const t = useI18n();
+  const { data: results = [], error, isPending } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systems = useBeszelFilteredSystems(results, statusFilter);
+  const failedResults = results.filter((result) => "error" in result);
+
+  if (isPending) return <WidgetMobileLoading />;
+  if (error) throw error;
+  if (results.length > 0 && failedResults.length === results.length) {
+    throw new Error(String(failedResults[0]?.error ?? "Unable to connect to Beszel"));
+  }
+
+  const up = systems.filter((system) => system.status === "up").length;
+
+  return (
+    <WidgetMobileSummary
+      value={systems.length}
+      label={label}
+      description={t("board.mobile.systemStatus", {
+        up,
+        attention: systems.length - up,
+      })}
+      isStale={failedResults.length > 0}
+    />
+  );
+};