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

src/components/PageComponents/Map/NodeDetail.tsx

@@ -1,9 +1,9 @@
 import { Separator } from "@app/components/UI/Seperator";
 import { H5 } from "@app/components/UI/Typography/H5.tsx";
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import { Avatar } from "@components/UI/Avatar";
 import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
-import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
 import type { Protobuf as ProtobufType } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
@@ -23,7 +23,7 @@ export interface NodeDetailProps {
   node: ProtobufType.Mesh.NodeInfo;
 }
 
-export const NodeDetail = ({ node }: NodeDetailProps): JSX.Element => {
+export const NodeDetail = ({ node }: NodeDetailProps) => {
   const name = node.user?.longName || `!${numberToHexUnpadded(node.num)}`;
   const hardwareType = Protobuf.Mesh.HardwareModel[
     node.user?.hwModel ?? 0
@@ -33,7 +33,7 @@ export const NodeDetail = ({ node }: NodeDetailProps): JSX.Element => {
     <div className="dark:text-black">
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
-          <Hashicon value={node.num.toString()} size={22} />
+          <Avatar text={node.user?.shortName} />
 
           <div>
             {node.user?.publicKey && node.user?.publicKey.length > 0 ? (

src/components/PageComponents/Messages/Message.tsx

@@ -1,5 +1,5 @@
 import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
-import { Hashicon } from "@emeraldpay/hashicon-react";
+import { Avatar } from "@components/UI/Avatar";
 import type { Protobuf } from "@meshtastic/js";
 import {
   AlertCircleIcon,
@@ -13,11 +13,7 @@ export interface MessageProps {
   sender?: Protobuf.Mesh.NodeInfo;
 }
 
-export const Message = ({
-  lastMsgSameUser,
-  message,
-  sender,
-}: MessageProps): JSX.Element => {
+export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
   return lastMsgSameUser ? (
     <div className="ml-5 flex">
       {message.state === "ack" ? (
@@ -39,7 +35,7 @@ export const Message = ({
     <div className="mx-4 mt-2 gap-2">
       <div className="flex gap-2">
         <div className="w-6 cursor-pointer">
-          <Hashicon value={(sender?.num ?? 0).toString()} size={32} />
+          <Avatar text={sender?.user?.shortName ?? "UNK"} />
         </div>
         <span className="cursor-pointer font-medium text-textPrimary">
           {sender?.user?.longName ?? "UNK"}

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,8 +1,10 @@
+import { debounce } from "@app/core/utils/debounce";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/js";
 import { SendIcon } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
 export interface MessageInputProps {
   to: Types.Destination;
@@ -20,32 +22,46 @@ export const MessageInput = ({
     setMessageDraft,
     hardware,
   } = useDevice();
-
   const myNodeNum = hardware.myNodeNum;
+  const [localDraft, setLocalDraft] = useState(messageDraft);
 
-  const sendText = async (message: string) => {
-    await connection
-      ?.sendText(message, to, true, channel)
-      .then((id) =>
-        setMessageState(
-          to === "broadcast" ? "broadcast" : "direct",
-          channel,
-          to as number,
-          myNodeNum,
-          id,
-          "ack",
-        ),
-      )
-      .catch((e: Types.PacketError) =>
-        setMessageState(
-          to === "broadcast" ? "broadcast" : "direct",
-          channel,
-          to as number,
-          myNodeNum,
-          e.id,
-          e.error,
-        ),
-      );
+  const debouncedSetMessageDraft = useMemo(
+    () => debounce(setMessageDraft, 300),
+    [setMessageDraft],
+  );
+
+  const sendText = useCallback(
+    async (message: string) => {
+      await connection
+        ?.sendText(message, to, true, channel)
+        .then((id) =>
+          setMessageState(
+            to === "broadcast" ? "broadcast" : "direct",
+            channel,
+            to as number,
+            myNodeNum,
+            id,
+            "ack",
+          ),
+        )
+        .catch((e: Types.PacketError) =>
+          setMessageState(
+            to === "broadcast" ? "broadcast" : "direct",
+            channel,
+            to as number,
+            myNodeNum,
+            e.id,
+            e.error,
+          ),
+        );
+    },
+    [channel, connection, myNodeNum, setMessageState, to],
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setLocalDraft(newValue);
+    debouncedSetMessageDraft(newValue);
   };
 
   return (
@@ -54,7 +70,8 @@ export const MessageInput = ({
         className="w-full"
         onSubmit={(e) => {
           e.preventDefault();
-          sendText(messageDraft);
+          sendText(localDraft);
+          setLocalDraft("");
           setMessageDraft("");
         }}
       >
@@ -64,8 +81,8 @@ export const MessageInput = ({
               autoFocus={true}
               minLength={1}
               placeholder="Enter Message"
-              value={messageDraft}
-              onChange={(e) => setMessageDraft(e.target.value)}
+              value={localDraft}
+              onChange={handleInputChange}
             />
           </span>
           <Button type="submit">