Add basic traceroute display

This patch adds basic traceroute display functionality on the
Messages page for an individual node.

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,6 +1,7 @@
 import { Subtle } from "@app/components/UI/Typography/Subtle.js";
 import { MessageWithState, useDevice } from "@app/core/stores/deviceStore.js";
 import { Message } from "@components/PageComponents/Messages/Message.js";
+import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
 import type { Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
@@ -9,12 +10,14 @@ export interface ChannelChatProps {
   messages?: MessageWithState[];
   channel: Types.ChannelNumber;
   to: Types.Destination;
+  traceroutes?: Types.PacketMetadata[];
 }
 
 export const ChannelChat = ({
   messages,
   channel,
   to,
+  traceroutes,
 }: ChannelChatProps): JSX.Element => {
   const { nodes } = useDevice();
 
@@ -38,6 +41,21 @@ export const ChannelChat = ({
             <Subtle>No Messages</Subtle>
           </div>
         )}
+        {traceroutes ? (
+          traceroutes.map((traceroute, index) => (
+            <TraceRoute
+              key={traceroute.id}
+              from={nodes.get(traceroute.from)}
+              to={nodes.get(traceroute.to)}
+              route={traceroute.data.route}
+            />
+          ))
+        ) : (
+          <div className="m-auto">
+            <InboxIcon className="m-auto" />
+            <Subtle>No Traceroutes</Subtle>
+          </div>
+        )}
       </div>
       <div className="p-3">
         <MessageInput to={to} channel={channel} />

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -0,0 +1,33 @@
+import type { MessageWithState } from "@app/core/stores/deviceStore.js";
+import type { Protobuf } from "@meshtastic/js";
+import {
+  WaypointsIcon,
+  ArrowRightLeft,
+} from "lucide-react";
+
+export interface TraceRouteProps {
+  from?: Protobuf.Mesh.NodeInfo;
+  to?: Protobuf.Mesh.NodeInfo;
+  route?: Protobuf.Mesh.RouteDiscovery;
+}
+
+export const TraceRoute = ({
+  from,
+  to,
+  route,
+}: TraceRouteProps): JSX.Element => {
+  return route.length == 0 ? (
+    <div className="ml-5 flex">
+      <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+      {from?.user?.longName}↔{to?.user?.longName}
+      </span>
+    </div>
+   ) : ( 
+    <div className="ml-5 flex">
+      <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+      {route}
+      </span>
+    </div>
+
+  );
+};

src/core/stores/deviceStore.ts

@@ -512,7 +512,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                     nodetraceroutes.push(traceroute);
                     device.traceroutes.set(traceroute.from, nodetraceroutes);
                 } else {
-                    device.traceroutes.set(traceroute.from, [traceroute]);
+                   device.traceroutes.set(traceroute.from, [traceroute]);
                 }
                 console.log(device.traceroutes);
               }),

src/pages/Messages.tsx

@@ -13,7 +13,7 @@ import { useToast } from "@core/hooks/useToast.js";
 
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware, messages, connection } = useDevice();
+  const { channels, nodes, hardware, messages, traceroutes, connection } = useDevice();
   const [chatType, setChatType] =
     useState<Types.PacketDestination>("broadcast");
   const [activeChat, setActiveChat] = useState<number>(
@@ -108,6 +108,7 @@ export const MessagesPage = (): JSX.Element => {
                 to={activeChat}
                 messages={messages.direct.get(node.num)}
                 channel={Types.ChannelNumber.Primary}
+                traceroutes={traceroutes.get(node.num)}
               />
             ),
         )}