feat: user setting ping icons (#1277)

* feat: user setting ping icons

* fix: format issues

* test: adjust test to match expectations

packages/widgets/src/app/component.tsx

@@ -3,6 +3,7 @@
 import type { PropsWithChildren } from "react";
 import { Suspense } from "react";
 import { Flex, Text, Tooltip, UnstyledButton } from "@mantine/core";
+import { IconLoader } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
 import { clientApi } from "@homarr/api/client";
@@ -59,7 +60,7 @@ export default function AppWidget({ options, isEditMode }: WidgetComponentProps<
         </Flex>
       </Tooltip.Floating>
       {options.pingEnabled && app.href ? (
-        <Suspense fallback={<PingDot color="blue" tooltip={`${t("common.action.loading")}…`} />}>
+        <Suspense fallback={<PingDot icon={IconLoader} color="blue" tooltip={`${t("common.action.loading")}…`} />}>
           <PingIndicator href={app.href} />
         </Suspense>
       ) : null}

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}
     />
   );