Merge branch 'master' into feature/node-quick-options

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,74 +1,87 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
 import {
   type MessageWithState,
   useDevice,
 } from "@app/core/stores/deviceStore.ts";
 import { Message } from "@components/PageComponents/Messages/Message.tsx";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
-import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.tsx";
-import type { Protobuf, Types } from "@meshtastic/js";
+import type { Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
+import type { JSX } from "react";
 
 export interface ChannelChatProps {
   messages?: MessageWithState[];
   channel: Types.ChannelNumber;
   to: Types.Destination;
-  traceroutes?: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[];
 }
 
+const EmptyState = () => (
+  <div className="flex flex-col place-content-center place-items-center p-8 text-white">
+    <InboxIcon className="h-8 w-8 mb-2" />
+    <span className="text-sm">No Messages</span>
+  </div>
+);
+
 export const ChannelChat = ({
   messages,
   channel,
   to,
-  traceroutes,
 }: ChannelChatProps): JSX.Element => {
   const { nodes } = useDevice();
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (scrollContainer) {
+      const isNearBottom =
+        scrollContainer.scrollHeight -
+          scrollContainer.scrollTop -
+          scrollContainer.clientHeight <
+        100;
+      if (isNearBottom) {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  if (!messages?.length) {
+    return (
+      <div className="flex flex-col h-full w-full container mx-auto">
+        <div className="flex-1 flex items-center justify-center">
+          <EmptyState />
+        </div>
+        <div className="flex-shrink-0 p-4 w-full dark:bg-gray-900">
+          <MessageInput to={to} channel={channel} maxBytes={200} />
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div className="flex flex-grow flex-col">
-      <div className="flex flex-grow">
-        <div className="flex flex-grow flex-col">
-          {messages ? (
-            messages.map((message, index) => (
+    <div className="flex flex-col h-full w-full container mx-auto">
+      <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
+        <div className="w-full h-full flex flex-col justify-end pl-4 pr-44">
+          {messages.map((message, index) => {
+            return (
               <Message
                 key={message.id}
                 message={message}
-                lastMsgSameUser={
-                  index === 0
-                    ? false
-                    : messages[index - 1].from === message.from
-                }
                 sender={nodes.get(message.from)}
+                lastMsgSameUser={
+                  index > 0 && messages[index - 1].from === message.from
+                }
               />
-            ))
-          ) : (
-            <div className="m-auto">
-              <InboxIcon className="m-auto" />
-              <Subtle>No Messages</Subtle>
-            </div>
-          )}
-        </div>
-        <div
-          className={`flex flex-grow flex-col border-slate-400 border-l ${traceroutes === undefined ? "hidden" : ""}`}
-        >
-          {to === "broadcast" ? null : traceroutes ? (
-            traceroutes.map((traceroute, index) => (
-              <TraceRoute
-                key={traceroute.id}
-                from={nodes.get(traceroute.from)}
-                to={nodes.get(traceroute.to)}
-                route={traceroute.data.route}
-              />
-            ))
-          ) : (
-            <div className="m-auto">
-              <InboxIcon className="m-auto" />
-              <Subtle>No Traceroutes</Subtle>
-            </div>
-          )}
+            );
+          })}
+          <div ref={messagesEndRef} className="w-full" />
         </div>
       </div>
-      <div className="pl-3 pr-3 pt-3 pb-1">
+      <div className="flex-shrink-0 mt-2 p-4 w-full dark:bg-gray-900">
         <MessageInput to={to} channel={channel} maxBytes={200} />
       </div>
     </div>

src/components/PageComponents/Messages/Message.tsx

@@ -1,73 +1,168 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@app/components/UI/Tooltip";
+import { useAppStore } from "@app/core/stores/appStore";
+import {
+  type MessageWithState,
+  useDeviceStore,
+} from "@app/core/stores/deviceStore.ts";
+import { cn } from "@app/core/utils/cn";
 import { Avatar } from "@components/UI/Avatar";
 import type { Protobuf } from "@meshtastic/js";
-import {
-  AlertCircleIcon,
-  CheckCircle2Icon,
-  CircleEllipsisIcon,
-} from "lucide-react";
+import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { useMemo } from "react";
 
-export interface MessageProps {
+const MESSAGE_STATES = {
+  ACK: "ack",
+  WAITING: "waiting",
+  FAILED: "failed",
+} as const;
+
+type MessageState = MessageWithState["state"];
+
+interface MessageProps {
   lastMsgSameUser: boolean;
   message: MessageWithState;
-  sender?: Protobuf.Mesh.NodeInfo;
+  sender: Protobuf.Mesh.NodeInfo;
 }
 
-export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
-  return lastMsgSameUser ? (
-    <div className="ml-5 flex">
-      {message.state === "ack" ? (
-        <CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
-      ) : message.state === "waiting" ? (
-        <CircleEllipsisIcon size={16} className="my-auto text-textSecondary" />
-      ) : (
-        <AlertCircleIcon size={16} className="my-auto text-textSecondary" />
-      )}
-      <span
-        className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${
-          message.state === "ack" ? "text-textPrimary" : "text-textSecondary"
-        }`}
+interface StatusTooltipProps {
+  state: MessageState;
+  children: React.ReactNode;
+}
+
+interface StatusIconProps {
+  state: MessageState;
+  className?: string;
+}
+
+const STATUS_TEXT_MAP: Record<MessageState, string> = {
+  [MESSAGE_STATES.ACK]: "Message delivered",
+  [MESSAGE_STATES.WAITING]: "Waiting for delivery",
+  [MESSAGE_STATES.FAILED]: "Delivery failed",
+} as const;
+
+const STATUS_ICON_MAP: Record<MessageState, LucideIcon> = {
+  [MESSAGE_STATES.ACK]: CheckCircle2,
+  [MESSAGE_STATES.WAITING]: CircleEllipsis,
+  [MESSAGE_STATES.FAILED]: AlertCircle,
+} as const;
+
+const getStatusText = (state: MessageState): string => STATUS_TEXT_MAP[state];
+
+const StatusTooltip = ({ state, children }: StatusTooltipProps) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent
+        className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95"
+        side="top"
+        align="center"
+        sideOffset={5}
       >
-        {message.data}
-      </span>
-    </div>
-  ) : (
-    <div className="mx-4 mt-2 gap-2">
-      <div className="flex gap-2">
-        <div className="w-6 cursor-pointer">
-          <Avatar text={sender?.user?.shortName ?? "UNK"} />
-        </div>
-        <span className="cursor-pointer font-medium text-textPrimary">
-          {sender?.user?.longName ?? "UNK"}
-        </span>
-        <span className="mt-1 font-mono text-xs text-textSecondary">
-          {message.rxTime.toLocaleDateString()}
-        </span>
-        <span className="mt-1 font-mono text-xs text-textSecondary">
-          {message.rxTime.toLocaleTimeString(undefined, {
-            hour: "2-digit",
-            minute: "2-digit",
-          })}
-        </span>
-      </div>
-      <div className="ml-1 flex">
-        {message.state === "ack" ? (
-          <CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
-        ) : message.state === "waiting" ? (
-          <CircleEllipsisIcon
-            size={16}
-            className="my-auto text-textSecondary"
-          />
-        ) : (
-          <AlertCircleIcon size={16} className="my-auto text-textSecondary" />
+        {getStatusText(state)}
+        <TooltipArrow className="fill-slate-800" />
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => {
+  const isFailed = state === MESSAGE_STATES.FAILED;
+  const iconClass = cn(
+    className,
+    "text-gray-500 dark:text-gray-400 w-4 h-4 flex-shrink-0",
+  );
+
+  const Icon = STATUS_ICON_MAP[state];
+  return (
+    <StatusTooltip state={state}>
+      <Icon
+        className={iconClass}
+        {...otherProps}
+        color={isFailed ? "red" : "currentColor"}
+      />
+    </StatusTooltip>
+  );
+};
+
+const getMessageTextStyles = (state: MessageState) => {
+  const isAcknowledged = state === MESSAGE_STATES.ACK;
+  const isFailed = state === MESSAGE_STATES.FAILED;
+  const isWaiting = state === MESSAGE_STATES.WAITING;
+
+  return cn(
+    "break-words overflow-hidden",
+    isAcknowledged
+      ? "text-black dark:text-white"
+      : "text-black dark:text-gray-400",
+    isFailed && "text-red-500 dark:text-red-500",
+  );
+};
+
+const TimeDisplay = ({
+  date,
+  className,
+}: { date: Date; className?: string }) => (
+  <div className={cn("flex items-center gap-2 flex-shrink-0", className)}>
+    <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+      {date.toLocaleDateString()}
+    </span>
+    <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+      {date.toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+      })}
+    </span>
+  </div>
+);
+
+export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
+  const { getDevices } = useDeviceStore();
+
+  const isDeviceUser = useMemo(
+    () =>
+      getDevices()
+        .map((device) => device.nodes.get(device.hardware.myNodeNum)?.num)
+        .includes(message.from),
+    [getDevices, message.from],
+  );
+  const messageUser = sender?.user;
+
+  const messageTextClass = getMessageTextStyles(message.state);
+
+  return (
+    <div className="flex flex-col w-full px-4 justify-start">
+      <div
+        className={cn(
+          "flex flex-col flex-wrap items-start py-1",
+          isDeviceUser && "items-end",
         )}
-        <span
-          className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${
-            message.state === "ack" ? "text-textPrimary" : "text-textSecondary"
-          }`}
-        >
-          {message.data}
-        </span>
+      >
+        <div className="flex items-center gap-2 mb-2">
+          {!lastMsgSameUser ? (
+            <div className="flex place-items-center gap-2 mb-1">
+              <Avatar text={messageUser?.shortName} />
+              <div className="flex flex-col">
+                <span className="font-medium text-gray-900 dark:text-white truncate">
+                  {messageUser?.longName}
+                </span>
+              </div>
+            </div>
+          ) : null}
+        </div>
+        <TimeDisplay date={message.rxTime} />
+        <div className="flex place-items-center gap-2 pb-2">
+          <div className={cn(isDeviceUser && "pl-11", messageTextClass)}>
+            {message.data}
+          </div>
+          <StatusIcon state={message.state} />
+        </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 { useCallback, useMemo, useState } from "react";
+import {
+  type JSX,
+  startTransition,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 export interface MessageInputProps {
   to: Types.Destination;
@@ -26,7 +32,7 @@ export const MessageInput = ({
   } = useDevice();
   const myNodeNum = hardware.myNodeNum;
   const [localDraft, setLocalDraft] = useState(messageDraft);
-  const [messageBytes, setMessageBytes] = useState(maxBytes);
+  const [messageBytes, setMessageBytes] = useState(0);
 
   const debouncedSetMessageDraft = useMemo(
     () => debounce(setMessageDraft, 300),
@@ -64,10 +70,11 @@ export const MessageInput = ({
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     const byteLength = new Blob([newValue]).size;
+
     if (byteLength <= maxBytes) {
       setLocalDraft(newValue);
       debouncedSetMessageDraft(newValue);
-      setMessageBytes(maxBytes - byteLength);
+      setMessageBytes(byteLength);
     }
   };
 
@@ -75,11 +82,16 @@ export const MessageInput = ({
     <div className="flex gap-2">
       <form
         className="w-full"
-        onSubmit={(e) => {
-          e.preventDefault();
-          sendText(localDraft);
-          setLocalDraft("");
-          setMessageDraft("");
+        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">
@@ -87,14 +99,16 @@ export const MessageInput = ({
             <Input
               autoFocus={true}
               minLength={1}
+              name="messageInput"
               placeholder="Enter Message"
               value={localDraft}
               onChange={handleInputChange}
             />
           </span>
-          <div className="flex items-center">
+          <div className="flex items-center w-24 p-2 place-content-end">
             {messageBytes}/{maxBytes}
           </div>
+
           <Button type="submit">
             <SendIcon size={16} />
           </Button>