Align terminology with iOS and Android Apps (#168)

* Align web client to use the same terminology for nodes. Changing peers to nodes. This is inline with both the Android and iOS Apps.

* Revert style changes

src/PageRouter.tsx

@@ -3,7 +3,7 @@ import { ChannelsPage } from "@pages/Channels.js";
 import { ConfigPage } from "@pages/Config/index.js";
 import { MapPage } from "@pages/Map.js";
 import { MessagesPage } from "@pages/Messages.js";
-import { PeersPage } from "@pages/Peers.js";
+import { NodesPage } from "@pages/Nodes.js";
 
 export const PageRouter = (): JSX.Element => {
   const { activePage } = useDevice();
@@ -13,7 +13,7 @@ export const PageRouter = (): JSX.Element => {
       {activePage === "map" && <MapPage />}
       {activePage === "config" && <ConfigPage />}
       {activePage === "channels" && <ChannelsPage />}
-      {activePage === "peers" && <PeersPage />}
+      {activePage === "nodes" && <NodesPage />}
     </>
   );
 };

src/components/CommandPalette.tsx

@@ -104,10 +104,10 @@ export const CommandPalette = (): JSX.Element => {
           },
         },
         {
-          label: "Peers",
+          label: "Nodes",
           icon: UsersIcon,
           action() {
-            setActivePage("peers");
+            setActivePage("nodes");
           },
         },
       ],
@@ -193,10 +193,10 @@ export const CommandPalette = (): JSX.Element => {
           },
         },
         {
-          label: "Reset Peers",
+          label: "Reset Nodes",
           icon: TrashIcon,
           action() {
-            connection?.resetPeers();
+            connection?.resetNodes();
           },
         },
         {

src/components/Sidebar.tsx

@@ -50,9 +50,9 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
       page: "channels",
     },
     {
-      name: "Peers",
+      name: "Nodes",
       icon: UsersIcon,
-      page: "peers",
+      page: "nodes",
     },
   ];
 

src/core/stores/deviceStore.ts

@@ -5,7 +5,7 @@ import { create } from "zustand";
 
 import { Protobuf, Types } from "@meshtastic/js";
 
-export type Page = "messages" | "map" | "config" | "channels" | "peers";
+export type Page = "messages" | "map" | "config" | "channels" | "nodes";
 
 export interface MessageWithState extends Types.PacketMetadata<string> {
   state: MessageState;
@@ -43,7 +43,7 @@ export interface Device {
   };
   connection?: Types.ConnectionType;
   activePage: Page;
-  activePeer: number;
+  activeNode: number;
   waypoints: Protobuf.Mesh.Waypoint[];
   // currentMetrics: Protobuf.DeviceMetrics;
   pendingSettingsChanges: boolean;
@@ -64,7 +64,7 @@ export interface Device {
   setHardware: (hardware: Protobuf.Mesh.MyNodeInfo) => void;
   // setMetrics: (metrics: Types.PacketMetadata<Protobuf.Telemetry>) => void;
   setActivePage: (page: Page) => void;
-  setActivePeer: (peer: number) => void;
+  setActiveNode: (node: number) => void;
   setPendingSettingsChanges: (state: boolean) => void;
   addChannel: (channel: Protobuf.Channel.Channel) => void;
   addWaypoint: (waypoint: Protobuf.Mesh.Waypoint) => void;
@@ -121,7 +121,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           },
           connection: undefined,
           activePage: "messages",
-          activePeer: 0,
+          activeNode: 0,
           waypoints: [],
           // currentMetrics: new Protobuf.DeviceMetrics(),
           dialog: {
@@ -409,12 +409,12 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               }),
             );
           },
-          setActivePeer: (peer) => {
+          setActiveNode: (node) => {
             set(
               produce<DeviceState>((draft) => {
                 const device = draft.devices.get(id);
                 if (device) {
-                  device.activePeer = peer;
+                  device.activeNode = node;
                 }
               }),
             );

src/pages/Messages.tsx

@@ -49,7 +49,7 @@ export const MessagesPage = (): JSX.Element => {
             />
           ))}
         </SidebarSection>
-        <SidebarSection label="Peers">
+        <SidebarSection label="Nodes">
           {filteredNodes.map((node) => (
             <SidebarButton
               key={node.num}

src/pages/Peers.tsx → src/pages/Nodes.tsx

@@ -7,7 +7,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
 import { base16 } from "rfc4648";
 
-export const PeersPage = (): JSX.Element => {
+export const NodesPage = (): JSX.Element => {
   const { nodes, hardware } = useDevice();
 
   const filteredNodes = Array.from(nodes.values()).filter(