From a658eaf65ccefcf082c515f3868a6eb68b663143 Mon Sep 17 00:00:00 2001
From: echo <petrovskidimitar@yandex.com>
Date: Fri, 3 Apr 2026 05:29:39 +0200
Subject: [PATCH] chat needs redesign

---
 apps/admin/data/fitai.db            | Bin 360448 -> 360448 bytes
 apps/mobile/src/app/(tabs)/chat.tsx | 474 ++++++++++++++++++++--------
 2 files changed, 346 insertions(+), 128 deletions(-)

diff --git a/apps/admin/data/fitai.db b/apps/admin/data/fitai.db
index 123a239087a651267400deba5ee03ef082c708a6..5f9356d15163381a4f50f77bdc192fe54755d10d 100644
GIT binary patch
delta 573
zcmZo@5Nl`<n;^x+6fjZ72}m|3v?egNCNQ-oFmFv@nU>FGJUR2csAuMR<H_3!SUBZH
z%*@R#jg1WB6AQ{r%Pn)vfHKL`W&2sqi<ns$n;IHg#G4qV<yIIc0%c4Xw@qMSQIO;1
zxXi#`&i9rtn)f`fE6;Ww4eow!cCK2^H=Icvmp3a4Y~;{r<l*IZboZ4OWpHL;V8|^_
zk2f?oH#M|CH+A~Ncvjiz57x6N=!TY+0%2uIYDGzIeo|&mDng5ip{a3vNpY1$P9DhV
zjqE(r8+NgX3ZT0lZW`P4342+jRI{_QLB=Jf<Ywl<Oapq@$kZr4Gug1BBnxO-^!7J9
zStQuxc=_@e_#g2f=3m0!%AdyX&ac7G$@hxyG~XJ&UcS7|iUvM>)7PA1;WI$@0<Rpi
zBO{Uz(L$7GJ5W~yqZ}{K9tM5~zIr}8UR$0${0I3P`5E{Q@c!f7$6Lqq7ij)0p6RxC
zS&aCB<|Fx+cY5P}7DIlJPZ7@MneK3(#b|r}U6y_)CSX)5u(B8cJ;27me~W)Je-D2u
yza76g-v_>ve2e(1`9k<~`PhIKJmH-l6342-Y&@BF`Ufy0ng`6-UJ=LIp$GuRu&urT

delta 254
zcmZo@5Nl`<n;^x+*fdeb2}m|3v?egNCNQ-oFmFv@nU>F`@1A*H)HCzEzWcTU7Ebx;
zH_x#MumHKX(`EZv&QIS3<#ueFz`~*+#m)JKfxn#ZEnhV6d0tnZ?K~RX{oL$awVZD@
zD+-+B-2P@Kiv*h#H{Tit{zv?W`Iqpw@~82;^K0;P^1b3a&9`Q=qCp?u^t^K{eA|I0
zdofCJ^V%}-JMh)>+40))ALMW3XW%=)`;T`YZyivnJn!^9cUX+J=ig=NcVYs%P=S@j
v0BCv$1OF}l&HO$5sr+{Q;(Q<YPVz0{tL6&<YBA%R&KAe2vb`dXwL=jAdBskr

diff --git a/apps/mobile/src/app/(tabs)/chat.tsx b/apps/mobile/src/app/(tabs)/chat.tsx
index dcaf5c1..05240d7 100644
--- a/apps/mobile/src/app/(tabs)/chat.tsx
+++ b/apps/mobile/src/app/(tabs)/chat.tsx
@@ -2,20 +2,25 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   ActivityIndicator,
   FlatList,
-  RefreshControl,
+  KeyboardAvoidingView,
+  Platform,
   Pressable,
+  RefreshControl,
   StyleSheet,
   Text,
   TextInput,
   View,
 } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 import { useAuth } from "@clerk/clerk-expo";
 import { useChat } from "../../contexts/ChatContext";
 import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
 
 export default function ChatScreen() {
   const { userId } = useAuth();
-  const { colors } = useTheme();
+  const { colors, typography } = useTheme();
   const {
     threads,
     activeThreadId,
@@ -38,15 +43,32 @@ export default function ChatScreen() {
 
   const [draft, setDraft] = useState("");
   const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const activeMessages = useMemo(
     () => (activeThreadId ? (messagesByThreadId[activeThreadId] ?? []) : []),
     [activeThreadId, messagesByThreadId],
   );
+
   const typingUsers = useMemo(
     () => (activeThreadId ? (typingByThreadId[activeThreadId] ?? []) : []),
     [activeThreadId, typingByThreadId],
   );
 
+  const activeThread = useMemo(
+    () => threads.find((thread) => thread.id === activeThreadId) ?? null,
+    [activeThreadId, threads],
+  );
+
+  const orderedThreads = useMemo(
+    () =>
+      [...threads].sort((a, b) => {
+        const aTime = a.lastMessageAt ?? a.createdAt;
+        const bTime = b.lastMessageAt ?? b.createdAt;
+        return new Date(bTime).getTime() - new Date(aTime).getTime();
+      }),
+    [threads],
+  );
+
   const handleSend = async () => {
     if (!activeThreadId) {
       return;
@@ -73,8 +95,7 @@ export default function ChatScreen() {
       return;
     }
 
-    const isTyping = value.trim().length > 0;
-    setTyping(activeThreadId, isTyping);
+    setTyping(activeThreadId, value.trim().length > 0);
 
     if (typingTimeoutRef.current) {
       clearTimeout(typingTimeoutRef.current);
@@ -109,54 +130,97 @@ export default function ChatScreen() {
 
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <View style={[styles.connection, { borderColor: colors.border }]}>
-        <Text style={{ color: colors.textSecondary }}>
-          {socketConnected ? "Realtime connected" : "Realtime disconnected"}
-        </Text>
-        <Text style={{ color: colors.textTertiary, marginTop: 2 }}>
-          {totalUnreadCount} unread total
-        </Text>
+      <View style={styles.headerWrap}>
+        <SectionHeader
+          title="Messages"
+          subtitle={
+            socketConnected
+              ? `${totalUnreadCount} unread across chats`
+              : "Reconnecting..."
+          }
+        />
       </View>
 
-      <View style={styles.layout}>
-        <View style={[styles.sidebar, { borderColor: colors.border }]}>
+      <View style={styles.content}>
+        <View style={styles.threadRail}>
+          <Text style={[styles.railLabel, typography.label]}>
+            Conversations
+          </Text>
           {loadingThreads ? (
-            <ActivityIndicator />
+            <View style={styles.loaderWrap}>
+              <ActivityIndicator color={colors.primary} />
+            </View>
           ) : (
             <FlatList
-              data={threads}
+              data={orderedThreads}
               keyExtractor={(item) => item.id}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={styles.threadListContent}
               renderItem={({ item }) => {
                 const selected = item.id === activeThreadId;
                 return (
-                  <Pressable
-                    onPress={() => setActiveThread(item.id)}
-                    style={[
-                      styles.threadItem,
-                      {
-                        backgroundColor: selected
-                          ? colors.surface
-                          : "transparent",
-                        borderColor: colors.border,
-                      },
-                    ]}
-                  >
-                    <Text
-                      style={{ color: colors.textPrimary, fontWeight: "600" }}
+                  <Pressable onPress={() => setActiveThread(item.id)}>
+                    <MinimalCard
+                      variant={selected ? "elevated" : "bordered"}
+                      padding={10}
+                      style={[
+                        styles.threadCard,
+                        selected && {
+                          borderWidth: 1,
+                          borderColor: colors.primary,
+                        },
+                      ]}
                     >
-                      {item.type === "gym" ? "Gym Room" : "Trainer Chat"}
-                    </Text>
-                    <Text
-                      numberOfLines={1}
-                      style={{ color: colors.textSecondary, marginTop: 2 }}
-                    >
-                      {item.lastMessageBody ?? "No messages yet"}
-                    </Text>
-                    {item.unreadCount > 0 && (
-                      <Text style={{ color: colors.primary, marginTop: 4 }}>
-                        {item.unreadCount} unread
+                      <View style={styles.threadCardTopRow}>
+                        <View style={styles.threadTypeChip}>
+                          <Ionicons
+                            name={item.type === "gym" ? "people" : "person"}
+                            size={12}
+                            color={colors.primary}
+                          />
+                          <Text
+                            style={[
+                              styles.threadTypeText,
+                              { color: colors.primary },
+                            ]}
+                          >
+                            {item.type === "gym" ? "Gym" : "Direct"}
+                          </Text>
+                        </View>
+                        {item.unreadCount > 0 && (
+                          <View
+                            style={[
+                              styles.threadUnreadBadge,
+                              { backgroundColor: colors.danger },
+                            ]}
+                          >
+                            <Text style={styles.threadUnreadText}>
+                              {item.unreadCount > 9 ? "9+" : item.unreadCount}
+                            </Text>
+                          </View>
+                        )}
+                      </View>
+
+                      <Text
+                        numberOfLines={1}
+                        style={[
+                          styles.threadTitle,
+                          { color: colors.textPrimary },
+                        ]}
+                      >
+                        {item.type === "gym" ? "Gym Room" : "Trainer Chat"}
                       </Text>
-                    )}
+
+                      <Text
+                        numberOfLines={2}
+                        style={[
+                          styles.threadPreview,
+                          { color: colors.textSecondary },
+                        ]}
+                      >
+                        {item.lastMessageBody ?? "No messages yet"}
+                      </Text>
+                    </MinimalCard>
                   </Pressable>
                 );
               }}
@@ -164,22 +228,63 @@ export default function ChatScreen() {
           )}
         </View>
 
-        <View style={[styles.chatPane, { borderColor: colors.border }]}>
+        <KeyboardAvoidingView
+          style={styles.chatArea}
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+        >
           {!activeThreadId ? (
-            <View style={styles.emptyState}>
-              <Text style={{ color: colors.textSecondary }}>
-                Select a thread to start chatting
+            <MinimalCard variant="bordered" style={styles.emptyCard}>
+              <Ionicons
+                name="chatbox-ellipses-outline"
+                size={34}
+                color={colors.textTertiary}
+              />
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginTop: 10 },
+                ]}
+              >
+                Pick a chat
               </Text>
-            </View>
+              <Text
+                style={[
+                  typography.body,
+                  { color: colors.textSecondary, marginTop: 6 },
+                ]}
+              >
+                Choose a conversation on the left to start messaging.
+              </Text>
+            </MinimalCard>
           ) : (
             <>
+              <MinimalCard
+                variant="default"
+                padding={12}
+                style={styles.chatHeadCard}
+              >
+                <Text style={[typography.h4, { color: colors.textPrimary }]}>
+                  {activeThread?.type === "gym" ? "Gym Room" : "Trainer Chat"}
+                </Text>
+                <Text
+                  style={[typography.caption, { color: colors.textSecondary }]}
+                >
+                  {socketConnected
+                    ? "Live updates enabled"
+                    : "Offline sync active"}
+                </Text>
+              </MinimalCard>
+
               {loadingMessages ? (
-                <ActivityIndicator style={{ marginTop: 16 }} />
+                <View style={styles.loaderWrap}>
+                  <ActivityIndicator color={colors.primary} />
+                </View>
               ) : (
                 <FlatList
                   data={activeMessages}
                   keyExtractor={(item) => item.id}
-                  contentContainerStyle={styles.messagesList}
+                  showsVerticalScrollIndicator={false}
+                  contentContainerStyle={styles.messagesContent}
                   refreshControl={
                     <RefreshControl
                       refreshing={loadingMessages}
@@ -193,24 +298,28 @@ export default function ChatScreen() {
                   }
                   ListHeaderComponent={
                     activeThreadId && hasMoreMessages(activeThreadId) ? (
-                      <Pressable
-                        onPress={handleLoadOlder}
-                        style={[
-                          styles.loadOlder,
-                          {
-                            borderColor: colors.border,
-                            backgroundColor: colors.surface,
-                          },
-                        ]}
-                        disabled={isLoadingOlderMessages(activeThreadId)}
-                      >
-                        {isLoadingOlderMessages(activeThreadId) ? (
-                          <ActivityIndicator size="small" />
-                        ) : (
-                          <Text style={{ color: colors.textSecondary }}>
-                            Load older messages
-                          </Text>
-                        )}
+                      <Pressable onPress={handleLoadOlder}>
+                        <MinimalCard
+                          variant="bordered"
+                          padding={8}
+                          style={styles.loadOlderCard}
+                        >
+                          {isLoadingOlderMessages(activeThreadId) ? (
+                            <ActivityIndicator
+                              size="small"
+                              color={colors.primary}
+                            />
+                          ) : (
+                            <Text
+                              style={[
+                                typography.caption,
+                                { color: colors.textSecondary },
+                              ]}
+                            >
+                              Load earlier messages
+                            </Text>
+                          )}
+                        </MinimalCard>
                       </Pressable>
                     ) : null
                   }
@@ -219,12 +328,10 @@ export default function ChatScreen() {
                     const threadReads = activeThreadId
                       ? (readByThreadId[activeThreadId] ?? {})
                       : {};
-                    const readers = Object.entries(threadReads)
-                      .filter(
-                        ([readerUserId, messageId]) =>
-                          readerUserId !== userId && messageId === item.id,
-                      )
-                      .map(([readerUserId]) => readerUserId);
+                    const seen = Object.entries(threadReads).some(
+                      ([readerUserId, messageId]) =>
+                        readerUserId !== userId && messageId === item.id,
+                    );
 
                     return (
                       <View
@@ -235,28 +342,46 @@ export default function ChatScreen() {
                             backgroundColor: own
                               ? colors.primary
                               : colors.surface,
-                            borderColor: colors.border,
+                            borderColor: own
+                              ? colors.primaryDark
+                              : colors.border,
                           },
                         ]}
                       >
                         <Text
-                          style={{ color: own ? "white" : colors.textPrimary }}
+                          style={[
+                            typography.body,
+                            { color: own ? colors.white : colors.textPrimary },
+                          ]}
                         >
                           {item.body}
                         </Text>
-                        {own && readers.length > 0 && (
+                        <View style={styles.metaRow}>
                           <Text
                             style={{
-                              color: own
-                                ? "rgba(255,255,255,0.85)"
-                                : colors.textSecondary,
-                              marginTop: 4,
                               fontSize: 10,
+                              color: own
+                                ? "rgba(255,255,255,0.82)"
+                                : colors.textTertiary,
                             }}
                           >
-                            Seen
+                            {formatTime(item.createdAt)}
                           </Text>
-                        )}
+                          {own && seen && (
+                            <Text
+                              style={{
+                                marginLeft: 8,
+                                fontSize: 10,
+                                fontWeight: "700",
+                                color: own
+                                  ? "rgba(255,255,255,0.92)"
+                                  : colors.textSecondary,
+                              }}
+                            >
+                              Seen
+                            </Text>
+                          )}
+                        </View>
                       </View>
                     );
                   }}
@@ -265,7 +390,17 @@ export default function ChatScreen() {
 
               {typingUsers.length > 0 && (
                 <View style={styles.typingRow}>
-                  <Text style={{ color: colors.textSecondary, fontSize: 12 }}>
+                  <Ionicons
+                    name="ellipsis-horizontal"
+                    size={14}
+                    color={colors.textSecondary}
+                  />
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textSecondary },
+                    ]}
+                  >
                     {typingUsers.length === 1
                       ? "Someone is typing..."
                       : `${typingUsers.length} people are typing...`}
@@ -273,17 +408,22 @@ export default function ChatScreen() {
                 </View>
               )}
 
-              <View style={[styles.composer, { borderColor: colors.border }]}>
+              <View
+                style={[styles.composer, { borderTopColor: colors.border }]}
+              >
                 <TextInput
                   value={draft}
                   onChangeText={handleDraftChange}
-                  placeholder="Type a message"
+                  placeholder="Message"
                   placeholderTextColor={colors.textTertiary}
+                  multiline
+                  maxLength={2000}
                   style={[
                     styles.input,
                     {
                       color: colors.textPrimary,
                       borderColor: colors.border,
+                      backgroundColor: colors.surface,
                     },
                   ]}
                 />
@@ -291,95 +431,173 @@ export default function ChatScreen() {
                   onPress={handleSend}
                   style={[
                     styles.sendButton,
-                    { backgroundColor: colors.primary },
+                    {
+                      backgroundColor: draft.trim()
+                        ? colors.primary
+                        : colors.border,
+                    },
                   ]}
                 >
-                  <Text style={{ color: "white", fontWeight: "700" }}>
-                    Send
-                  </Text>
+                  <Ionicons name="send" size={15} color={colors.white} />
                 </Pressable>
               </View>
             </>
           )}
-        </View>
+        </KeyboardAvoidingView>
       </View>
     </View>
   );
 }
 
+function formatTime(isoDate: string): string {
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+
+  return date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  connection: {
-    borderBottomWidth: 1,
+  headerWrap: {
     paddingHorizontal: 16,
-    paddingVertical: 8,
+    paddingTop: 16,
+    paddingBottom: 8,
   },
-  layout: {
+  content: {
     flex: 1,
     flexDirection: "row",
+    paddingHorizontal: 12,
+    paddingBottom: 8,
+    gap: 10,
   },
-  sidebar: {
-    width: 160,
-    borderRightWidth: 1,
-    padding: 8,
+  threadRail: {
+    width: 148,
   },
-  threadItem: {
-    borderWidth: 1,
-    borderRadius: 12,
-    padding: 10,
+  railLabel: {
     marginBottom: 8,
   },
-  chatPane: {
-    flex: 1,
-    borderLeftWidth: 0,
-  },
-  emptyState: {
+  loaderWrap: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
   },
-  messagesList: {
-    padding: 12,
+  threadListContent: {
+    gap: 8,
+    paddingBottom: 20,
+  },
+  threadCard: {
+    borderRadius: 16,
+  },
+  threadCardTopRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  threadTypeChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  threadTypeText: {
+    fontSize: 11,
+    fontWeight: "700",
+  },
+  threadUnreadBadge: {
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 4,
+  },
+  threadUnreadText: {
+    color: "white",
+    fontSize: 10,
+    fontWeight: "700",
+  },
+  threadTitle: {
+    fontSize: 13,
+    fontWeight: "700",
+  },
+  threadPreview: {
+    fontSize: 11,
+    marginTop: 4,
+    lineHeight: 15,
+  },
+  chatArea: {
+    flex: 1,
+  },
+  emptyCard: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 8,
+  },
+  chatHeadCard: {
+    borderRadius: 14,
+    marginBottom: 8,
+  },
+  messagesContent: {
+    paddingHorizontal: 6,
+    paddingBottom: 12,
     gap: 8,
   },
-  loadOlder: {
-    borderWidth: 1,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
+  loadOlderCard: {
     alignSelf: "center",
+    borderRadius: 12,
     marginBottom: 10,
   },
   messageBubble: {
-    borderRadius: 12,
     borderWidth: 1,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    maxWidth: "80%",
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    maxWidth: "84%",
   },
-  composer: {
-    borderTopWidth: 1,
-    padding: 10,
+  metaRow: {
+    marginTop: 4,
     flexDirection: "row",
-    gap: 8,
     alignItems: "center",
   },
   typingRow: {
-    paddingHorizontal: 14,
+    paddingHorizontal: 6,
     paddingBottom: 6,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  composer: {
+    borderTopWidth: 1,
+    paddingTop: 8,
+    paddingBottom: 10,
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8,
   },
   input: {
     flex: 1,
     borderWidth: 1,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    minHeight: 42,
+    maxHeight: 110,
+    textAlignVertical: "top",
+    fontSize: 14,
   },
   sendButton: {
-    borderRadius: 10,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
   },
 });