improved messages list UI

client/src/components/chat/chatArea/AnimatedMessage.tsx

@@ -1,68 +0,0 @@
-import { useContext, useState } from 'react';
-import { Trash2 } from 'lucide-react';
-import AttachmentPreview from './AttachmentPreview.tsx';
-import { ChatMessagesProps } from '@/types/types.ts';
-import { useChat } from '@/context/chat/useChat.ts';
-import { AuthContext } from '@/utils/AuthProvider.tsx';
-
-type AnimatedMessageProps = {
-  message: ChatMessagesProps;
-  onDelete: (messageId: number) => void;
-};
-
-const AnimatedMessage = ({ onDelete, message }: AnimatedMessageProps) => {
-  const { user } = useContext(AuthContext);
-  const { me, groupOwner } = useChat();
-  const [isRemoving, setIsRemoving] = useState(false);
-
-  const handleDelete = () => {
-    setIsRemoving(true);
-    setTimeout(() => {
-      onDelete(message.message_id);
-    }, 300);
-  };
-
-  return (
-    <li
-      className={` whitespace-pre-wrap ml-2 rounded-lg p-1 group hover:bg-zinc-900
-       ${isRemoving ? 'transition-all duration-300 opacity-0 -translate-x-full' : 'opacity-100'}`}
-    >
-      <div className="flex items-center justify-between">
-        <div className="max-w-full">
-          <span
-            title={`${new Intl.DateTimeFormat('en-GB', {
-              timeStyle: 'medium',
-              dateStyle: 'short',
-            })?.format(message.sent_at)}`}
-          >
-            {message.sender}: {message.message}
-          </span>
-          {message.attachment_urls && (
-            <div className="mt-2 flex flex-col gap-2 max-w-full">
-              {message.attachment_urls?.length > 0
-                ? message.attachment_urls.map((url, index) => (
-                    <AttachmentPreview
-                      key={`${message.message_id}-${index}`}
-                      url={url}
-                    />
-                  ))
-                : null}
-            </div>
-          )}
-        </div>
-        {me.isGroupOwner ||
-        message.sender == user?.username ||
-        (me.isGroupAdmin &&
-          me.isGroupOwner &&
-          message.sender_id !== groupOwner) ? (
-          <Trash2
-            className="opacity-0 group-hover:opacity-100 h-5 w-5 ml-2 flex-shrink-0 cursor-pointer text-gray-400 hover:text-red-500 transition-colors duration-200"
-            onClick={handleDelete}
-          />
-        ) : null}
-      </div>
-    </li>
-  );
-};
-
-export default AnimatedMessage;

client/src/components/chat/chatArea/MessageElement.tsx

@@ -0,0 +1,89 @@
+import { useContext, useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import AttachmentPreview from './AttachmentPreview.tsx';
+import { ChatMessagesProps } from '@/types/types.ts';
+import { useChat } from '@/context/chat/useChat.ts';
+import { AuthContext } from '@/utils/AuthProvider.tsx';
+import { format, isToday, isYesterday, formatDistanceToNow } from 'date-fns';
+import { pl } from 'date-fns/locale';
+
+type AnimatedMessageProps = {
+  message: ChatMessagesProps;
+  onDelete: (messageId: number) => void;
+};
+
+const MessageElement = ({ onDelete, message }: AnimatedMessageProps) => {
+  const { user } = useContext(AuthContext);
+  const { me, groupOwner } = useChat();
+  const [isRemoving, setIsRemoving] = useState(false);
+
+  const handleDelete = () => {
+    setIsRemoving(true);
+    setTimeout(() => {
+      onDelete(message.message_id);
+    }, 300);
+  };
+
+  const formatMessageDate = (date: Date) => {
+    if (isToday(date)) {
+      return `Dzisiaj o ${format(date, 'HH:mm')}`;
+    }
+    if (isYesterday(date)) {
+      return `Wczoraj o ${format(date, 'HH:mm')}`;
+    }
+    return format(date, "d MMMM yyyy 'o' HH:mm", { locale: pl });
+  };
+
+  const messageDate = new Date(message.sent_at);
+  const formattedDate = formatMessageDate(messageDate);
+  const fullDate = format(messageDate, "d MMMM yyyy 'o' HH:mm", { locale: pl });
+  const timeAgo = formatDistanceToNow(messageDate, {
+    addSuffix: true,
+    locale: pl,
+  });
+
+  const canDelete =
+    me.isGroupOwner ||
+    message.sender === user?.username ||
+    (me.isGroupAdmin && me.isGroupOwner && message.sender_id !== groupOwner);
+
+  return (
+    <li
+      className={`whitespace-pre-wrap ml-2 rounded-lg p-1 group hover:bg-zinc-900
+      ${isRemoving ? 'transition-all duration-300 opacity-0 -translate-x-full' : 'opacity-100'}`}
+    >
+      <div className="flex items-center justify-between">
+        <div className="max-w-full">
+          <div className="flex items-baseline space-x-2">
+            <span className="font-bold text-emerald-400">{message.sender}</span>
+            <span
+              className="text-gray-600 text-[11px] antialiased"
+              title={`${fullDate} (${timeAgo})`}
+            >
+              {formattedDate}
+            </span>
+          </div>
+          <div className="text-gray-200 mt-1">{message.message}</div>
+          {message.attachment_urls && message.attachment_urls.length > 0 && (
+            <div className="mt-2 flex flex-col gap-2 max-w-full">
+              {message.attachment_urls.map((url, index) => (
+                <AttachmentPreview
+                  key={`${message.message_id}-${index}`}
+                  url={url}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+        {canDelete && (
+          <Trash2
+            className="opacity-0 group-hover:opacity-100 h-5 w-5 ml-2 flex-shrink-0 cursor-pointer text-gray-400 hover:text-red-500 transition-colors duration-200"
+            onClick={handleDelete}
+          />
+        )}
+      </div>
+    </li>
+  );
+};
+
+export default MessageElement;

client/src/components/chat/chatArea/MessagesArea.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import { socket } from '@/socket/socket.ts';
 import { sendContact } from '@/api/contactsApi.tsx';
 import LoadingWheel from '../LoadingWheel.tsx';
-import AnimatedMessage from '@/components/chat/chatArea/AnimatedMessage.tsx';
+import AnimatedMessage from '@/components/chat/chatArea/MessageElement.tsx';
 import { ChatMessagesProps } from '@/types/types.ts';
 import { useChat } from '@/context/chat/useChat.ts';
 import { AuthContext } from '@/utils/AuthProvider.tsx';
@@ -56,7 +56,7 @@ function MessagesArea() {
 
     const isAtBottom =
       container.scrollHeight - container.scrollTop <=
-      container.clientHeight + 100;
+      container.clientHeight + 200;
     setShouldScrollToBottom(isAtBottom);
   };
 

client/src/pages/Chat.tsx

@@ -32,7 +32,7 @@ function Chat() {
   }, []);
 
   return (
-    <div className="text-white flex h-screen">
+    <div className="text-gray-200 flex h-screen">
       {/* Left Sidebar */}
       <div className="w-64 h-screen flex-shrink-0 flex flex-col bg-zinc-950 text-center border-r border-zinc-800">
         <ContactForm />