Merge pull request #390 from danditomaso/fix/improve-styling-of-chat

fix: improve styling of messages

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,74 +1,85 @@
-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);
 
-  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) => (
-              <Message
-                key={message.id}
-                message={message}
-                lastMsgSameUser={
-                  index === 0
-                    ? false
-                    : messages[index - 1].from === message.from
-                }
-                sender={nodes.get(message.from)}
-              />
-            ))
-          ) : (
-            <div className="m-auto">
-              <InboxIcon className="m-auto" />
-              <Subtle>No Messages</Subtle>
-            </div>
-          )}
+  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">
+        <div className="flex-1 flex items-center justify-center">
+          <EmptyState />
         </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 className="flex-shrink-0 p-4 w-full bg-gray-900">
+          <MessageInput to={to} channel={channel} maxBytes={200} />
         </div>
       </div>
-      <div className="pl-3 pr-3 pt-3 pb-1">
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full w-full">
+      <div className="flex-1 overflow-y-scroll w-full" ref={scrollContainerRef}>
+        <div className="w-full h-full flex flex-col justify-end">
+          {messages.map((message, index) => (
+            <Message
+              key={message.id}
+              message={message}
+              lastMsgSameUser={
+                index > 0 && messages[index - 1].from === message.from
+              }
+              sender={nodes.get(message.from)}
+            />
+          ))}
+          <div ref={messagesEndRef} className="w-full" />
+        </div>
+      </div>
+      <div className="flex-shrink-0 mt-2 p-4 w-full bg-gray-900">
         <MessageInput to={to} channel={channel} maxBytes={200} />
       </div>
     </div>

src/components/PageComponents/Messages/Message.tsx

@@ -1,73 +1,154 @@
 import type { MessageWithState } 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 * as Tooltip from "@radix-ui/react-tooltip";
+import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
+import type { LucideIcon } from "lucide-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;
 }
 
-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"
-        }`}
-      >
-        {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" />
-        )}
-        <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) => (
+  <Tooltip.Provider>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          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>
+          {getStatusText(state)}
+          <Tooltip.Arrow className="fill-slate-800" />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+);
+
+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(
+    "pl-2 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 }: { date: Date }) => (
+  <div className="flex items-center gap-2 flex-shrink-0">
+    <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 messageTextClass = getMessageTextStyles(message.state);
+  const isFailed = message.state === MESSAGE_STATES.ACK;
+
+  const baseMessageWrapper = cn(
+    "flex items-center gap-2 w-full max-w-full pl-11",
+    !lastMsgSameUser && "flex-wrap flex-grow",
+  );
+
+  const containerClass = cn(
+    "w-full px-4 relative",
+    lastMsgSameUser ? "mt-1" : "mt-2",
+    !lastMsgSameUser && "pt-2",
+  );
+
+  return (
+    <div className={containerClass}>
+      {!lastMsgSameUser && (
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <div className="flex items-center gap-2 min-w-0">
+            <Avatar
+              text={sender?.user?.shortName ?? "UNK"}
+              className="flex-shrink-0"
+            />
+            <span className="font-medium text-gray-900 dark:text-white truncate">
+              {sender?.user?.longName ?? "UNK"}
+            </span>
+          </div>
+          <TimeDisplay date={message.rxTime} />
+        </div>
+      )}
+      <div className={baseMessageWrapper}>
+        <div className="flex-1 min-w-0 max-w-full">
+          <div className={messageTextClass}>{message.data}</div>
+        </div>
+        <StatusIcon
+          state={message.state}
+          className="ml-auto mr-6 flex-shrink-0"
+        />
       </div>
     </div>
   );

src/components/PageComponents/Messages/MessageInput.tsx

@@ -4,7 +4,7 @@ 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, useCallback, useMemo, useState } from "react";
 
 export interface MessageInputProps {
   to: Types.Destination;

src/components/UI/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
   ({ className, ...props }, ref) => {
     return (
       <footer
-        className={`flex flex- justify-center p-2 ${className}`}
+        className={`flex mt-auto justify-center p-2 ${className}`}
         style={{
           backgroundColor: "var(--backgroundPrimary)",
           color: "var(--textPrimary)",

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@components/UI/Button.tsx";
 import type { LucideIcon } from "lucide-react";
+import type { JSX } from "react";
 
 export interface SidebarButtonProps {
   label: string;
@@ -20,10 +21,10 @@ export const SidebarButton = ({
     onClick={onClick}
     variant={active ? "subtle" : "ghost"}
     size="sm"
-    className="w-full justify-start gap-2"
+    className="flex gap-2 w-full"
   >
     {Icon && <Icon size={16} />}
     {element && element}
-    {label}
+    <span className="flex flex-1 justify-start flex-shrink-0">{label}</span>
   </Button>
 );

src/pages/Messages.tsx

@@ -120,21 +120,6 @@ const MessagesPage = () => {
                       });
                     },
                   },
-                  {
-                    icon: WaypointsIcon,
-                    async onClick() {
-                      const targetNode = nodes.get(activeChat)?.num;
-                      if (targetNode === undefined) return;
-                      toast({
-                        title: "Sending Traceroute, please wait...",
-                      });
-                      await connection?.traceRoute(targetNode).then(() =>
-                        toast({
-                          title: "Traceroute sent.",
-                        }),
-                      );
-                    },
-                  },
                 ]
               : []
           }
@@ -158,7 +143,6 @@ const MessagesPage = () => {
                   to={activeChat}
                   messages={messages.direct.get(node.num)}
                   channel={Types.ChannelNumber.Primary}
-                  traceroutes={traceroutes.get(node.num)}
                 />
               ),
           )}