feat(chat): add date divider between messages in ChatMessages

components/chat/ChatMessages.tsx

@@ -1,6 +1,6 @@
 /**
  * @file components/chat/ChatMessages.tsx
- * @description Message history container component displaying initial channel greeting and rendering a list of individual chat messages.
+ * @description Message history container component displaying initial channel greeting, date separators, and a list of individual chat messages.
  */
 
 "use client";
@@ -22,7 +22,40 @@ interface ChatMessagesProps {
 }
 
 /**
- * Renders the scrollable message list along with a welcoming channel header.
+ * Formats a given date string or object into a human-readable label ("Today", "Yesterday", or a localized date string).
+ *
+ * @function formatDateLabel
+ * @param {string | Date} dateString - The date value to format.
+ * @returns {string} The formatted date label.
+ */
+function formatDateLabel(dateString: string | Date): string {
+  const date = new Date(dateString);
+  const now = new Date();
+
+  const isToday =
+    date.getDate() === now.getDate() &&
+    date.getMonth() === now.getMonth() &&
+    date.getFullYear() === now.getFullYear();
+
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
+  const isYesterday =
+    date.getDate() === yesterday.getDate() &&
+    date.getMonth() === yesterday.getMonth() &&
+    date.getFullYear() === yesterday.getFullYear();
+
+  if (isToday) return "Today";
+  if (isYesterday) return "Yesterday";
+
+  return date.toLocaleDateString("de-DE", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+}
+
+/**
+ * Renders the scrollable message list along with a welcoming channel header and dynamic date separators.
  *
  * @param {ChatMessagesProps} props - The component props.
  * @param {string} props.channelName - The name of the active chat channel to display in the header greeting.
@@ -36,8 +69,8 @@ export function ChatMessages({
   currentUserId,
 }: ChatMessagesProps) {
   return (
-    <div className="flex-1 overflow-y-auto flex flex-col justify-end">
-      <div className="mb-4 border-b border-surface/50">
+    <div className="flex-1 overflow-y-auto flex flex-col justify-end mb-4">
+      <div>
         <h2 className="text-2xl font-bold text-white">
           Welcome to #{channelName}!
         </h2>
@@ -46,14 +79,34 @@ export function ChatMessages({
         </p>
       </div>
 
-      <div className="space-y-1 mb-4">
-        {messages.map((message) => (
-          <ChatItem
-            key={message.id}
-            message={message}
-            currentUserId={currentUserId}
-          />
-        ))}
+      <div className="space-y-4">
+        {messages.map((message, index) => {
+          const currentDateLabel = formatDateLabel(message.createdAt);
+          const previousMessage = messages[index - 1];
+          const previousDateLabel = previousMessage
+            ? formatDateLabel(previousMessage.createdAt)
+            : null;
+
+          const showDateDivider = currentDateLabel !== previousDateLabel;
+
+          return (
+            <div className="m-0" key={message.id}>
+              {/* Date separator */}
+              {showDateDivider && (
+                <div className="relative flex items-center justify-center my-2">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-muted/30" />
+                  </div>
+                  <div className="relative bg-background px-2 text-xs font-semibold text-muted rounded-full border border-muted/30">
+                    {currentDateLabel}
+                  </div>
+                </div>
+              )}
+
+              <ChatItem message={message} currentUserId={currentUserId} />
+            </div>
+          );
+        })}
       </div>
     </div>
   );