Merge branch 'master' into issue-407-text-style-messages

src/components/PageComponents/Map/NodeDetail.tsx

@@ -1,6 +1,7 @@
 import { Separator } from "@app/components/UI/Seperator";
 import { H5 } from "@app/components/UI/Typography/H5.tsx";
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import { formatQuantity } from "@app/core/utils/string";
 import { Avatar } from "@components/UI/Avatar";
 import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
@@ -132,7 +133,12 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
               className="ml-2 mr-1"
               aria-label="Elevation"
             />
-            <div>{node.position?.altitude} ft</div>
+            <div>
+              {formatQuantity(node.position?.altitude, {
+                one: "meter",
+                other: "meters",
+              })}
+            </div>
           </div>
         )}
       </div>

src/components/PageComponents/Messages/MessageInput.tsx

@@ -4,7 +4,13 @@ import { Input } from "@components/UI/Input.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/js";
 import { SendIcon } from "lucide-react";
-import { type JSX, useCallback, useMemo, useState } from "react";
+import {
+  type JSX,
+  startTransition,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 export interface MessageInputProps {
   to: Types.Destination;
@@ -76,26 +82,31 @@ export const MessageInput = ({
     <div className="flex gap-2">
       <form
         className="w-full"
-        onSubmit={(e) => {
-          e.preventDefault();
-          sendText(localDraft);
-          setLocalDraft("");
-          setMessageDraft("");
-          setMessageBytes(0);
+        action={async (formData: FormData) => {
+          // prevent user from sending blank/empty message
+          if (localDraft === "") return;
+          const message = formData.get("messageInput") as string;
+          startTransition(() => {
+            sendText(message);
+            setLocalDraft("");
+            setMessageDraft("");
+            setMessageBytes(0);
+          });
         }}
       >
         <div className="flex flex-grow gap-2">
-          <Input
-            autoFocus={true}
-            minLength={1}
-            placeholder="Enter Message"
-            value={localDraft}
-            onChange={handleInputChange}
-          />
+          <span className="w-full">
+            <Input
+              autoFocus={true}
+              minLength={1}
+              name="messageInput"
+              placeholder="Enter Message"
+              value={localDraft}
+              onChange={handleInputChange}
+            />
+          </span>
           <div className="flex items-center w-24 p-2 place-content-end">
-            <span>
-              {messageBytes}/{maxBytes}
-            </span>
+            {messageBytes}/{maxBytes}
           </div>
 
           <Button type="submit">