From 79806cc6a26e387dd7b7ddf8483b4d62521ba448 Mon Sep 17 00:00:00 2001
From: Connor Morgan <connor@danksec.net>
Date: Sun, 24 Nov 2024 22:17:17 -0600
Subject: [PATCH] feat: Add search functionality for nodes in Messages and
 Nodes pages

---
 src/pages/Messages.tsx | 18 +++++++++++++++---
 src/pages/Nodes.tsx    | 19 ++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 28a35d2c..e5d87bc8 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -20,9 +20,12 @@ export const MessagesPage = (): JSX.Element => {
   const [activeChat, setActiveChat] = useState<number>(
     Types.ChannelNumber.Primary,
   );
-  const filteredNodes = Array.from(nodes.values()).filter(
-    (n) => n.num !== hardware.myNodeNum,
-  );
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const filteredNodes = Array.from(nodes.values()).filter((node) => {
+    if (node.num === hardware.myNodeNum) return false;
+    const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
+    return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
+  });
   const allChannels = Array.from(channels.values());
   const filteredChannels = allChannels.filter(
     (ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
@@ -56,6 +59,15 @@ export const MessagesPage = (): JSX.Element => {
           ))}
         </SidebarSection>
         <SidebarSection label="Nodes">
+          <div className="p-4">
+            <input
+              type="text"
+              placeholder="Search nodes..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded bg-white text-black"
+            />
+          </div>
           {filteredNodes.map((node) => (
             <SidebarButton
               key={node.num}
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index f66ad1ff..3dc01a17 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -10,6 +10,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react";
+import { useState } from "react";
 import { Fragment } from "react";
 import { base16 } from "rfc4648";
 
@@ -21,15 +22,27 @@ export interface DeleteNoteDialogProps {
 export const NodesPage = (): JSX.Element => {
   const { nodes, hardware, setDialogOpen } = useDevice();
   const { setNodeNumToBeRemoved } = useAppStore();
+  const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const filteredNodes = Array.from(nodes.values()).filter(
-    (n) => n.num !== hardware.myNodeNum,
-  );
+  const filteredNodes = Array.from(nodes.values()).filter((node) => {
+    if (node.num === hardware.myNodeNum) return false;
+    const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
+    return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
+  });
 
   return (
     <>
       <Sidebar />
       <div className="flex flex-col w-full">
+        <div className="p-4">
+          <input
+            type="text"
+            placeholder="Search nodes..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full p-2 border border-gray-300 rounded bg-white text-black"
+          />
+        </div>
         <div className="overflow-y-auto h-full">
           <Table
             headings={[