From a4e21ed3433f805c31174d58c01f3d515749d23b Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 3 Feb 2025 13:17:57 -0500
Subject: [PATCH] feat: added hover tooltip on message status

---
 .../PageComponents/Messages/ChannelChat.tsx   |  1 -
 .../PageComponents/Messages/Message.tsx       | 55 +++++++++++++++++--
 src/pages/Messages.tsx                        |  1 -
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 4c155bfb..fc7a60a1 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -1,4 +1,3 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
 import {
   type MessageWithState,
   useDevice,
diff --git a/src/components/PageComponents/Messages/Message.tsx b/src/components/PageComponents/Messages/Message.tsx
index 82312079..53244080 100644
--- a/src/components/PageComponents/Messages/Message.tsx
+++ b/src/components/PageComponents/Messages/Message.tsx
@@ -1,6 +1,7 @@
 import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
 import { Avatar } from "@components/UI/Avatar";
 import type { Protobuf } from "@meshtastic/js";
+import * as Tooltip from "@radix-ui/react-tooltip";
 import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
 
 export interface MessageProps {
@@ -9,23 +10,67 @@ export interface MessageProps {
   sender?: Protobuf.Mesh.NodeInfo;
 }
 
-const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
-  const iconClass = "text-gray-500 dark:text-gray-400 w-4 h-4";
+interface StatusTooltipProps {
+  state: MessageWithState["state"];
+  children: React.ReactNode;
+}
+
+const getStatusText = (state: MessageWithState["state"]): string => {
   switch (state) {
     case "ack":
-      return <CheckCircle2 className={iconClass} />;
+      return "Message delivered";
     case "waiting":
-      return <CircleEllipsis className={iconClass} />;
+      return "Waiting for delivery";
     default:
-      return <AlertCircle className={iconClass} />;
+      return "Delivery failed";
   }
 };
 
+const StatusTooltip = ({ state, children }: StatusTooltipProps) => (
+  <Tooltip.Provider>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95"
+          side="top"
+          align="center"
+          sideOffset={5}
+        >
+          {getStatusText(state)}
+          <Tooltip.Arrow className="fill-slate-800" />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+);
+
+const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
+  const iconClass = "text-gray-500 dark:text-gray-400 w-4 h-4";
+  const Icon = (() => {
+    switch (state) {
+      case "ack":
+        return CheckCircle2;
+      case "waiting":
+        return CircleEllipsis;
+      default:
+        return AlertCircle;
+    }
+  })();
+
+  return (
+    <StatusTooltip state={state}>
+      <Icon className={iconClass} />
+    </StatusTooltip>
+  );
+};
+
 export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
   const messageTextClass =
     message.state === "ack"
       ? "text-gray-900 dark:text-white"
       : "text-gray-500 dark:text-gray-400";
+
   if (lastMsgSameUser) {
     return (
       <div className="mx-4 mt-2">
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index a7e70f18..533c7c48 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -131,7 +131,6 @@ const MessagesPage = () => {
                   to={activeChat}
                   messages={messages.direct.get(node.num)}
                   channel={Types.ChannelNumber.Primary}
-                  traceroutes={traceroutes.get(node.num)}
                 />
               ),
           )}