Add message destination select

src/components/chat/MessageBar.tsx

@@ -8,15 +8,20 @@ import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Input } from '@components/generic/form/Input';
 import { connection } from '@core/connection';
 
+import { EnumSelect } from '../generic/form/EnumSelect.jsx';
 import { IconButton } from '../generic/IconButton.jsx';
 
 export const MessageBar = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const ready = useAppSelector((state) => state.meshtastic.ready);
+  const nodes = useAppSelector((state) => state.meshtastic.nodes);
+  const myNodeInfo = useAppSelector((state) => state.meshtastic.myNodeInfo);
   const [currentMessage, setCurrentMessage] = React.useState('');
+  const [destinationNode, setDestinationNode] =
+    React.useState<number>(0xffffffff);
   const sendMessage = (): void => {
     if (ready) {
-      void connection.sendText(currentMessage, undefined, true, (id) => {
+      void connection.sendText(currentMessage, destinationNode, true, (id) => {
         dispatch(ackMessage(id));
 
         return Promise.resolve();
@@ -35,6 +40,25 @@ export const MessageBar = (): JSX.Element => {
             sendMessage();
           }}
         >
+          <EnumSelect
+            onChange={(e): void => {
+              setDestinationNode(parseInt(e.target.value));
+            }}
+            options={[
+              {
+                name: 'All',
+                value: 0xffffffff,
+              },
+              ...nodes
+                .filter((node) => node.num !== myNodeInfo.myNodeNum)
+                .map((node) => {
+                  return {
+                    name: node.user?.shortName ?? node.num,
+                    value: node.num,
+                  };
+                }),
+            ]}
+          />
           <Input
             type="text"
             minLength={2}

src/components/generic/form/EnumSelect.tsx

@@ -7,8 +7,8 @@ type DefaultSelectProps = JSX.IntrinsicElements['select'];
 
 interface SelectProps extends DefaultSelectProps {
   options?: {
-    name: string;
-    value: number | string;
+    name: string | number;
+    value: string | number;
   }[];
   optionsEnum?: { [s: string]: string | number };
   label?: string;
@@ -32,8 +32,16 @@ export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
             className={`w-full  bg-transparent focus:outline-none focus:border-primary ${
               small ? 'py-1 mx-1' : 'h-10 mx-2'
             }`}
+            disabled={
+              props.disabled
+                ? true
+                : !(optionsEnumValues.length || options?.length)
+            }
             {...props}
           >
+            {!(optionsEnumValues.length || options?.length) && (
+              <option className="dark:bg-gray-700">Loading</option>
+            )}
             {optionsEnumValues.length &&
               optionsEnumValues.map(([name, value]) => (
                 <option className="dark:bg-gray-700" key={value} value={value}>