From d9ad044ecdecab4b9fb9523b3dedccd35587ae8f Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 29 Jan 2025 16:08:55 -0500
Subject: [PATCH 1/8] fix: improve styling of messsges

---
 .../PageComponents/Messages/ChannelChat.tsx   | 96 ++++++++++---------
 .../PageComponents/Messages/Message.tsx       | 89 +++++++++--------
 .../PageComponents/Messages/MessageInput.tsx  |  2 +-
 src/components/UI/Footer.tsx                  |  2 +-
 src/components/UI/Sidebar/sidebarButton.tsx   |  5 +-
 5 files changed, 100 insertions(+), 94 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 79950bf8..0771df04 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -8,6 +8,7 @@ import { MessageInput } from "@components/PageComponents/Messages/MessageInput.t
 import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.tsx";
 import type { Protobuf, Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
+import type { JSX } from "react";
 
 export interface ChannelChatProps {
   messages?: MessageWithState[];
@@ -16,6 +17,13 @@ export interface ChannelChatProps {
   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,
@@ -24,53 +32,53 @@ export const ChannelChat = ({
 }: ChannelChatProps): JSX.Element => {
   const { nodes } = useDevice();
 
+  if (!messages?.length) {
+    return (
+      <>
+        <div className="flex place-content-center place-items-center h-full">
+          <EmptyState />
+        </div>
+        <div className="mt-auto pb-4 w-full">
+          <MessageInput to={to} channel={channel} />
+        </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) => (
-              <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>
-          )}
+    <>
+      <div className="flex flex-col h-full">
+        <div className="w-full">
+          {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>
-        <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="mt-auto pb-4 w-full">
+          <MessageInput to={to} channel={channel} />
         </div>
       </div>
-      <div className="pl-3 pr-3 pt-3 pb-1">
-        <MessageInput to={to} channel={channel} />
-      </div>
-    </div>
+      {/* {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>
+      )} */}
+    </>
   );
 };
diff --git a/src/components/PageComponents/Messages/Message.tsx b/src/components/PageComponents/Messages/Message.tsx
index e8030e2a..82312079 100644
--- a/src/components/PageComponents/Messages/Message.tsx
+++ b/src/components/PageComponents/Messages/Message.tsx
@@ -1,11 +1,7 @@
 import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
 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";
 
 export interface MessageProps {
   lastMsgSameUser: boolean;
@@ -13,61 +9,62 @@ export interface MessageProps {
   sender?: Protobuf.Mesh.NodeInfo;
 }
 
+const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
+  const iconClass = "text-gray-500 dark:text-gray-400 w-4 h-4";
+  switch (state) {
+    case "ack":
+      return <CheckCircle2 className={iconClass} />;
+    case "waiting":
+      return <CircleEllipsis className={iconClass} />;
+    default:
+      return <AlertCircle className={iconClass} />;
+  }
+};
+
 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"} />
+  const messageTextClass =
+    message.state === "ack"
+      ? "text-gray-900 dark:text-white"
+      : "text-gray-500 dark:text-gray-400";
+  if (lastMsgSameUser) {
+    return (
+      <div className="mx-4 mt-2">
+        <div className="ml-12 flex items-start gap-2">
+          <div
+            className={`${messageTextClass} border-l-2 border-gray-200 dark:border-gray-700 pl-4 flex-grow`}
+          >
+            {message.data}
+          </div>
+          <StatusIcon state={message.state} />
         </div>
-        <span className="cursor-pointer font-medium text-textPrimary">
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-4 mt-2 space-y-2">
+      <div className="flex items-center gap-2">
+        <Avatar text={sender?.user?.shortName ?? "UNK"} />
+        <span className="font-medium text-gray-900 dark:text-white">
           {sender?.user?.longName ?? "UNK"}
         </span>
-        <span className="mt-1 font-mono text-xs text-textSecondary">
+        <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
           {message.rxTime.toLocaleDateString()}
         </span>
-        <span className="mt-1 font-mono text-xs text-textSecondary">
+        <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
           {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"
-          }`}
+      <div className="ml-12 flex items-start gap-2">
+        <div
+          className={`${messageTextClass} border-l-2 border-gray-200 dark:border-gray-700 pl-4 flex-grow`}
         >
           {message.data}
-        </span>
+        </div>
+        <StatusIcon state={message.state} />
       </div>
     </div>
   );
diff --git a/src/components/PageComponents/Messages/MessageInput.tsx b/src/components/PageComponents/Messages/MessageInput.tsx
index ae88f9ac..079cb448 100644
--- a/src/components/PageComponents/Messages/MessageInput.tsx
+++ b/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;
diff --git a/src/components/UI/Footer.tsx b/src/components/UI/Footer.tsx
index d0e082e7..c50bb3e4 100644
--- a/src/components/UI/Footer.tsx
+++ b/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)",
diff --git a/src/components/UI/Sidebar/sidebarButton.tsx b/src/components/UI/Sidebar/sidebarButton.tsx
index c3f30e79..1db72b46 100644
--- a/src/components/UI/Sidebar/sidebarButton.tsx
+++ b/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"
   >
     {Icon && <Icon size={16} />}
     {element && element}
-    {label}
+    <span className="flex flex-1 justify-start flex-shrink-0">{label}</span>
   </Button>
 );

From 794d214636d41be492f0ebbf1d73f96831e9946b Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 3 Feb 2025 12:36:33 -0500
Subject: [PATCH 2/8] feat: removed traceroute from message screen.

---
 .../PageComponents/Messages/ChannelChat.tsx   | 20 +------------------
 src/pages/Messages.tsx                        | 15 --------------
 2 files changed, 1 insertion(+), 34 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 0771df04..4c155bfb 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -5,8 +5,7 @@ import {
 } 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 type { JSX } from "react";
 
@@ -14,7 +13,6 @@ export interface ChannelChatProps {
   messages?: MessageWithState[];
   channel: Types.ChannelNumber;
   to: Types.Destination;
-  traceroutes?: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[];
 }
 
 const EmptyState = () => (
@@ -28,7 +26,6 @@ export const ChannelChat = ({
   messages,
   channel,
   to,
-  traceroutes,
 }: ChannelChatProps): JSX.Element => {
   const { nodes } = useDevice();
 
@@ -64,21 +61,6 @@ export const ChannelChat = ({
           <MessageInput to={to} channel={channel} />
         </div>
       </div>
-      {/* {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>
-      )} */}
     </>
   );
 };
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index ce866ed8..a7e70f18 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -108,21 +108,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.",
-                        }),
-                      );
-                    },
-                  },
                 ]
               : []
           }

From a4e21ed3433f805c31174d58c01f3d515749d23b Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 3 Feb 2025 13:17:57 -0500
Subject: [PATCH 3/8] feat: added hover tooltip on message status

---
 .../PageComponents/Messages/ChannelChat.tsx   |  1 -
 .../PageComponents/Messages/Message.tsx       | 55 +++++++++++++++++--
 src/pages/Messages.tsx                        |  1 -
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 4c155bfb..fc7a60a1 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -1,4 +1,3 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
 import {
   type MessageWithState,
   useDevice,
diff --git a/src/components/PageComponents/Messages/Message.tsx b/src/components/PageComponents/Messages/Message.tsx
index 82312079..53244080 100644
--- a/src/components/PageComponents/Messages/Message.tsx
+++ b/src/components/PageComponents/Messages/Message.tsx
@@ -1,6 +1,7 @@
 import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
 import { Avatar } from "@components/UI/Avatar";
 import type { Protobuf } from "@meshtastic/js";
+import * as Tooltip from "@radix-ui/react-tooltip";
 import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
 
 export interface MessageProps {
@@ -9,23 +10,67 @@ export interface MessageProps {
   sender?: Protobuf.Mesh.NodeInfo;
 }
 
-const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
-  const iconClass = "text-gray-500 dark:text-gray-400 w-4 h-4";
+interface StatusTooltipProps {
+  state: MessageWithState["state"];
+  children: React.ReactNode;
+}
+
+const getStatusText = (state: MessageWithState["state"]): string => {
   switch (state) {
     case "ack":
-      return <CheckCircle2 className={iconClass} />;
+      return "Message delivered";
     case "waiting":
-      return <CircleEllipsis className={iconClass} />;
+      return "Waiting for delivery";
     default:
-      return <AlertCircle className={iconClass} />;
+      return "Delivery failed";
   }
 };
 
+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}
+        >
+          {getStatusText(state)}
+          <Tooltip.Arrow className="fill-slate-800" />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+);
+
+const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
+  const iconClass = "text-gray-500 dark:text-gray-400 w-4 h-4";
+  const Icon = (() => {
+    switch (state) {
+      case "ack":
+        return CheckCircle2;
+      case "waiting":
+        return CircleEllipsis;
+      default:
+        return AlertCircle;
+    }
+  })();
+
+  return (
+    <StatusTooltip state={state}>
+      <Icon className={iconClass} />
+    </StatusTooltip>
+  );
+};
+
 export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
   const messageTextClass =
     message.state === "ack"
       ? "text-gray-900 dark:text-white"
       : "text-gray-500 dark:text-gray-400";
+
   if (lastMsgSameUser) {
     return (
       <div className="mx-4 mt-2">
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index a7e70f18..533c7c48 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -131,7 +131,6 @@ const MessagesPage = () => {
                   to={activeChat}
                   messages={messages.direct.get(node.num)}
                   channel={Types.ChannelNumber.Primary}
-                  traceroutes={traceroutes.get(node.num)}
                 />
               ),
           )}

From 4736fa6b50843fef9390ff28eb6f3fa5a5fb65eb Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 3 Feb 2025 16:06:24 -0500
Subject: [PATCH 4/8] fix: increasing size of clickable area for navigation
 items

---
 src/components/UI/Sidebar/sidebarButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/Sidebar/sidebarButton.tsx b/src/components/UI/Sidebar/sidebarButton.tsx
index 1db72b46..4f5146d4 100644
--- a/src/components/UI/Sidebar/sidebarButton.tsx
+++ b/src/components/UI/Sidebar/sidebarButton.tsx
@@ -21,7 +21,7 @@ export const SidebarButton = ({
     onClick={onClick}
     variant={active ? "subtle" : "ghost"}
     size="sm"
-    className="flex gap-2"
+    className="flex gap-2 w-full"
   >
     {Icon && <Icon size={16} />}
     {element && element}

From 87ddaad966e613877ef52c3ebc1cffc4ce8014a5 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 3 Feb 2025 20:28:01 -0500
Subject: [PATCH 5/8] fix: styling updates, chat conversation moved to bottom
 of chat window.

---
 .../PageComponents/Messages/ChannelChat.tsx   | 45 +++++++---
 .../PageComponents/Messages/Message.tsx       | 90 ++++++++++---------
 2 files changed, 83 insertions(+), 52 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index fc7a60a1..46423237 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -6,6 +6,7 @@ import { Message } from "@components/PageComponents/Messages/Message.tsx";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
 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 {
@@ -27,24 +28,45 @@ export const ChannelChat = ({
   to,
 }: 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 place-content-center place-items-center h-full">
+      <div className="flex flex-col h-full">
+        <div className="flex-1 flex items-center justify-center overflow-y-auto">
           <EmptyState />
         </div>
-        <div className="mt-auto pb-4 w-full">
+        <div className="flex-shrink-0 p-4 w-full bg-gray-900">
           <MessageInput to={to} channel={channel} />
         </div>
-      </>
+      </div>
     );
   }
 
   return (
-    <>
-      <div className="flex flex-col h-full">
-        <div className="w-full">
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
+        <div className="w-full min-h-full flex flex-col justify-end">
           {messages.map((message, index) => (
             <Message
               key={message.id}
@@ -55,11 +77,12 @@ export const ChannelChat = ({
               sender={nodes.get(message.from)}
             />
           ))}
+          <div ref={messagesEndRef} />
         </div>
-        <div className="mt-auto pb-4 w-full">
-          <MessageInput to={to} channel={channel} />
-        </div>
       </div>
-    </>
+      <div className="flex-shrink-0 p-4 w-full bg-gray-900">
+        <MessageInput to={to} channel={channel} />
+      </div>
+    </div>
   );
 };
diff --git a/src/components/PageComponents/Messages/Message.tsx b/src/components/PageComponents/Messages/Message.tsx
index 53244080..3a96fd3b 100644
--- a/src/components/PageComponents/Messages/Message.tsx
+++ b/src/components/PageComponents/Messages/Message.tsx
@@ -1,4 +1,5 @@
 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 * as Tooltip from "@radix-ui/react-tooltip";
@@ -45,8 +46,14 @@ const StatusTooltip = ({ state, children }: StatusTooltipProps) => (
   </Tooltip.Provider>
 );
 
-const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
-  const iconClass = "text-gray-500 dark:text-gray-400 w-4 h-4";
+const StatusIcon = ({
+  state,
+  className,
+}: { state: MessageWithState["state"]; className?: string }) => {
+  const iconClass = cn(
+    className,
+    "text-gray-500 dark:text-gray-400 w-4 h-4 flex-shrink-0",
+  );
   const Icon = (() => {
     switch (state) {
       case "ack":
@@ -57,7 +64,6 @@ const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
         return AlertCircle;
     }
   })();
-
   return (
     <StatusTooltip state={state}>
       <Icon className={iconClass} />
@@ -66,50 +72,52 @@ const StatusIcon = ({ state }: { state: MessageWithState["state"] }) => {
 };
 
 export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
-  const messageTextClass =
+  const messageTextClass = cn(
+    "border-l-2 pl-4 break-words min-w-0",
     message.state === "ack"
       ? "text-gray-900 dark:text-white"
-      : "text-gray-500 dark:text-gray-400";
+      : "text-gray-500 dark:text-gray-400",
+    lastMsgSameUser
+      ? "border-gray-600 dark:border-gray-700"
+      : "border-gray-200 dark:border-gray-600",
+  );
 
-  if (lastMsgSameUser) {
-    return (
-      <div className="mx-4 mt-2">
-        <div className="ml-12 flex items-start gap-2">
-          <div
-            className={`${messageTextClass} border-l-2 border-gray-200 dark:border-gray-700 pl-4 flex-grow`}
-          >
-            {message.data}
-          </div>
-          <StatusIcon state={message.state} />
-        </div>
-      </div>
-    );
-  }
+  const baseMessageWrapper = cn(
+    "ml-12 flex items-start gap-2 w-full max-w-full",
+    lastMsgSameUser ? "mt-1" : "mt-4",
+    !lastMsgSameUser && "flex-wrap flex-grow",
+  );
+
+  const containerClass = cn(
+    "px-4 relative",
+    lastMsgSameUser ? "mt-0" : "mt-2",
+    !lastMsgSameUser && "pt-2",
+  );
 
   return (
-    <div className="mx-4 mt-2 space-y-2">
-      <div className="flex items-center gap-2">
-        <Avatar text={sender?.user?.shortName ?? "UNK"} />
-        <span className="font-medium text-gray-900 dark:text-white">
-          {sender?.user?.longName ?? "UNK"}
-        </span>
-        <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-          {message.rxTime.toLocaleDateString()}
-        </span>
-        <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-          {message.rxTime.toLocaleTimeString(undefined, {
-            hour: "2-digit",
-            minute: "2-digit",
-          })}
-        </span>
-      </div>
-      <div className="ml-12 flex items-start gap-2">
-        <div
-          className={`${messageTextClass} border-l-2 border-gray-200 dark:border-gray-700 pl-4 flex-grow`}
-        >
-          {message.data}
+    <div className={containerClass}>
+      {!lastMsgSameUser && (
+        <div className="flex items-center gap-2 mb-2">
+          <Avatar text={sender?.user?.shortName ?? "UNK"} />
+          <span className="font-medium text-gray-900 dark:text-white">
+            {sender?.user?.longName ?? "UNK"}
+          </span>
+          <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+            {message.rxTime.toLocaleDateString()}
+          </span>
+          <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+            {message.rxTime.toLocaleTimeString(undefined, {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </span>
+        </div>
+      )}
+      <div className={baseMessageWrapper}>
+        <div className="flex-1 min-w-0">
+          <div className={messageTextClass}>{message.data}</div>
         </div>
-        <StatusIcon state={message.state} />
+        <StatusIcon state={message.state} className="ml-auto" />
       </div>
     </div>
   );

From 1c7b466e64cdec1b91decd374142dc23c35bfed1 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Tue, 4 Feb 2025 14:46:46 -0500
Subject: [PATCH 6/8] fix: styling fixes from code review

---
 .../PageComponents/Messages/ChannelChat.tsx   |  15 +-
 .../PageComponents/Messages/Message.tsx       | 143 +++++++++++-------
 src/components/PageLayout.tsx                 |   2 +-
 3 files changed, 95 insertions(+), 65 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 46423237..47c9095c 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -39,7 +39,6 @@ export const ChannelChat = ({
           scrollContainer.scrollTop -
           scrollContainer.clientHeight <
         100;
-
       if (isNearBottom) {
         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
       }
@@ -52,8 +51,8 @@ export const ChannelChat = ({
 
   if (!messages?.length) {
     return (
-      <div className="flex flex-col h-full">
-        <div className="flex-1 flex items-center justify-center overflow-y-auto">
+      <div className="flex flex-col h-full w-full">
+        <div className="flex-1 flex items-center justify-center">
           <EmptyState />
         </div>
         <div className="flex-shrink-0 p-4 w-full bg-gray-900">
@@ -64,9 +63,9 @@ export const ChannelChat = ({
   }
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
-        <div className="w-full min-h-full flex flex-col justify-end">
+    <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}
@@ -77,10 +76,10 @@ export const ChannelChat = ({
               sender={nodes.get(message.from)}
             />
           ))}
-          <div ref={messagesEndRef} />
+          <div ref={messagesEndRef} className="w-full" />
         </div>
       </div>
-      <div className="flex-shrink-0 p-4 w-full bg-gray-900">
+      <div className="flex-shrink-0 mt-2 p-4 w-full bg-gray-900">
         <MessageInput to={to} channel={channel} />
       </div>
     </div>
diff --git a/src/components/PageComponents/Messages/Message.tsx b/src/components/PageComponents/Messages/Message.tsx
index 3a96fd3b..66268219 100644
--- a/src/components/PageComponents/Messages/Message.tsx
+++ b/src/components/PageComponents/Messages/Message.tsx
@@ -4,28 +4,45 @@ import { Avatar } from "@components/UI/Avatar";
 import type { Protobuf } from "@meshtastic/js";
 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;
 }
 
 interface StatusTooltipProps {
-  state: MessageWithState["state"];
+  state: MessageState;
   children: React.ReactNode;
 }
 
-const getStatusText = (state: MessageWithState["state"]): string => {
-  switch (state) {
-    case "ack":
-      return "Message delivered";
-    case "waiting":
-      return "Waiting for delivery";
-    default:
-      return "Delivery failed";
-  }
-};
+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>
@@ -46,78 +63,92 @@ const StatusTooltip = ({ state, children }: StatusTooltipProps) => (
   </Tooltip.Provider>
 );
 
-const StatusIcon = ({
-  state,
-  className,
-}: { state: MessageWithState["state"]; className?: string }) => {
+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 = (() => {
-    switch (state) {
-      case "ack":
-        return CheckCircle2;
-      case "waiting":
-        return CircleEllipsis;
-      default:
-        return AlertCircle;
-    }
-  })();
+
+  const Icon = STATUS_ICON_MAP[state];
   return (
     <StatusTooltip state={state}>
-      <Icon className={iconClass} />
+      <Icon
+        className={iconClass}
+        {...otherProps}
+        color={isFailed ? "red" : "currentColor"}
+      />
     </StatusTooltip>
   );
 };
 
-export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
-  const messageTextClass = cn(
-    "border-l-2 pl-4 break-words min-w-0",
-    message.state === "ack"
-      ? "text-gray-900 dark:text-white"
-      : "text-gray-500 dark:text-gray-400",
-    lastMsgSameUser
-      ? "border-gray-600 dark:border-gray-700"
-      : "border-gray-200 dark:border-gray-600",
+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(
-    "ml-12 flex items-start gap-2 w-full max-w-full",
-    lastMsgSameUser ? "mt-1" : "mt-4",
+    "flex items-center gap-2 w-full max-w-full pl-11",
     !lastMsgSameUser && "flex-wrap flex-grow",
   );
 
   const containerClass = cn(
-    "px-4 relative",
-    lastMsgSameUser ? "mt-0" : "mt-2",
+    "w-full px-4 relative",
+    lastMsgSameUser ? "mt-1" : "mt-2",
     !lastMsgSameUser && "pt-2",
   );
 
   return (
     <div className={containerClass}>
       {!lastMsgSameUser && (
-        <div className="flex items-center gap-2 mb-2">
-          <Avatar text={sender?.user?.shortName ?? "UNK"} />
-          <span className="font-medium text-gray-900 dark:text-white">
-            {sender?.user?.longName ?? "UNK"}
-          </span>
-          <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-            {message.rxTime.toLocaleDateString()}
-          </span>
-          <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-            {message.rxTime.toLocaleTimeString(undefined, {
-              hour: "2-digit",
-              minute: "2-digit",
-            })}
-          </span>
+        <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">
+        <div className="flex-1 min-w-0 max-w-full">
           <div className={messageTextClass}>{message.data}</div>
         </div>
-        <StatusIcon state={message.state} className="ml-auto" />
+        <StatusIcon
+          state={message.state}
+          className="ml-auto mr-6 flex-shrink-0"
+        />
       </div>
     </div>
   );
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 79495bdc..f25eecab 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -49,7 +49,7 @@ export const PageLayout = ({
         </div>
         <div
           className={cn(
-            "flex h-full w-full flex-col overflow-y-auto",
+            "flex h-full w-full flex-col",
             !noPadding && "pl-3 pr-3 ",
           )}
         >

From 921f9b21a29f4ca7ae6d395dfcde8d60a663ee76 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Fri, 7 Feb 2025 10:39:23 -0500
Subject: [PATCH 7/8] fix: added overflow scroll back to page layout

---
 src/components/PageLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 81ec4915..1009ab54 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -49,7 +49,7 @@ export const PageLayout = ({
         </div>
         <div
           className={cn(
-            "flex h-full w-full flex-col",
+            "flex h-full w-full flex-col overflow-y-auto",
             !noPadding && "pl-3 pr-3 ",
           )}
         >

From e3cc95cfd887f189e2d4d6f778b9669c7e8f75c4 Mon Sep 17 00:00:00 2001
From: Hunter275 <hunter@hunterthornsberry.com>
Date: Fri, 7 Feb 2025 23:28:55 -0500
Subject: [PATCH 8/8] add missing maxBytes to MessageInput

---
 src/components/PageComponents/Messages/ChannelChat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 08d79832..8fb8365f 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -56,7 +56,7 @@ export const ChannelChat = ({
           <EmptyState />
         </div>
         <div className="flex-shrink-0 p-4 w-full bg-gray-900">
-          <MessageInput to={to} channel={channel} />
+          <MessageInput to={to} channel={channel} maxBytes={200} />
         </div>
       </div>
     );