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} />