Add tr column and Toast when starting tr

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -23,7 +23,8 @@ export const ChannelChat = ({
 
   return (
     <div className="flex flex-grow flex-col">
-      <div className="flex flex-grow flex-col">
+      <div className="flex flex-grow">
+        <div className="flex flex-grow flex-col">
         {messages ? (
           messages.map((message, index) => (
             <Message
@@ -41,6 +42,8 @@ export const ChannelChat = ({
             <Subtle>No Messages</Subtle>
           </div>
         )}
+        </div>
+        <div className={"flex flex-grow flex-col border-slate-400 border-l " + (traceroutes == undefined ? "hidden" : "") }>
         { to === "broadcast" ? null : traceroutes ? (
           traceroutes.map((traceroute, index) => (
             <TraceRoute
@@ -57,6 +60,7 @@ export const ChannelChat = ({
           </div>
         )}
       </div>
+      </div>
       <div className="p-3">
         <MessageInput to={to} channel={channel} />
       </div>

src/pages/Messages.tsx

@@ -83,6 +83,9 @@ export const MessagesPage = (): JSX.Element => {
             icon: WaypointsIcon,
             async onClick() {
               if (nodes.get(activeChat)?.num === undefined) return;
+              toast({
+                title: "Sending Traceroute, please wait..."
+              })
               await connection?.traceRoute(nodes.get(activeChat)?.num!).then(() =>
                 toast({
                   title: `Traceroute sent.`,