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>
   );
 };