use new packages for imports & new webserial transport

src/pages/Channels.tsx

@@ -8,8 +8,8 @@ import { Channel } from "@components/PageComponents/Channel.tsx";
 import { PageLayout } from "@components/PageLayout.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Types } from "@meshtastic/js";
-import type { Protobuf } from "@meshtastic/js";
+import { Types } from "@meshtastic/core";
+import type { Protobuf } from "@meshtastic/core";
 import { ImportIcon, QrCodeIcon } from "lucide-react";
 import { useState } from "react";
 
@@ -17,8 +17,8 @@ export const getChannelName = (channel: Protobuf.Channel.Channel) =>
   channel.settings?.name.length
     ? channel.settings?.name
     : channel.index === 0
-      ? "Primary"
-      : `Ch ${channel.index}`;
+    ? "Primary"
+    : `Ch ${channel.index}`;
 
 const ChannelsPage = () => {
   const { channels, setDialogOpen } = useDevice();

src/pages/Map/index.tsx

@@ -4,7 +4,7 @@ import { useTheme } from "@app/core/hooks/useTheme";
 import { PageLayout } from "@components/PageLayout.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { bbox, lineString } from "@turf/turf";
 import { current } from "immer";
 import { MapPinIcon } from "lucide-react";

src/pages/Messages.tsx

@@ -7,7 +7,7 @@ import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
 import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
 import { useToast } from "@core/hooks/useToast.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf, Types } from "@meshtastic/js";
+import { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { getChannelName } from "@pages/Channels.tsx";
 import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
@@ -39,13 +39,11 @@ export const MessagesPage = () => {
           {filteredChannels.map((channel) => (
             <SidebarButton
               key={channel.index}
-              label={
-                channel.settings?.name.length
-                  ? channel.settings?.name
-                  : channel.index === 0
-                    ? "Primary"
-                    : `Ch ${channel.index}`
-              }
+              label={channel.settings?.name.length
+                ? channel.settings?.name
+                : channel.index === 0
+                ? "Primary"
+                : `Ch ${channel.index}`}
               active={activeChat === channel.index}
               onClick={() => {
                 setChatType("broadcast");
@@ -69,9 +67,8 @@ export const MessagesPage = () => {
             {filteredNodes.map((node) => (
               <SidebarButton
                 key={node.num}
-                label={
-                  node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`
-                }
+                label={node.user?.longName ??
+                  `!${numberToHexUnpadded(node.num)}`}
                 active={activeChat === node.num}
                 onClick={() => {
                   setChatType("direct");
@@ -94,32 +91,30 @@ export const MessagesPage = () => {
             chatType === "broadcast" && currentChannel
               ? getChannelName(currentChannel)
               : chatType === "direct" && nodes.get(activeChat)
-                ? (nodes.get(activeChat)?.user?.longName ?? nodeHex)
-                : "Loading..."
+              ? (nodes.get(activeChat)?.user?.longName ?? nodeHex)
+              : "Loading..."
           }`}
-          actions={
-            chatType === "direct"
-              ? [
-                  {
-                    icon: nodes.get(activeChat)?.user?.publicKey.length
-                      ? LockIcon
-                      : LockOpenIcon,
-                    iconClasses: nodes.get(activeChat)?.user?.publicKey.length
-                      ? "text-green-600"
-                      : "text-yellow-300",
-                    async onClick() {
-                      const targetNode = nodes.get(activeChat)?.num;
-                      if (targetNode === undefined) return;
-                      toast({
-                        title: nodes.get(activeChat)?.user?.publicKey.length
-                          ? "Chat is using PKI encryption."
-                          : "Chat is using PSK encryption.",
-                      });
-                    },
-                  },
-                ]
-              : []
-          }
+          actions={chatType === "direct"
+            ? [
+              {
+                icon: nodes.get(activeChat)?.user?.publicKey.length
+                  ? LockIcon
+                  : LockOpenIcon,
+                iconClasses: nodes.get(activeChat)?.user?.publicKey.length
+                  ? "text-green-600"
+                  : "text-yellow-300",
+                async onClick() {
+                  const targetNode = nodes.get(activeChat)?.num;
+                  if (targetNode === undefined) return;
+                  toast({
+                    title: nodes.get(activeChat)?.user?.publicKey.length
+                      ? "Chat is using PKI encryption."
+                      : "Chat is using PSK encryption.",
+                  });
+                },
+              },
+            ]
+            : []}
         >
           {allChannels.map(
             (channel) =>

src/pages/Nodes.tsx

@@ -8,7 +8,7 @@ import { Mono } from "@components/generic/Mono.tsx";
 import { Table } from "@components/generic/Table/index.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf, type Types } from "@meshtastic/js";
+import { Protobuf, type Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { LockIcon, LockOpenIcon } from "lucide-react";
 import { Fragment, type JSX, useCallback, useEffect, useState } from "react";
@@ -107,9 +107,11 @@ const NodesPage = (): JSX.Element => {
               >
                 {node.user?.shortName ??
                   (node.user?.macaddr
-                    ? `${base16
+                    ? `${
+                      base16
                         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .toLowerCase()}`
+                        .toLowerCase()
+                    }`
                     : `${numberToHexUnpadded(node.num).slice(-4)}`)}
               </h1>,
 
@@ -120,9 +122,11 @@ const NodesPage = (): JSX.Element => {
               >
                 {node.user?.longName ??
                   (node.user?.macaddr
-                    ? `Meshtastic ${base16
+                    ? `Meshtastic ${
+                      base16
                         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .toLowerCase()}`
+                        .toLowerCase()
+                    }`
                     : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
 
@@ -136,11 +140,9 @@ const NodesPage = (): JSX.Element => {
                   ?.join(":") ?? "UNK"}
               </Mono>,
               <Fragment key="lastHeard">
-                {node.lastHeard === 0 ? (
-                  <p>Never</p>
-                ) : (
-                  <TimeAgo timestamp={node.lastHeard * 1000} />
-                )}
+                {node.lastHeard === 0
+                  ? <p>Never</p>
+                  : <TimeAgo timestamp={node.lastHeard * 1000} />}
               </Fragment>,
               <Mono key="snr">
                 {node.snr}db/
@@ -148,19 +150,17 @@ const NodesPage = (): JSX.Element => {
                 {(node.snr + 10) * 5}raw
               </Mono>,
               <Mono key="pki">
-                {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
-                  <LockIcon className="text-green-600" />
-                ) : (
-                  <LockOpenIcon className="text-yellow-300 mx-auto" />
-                )}
+                {node.user?.publicKey && node.user?.publicKey.length > 0
+                  ? <LockIcon className="text-green-600" />
+                  : <LockOpenIcon className="text-yellow-300 mx-auto" />}
               </Mono>,
               <Mono key="hops">
                 {node.lastHeard !== 0
                   ? node.viaMqtt === false && node.hopsAway === 0
                     ? "Direct"
                     : `${node.hopsAway.toString()} ${
-                        node.hopsAway > 1 ? "hops" : "hop"
-                      } away`
+                      node.hopsAway > 1 ? "hops" : "hop"
+                    } away`
                   : "-"}
                 {node.viaMqtt === true ? ", via MQTT" : ""}
               </Mono>,