Add ability to remove nodes from device

src/components/Dialog/DialogManager.tsx

@@ -3,6 +3,7 @@ import { ImportDialog } from "@components/Dialog/ImportDialog.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { RebootDialog } from "@components/Dialog/RebootDialog.js";
 import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
+import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.js"
 import { useDevice } from "@core/stores/deviceStore.js";
 
 export const DialogManager = (): JSX.Element => {
@@ -42,6 +43,12 @@ export const DialogManager = (): JSX.Element => {
           setDialogOpen("deviceName", open);
         }}
       />
+      <RemoveNodeDialog
+        open={dialog.nodeRemoval}
+        onOpenChange={(open) => {
+          setDialogOpen("nodeRemoval", open);
+        }}
+      />
     </>
   );
 };

src/components/Dialog/RemoveNodeDialog.tsx

@@ -0,0 +1,52 @@
+import { useAppStore } from "@app/core/stores/appStore";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { Button } from "@components/UI/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.js";
+import { Label } from "@components/UI/Label.js";
+
+export interface RemoveNodeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const RemoveNodeDialog = ({
+  open,
+  onOpenChange,
+}: RemoveNodeDialogProps): JSX.Element => {
+  const { connection, nodes, removeNode } = useDevice();
+  const { nodeNumToBeRemoved } = useAppStore();
+
+  const onSubmit = () => {
+    connection?.removeNodeByNum(nodeNumToBeRemoved);
+    removeNode(nodeNumToBeRemoved);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Remove Node?</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to remove this Node?
+          </DialogDescription>
+        </DialogHeader>
+        <div className="gap-4">
+          <form onSubmit={onSubmit}>
+            <Label>{nodes.get(nodeNumToBeRemoved)?.user?.longName}</Label>
+          </form>
+        </div>
+        <DialogFooter>
+          <Button variant="destructive" onClick={() => onSubmit()}>Remove</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/core/stores/appStore.ts

@@ -26,6 +26,7 @@ interface AppState {
   rasterSources: RasterSource[];
   commandPaletteOpen: boolean;
   darkMode: boolean;
+  nodeNumToBeRemoved: number;
   accent: AccentColor;
   connectDialogOpen: boolean;
 
@@ -38,6 +39,7 @@ interface AppState {
   removeDevice: (deviceId: number) => void;
   setCommandPaletteOpen: (open: boolean) => void;
   setDarkMode: (enabled: boolean) => void;
+  setNodeNumToBeRemoved: (nodeNum: number) => void;
   setAccent: (color: AccentColor) => void;
   setConnectDialogOpen: (open: boolean) => void;
 }
@@ -51,6 +53,7 @@ export const useAppStore = create<AppState>()((set) => ({
   darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
   accent: "orange",
   connectDialogOpen: false,
+  nodeNumToBeRemoved: 0,
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -99,6 +102,10 @@ export const useAppStore = create<AppState>()((set) => ({
       }),
     );
   },
+  setNodeNumToBeRemoved: (nodeNum) =>
+    set((state) => ({
+      nodeNumToBeRemoved: nodeNum
+    })),
   setAccent(color) {
     set(
       produce<AppState>((draft) => {

src/core/stores/deviceStore.ts

@@ -24,7 +24,8 @@ export type DialogVariant =
   | "QR"
   | "shutdown"
   | "reboot"
-  | "deviceName";
+  | "deviceName"
+  | "nodeRemoval";
 
 export interface Device {
   id: number;
@@ -54,6 +55,7 @@ export interface Device {
     shutdown: boolean;
     reboot: boolean;
     deviceName: boolean;
+    nodeRemoval: boolean;
   };
 
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -74,6 +76,7 @@ export interface Device {
   addConnection: (connection: Types.ConnectionType) => void;
   addMessage: (message: MessageWithState) => void;
   addMetadata: (from: number, metadata: Protobuf.Mesh.DeviceMetadata) => void;
+  removeNode: (nodeNum: number) => void;
   setMessageState: (
     type: "direct" | "broadcast",
     channelIndex: Types.ChannelNumber,
@@ -130,6 +133,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
             shutdown: false,
             reboot: false,
             deviceName: false,
+            nodeRemoval: false,
           },
           pendingSettingsChanges: false,
           messageDraft: "",
@@ -494,6 +498,17 @@ 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);
+              })
+            )
+          },
           setMessageState: (
             type: "direct" | "broadcast",
             channelIndex: Types.ChannelNumber,

src/pages/Nodes.tsx

@@ -6,9 +6,18 @@ import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
 import { base16 } from "rfc4648";
+import { Button } from "@components/UI/Button.js";
+import { TrashIcon } from "lucide-react";
+import { useAppStore } from "@app/core/stores/appStore";
+
+export interface DeleteNoteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
 
 export const NodesPage = (): JSX.Element => {
-  const { nodes, hardware } = useDevice();
+  const { nodes, hardware, setDialogOpen } = useDevice();
+  const { setNodeNumToBeRemoved } = useAppStore();
 
   const filteredNodes = Array.from(nodes.values()).filter(
     (n) => n.num !== hardware.myNodeNum,
@@ -26,6 +35,7 @@ export const NodesPage = (): JSX.Element => {
             { title: "MAC Address", type: "normal", sortable: true },
             { title: "Last Heard", type: "normal", sortable: true },
             { title: "SNR", type: "normal", sortable: true },
+            { title: "Remove", type: "normal", sortable: false },
           ]}
           rows={filteredNodes.map((node) => [
             <Hashicon size={24} value={node.num.toString()} />,
@@ -55,6 +65,10 @@ export const NodesPage = (): JSX.Element => {
               {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
               {(node.snr + 10) * 5}raw
             </Mono>,
+            <Button variant="destructive" onClick={() => {
+              setNodeNumToBeRemoved(node.num);
+              setDialogOpen("nodeRemoval", true)
+            }}><TrashIcon />Remove</Button>
           ])}
         />
       </div>