feat: user setting ping icons (#1277)

* feat: user setting ping icons

* fix: format issues

* test: adjust test to match expectations

packages/widgets/src/app/ping/ping-dot.tsx

@@ -1,23 +1,33 @@
 import type { MantineColor } from "@mantine/core";
 import { Box, Tooltip } from "@mantine/core";
 
+import { clientApi } from "@homarr/api/client";
+import type { TablerIcon } from "@homarr/ui";
+
 interface PingDotProps {
+  icon: TablerIcon;
   color: MantineColor;
   tooltip: string;
 }
 
-export const PingDot = ({ color, tooltip }: PingDotProps) => {
+export const PingDot = ({ color, tooltip, ...props }: PingDotProps) => {
+  const [pingIconsEnabled] = clientApi.user.getPingIconsEnabledOrDefault.useSuspenseQuery();
+
   return (
     <Box bottom="2.5cqmin" right="2.5cqmin" pos="absolute">
       <Tooltip label={tooltip}>
-        <Box
-          bg={color}
-          style={{
-            borderRadius: "100%",
-          }}
-          w="10cqmin"
-          h="10cqmin"
-        ></Box>
+        {pingIconsEnabled ? (
+          <props.icon style={{ width: "10cqmin", height: "10cqmin" }} color={color} />
+        ) : (
+          <Box
+            bg={color}
+            style={{
+              borderRadius: "100%",
+            }}
+            w="10cqmin"
+            h="10cqmin"
+          ></Box>
+        )}
       </Tooltip>
     </Box>
   );

packages/widgets/src/app/ping/ping-indicator.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { IconCheck, IconX } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -32,9 +33,12 @@ export const PingIndicator = ({ href }: PingIndicatorProps) => {
     },
   );
 
+  const isError = "error" in pingResult || pingResult.statusCode >= 500;
+
   return (
     <PingDot
-      color={"error" in pingResult || pingResult.statusCode >= 500 ? "red" : "green"}
+      icon={isError ? IconX : IconCheck}
+      color={isError ? "red" : "green"}
       tooltip={"statusCode" in pingResult ? pingResult.statusCode.toString() : pingResult.error}
     />
   );