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 1/8] 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={[

From 790f93322e70550824aad8cf43e56c7fcad4e66c Mon Sep 17 00:00:00 2001
From: Kyle Wistrand <kyle.wistrand@gmail.com>
Date: Sat, 11 Jan 2025 20:56:03 -0800
Subject: [PATCH 2/8] feat: Make nodes on dashboard clickable

---
 src/pages/Dashboard/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index ee2c4693..bdfc660b 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -15,7 +15,7 @@ import {
 import { useMemo } from "react";
 
 export const Dashboard = () => {
-  const { setConnectDialogOpen } = useAppStore();
+  const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
   const { getDevices } = useDeviceStore();
 
   const devices = useMemo(() => getDevices(), [getDevices]);
@@ -38,7 +38,12 @@ export const Dashboard = () => {
               {devices.map((device) => {
                 return (
                   <li key={device.id}>
-                    <div className="px-4 py-4 sm:px-6">
+                    <button
+                      className="w-full px-4 py-4 sm:px-6 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 +80,7 @@ export const Dashboard = () => {
                           {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
                         </div>
                       </div>
-                    </div>
+                    </button>
                   </li>
                 );
               })}

From 5b7b770aee8bfd21edb9bd6804c31c0c3b841540 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 29 Jan 2025 09:07:57 -0500
Subject: [PATCH 3/8] feat: add bundle analyzer script

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 1c055073..2b685ffe 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "license": "GPL-3.0-only",
   "scripts": {
     "build": "pnpm check && rsbuild build",
+    "build:analyze": "BUNDLE_ANALYZE=true rsbuild build",
     "check": "biome check src/",
     "check:fix": "pnpm check --write src/",
     "format": "biome format --write src/",

From 2bdfbedeeaa527bd51543037c009c7dd1f9ada25 Mon Sep 17 00:00:00 2001
From: Hunter275 <hunter@hunterthornsberry.com>
Date: Wed, 29 Jan 2025 23:50:38 -0500
Subject: [PATCH 4/8] add dark mode classes and biome fixes

---
 src/pages/Dashboard/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index bdfc660b..34dc7aad 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -17,6 +17,7 @@ import { useMemo } from "react";
 export const Dashboard = () => {
   const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
   const { getDevices } = useDeviceStore();
+  const { darkMode } = useAppStore();
 
   const devices = useMemo(() => getDevices(), [getDevices]);
 
@@ -39,7 +40,8 @@ export const Dashboard = () => {
                 return (
                   <li key={device.id}>
                     <button
-                      className="w-full px-4 py-4 sm:px-6 hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-100"
+                      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);
                       }}

From ce66e55196b271472c9b272386b3517d5ca8d515 Mon Sep 17 00:00:00 2001
From: Kamil Dzieniszewski <kamil.dzieniszewski@gmail.com>
Date: Thu, 30 Jan 2025 19:53:04 +0100
Subject: [PATCH 5/8] fix: Map Action Buttons key

---
 src/components/PageLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 79495bdc..1009ab54 100644
--- a/src/components/PageLayout.tsx
+++ b/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}

From 991405c7aa7fd041798bea43bcb33771b69a6dd9 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Thu, 30 Jan 2025 14:21:24 -0500
Subject: [PATCH 6/8] fix: update value for tak tracker device role

---
 src/components/PageComponents/Config/Device.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Config/Device.tsx b/src/components/PageComponents/Config/Device.tsx
index 9ef11904..17ee8cb2 100644
--- a/src/components/PageComponents/Config/Device.tsx
+++ b/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,
               },

From e8965556941ecbca5974b13337298cbfc86451ab Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 3 Feb 2025 20:35:31 -0500
Subject: [PATCH 7/8] added: added lint-staged so linting runs when a file is
 staged.

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 2b685ffe..26e9d0a8 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,9 @@
   "simple-git-hooks": {
     "pre-commit": "npm run check:fix && npm run format"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": ["npm run check:fix", "npm run format"]
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/meshtastic/web.git"

From 430e0cbd469f8f44ece2c4a0404134740bee8397 Mon Sep 17 00:00:00 2001
From: Hunter275 <hunter@hunterthornsberry.com>
Date: Tue, 4 Feb 2025 23:30:39 -0500
Subject: [PATCH 8/8] Limit the length of messages to 200 bytes

---
 .../PageComponents/Messages/ChannelChat.tsx        |  2 +-
 .../PageComponents/Messages/MessageInput.tsx       | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 79950bf8..b636fbc6 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -69,7 +69,7 @@ export const ChannelChat = ({
         </div>
       </div>
       <div className="pl-3 pr-3 pt-3 pb-1">
-        <MessageInput to={to} channel={channel} />
+        <MessageInput to={to} channel={channel} maxBytes={200} />
       </div>
     </div>
   );
diff --git a/src/components/PageComponents/Messages/MessageInput.tsx b/src/components/PageComponents/Messages/MessageInput.tsx
index ae88f9ac..b9080bb2 100644
--- a/src/components/PageComponents/Messages/MessageInput.tsx
+++ b/src/components/PageComponents/Messages/MessageInput.tsx
@@ -9,11 +9,13 @@ import { useCallback, useMemo, useState } from "react";
 export interface MessageInputProps {
   to: Types.Destination;
   channel: Types.ChannelNumber;
+  maxBytes: number;
 }
 
 export const MessageInput = ({
   to,
   channel,
+  maxBytes,
 }: MessageInputProps): JSX.Element => {
   const {
     connection,
@@ -24,6 +26,7 @@ export const MessageInput = ({
   } = useDevice();
   const myNodeNum = hardware.myNodeNum;
   const [localDraft, setLocalDraft] = useState(messageDraft);
+  const [messageBytes, setMessageBytes] = useState(maxBytes);
 
   const debouncedSetMessageDraft = useMemo(
     () => debounce(setMessageDraft, 300),
@@ -60,8 +63,12 @@ export const MessageInput = ({
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    setLocalDraft(newValue);
-    debouncedSetMessageDraft(newValue);
+    const byteLength = new Blob([newValue]).size;
+    if (byteLength <= maxBytes) {
+      setLocalDraft(newValue);
+      debouncedSetMessageDraft(newValue);
+      setMessageBytes(maxBytes - byteLength);
+    }
   };
 
   return (
@@ -85,6 +92,9 @@ export const MessageInput = ({
               onChange={handleInputChange}
             />
           </span>
+          <div className="flex items-center">
+            {messageBytes}/{maxBytes}
+          </div>
           <Button type="submit">
             <SendIcon size={16} />
           </Button>