From ab6a0f3b96b5f12ec2a52de68ddbf4a107c20055 Mon Sep 17 00:00:00 2001
From: ajnart <49837342+ajnart@users.noreply.github.com>
Date: Mon, 22 Jun 2026 12:08:39 +0000
Subject: [PATCH] style: auto-fix lint and format

---
 .../widgets/src/beszel-alerts/component.tsx   | 178 ++++++-------
 .../src/beszel-system-grid/component.tsx      |   6 +-
 .../src/beszel-system-stats/component.tsx     | 234 +++++++++---------
 .../src/beszel-system-table/component.tsx     |   6 +-
 .../src/beszel/_shared/error-indicator.tsx    |   8 +-
 5 files changed, 220 insertions(+), 212 deletions(-)

diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index 631f91eb3..faaa42771 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -41,7 +41,11 @@ export default function BeszelAlertsWidget({
     () => ({ integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }),
     [integrationIds, options.showHistory, options.maxHistoryItems],
   );
-  const { data: results = [], error: alertsError, isPending } = clientApi.widget.beszel.getAlerts.useQuery(alertsInput, {
+  const {
+    data: results = [],
+    error: alertsError,
+    isPending,
+  } = clientApi.widget.beszel.getAlerts.useQuery(alertsInput, {
     staleTime: 15_000,
     refetchInterval: 15_000,
     retry: false,
@@ -120,99 +124,99 @@ export default function BeszelAlertsWidget({
             </Stack>
           )}
 
-        {triggeredAlerts.length > 0 && (
-          <Stack gap={6}>
-            <Group gap={6}>
-              <IconFlame size={14} color="var(--mantine-color-red-6)" />
-              <Text size="xs" fw={600} tt="uppercase" c="red">
-                {t("status.triggered")} ({triggeredAlerts.length})
-              </Text>
-            </Group>
-            {triggeredAlerts.map((alert) => (
-              <AlertRow
-                key={alert._key}
-                name={alert.name}
-                value={alert.value}
-                min={alert.min}
-                systemName={systemNameMap[alert.system] ?? alert.system}
-                triggered
-              />
-            ))}
-          </Stack>
-        )}
-
-        {triggeredAlerts.length > 0 && okAlerts.length > 0 && <Divider />}
-
-        {okAlerts.length > 0 && (
-          <Stack gap={6}>
-            <Group gap={6}>
-              <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
-              <Text size="xs" fw={600} tt="uppercase" c="dimmed">
-                {t("status.ok")} ({okAlerts.length})
-              </Text>
-            </Group>
-            {okAlerts.map((alert) => (
-              <AlertRow
-                key={alert._key}
-                name={alert.name}
-                value={alert.value}
-                min={alert.min}
-                systemName={systemNameMap[alert.system] ?? alert.system}
-                triggered={false}
-              />
-            ))}
-          </Stack>
-        )}
-
-        {options.showHistory && history.length > 0 && (
-          <>
-            <Divider />
+          {triggeredAlerts.length > 0 && (
             <Stack gap={6}>
               <Group gap={6}>
-                <IconHistory size={14} opacity={0.5} />
-                <Text size="xs" fw={600} tt="uppercase" c="dimmed">
-                  {t("history")}
+                <IconFlame size={14} color="var(--mantine-color-red-6)" />
+                <Text size="xs" fw={600} tt="uppercase" c="red">
+                  {t("status.triggered")} ({triggeredAlerts.length})
                 </Text>
               </Group>
-              {history.map((entry) => {
-                const systemName = systemNameMap[entry.system] ?? entry.system;
-                const isResolved = !!entry.resolved;
-                const HistoryIcon = alertIconMap[entry.name] ?? Server;
-                return (
-                  <Group key={entry._key} justify="space-between" wrap="nowrap" gap="xs" pl={4}>
-                    <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
-                      <Box
-                        w={3}
-                        h={24}
-                        style={{ borderRadius: 2, flexShrink: 0 }}
-                        bg={isResolved ? "green.6" : "red.6"}
-                      />
-                      <HistoryIcon size={12} opacity={0.5} style={{ flexShrink: 0 }} />
-                      <Stack gap={0} style={{ minWidth: 0 }}>
-                        <Text size="xs" fw={500} truncate>
-                          {entry.name}
-                        </Text>
-                        <Text size="xs" c="dimmed" truncate>
-                          {systemName}
+              {triggeredAlerts.map((alert) => (
+                <AlertRow
+                  key={alert._key}
+                  name={alert.name}
+                  value={alert.value}
+                  min={alert.min}
+                  systemName={systemNameMap[alert.system] ?? alert.system}
+                  triggered
+                />
+              ))}
+            </Stack>
+          )}
+
+          {triggeredAlerts.length > 0 && okAlerts.length > 0 && <Divider />}
+
+          {okAlerts.length > 0 && (
+            <Stack gap={6}>
+              <Group gap={6}>
+                <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
+                <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+                  {t("status.ok")} ({okAlerts.length})
+                </Text>
+              </Group>
+              {okAlerts.map((alert) => (
+                <AlertRow
+                  key={alert._key}
+                  name={alert.name}
+                  value={alert.value}
+                  min={alert.min}
+                  systemName={systemNameMap[alert.system] ?? alert.system}
+                  triggered={false}
+                />
+              ))}
+            </Stack>
+          )}
+
+          {options.showHistory && history.length > 0 && (
+            <>
+              <Divider />
+              <Stack gap={6}>
+                <Group gap={6}>
+                  <IconHistory size={14} opacity={0.5} />
+                  <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+                    {t("history")}
+                  </Text>
+                </Group>
+                {history.map((entry) => {
+                  const systemName = systemNameMap[entry.system] ?? entry.system;
+                  const isResolved = !!entry.resolved;
+                  const HistoryIcon = alertIconMap[entry.name] ?? Server;
+                  return (
+                    <Group key={entry._key} justify="space-between" wrap="nowrap" gap="xs" pl={4}>
+                      <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
+                        <Box
+                          w={3}
+                          h={24}
+                          style={{ borderRadius: 2, flexShrink: 0 }}
+                          bg={isResolved ? "green.6" : "red.6"}
+                        />
+                        <HistoryIcon size={12} opacity={0.5} style={{ flexShrink: 0 }} />
+                        <Stack gap={0} style={{ minWidth: 0 }}>
+                          <Text size="xs" fw={500} truncate>
+                            {entry.name}
+                          </Text>
+                          <Text size="xs" c="dimmed" truncate>
+                            {systemName}
+                          </Text>
+                        </Stack>
+                      </Group>
+                      <Stack gap={0} align="flex-end" style={{ flexShrink: 0 }}>
+                        <Badge size="xs" variant="dot" color={isResolved ? "green" : "red"}>
+                          {isResolved ? t("resolved") : t("status.triggered")}
+                        </Badge>
+                        <Text size="10px" c="dimmed">
+                          {dayjs(entry.created).fromNow()}
                         </Text>
                       </Stack>
                     </Group>
-                    <Stack gap={0} align="flex-end" style={{ flexShrink: 0 }}>
-                      <Badge size="xs" variant="dot" color={isResolved ? "green" : "red"}>
-                        {isResolved ? t("resolved") : t("status.triggered")}
-                      </Badge>
-                      <Text size="10px" c="dimmed">
-                        {dayjs(entry.created).fromNow()}
-                      </Text>
-                    </Stack>
-                  </Group>
-                );
-              })}
-            </Stack>
-          </>
-        )}
-      </Stack>
-    </ScrollArea>
+                  );
+                })}
+              </Stack>
+            </>
+          )}
+        </Stack>
+      </ScrollArea>
     </Box>
   );
 }
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index c75dcf8ab..68df8f207 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -365,7 +365,11 @@ export default function BeszelSystemGridWidget({
   const board = useRequiredBoard();
   const { openModal } = useModalAction(BeszelSystemStatsModal);
 
-  const { data: results = [], error: systemsError, isPending } = clientApi.widget.beszel.getSystems.useQuery(
+  const {
+    data: results = [],
+    error: systemsError,
+    isPending,
+  } = clientApi.widget.beszel.getSystems.useQuery(
     { integrationIds },
     { staleTime: 5_000, refetchInterval: 5_000, retry: false },
   );
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 863630f59..4784877a5 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -314,130 +314,130 @@ export default function BeszelSystemStatsWidget({
           )}
 
           {activeStats && (!("error" in activeStats) || !activeStats.error) && (
-          <SimpleGrid cols={cols} spacing="md">
-            {options.showCpu && cpuData.length > 0 && (
-              <BeszelChartPanel
-                title={t("chart.cpu.title")}
-                subtitle={t("chart.cpu.subtitle")}
-                chartProps={{
-                  h: CHART_HEIGHT,
-                  data: cpuData,
-                  series: series.cpu,
-                  yAxisFormatter: chartAxisFormatters.percent,
-                  yAxisDomain: CPU_Y_AXIS_DOMAIN,
-                  tooltipProps: tooltipPercent,
-                }}
-              />
-            )}
+            <SimpleGrid cols={cols} spacing="md">
+              {options.showCpu && cpuData.length > 0 && (
+                <BeszelChartPanel
+                  title={t("chart.cpu.title")}
+                  subtitle={t("chart.cpu.subtitle")}
+                  chartProps={{
+                    h: CHART_HEIGHT,
+                    data: cpuData,
+                    series: series.cpu,
+                    yAxisFormatter: chartAxisFormatters.percent,
+                    yAxisDomain: CPU_Y_AXIS_DOMAIN,
+                    tooltipProps: tooltipPercent,
+                  }}
+                />
+              )}
 
-            {options.showMemory && memoryData.length > 0 && (
-              <BeszelChartPanel
-                title={t("chart.memory.title")}
-                subtitle={t("chart.memory.subtitle")}
-                chartProps={{
-                  h: CHART_HEIGHT,
-                  data: memoryData,
-                  type: "stacked",
-                  series: series.memory,
-                  yAxisFormatter: chartAxisFormatters.gb,
-                  tooltipProps: tooltipGB,
-                }}
-              />
-            )}
+              {options.showMemory && memoryData.length > 0 && (
+                <BeszelChartPanel
+                  title={t("chart.memory.title")}
+                  subtitle={t("chart.memory.subtitle")}
+                  chartProps={{
+                    h: CHART_HEIGHT,
+                    data: memoryData,
+                    type: "stacked",
+                    series: series.memory,
+                    yAxisFormatter: chartAxisFormatters.gb,
+                    tooltipProps: tooltipGB,
+                  }}
+                />
+              )}
 
-            {options.showDisk && diskData.length > 0 && (
-              <BeszelChartPanel
-                title={t("chart.disk.title")}
-                subtitle={t("chart.disk.subtitle")}
-                chartProps={{
-                  h: CHART_HEIGHT,
-                  data: diskData,
-                  series: series.disk,
-                  yAxisFormatter: chartAxisFormatters.gb,
-                  tooltipProps: tooltipGB,
-                }}
-              />
-            )}
+              {options.showDisk && diskData.length > 0 && (
+                <BeszelChartPanel
+                  title={t("chart.disk.title")}
+                  subtitle={t("chart.disk.subtitle")}
+                  chartProps={{
+                    h: CHART_HEIGHT,
+                    data: diskData,
+                    series: series.disk,
+                    yAxisFormatter: chartAxisFormatters.gb,
+                    tooltipProps: tooltipGB,
+                  }}
+                />
+              )}
 
-            {options.showDiskIO && diskIOData.length > 0 && (
-              <BeszelChartPanel
-                title={t("chart.diskIO.title")}
-                subtitle={t("chart.diskIO.subtitle")}
-                chartProps={{
-                  h: CHART_HEIGHT,
-                  data: diskIOData,
-                  series: series.diskIO,
-                  yAxisFormatter: chartAxisFormatters.rate,
-                  tooltipProps: tooltipRate,
-                }}
-              />
-            )}
+              {options.showDiskIO && diskIOData.length > 0 && (
+                <BeszelChartPanel
+                  title={t("chart.diskIO.title")}
+                  subtitle={t("chart.diskIO.subtitle")}
+                  chartProps={{
+                    h: CHART_HEIGHT,
+                    data: diskIOData,
+                    series: series.diskIO,
+                    yAxisFormatter: chartAxisFormatters.rate,
+                    tooltipProps: tooltipRate,
+                  }}
+                />
+              )}
 
-            {options.showNetwork && networkData.length > 0 && (
-              <BeszelChartPanel
-                title={t("chart.network.title")}
-                subtitle={t("chart.network.subtitle")}
-                chartProps={{
-                  h: CHART_HEIGHT,
-                  data: networkData,
-                  series: series.network,
-                  yAxisFormatter: chartAxisFormatters.rate,
-                  tooltipProps: tooltipRate,
-                }}
-              />
-            )}
+              {options.showNetwork && networkData.length > 0 && (
+                <BeszelChartPanel
+                  title={t("chart.network.title")}
+                  subtitle={t("chart.network.subtitle")}
+                  chartProps={{
+                    h: CHART_HEIGHT,
+                    data: networkData,
+                    series: series.network,
+                    yAxisFormatter: chartAxisFormatters.rate,
+                    tooltipProps: tooltipRate,
+                  }}
+                />
+              )}
 
-            {showDocker && containerSeries.length > 0 && (
-              <>
-                {options.showDockerCpu && dockerCpuData.length > 0 && (
-                  <BeszelChartPanel
-                    title={t("chart.dockerCpu.title")}
-                    subtitle={t("chart.dockerCpu.subtitle")}
-                    chartProps={{
-                      h: CHART_HEIGHT,
-                      data: dockerCpuData,
-                      type: "stacked",
-                      series: containerSeries,
-                      yAxisFormatter: chartAxisFormatters.percent,
-                      tooltipProps: tooltipPercentTotal,
-                    }}
-                  />
-                )}
+              {showDocker && containerSeries.length > 0 && (
+                <>
+                  {options.showDockerCpu && dockerCpuData.length > 0 && (
+                    <BeszelChartPanel
+                      title={t("chart.dockerCpu.title")}
+                      subtitle={t("chart.dockerCpu.subtitle")}
+                      chartProps={{
+                        h: CHART_HEIGHT,
+                        data: dockerCpuData,
+                        type: "stacked",
+                        series: containerSeries,
+                        yAxisFormatter: chartAxisFormatters.percent,
+                        tooltipProps: tooltipPercentTotal,
+                      }}
+                    />
+                  )}
 
-                {options.showDockerMemory && dockerMemData.length > 0 && (
-                  <BeszelChartPanel
-                    title={t("chart.dockerMemory.title")}
-                    subtitle={t("chart.dockerMemory.subtitle")}
-                    chartProps={{
-                      h: CHART_HEIGHT,
-                      data: dockerMemData,
-                      type: "stacked",
-                      series: containerSeries,
-                      yAxisFormatter: chartAxisFormatters.bytes,
-                      tooltipProps: tooltipBytesTotal,
-                    }}
-                  />
-                )}
+                  {options.showDockerMemory && dockerMemData.length > 0 && (
+                    <BeszelChartPanel
+                      title={t("chart.dockerMemory.title")}
+                      subtitle={t("chart.dockerMemory.subtitle")}
+                      chartProps={{
+                        h: CHART_HEIGHT,
+                        data: dockerMemData,
+                        type: "stacked",
+                        series: containerSeries,
+                        yAxisFormatter: chartAxisFormatters.bytes,
+                        tooltipProps: tooltipBytesTotal,
+                      }}
+                    />
+                  )}
 
-                {options.showDockerNetwork && dockerNetData.length > 0 && (
-                  <BeszelChartPanel
-                    title={t("chart.dockerNetwork.title")}
-                    subtitle={t("chart.dockerNetwork.subtitle")}
-                    chartProps={{
-                      h: CHART_HEIGHT,
-                      data: dockerNetData,
-                      series: containerSeries,
-                      yAxisFormatter: chartAxisFormatters.rate,
-                      tooltipProps: tooltipRate,
-                    }}
-                  />
-                )}
-              </>
-            )}
-          </SimpleGrid>
-        )}
-      </Stack>
-    </ScrollArea>
+                  {options.showDockerNetwork && dockerNetData.length > 0 && (
+                    <BeszelChartPanel
+                      title={t("chart.dockerNetwork.title")}
+                      subtitle={t("chart.dockerNetwork.subtitle")}
+                      chartProps={{
+                        h: CHART_HEIGHT,
+                        data: dockerNetData,
+                        series: containerSeries,
+                        yAxisFormatter: chartAxisFormatters.rate,
+                        tooltipProps: tooltipRate,
+                      }}
+                    />
+                  )}
+                </>
+              )}
+            </SimpleGrid>
+          )}
+        </Stack>
+      </ScrollArea>
     </Box>
   );
 }
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index ffdf24ed8..2604b5a0b 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -70,7 +70,11 @@ export default function BeszelSystemTableWidget({
 }: WidgetComponentProps<"beszelSystemTable">) {
   const t = useScopedI18n("widget.beszelSystemTable");
   const { openModal } = useModalAction(BeszelSystemStatsModal);
-  const { data: results = [], error: systemsError, isPending } = clientApi.widget.beszel.getSystems.useQuery(
+  const {
+    data: results = [],
+    error: systemsError,
+    isPending,
+  } = clientApi.widget.beszel.getSystems.useQuery(
     { integrationIds },
     { staleTime: 5_000, refetchInterval: 5_000, retry: false },
   );
diff --git a/packages/widgets/src/beszel/_shared/error-indicator.tsx b/packages/widgets/src/beszel/_shared/error-indicator.tsx
index d416c8249..7d539baac 100644
--- a/packages/widgets/src/beszel/_shared/error-indicator.tsx
+++ b/packages/widgets/src/beszel/_shared/error-indicator.tsx
@@ -19,11 +19,7 @@ export function BeszelIntegrationErrorIndicator({ results }: BeszelIntegrationEr
   const label = failed.map((r) => r.integrationName ?? r.integrationId).join(", ");
   return (
     <Tooltip label={label} position="left" withArrow>
-      <IconAlertTriangle
-        size={14}
-        color="var(--mantine-color-orange-6)"
-        style={{ cursor: "help", flexShrink: 0 }}
-      />
+      <IconAlertTriangle size={14} color="var(--mantine-color-orange-6)" style={{ cursor: "help", flexShrink: 0 }} />
     </Tooltip>
   );
-}
\ No newline at end of file
+}