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