Merge pull request #43 from SlimusMinus/fix-chat_v2

added date on chat

src/components/chat/MessageBubble.jsx

@@ -1,7 +1,14 @@
+import { useTranslation } from "react-i18next";
+import { formatMessageTime } from "../../utils/chatDisplay";
+
 export default function MessageBubble({ message, isMine }) {
+  const { i18n } = useTranslation();
+  const time = formatMessageTime(message.createdAt, i18n.language);
+
   return (
       <div className={`chat-bubble${isMine ? " mine" : ""}`}>
         {message.content}
+        {time && <div className="chat-bubble-time">{time}</div>}
       </div>
   );
-}
+}

src/styles/card.css

@@ -29,7 +29,7 @@
   position: relative;
 }
 .f-cat-badge {
-  background: rgba(13,16,24,.8); backdrop-filter: blur(8px);
+  background: var(--bg-surface); backdrop-filter: blur(8px);
   border: 1px solid var(--border); border-radius: 20px;
   padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--teal);
 }

src/styles/chat.css

@@ -110,6 +110,15 @@
   background: #2de0c8;
   color: #082320;
 }
+.chat-bubble-time {
+  display: block;
+  margin-top: 4px;
+  font-size: .68rem;
+  line-height: 1;
+  text-align: right;
+  opacity: .6;
+  white-space: nowrap;
+}
 
 /* Input row */
 .chat-input-row {

src/utils/chatDisplay.jsx

@@ -31,6 +31,33 @@ export function getLastMessageText(chat) {
   return lm?.content || "";
 }
 
+/**
+ * Красиво форматирует время сообщения из createdAt (ISO-строка без таймзоны):
+ * сегодня — только время ("14:05"), раньше — дата + время ("12 авг, 14:05").
+ */
+export function formatMessageTime(createdAt, locale) {
+  const ms = toTimeMs(createdAt);
+  if (!ms) return "";
+  const date = new Date(ms);
+  const now = new Date();
+  const isSameDay =
+      date.getFullYear() === now.getFullYear() &&
+      date.getMonth() === now.getMonth() &&
+      date.getDate() === now.getDate();
+  const isSameYear = date.getFullYear() === now.getFullYear();
+
+  const time = new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit" }).format(date);
+  if (isSameDay) return time;
+
+  const datePart = new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: isSameYear ? undefined : "numeric",
+  }).format(date);
+
+  return `${datePart}, ${time}`;
+}
+
 export function getChatDisplayInfo(chat, post, unreadMap, t) {
   const title = post?.title || chat.otherUserName || chat.otherUser?.name || t('chat.user');
   const imgSrc = getImageUrl(post?.images?.[0]);