WIP changes

src/pages/Messages/ChannelChat.tsx

@@ -2,9 +2,11 @@ import type React from "react";
 import { ChangeEvent, useState } from "react";
 
 import {
+  AddLocationIcon,
   IconButton,
   majorScale,
   Pane,
+  Popover,
   SendMessageIcon,
   TextInputField,
   Tooltip,
@@ -14,6 +16,7 @@ import type { Channel } from "@core/stores/deviceStore.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 
 import { Message } from "./Message.js";
+import { NewLocationMessage } from "./NewLocationMessage.js";
 
 export interface ChannelChatProps {
   channel: Channel;
@@ -60,34 +63,46 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
           />
         ))}
       </Pane>
-      <form
-        onSubmit={(e): void => {
-          e.preventDefault();
-          sendMessage();
-        }}
-      >
-        <Pane display="flex" gap={majorScale(1)}>
-          <TextInputField
-            marginTop="auto"
-            minLength={2}
-            width="100%"
-            label=""
-            placeholder="Enter Message"
-            marginBottom={0}
-            value={currentMessage}
-            onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-              setCurrentMessage(e.target.value);
-            }}
-          />
-          <Tooltip content="Send">
+      <Pane display="flex" gap={majorScale(1)}>
+        <form
+          style={{ display: "flex", flexGrow: 1 }}
+          onSubmit={(e): void => {
+            e.preventDefault();
+            sendMessage();
+          }}
+        >
+          <Pane display="flex" flexGrow={1} gap={majorScale(1)}>
+            <TextInputField
+              marginTop="auto"
+              minLength={2}
+              width="100%"
+              label=""
+              placeholder="Enter Message"
+              marginBottom={0}
+              value={currentMessage}
+              onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                setCurrentMessage(e.target.value);
+              }}
+            />
+            <Tooltip content="Send">
+              <IconButton
+                icon={SendMessageIcon}
+                marginTop={majorScale(2)}
+                width={majorScale(8)}
+              />
+            </Tooltip>
+          </Pane>
+        </form>
+        <Tooltip content="Send Location">
+          <Popover content={<NewLocationMessage />}>
             <IconButton
-              icon={SendMessageIcon}
+              icon={AddLocationIcon}
               marginTop={majorScale(2)}
               width={majorScale(8)}
             />
-          </Tooltip>
-        </Pane>
-      </form>
+          </Popover>
+        </Tooltip>
+      </Pane>
     </Pane>
   );
 };

src/pages/Messages/Message.tsx

@@ -10,6 +10,7 @@ import {
   Text,
 } from "evergreen-ui";
 
+import { useDevice } from "@app/core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import type { Protobuf, Types } from "@meshtastic/meshtasticjs";
 
@@ -30,6 +31,13 @@ export const Message = ({
   rxTime,
   sender,
 }: MessageProps): JSX.Element => {
+  const { setPeerInfoOpen, setActivePeer } = useDevice();
+
+  const openPeer = (): void => {
+    setActivePeer(messagePacket.packet.from);
+    setPeerInfoOpen(true);
+  };
+
   return lastMsgSameUser ? (
     <Pane display="flex" marginLeft={majorScale(3)}>
       {ack ? (
@@ -53,10 +61,10 @@ export const Message = ({
   ) : (
     <Pane marginX={majorScale(2)} gap={majorScale(1)} marginTop={majorScale(1)}>
       <Pane display="flex" gap={majorScale(1)}>
-        <Pane width={majorScale(3)}>
+        <Pane onClick={openPeer} cursor="pointer" width={majorScale(3)}>
           <Hashicon value={(sender?.num ?? 0).toString()} size={32} />
         </Pane>
-        <Strong cursor="default" size={500}>
+        <Strong onClick={openPeer} cursor="pointer" size={500}>
           {sender?.user?.longName ?? "UNK"}
         </Strong>
         <Small>

src/pages/Messages/NewLocationMessage.tsx

@@ -0,0 +1,55 @@
+import type React from "react";
+
+import {
+  Button,
+  majorScale,
+  Pane,
+  SelectField,
+  TextInputField,
+} from "evergreen-ui";
+
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+enum LocationType {
+  MGRS,
+  LatLng,
+  DecimalDegrees,
+}
+
+export const NewLocationMessage = (): JSX.Element => {
+  const { connection } = useDevice();
+
+  return (
+    <Pane width={240} margin={majorScale(2)}>
+      <form
+        onSubmit={(e): void => {
+          e.preventDefault();
+        }}
+      >
+        <TextInputField label="Name" />
+        <TextInputField label="Description" />
+        <SelectField label="Type" value={LocationType.MGRS}>
+          {renderOptions(LocationType)}
+        </SelectField>
+        <TextInputField label="Coordinates" />
+        <Button
+          width="100%"
+          onClick={() => {
+            void connection?.sendLocation(
+              Protobuf.Location.create({
+                latitudeI: Math.floor(3.89103 * 1e7),
+                longitudeI: Math.floor(105.87005 * 1e7),
+                name: "TEST",
+                description: "This is a description",
+              })
+            );
+          }}
+        >
+          Send
+        </Button>
+      </form>
+    </Pane>
+  );
+};