From b83c37d51fb0915b25939646a758167d76e90e88 Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Tue, 18 Nov 2025 21:29:56 -0300
Subject: [PATCH] fix: polish remote tooltip and device status

---
 .../admin/devices/admin-devices-overview.tsx  | 25 +++++++------------
 .../tickets/ticket-summary-header.tsx         | 16 ++++++++----
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/admin/devices/admin-devices-overview.tsx b/src/components/admin/devices/admin-devices-overview.tsx
index a527d68..4f87279 100644
--- a/src/components/admin/devices/admin-devices-overview.tsx
+++ b/src/components/admin/devices/admin-devices-overview.tsx
@@ -5683,6 +5683,7 @@ function DevicesGrid({ devices, companyNameBySlug }: { devices: DevicesQueryItem
 function DeviceCard({ device, companyName }: { device: DevicesQueryItem; companyName?: string | null }) {
   const router = useRouter()
   const effectiveStatus = resolveDeviceStatus(device)
+  const statusIndicator = getDeviceStatusIndicator(effectiveStatus)
   const isActive = device.isActive
   const lastHeartbeat = device.lastHeartbeatAt ? new Date(device.lastHeartbeatAt) : null
   const deviceType = (device.deviceType ?? "desktop").toLowerCase()
@@ -5730,23 +5731,15 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
         <div className="absolute right-2 top-2">
           <span
             aria-hidden
-            className={cn(
-              "relative block size-2 rounded-full",
-              effectiveStatus === "online"
-                ? "bg-emerald-500"
-                : effectiveStatus === "offline"
-                  ? "bg-rose-500"
-                  : effectiveStatus === "maintenance"
-                    ? "bg-amber-500"
-                    : effectiveStatus === "blocked"
-                      ? "bg-orange-500"
-                      : effectiveStatus === "deactivated"
-                        ? "bg-slate-500"
-                        : "bg-slate-400"
-            )}
+            className={cn("relative block size-2 rounded-full border border-white shadow-sm", statusIndicator.dotClass)}
           />
-          {effectiveStatus === "online" ? (
-            <span className="absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400/30 animate-ping" />
+          {statusIndicator.isPinging ? (
+            <span
+              className={cn(
+                "absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping",
+                statusIndicator.ringClass
+              )}
+            />
           ) : null}
         </div>
         <CardHeader className="pb-2">
diff --git a/src/components/tickets/ticket-summary-header.tsx b/src/components/tickets/ticket-summary-header.tsx
index 8b4552a..16bc7e5 100644
--- a/src/components/tickets/ticket-summary-header.tsx
+++ b/src/components/tickets/ticket-summary-header.tsx
@@ -1338,15 +1338,21 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
                   </span>
                 </Button>
               </TooltipTrigger>
-              <TooltipContent className="max-w-xs space-y-1 text-left">
-                <p className="text-sm font-semibold text-neutral-900">Acesso remoto</p>
+              <TooltipContent className="max-w-xs space-y-1 rounded-xl border border-sidebar-ring/20 bg-sidebar-accent/90 px-3 py-2 text-left text-xs text-white shadow-lg backdrop-blur">
+                <p className="text-sm font-semibold text-white">Acesso remoto</p>
                 {remoteShortcutHostname ? (
-                  <p className="text-xs text-neutral-500">Host: {remoteShortcutHostname}</p>
+                  <p className="text-xs text-white/90">
+                    <span className="font-semibold text-white">Host:</span> {remoteShortcutHostname}
+                  </p>
                 ) : null}
                 {remoteShortcutAccess?.identifier ? (
-                  <p className="text-xs text-neutral-500">ID RustDesk: {remoteShortcutAccess.identifier}</p>
+                  <p className="text-xs text-white/90">
+                    <span className="font-semibold text-white">ID RustDesk:</span> {remoteShortcutAccess.identifier}
+                  </p>
                 ) : null}
-                <p className="text-xs text-neutral-500">Status: {remoteShortcutStatusLabel}</p>
+                <p className="text-xs text-white/90">
+                  <span className="font-semibold text-white">Status:</span> {remoteShortcutStatusLabel}
+                </p>
               </TooltipContent>
             </Tooltip>
           ) : null}