From 97f0483f9ac514bd8b635f506ca3dfa1ddeb4656 Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <git@daichendt.one>
Date: Wed, 12 Feb 2025 12:50:43 +0100
Subject: [PATCH] feat: improve ux with autoscroll to end, closer to styling
 guidelines

---
 client/src/components/ChatInput.tsx      | 19 +++++++------------
 client/src/components/ChatMessage.tsx    | 15 ++++++++++++---
 client/src/components/Layout.tsx         |  2 +-
 client/src/components/MessageDisplay.tsx | 19 +++++++++++++++++--
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/client/src/components/ChatInput.tsx b/client/src/components/ChatInput.tsx
index fbef502..04263e7 100644
--- a/client/src/components/ChatInput.tsx
+++ b/client/src/components/ChatInput.tsx
@@ -17,18 +17,13 @@ function ChatInput({ onSendMessage }: ChatInputProps) {
 
   return (
     <form onSubmit={handleSubmit} className="mt-4">
-      <div className="flex gap-2">
-        <input
-          type="text"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          placeholder="Type a message..."
-          className="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-        />
-        <button type="submit" disabled={!message.trim()} className="btn">
-          Send
-        </button>
-      </div>
+      <input
+        type="text"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Message"
+        className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+      />
     </form>
   );
 }
diff --git a/client/src/components/ChatMessage.tsx b/client/src/components/ChatMessage.tsx
index 684308e..a20d3c3 100644
--- a/client/src/components/ChatMessage.tsx
+++ b/client/src/components/ChatMessage.tsx
@@ -16,9 +16,18 @@ function ChatMessageDisplay({
         className={`flex items-center gap-2 text-sm text-gray-600 mb-1
         ${isOwn ? "justify-end" : "justify-start"}`}
       >
-        {!isOwn && <span className="font-medium">{message.author.name}</span>}
-        <span>{new Date(message.timestamp).toLocaleTimeString()}</span>
-        {isOwn && <span className="font-medium">{message.author.name}</span>}
+        {!isOwn && (
+          <span className="font-bold text-gray-700">{message.author.name}</span>
+        )}
+        <span className="font-medium opacity-45">
+          {new Date(message.timestamp).toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        </span>
+        {isOwn && (
+          <span className="font-bold text-gray-700">{message.author.name}</span>
+        )}
       </div>
       <div
         className={`max-w-[80%] p-3 rounded-2xl shadow-sm bg-gray-200
diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 2272467..f1d8c4d 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -6,7 +6,7 @@ function Layout({ children }: LayoutProps) {
   return (
     <>
       <main className="min-h-screen p-4">
-        <header className="top-0 w-full bg-white py-4">
+        <header className="top-0 w-full bg-white">
           <h1 className="text-3xl text-center">Simple Chat</h1>
         </header>
         <div className="max-w-2xl md:p-8 m-auto">{children}</div>
diff --git a/client/src/components/MessageDisplay.tsx b/client/src/components/MessageDisplay.tsx
index e0a837d..2c1f459 100644
--- a/client/src/components/MessageDisplay.tsx
+++ b/client/src/components/MessageDisplay.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { ServerMessage } from "../../../shared";
 import { useChatState } from "../contexts/ChatContext";
 import ChatMessage from "./ChatMessage";
@@ -6,6 +6,16 @@ import ChatMessage from "./ChatMessage";
 function ChatMessages() {
   const { state } = useChatState();
   const userId = state.currentUser?.userId;
+  const messagesEndRef = useRef<HTMLDivElement>(null); // ref to an empty div at the end to scroll to
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  // scroll to bottom when messages change
+  useEffect(() => {
+    scrollToBottom();
+  }, [state.messages]);
 
   function renderMessage(message: ServerMessage) {
     switch (message.type) {
@@ -40,7 +50,12 @@ function ChatMessages() {
     }
   }
 
-  return <>{state.messages.map(renderMessage)}</>;
+  return (
+    <div className="min-h-[calc(100vh-theme('spacing.48'))] overflow-y-auto p-4">
+      {state.messages.map(renderMessage)}
+      <div ref={messagesEndRef} />
+    </div>
+  );
 }
 
 export default React.memo(ChatMessages);