minor changes and biome fixes

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -4,8 +4,8 @@ import {
   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 { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
 import type { Protobuf, Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
 
@@ -28,41 +28,45 @@ export const ChannelChat = ({
     <div className="flex flex-grow flex-col">
       <div className="flex flex-grow">
         <div className="flex flex-grow flex-col">
-        {messages ? (
+          {messages ? (
-          messages.map((message, index) => (
+            messages.map((message, index) => (
-            <Message
+              <Message
-              key={message.id}
+                key={message.id}
-              message={message}
+                message={message}
-              lastMsgSameUser={
+                lastMsgSameUser={
-                index === 0 ? false : messages[index - 1].from === message.from
+                  index === 0
-              }
+                    ? false
-              sender={nodes.get(message.from)}
+                    : messages[index - 1].from === message.from
-            />
+                }
-          ))
+                sender={nodes.get(message.from)}
-        ) : (
+              />
-          <div className="m-auto">
+            ))
-            <InboxIcon className="m-auto" />
+          ) : (
-            <Subtle>No Messages</Subtle>
+            <div className="m-auto">
-          </div>
+              <InboxIcon className="m-auto" />
-        )}
+              <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
+                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={"flex flex-grow flex-col border-slate-400 border-l " + (traceroutes == undefined ? "hidden" : "") }>
-        { to === "broadcast" ? null : 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>
       <div className="p-3">
         <MessageInput to={to} channel={channel} />

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -7,7 +7,6 @@ export interface TraceRouteProps {
   route: Array<number>;
 }
 
-
 export const TraceRoute = ({
   from,
   to,
@@ -15,20 +14,18 @@ export const TraceRoute = ({
 }: TraceRouteProps): JSX.Element => {
   const { nodes } = useDevice();
 
-  return route.length == 0 ? (
+  return route.length === 0 ? (
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {to?.user?.longName}↔{from?.user?.longName}
+        {to?.user?.longName}↔{from?.user?.longName}
       </span>
     </div>
-   ) : ( 
+  ) : (
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {to?.user?.longName}↔
+        {to?.user?.longName}↔
-      {route.map((hop) => (
+        {route.map((hop) => `${nodes.get(hop)?.user?.longName ?? "Unknown"}↔`)}
-         (nodes.get(hop)?.user?.longName ?? "Unknown") + "↔"
+        {from?.user?.longName}
-     ))}
-      {from?.user?.longName}
       </span>
     </div>
   );

src/core/stores/deviceStore.ts

@@ -42,7 +42,10 @@ export interface Device {
     direct: Map<number, MessageWithState[]>;
     broadcast: Map<Types.ChannelNumber, MessageWithState[]>;
   };
-  traceroutes: Map<number, Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[]>;
+  traceroutes: Map<
+    number,
+    Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[]
+  >;
   connection?: Types.ConnectionType;
   activePage: Page;
   activeNode: number;
@@ -76,7 +79,9 @@ export interface Device {
   addPosition: (position: Types.PacketMetadata<Protobuf.Mesh.Position>) => void;
   addConnection: (connection: Types.ConnectionType) => void;
   addMessage: (message: MessageWithState) => void;
-  addTraceRoute: (traceroute: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>) => void;
+  addTraceRoute: (
+    traceroute: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>,
+  ) => void;
   addMetadata: (from: number, metadata: Protobuf.Mesh.DeviceMetadata) => void;
   removeNode: (nodeNum: number) => void;
   setMessageState: (
@@ -512,12 +517,12 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                   return;
                 }
 
-                const nodetraceroutes = device.traceroutes.get(traceroute.from)
+                const nodetraceroutes = device.traceroutes.get(traceroute.from);
                 if (nodetraceroutes) {
-                    nodetraceroutes.push(traceroute);
+                  nodetraceroutes.push(traceroute);
-                    device.traceroutes.set(traceroute.from, nodetraceroutes);
+                  device.traceroutes.set(traceroute.from, nodetraceroutes);
                 } else {
-                   device.traceroutes.set(traceroute.from, [traceroute]);
+                  device.traceroutes.set(traceroute.from, [traceroute]);
                 }
               }),
             );
@@ -525,7 +530,10 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           removeNode: (nodeNum) => {
             set(
               produce<DeviceState>((draft) => {
-
+                const device = draft.devices.get(id);
+                if (!device) {
+                  return;
+                }
                 device.nodes.delete(nodeNum);
               }),
             );

src/pages/Messages.tsx

@@ -3,17 +3,17 @@ import { PageLayout } from "@components/PageLayout.js";
 import { Sidebar } from "@components/Sidebar.js";
 import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
 import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
+import { useToast } from "@core/hooks/useToast.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
 import { getChannelName } from "@pages/Channels.js";
 import { HashIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
-import { useToast } from "@core/hooks/useToast.js";
-
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware, messages, traceroutes, connection } = useDevice();
+  const { channels, nodes, hardware, messages, traceroutes, connection } =
+    useDevice();
   const [chatType, setChatType] =
     useState<Types.PacketDestination>("broadcast");
   const [activeChat, setActiveChat] = useState<number>(
@@ -29,7 +29,6 @@ export const MessagesPage = (): JSX.Element => {
   const currentChannel = channels.get(activeChat);
   const { toast } = useToast();
 
-
   return (
     <>
       <Sidebar>
@@ -76,26 +75,27 @@ export const MessagesPage = (): JSX.Element => {
               ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
               : "Loading..."
         }`}
-      actions={
+        actions={
-         chatType === "direct"
+          chatType === "direct"
-          ? [
+            ? [
-          {
+                {
-            icon: WaypointsIcon,
+                  icon: WaypointsIcon,
-            async onClick() {
+                  async onClick() {
-              if (nodes.get(activeChat)?.num === undefined) return;
+                    const targetNode = nodes.get(activeChat)?.num;
-              toast({
+                    if (targetNode === undefined) return;
-                title: "Sending Traceroute, please wait..."
+                    toast({
-              })
+                      title: "Sending Traceroute, please wait...",
-              await connection?.traceRoute(nodes.get(activeChat)?.num!).then(() =>
+                    });
-                toast({
+                    await connection?.traceRoute(targetNode).then(() =>
-                  title: `Traceroute sent.`,
+                      toast({
-                }),
+                        title: "Traceroute sent.",
-              );
+                      }),
-            },
+                    );
-           },
+                  },
-         ]
+                },
-         : []
+              ]
-         }
+            : []
+        }
       >
         {allChannels.map(
           (channel) =>