use new packages for imports & new webserial transport

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -4,7 +4,7 @@ import {
 } from "@app/core/stores/deviceStore.ts";
 import { Message } from "@components/PageComponents/Messages/Message.tsx";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
-import type { Types } from "@meshtastic/js";
+import type { Types } from "@meshtastic/core";
 import { InboxIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import type { JSX } from "react";
@@ -34,8 +34,7 @@ export const ChannelChat = ({
   const scrollToBottom = useCallback(() => {
     const scrollContainer = scrollContainerRef.current;
     if (scrollContainer) {
-      const isNearBottom =
-        scrollContainer.scrollHeight -
+      const isNearBottom = scrollContainer.scrollHeight -
           scrollContainer.scrollTop -
           scrollContainer.clientHeight <
         100;
@@ -72,9 +71,8 @@ export const ChannelChat = ({
                 key={message.id}
                 message={message}
                 sender={nodes.get(message.from)}
-                lastMsgSameUser={
-                  index > 0 && messages[index - 1].from === message.from
-                }
+                lastMsgSameUser={index > 0 &&
+                  messages[index - 1].from === message.from}
               />
             );
           })}

src/components/PageComponents/Messages/Message.tsx

@@ -12,7 +12,7 @@ import {
 } from "@app/core/stores/deviceStore.ts";
 import { cn } from "@app/core/utils/cn";
 import { Avatar } from "@components/UI/Avatar";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { useMemo } from "react";

src/components/PageComponents/Messages/MessageInput.tsx

@@ -2,7 +2,7 @@ import { debounce } from "@app/core/utils/debounce";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import type { Types } from "@meshtastic/js";
+import type { Types } from "@meshtastic/core";
 import { SendIcon } from "lucide-react";
 import {
   type JSX,
@@ -51,7 +51,7 @@ export const MessageInput = ({
             myNodeNum,
             id,
             "ack",
-          ),
+          )
         )
         .catch((e: Types.PacketError) =>
           setMessageState(
@@ -61,7 +61,7 @@ export const MessageInput = ({
             myNodeNum,
             e.id,
             e.error,
-          ),
+          )
         );
     },
     [channel, connection, myNodeNum, setMessageState, to],

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -1,5 +1,5 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import type { JSX } from "react";
 
@@ -38,23 +38,25 @@ export const TraceRoute = ({
         ))}
         {from?.user?.longName}
       </span>
-      {routeBack ? (
-        <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
-          <p className="font-semibold">Route back:</p>
-          <p>{from?.user?.longName}</p>
-          <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>
-          {routeBack.map((hop, i) => (
-            <span key={nodes.get(hop)?.num}>
-              <p>
-                {nodes.get(hop)?.user?.longName ??
-                  `!${numberToHexUnpadded(hop)}`}
-              </p>
-              <p>↓ {snrBack?.[i + 1] ? snrBack[i + 1] : "??"}dB</p>
-            </span>
-          ))}
-          {to?.user?.longName}
-        </span>
-      ) : null}
+      {routeBack
+        ? (
+          <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
+            <p className="font-semibold">Route back:</p>
+            <p>{from?.user?.longName}</p>
+            <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>
+            {routeBack.map((hop, i) => (
+              <span key={nodes.get(hop)?.num}>
+                <p>
+                  {nodes.get(hop)?.user?.longName ??
+                    `!${numberToHexUnpadded(hop)}`}
+                </p>
+                <p>↓ {snrBack?.[i + 1] ? snrBack[i + 1] : "??"}dB</p>
+              </span>
+            ))}
+            {to?.user?.longName}
+          </span>
+        )
+        : null}
     </div>
   );
 };