Merge branch 'master' into issue-486-are-you-sure-dialog

src/pages/Messages.tsx

@@ -12,6 +12,7 @@ import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { getChannelName } from "@pages/Channels.tsx";
 import { HashIcon, LockIcon, LockOpenIcon } from "lucide-react";
 import { useState } from "react";
+import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
 
 export const MessagesPage = () => {
   const { channels, nodes, hardware, messages } = useDevice();
@@ -31,6 +32,11 @@ export const MessagesPage = () => {
   const node = nodes.get(activeChat);
   const nodeHex = node?.num ? numberToHexUnpadded(node.num) : "Unknown";
 
+  const messageDestination = chatType === "direct" ? activeChat : "broadcast";
+  const messageChannel = chatType === "direct"
+    ? Types.ChannelNumber.Primary
+    : activeChat;
+
   return (
     <>
       <Sidebar>
@@ -41,9 +47,9 @@ export const MessagesPage = () => {
               label={channel.settings?.name.length
                 ? channel.settings?.name
                 : channel.index === 0
-                ? "Primary"
-                : `Ch ${channel.index}`}
-              active={activeChat === channel.index}
+                  ? "Primary"
+                  : `Ch ${channel.index}`}
+              active={activeChat === channel.index && chatType === "broadcast"}
               onClick={() => {
                 setChatType("broadcast");
                 setActiveChat(channel.index);
@@ -68,7 +74,7 @@ export const MessagesPage = () => {
                 key={node.num}
                 label={node.user?.longName ??
                   `!${numberToHexUnpadded(node.num)}`}
-                active={activeChat === node.num}
+                active={activeChat === node.num && chatType === "direct"}
                 onClick={() => {
                   setChatType("direct");
                   setActiveChat(node.num);
@@ -84,15 +90,15 @@ export const MessagesPage = () => {
           </div>
         </SidebarSection>
       </Sidebar>
-      <div className="flex flex-col grow">
+      <div className="flex flex-col w-full h-full container mx-auto">
         <PageLayout
-          label={`Messages: ${
-            chatType === "broadcast" && currentChannel
-              ? getChannelName(currentChannel)
-              : chatType === "direct" && nodes.get(activeChat)
+          className="flex flex-col h-full"
+          label={`Messages: ${chatType === "broadcast" && currentChannel
+            ? getChannelName(currentChannel)
+            : chatType === "direct" && nodes.get(activeChat)
               ? (nodes.get(activeChat)?.user?.longName ?? nodeHex)
               : "Loading..."
-          }`}
+            }`}
           actions={chatType === "direct"
             ? [
               {
@@ -115,32 +121,42 @@ export const MessagesPage = () => {
             ]
             : []}
         >
-          {allChannels.map(
-            (channel) =>
-              activeChat === channel.index && (
-                <ChannelChat
-                  key={channel.index}
-                  to="broadcast"
-                  messages={messages.broadcast.get(channel.index)}
-                  channel={channel.index}
-                />
-              ),
-          )}
-          {filteredNodes.map(
-            (node) =>
-              activeChat === node.num && (
-                <ChannelChat
-                  key={node.num}
-                  to={activeChat}
-                  messages={messages.direct.get(node.num)}
-                  channel={Types.ChannelNumber.Primary}
-                />
-              ),
-          )}
+          <div className="flex-1 overflow-y-auto">
+            {chatType === "broadcast" && currentChannel && (
+              <div className="flex flex-col h-full">
+                <div className="flex-1 overflow-y-auto">
+                  <ChannelChat
+                    key={currentChannel.index}
+                    messages={messages.broadcast.get(currentChannel.index)}
+                  />
+                </div>
+              </div>
+            )}
+
+            {chatType === "direct" && node && (
+              <div className="flex flex-col h-full">
+                <div className="flex-1 overflow-y-auto">
+                  <ChannelChat
+                    key={node.num}
+                    messages={messages.direct.get(node.num)}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Single message input for both chat types */}
+          <div className="shrink-0 p-4 w-full dark:bg-slate-900">
+            <MessageInput
+              to={messageDestination}
+              channel={messageChannel}
+              maxBytes={200}
+            />
+          </div>
         </PageLayout>
       </div>
     </>
   );
 };
 
-export default MessagesPage;
+export default MessagesPage;

src/pages/Nodes.tsx

@@ -11,7 +11,7 @@ import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf, type Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { LockIcon, LockOpenIcon } from "lucide-react";
-import { Fragment, type JSX, useCallback, useEffect, useState } from "react";
+import { type JSX, useCallback, useEffect, useState } from "react";
 import { base16 } from "rfc4648";
 
 export interface DeleteNoteDialogProps {
@@ -21,6 +21,8 @@ export interface DeleteNoteDialogProps {
 
 const NodesPage = (): JSX.Element => {
   const { nodes, hardware, connection } = useDevice();
+  console.log(connection);
+
   const [selectedNode, setSelectedNode] = useState<
     Protobuf.Mesh.NodeInfo | undefined
   >(undefined);
@@ -61,6 +63,7 @@ const NodesPage = (): JSX.Element => {
     };
   }, [connection]);
 
+
   const handleLocation = useCallback(
     (location: Types.PacketMetadata<Protobuf.Mesh.Position>) => {
       if (location.to.valueOf() !== hardware.myNodeNum) return;
@@ -108,8 +111,8 @@ const NodesPage = (): JSX.Element => {
                 {node.user?.shortName ??
                   (node.user?.macaddr
                     ? `${base16
-                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .toLowerCase()}`
+                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                      .toLowerCase()}`
                     : `${numberToHexUnpadded(node.num).slice(-4)}`)}
               </h1>,
 
@@ -121,8 +124,8 @@ const NodesPage = (): JSX.Element => {
                 {node.user?.longName ??
                   (node.user?.macaddr
                     ? `Meshtastic ${base16
-                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .toLowerCase()}`
+                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                      .toLowerCase()}`
                     : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
 
@@ -158,9 +161,8 @@ const NodesPage = (): JSX.Element => {
                 {node.lastHeard !== 0
                   ? node.viaMqtt === false && node.hopsAway === 0
                     ? "Direct"
-                    : `${node.hopsAway?.toString()} ${
-                        node.hopsAway > 1 ? "hops" : "hop"
-                      } away`
+                    : `${node.hopsAway?.toString()} ${node.hopsAway > 1 ? "hops" : "hop"
+                    } away`
                   : "-"}
                 {node.viaMqtt === true ? ", via MQTT" : ""}
               </Mono>,