feat: refine mobile dashboard experience

packages/widgets/src/coolify/servers-section.tsx

@@ -1,28 +1,20 @@
 "use client";
 
 import { Accordion, ActionIcon, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
-import {
-  IconCircleCheckFilled,
-  IconCircleFilled,
-  IconCircleXFilled,
-  IconEye,
-  IconEyeOff,
-  IconServer,
-} from "@tabler/icons-react";
+import { IconCircleCheckFilled, IconCircleXFilled, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
 
 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import actionTargetClasses from "../common/action-target.module.css";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
-import { getBadgeColor, getCoolifyServerState, isCoolifyServerOnline } from "./coolify-utils";
+import { getBadgeColor } from "./coolify-utils";
 
 interface ServersSectionProps {
   servers: CoolifyServer[];
   serverResourceCounts: Map<number, { apps: number; services: number }>;
   baseUrl: string;
   isTiny: boolean;
-  isAdvanced: boolean;
   showIp: boolean;
   onToggleIp: () => void;
 }
@@ -32,13 +24,12 @@ export function ServersSection({
   serverResourceCounts,
   baseUrl,
   isTiny,
-  isAdvanced,
   showIp,
   onToggleIp,
 }: ServersSectionProps) {
   const t = useScopedI18n("widget.coolify");
   const tCommon = useScopedI18n("common");
-  const onlineServers = servers.filter(isCoolifyServerOnline).length;
+  const onlineServers = servers.filter((server) => server.is_reachable !== false).length;
 
   return (
     <Accordion.Item value="servers">
@@ -76,7 +67,6 @@ export function ServersSection({
                 }
                 baseUrl={baseUrl}
                 isTiny={isTiny}
-                isAdvanced={isAdvanced}
                 showIp={showIp}
               />
             ))}
@@ -96,28 +86,23 @@ interface ServerRowProps {
   counts: { apps: number; services: number };
   baseUrl: string;
   isTiny: boolean;
-  isAdvanced: boolean;
   showIp: boolean;
 }
 
-function ServerRow({ server, counts, baseUrl, isTiny, isAdvanced, showIp }: ServerRowProps) {
+function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps) {
   const t = useScopedI18n("widget.coolify");
   const isBuildServer = server.settings?.is_build_server === true;
-  const reachability = getCoolifyServerState(server, "is_reachable");
-  const usability = getCoolifyServerState(server, "is_usable");
+  const isOnline = server.is_reachable !== false;
   const serverUrl = getSafeApplicationUrl(`${baseUrl}/server/${server.uuid}`);
-  const status = reachability === true ? "online" : reachability === false ? "offline" : "unknown";
-  const StatusIcon =
-    reachability === true ? IconCircleCheckFilled : reachability === false ? IconCircleXFilled : IconCircleFilled;
-  const statusColor = reachability === true ? "green" : reachability === false ? "red" : "gray";
+  const StatusIcon = isOnline ? IconCircleCheckFilled : IconCircleXFilled;
 
   return (
     <Stack gap={0}>
       <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
         <StatusIcon
-          aria-label={t(`status.${status}`)}
+          aria-label={t(isOnline ? "status.online" : "status.offline")}
           size={isTiny ? 12 : 16}
-          color={`var(--mantine-color-${statusColor}-6)`}
+          color={`var(--mantine-color-${isOnline ? "green" : "red"}-6)`}
         />
         <Anchor
           className={actionTargetClasses.root}
@@ -144,30 +129,9 @@ function ServerRow({ server, counts, baseUrl, isTiny, isAdvanced, showIp }: Serv
       </Group>
       <Group wrap="nowrap" gap={4} ml={16}>
         <Text fz="10px" c="dimmed">
-          {showIp ? (server.ip ?? "—") : "***.***.***.***"}
+          {showIp ? server.ip : "***.***.***.***"}
         </Text>
       </Group>
-      {isAdvanced && (
-        <Group gap={4} ml={16} wrap="wrap">
-          <ServerStateBadge field="reachability" value={reachability} />
-          <ServerStateBadge field="usability" value={usability} />
-        </Group>
-      )}
     </Stack>
   );
 }
-
-const ServerStateBadge = ({ field, value }: { field: "reachability" | "usability"; value: boolean | undefined }) => {
-  const t = useScopedI18n("widget.coolify");
-  const status =
-    value === undefined
-      ? t("status.unknown")
-      : field === "reachability"
-        ? t(value ? "status.reachable" : "status.unreachable")
-        : t(value ? "status.usable" : "status.unusable");
-  return (
-    <Badge size="xs" variant="light" color={value === true ? "green" : value === false ? "red" : "gray"}>
-      {t(`server.${field}`)}: {status}
-    </Badge>
-  );
-};