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>
+
+  );
+};