dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

chat needs redesign

Browse Source
This commit is contained in:
echo 2026-04-03 05:29:39 +02:00
parent 3f39a3d05a
commit a658eaf65c
2 changed files with 346 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/admin/data/fitai.db
View File

Binary file not shown.

436
apps/mobile/src/app/(tabs)/chat.tsx
View File

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