WIP

src/components/PageComponents/Connect/BLE.tsx

@@ -7,10 +7,12 @@ import { subscribeAll } from "@core/subscriptions.ts";
 import { randId } from "@core/utils/randId.ts";
 import { BleConnection, ServiceUuid } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";
+import { useMessageStore } from "@core/stores/messageStore.ts";
 
 export const BLE = ({ closeDialog }: TabElementProps) => {
   const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
   const { addDevice } = useDeviceStore();
+  const messageStore = useMessageStore()
   const { setSelectedDevice } = useAppStore();
 
   const updateBleDeviceList = useCallback(async (): Promise<void> => {
@@ -30,7 +32,7 @@ export const BLE = ({ closeDialog }: TabElementProps) => {
       device: bleDevice,
     });
     device.addConnection(connection);
-    subscribeAll(device, connection);
+    subscribeAll(device, connection, messageStore);
 
     closeDialog();
   };

src/components/PageComponents/Connect/HTTP.tsx

@@ -11,6 +11,7 @@ import { MeshDevice } from "@meshtastic/core";
 import { TransportHTTP } from "@meshtastic/transport-http";
 import { useState } from "react";
 import { useForm, useController } from "react-hook-form";
+import { useMessageStore } from "@core/stores/messageStore.ts";
 
 interface FormData {
   ip: string;
@@ -21,6 +22,7 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
   const isURLHTTPS = location.protocol === "https:";
 
   const { addDevice } = useDeviceStore();
+  const messageStore = useMessageStore();
   const { setSelectedDevice } = useAppStore();
 
   const { control, handleSubmit, register } = useForm<FormData>({
@@ -49,7 +51,7 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
     connection.configure();
     setSelectedDevice(id);
     device.addConnection(connection);
-    subscribeAll(device, connection);
+    subscribeAll(device, connection, messageStore);
     closeDialog();
   });
 

src/components/PageComponents/Connect/Serial.tsx

@@ -8,10 +8,12 @@ import { randId } from "@core/utils/randId.ts";
 import { MeshDevice } from "@meshtastic/core";
 import { TransportWebSerial } from "@meshtastic/transport-web-serial";
 import { useCallback, useEffect, useState } from "react";
+import { useMessageStore } from "@core/stores/messageStore.ts";
 
 export const Serial = ({ closeDialog }: TabElementProps) => {
   const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
   const { addDevice } = useDeviceStore();
+  const messageStore = useMessageStore()
   const { setSelectedDevice } = useAppStore();
 
   const updateSerialPortList = useCallback(async () => {
@@ -36,7 +38,7 @@ export const Serial = ({ closeDialog }: TabElementProps) => {
     const connection = new MeshDevice(transport, id);
     connection.configure();
     device.addConnection(connection);
-    subscribeAll(device, connection);
+    subscribeAll(device, connection, messageStore);
 
     closeDialog();
   };

src/components/PageComponents/Messages/Message.tsx

@@ -101,10 +101,10 @@ const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => {
 const TimeDisplay = memo(({ date, className }: { date: Date; className?: string }) => (
   <div className={cn("flex items-center gap-2 shrink-0", className)}>
     <span className="text-xs text-slate-500 dark:text-slate-400 font-mono">
-      {date.toLocaleDateString()}
+      {date?.toLocaleDateString()}
     </span>
     <span className="text-xs text-slate-500 dark:text-slate-400 font-mono">
-      {date.toLocaleTimeString(undefined, {
+      {date?.toLocaleTimeString(undefined, {
         hour: "2-digit",
         minute: "2-digit",
       })}
@@ -112,7 +112,9 @@ const TimeDisplay = memo(({ date, className }: { date: Date; className?: string
   </div>
 ));
 
-export const Message = memo(({ lastMsgSameUser, message, sender }: MessageProps) => {
+export const Message = (({ lastMsgSameUser, message, sender }: MessageProps) => {
+  console.log('Message', message);
+
   const { getDevices } = useDeviceStore();
 
   const isDeviceUser = useMemo(
@@ -162,7 +164,7 @@ export const Message = memo(({ lastMsgSameUser, message, sender }: MessageProps)
             </div>
           )}
         </div>
-        <TimeDisplay date={message.rxTime} />
+        <TimeDisplay date={message?.rxTime} />
         <div className="flex place-items-center gap-2 pb-2">
           <div className={cn(isDeviceUser && "pl-11", messageTextClass)}>
             {message.data}

src/components/PageComponents/Messages/MessageInput.tsx

@@ -5,6 +5,7 @@ import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/core";
 import { SendIcon } from "lucide-react";
 import { startTransition, useCallback, useMemo, useState } from "react";
+import { useMessageStore } from "@core/stores/messageStore.ts";
 
 export interface MessageInputProps {
   to: Types.Destination;
@@ -19,13 +20,11 @@ export const MessageInput = ({
 }: MessageInputProps) => {
   const {
     connection,
-    setMessageState,
     messageDraft,
     setMessageDraft,
-    isQueueingMessages,
-    queueStatus,
     hardware,
   } = useDevice();
+  const { setMessageState } = useMessageStore()
   const myNodeNum = hardware.myNodeNum;
   const [localDraft, setLocalDraft] = useState(messageDraft);
   const [messageBytes, setMessageBytes] = useState(0);
@@ -62,7 +61,7 @@ export const MessageInput = ({
           )
         );
     },
-    [channel, connection, myNodeNum, setMessageState, to, queueStatus],
+    [channel, connection, myNodeNum, setMessageState, to],
   );
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -85,12 +84,10 @@ export const MessageInput = ({
           if (localDraft === "") return;
           const message = formData.get("messageInput") as string;
           startTransition(() => {
-            if (!isQueueingMessages) {
-              sendText(message);
-              setLocalDraft("");
-              setMessageDraft("");
-              setMessageBytes(0);
-            }
+            sendText(message);
+            setLocalDraft("");
+            setMessageDraft("");
+            setMessageBytes(0);
 
           });
         }}