feat: add tdarr integration (#1657)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/widgets/src/media-transcoding/health-check-status.tsx

@@ -0,0 +1,76 @@
+import type { MantineColor } from "@mantine/core";
+import { Divider, Group, HoverCard, Indicator, RingProgress, Stack, Text } from "@mantine/core";
+import { useColorScheme } from "@mantine/hooks";
+import { IconHeartbeat } from "@tabler/icons-react";
+
+import type { TdarrStatistics } from "@homarr/integrations";
+import { useI18n } from "@homarr/translation/client";
+
+interface HealthCheckStatusProps {
+  statistics: TdarrStatistics;
+}
+
+export function HealthCheckStatus(props: HealthCheckStatusProps) {
+  const colorScheme = useColorScheme();
+  const t = useI18n("widget.mediaTranscoding.healthCheck");
+
+  const indicatorColor = props.statistics.failedHealthCheckCount
+    ? "red"
+    : props.statistics.stagedHealthCheckCount
+      ? "yellow"
+      : "green";
+
+  return (
+    <HoverCard position="bottom" width={250} shadow="sm">
+      <HoverCard.Target>
+        <Indicator color={textColor(indicatorColor, colorScheme)} size={8} display="flex">
+          <IconHeartbeat size={20} />
+        </Indicator>
+      </HoverCard.Target>
+      <HoverCard.Dropdown bg={colorScheme === "light" ? "gray.2" : "dark.8"}>
+        <Stack gap="sm" align="center">
+          <Group gap="xs">
+            <IconHeartbeat size={18} />
+            <Text size="sm">{t("title")}</Text>
+          </Group>
+          <Divider
+            style={{
+              alignSelf: "stretch",
+            }}
+          />
+          <RingProgress
+            sections={[
+              { value: props.statistics.stagedHealthCheckCount, color: textColor("yellow", colorScheme) },
+              { value: props.statistics.totalHealthCheckCount, color: textColor("green", colorScheme) },
+              { value: props.statistics.failedHealthCheckCount, color: textColor("red", colorScheme) },
+            ]}
+          />
+          <Group display="flex" w="100%">
+            <Stack style={{ flex: 1 }} gap={0} align="center">
+              <Text size="xs" c={textColor("yellow", colorScheme)}>
+                {props.statistics.stagedHealthCheckCount}
+              </Text>
+              <Text size="xs">{t("queued")}</Text>
+            </Stack>
+            <Stack style={{ flex: 1 }} gap={0} align="center">
+              <Text size="xs" c={textColor("green", colorScheme)}>
+                {props.statistics.totalHealthCheckCount}
+              </Text>
+              <Text size="xs">{t("status.healthy")}</Text>
+            </Stack>
+            <Stack style={{ flex: 1 }} gap={0} align="center">
+              <Text size="xs" c={textColor("red", colorScheme)}>
+                {props.statistics.failedHealthCheckCount}
+              </Text>
+              <Text size="xs">{t("status.unhealthy")}</Text>
+            </Stack>
+          </Group>
+        </Stack>
+      </HoverCard.Dropdown>
+    </HoverCard>
+  );
+}
+
+function textColor(color: MantineColor, theme: "light" | "dark") {
+  return `${color}.${theme === "light" ? 8 : 5}`;
+}