WIP

src/components/chat/MessageBar.tsx

@@ -3,17 +3,23 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FiPaperclip, FiSend, FiSmile } from 'react-icons/fi';
 
-import { useAppSelector } from '@app/hooks/redux';
+import { ackMessage } from '@app/core/slices/meshtasticSlice.js';
+import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { connection } from '@core/connection';
 
 export const MessageBar = (): JSX.Element => {
+  const dispatch = useAppDispatch();
   const ready = useAppSelector((state) => state.meshtastic.ready);
   const [currentMessage, setCurrentMessage] = React.useState('');
   const sendMessage = (): void => {
     if (ready) {
-      void connection.sendText(currentMessage, undefined, true);
+      void connection.sendText(currentMessage, undefined, true, (id) => {
+        dispatch(ackMessage(id));
+
+        return Promise.resolve();
+      });
       setCurrentMessage('');
     }
   };

src/components/generic/Button.tsx

@@ -40,7 +40,7 @@ export const Button = ({
   return (
     <button
       onClick={handleConfirm}
-      className={`items-center  select-none flex dark:text-white active:scale-95 ${
+      className={`items-center select-none flex dark:text-white active:scale-95 ${
         active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
       } ${
         circle ? 'rounded-full h-10 w-10' : 'rounded-md p-3 space-x-3 text-sm'

src/components/menu/buttons/DeviceStatusDropdown.tsx

@@ -4,19 +4,44 @@ import { FiWifi, FiWifiOff } from 'react-icons/fi';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
+import { Types } from '@meshtastic/meshtasticjs';
 
 export const DeviceStatusDropdown = (): JSX.Element => {
+  const deviceStatus = useAppSelector((state) => state.meshtastic.deviceStatus);
   const ready = useAppSelector((state) => state.meshtastic.ready);
 
-  return !ready ? (
-    <Button icon={<FiWifi className="w-6 h-6" />} circle />
-  ) : (
-    <div className="flex bg-black rounded-full bg-opacity-20">
-      <div className="flex px-2 my-auto text-white">
-        <div className="my-auto mx-2 w-2 h-2 rounded-full bg-yellow-400 min-w-[2]"></div>
-        Loading
+  return (
+    <div className="flex bg-gray-100 rounded-full dark:bg-gray-700">
+      <div className="flex pl-2 my-auto dark:text-white">
+        <div
+          className={`
+        my-auto mx-2 w-2 h-2 rounded-full min-w-[2] ${
+          [
+            Types.DeviceStatusEnum.DEVICE_CONNECTED,
+            Types.DeviceStatusEnum.DEVICE_CONFIGURED,
+          ].includes(deviceStatus)
+            ? 'bg-green-400'
+            : [
+                Types.DeviceStatusEnum.DEVICE_CONNECTING,
+                Types.DeviceStatusEnum.DEVICE_RECONNECTING,
+                Types.DeviceStatusEnum.DEVICE_CONFIGURING,
+              ].includes(deviceStatus)
+            ? 'bg-yellow-400'
+            : 'bg-gray-400'
+        }`}
+        ></div>
+        <div className="my-auto">{Types.DeviceStatusEnum[deviceStatus]}</div>
+        <Button
+          icon={
+            ready ? (
+              <FiWifi className="w-6 h-6" />
+            ) : (
+              <FiWifiOff className="w-6 h-6 animate-pulse" />
+            )
+          }
+          circle
+        />
       </div>
-      <Button icon={<FiWifiOff className="w-6 h-6 animate-pulse" />} circle />
     </div>
   );
 };