Merge branch 'master' into feature/node-quick-options

src/components/PageComponents/Config/Device.tsx

@@ -46,7 +46,7 @@ export const Device = (): JSX.Element => {
                   "Lost and Found":
                     Protobuf.Config.Config_DeviceConfig_Role.LOST_AND_FOUND,
                   "TAK Tracker":
-                    Protobuf.Config.Config_DeviceConfig_Role.SENSOR,
+                    Protobuf.Config.Config_DeviceConfig_Role.TAK_TRACKER,
                 },
                 formatEnumName: true,
               },

src/components/PageLayout.tsx

@@ -35,7 +35,7 @@ export const PageLayout = ({
               <div className="flex justify-end space-x-4">
                 {actions?.map((action, index) => (
                   <button
-                    key={action.icon.name}
+                    key={action.icon.displayName}
                     type="button"
                     className="transition-all hover:text-accent"
                     onClick={action.onClick}

src/pages/Dashboard/index.tsx

@@ -15,8 +15,9 @@ import {
 import { useMemo } from "react";
 
 export const Dashboard = () => {
-  const { setConnectDialogOpen } = useAppStore();
+  const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
   const { getDevices } = useDeviceStore();
+  const { darkMode } = useAppStore();
 
   const devices = useMemo(() => getDevices(), [getDevices]);
 
@@ -38,7 +39,13 @@ export const Dashboard = () => {
               {devices.map((device) => {
                 return (
                   <li key={device.id}>
-                    <div className="px-4 py-4 sm:px-6">
+                    <button
+                      type="button"
+                      className={`w-full px-4 py-4 sm:px-6 ${darkMode ? "hover:bg-slate-800 focus:bg-slate-400 active:bg-slate-600" : "hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-100"}`}
+                      onClick={() => {
+                        setSelectedDevice(device.id);
+                      }}
+                    >
                       <div className="flex items-center justify-between">
                         <p className="truncate text-sm font-medium text-accent">
                           {device.nodes.get(device.hardware.myNodeNum)?.user
@@ -75,7 +82,7 @@ export const Dashboard = () => {
                           {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
                         </div>
                       </div>
-                    </div>
+                    </button>
                   </li>
                 );
               })}

src/pages/Messages.tsx

@@ -20,9 +20,12 @@ const MessagesPage = () => {
   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 @@ const MessagesPage = () => {
           ))}
         </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>
           <div className="flex flex-col gap-4">
             {filteredNodes.map((node) => (
               <SidebarButton

src/pages/Nodes.tsx

@@ -8,7 +8,7 @@ import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf, type Types } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import { LockIcon, LockOpenIcon } from "lucide-react";
+import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react";
 import { Fragment, type JSX, useCallback, useEffect, useState } from "react";
 import { base16 } from "rfc4648";
 
@@ -18,17 +18,21 @@ export interface DeleteNoteDialogProps {
 }
 
 const NodesPage = (): JSX.Element => {
-  const { nodes, hardware, connection } = useDevice();
+  const { nodes, hardware, setDialogOpen } = useDevice();
   const [selectedNode, setSelectedNode] = useState<
     Protobuf.Mesh.NodeInfo | undefined
   >(undefined);
   const [selectedTraceroute, setSelectedTraceroute] = useState<
     Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery> | undefined
   >();
+  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());
+  });
 
   useEffect(() => {
     connection?.events.onTraceRoutePacket.subscribe(handleTraceroute);
@@ -48,6 +52,15 @@ const NodesPage = (): JSX.Element => {
     <>
       <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={[