rebreak-monorepo/apps/rebreak-native/components/chat/RoomCard.tsx

import { View, Text, Pressable, Image, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';

export type Room = {
  id: string;
  name: string;
  description?: string | null;
  isPublic: boolean;
  isDefault: boolean;
  memberCount: number;
  isMember: boolean;
  avatarUrl?: string | null;
  lastMessage?: { content: string; createdAt: string; senderName: string } | null;
};

type Props = {
  room: Room;
  onPress: () => void;
};

function formatTime(ts: string, justNow: string) {
  const diff = Date.now() - new Date(ts).getTime();
  if (diff < 60_000) return justNow;
  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m`;
  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h`;
  return new Date(ts).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
}

export function RoomCard({ room, onPress }: Props) {
  const { t } = useTranslation();
  const initials = room.name
    .split(' ')
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? '')
    .join('');

  return (
    <Pressable onPress={onPress} android_ripple={{ color: '#f5f5f5' }}>
      {({ pressed }) => (
        <View style={[styles.row, { opacity: pressed ? 0.7 : 1 }]}>
          <View
            style={[
              styles.avatar,
              { backgroundColor: room.isPublic ? '#eff6ff' : '#e5e5e5' },
            ]}
          >
            {room.avatarUrl ? (
              <Image source={{ uri: room.avatarUrl }} style={styles.avatarImg} />
            ) : !room.isPublic ? (
              <Text style={styles.avatarInitials}>{initials}</Text>
            ) : (
              <Ionicons name="globe-outline" size={20} color="#007AFF" />
            )}
          </View>

          <View style={styles.info}>
            <View style={styles.headerRow}>
              <Text style={styles.name} numberOfLines={1}>
                {room.name}
              </Text>
              {room.isDefault && (
                <View style={styles.defaultBadge}>
                  <Text style={styles.defaultBadgeText}>Standard</Text>
                </View>
              )}
              {room.lastMessage && (
                <Text style={styles.time}>
                  {formatTime(room.lastMessage.createdAt, t('chat.just_now'))}
                </Text>
              )}
            </View>
            <View style={styles.footerRow}>
              <View style={styles.footerTextWrap}>
                {room.lastMessage ? (
                  <Text style={styles.lastMessage} numberOfLines={1}>
                    <Text style={{ fontFamily: 'Nunito_700Bold' }}>
                      {room.lastMessage.senderName}:{' '}
                    </Text>
                    {room.lastMessage.content}
                  </Text>
                ) : room.description ? (
                  <Text style={styles.description} numberOfLines={1}>
                    {room.description}
                  </Text>
                ) : null}
              </View>
              <View style={styles.metaPill}>
                <Ionicons name="people" size={11} color="#a3a3a3" />
                <Text style={styles.memberCount}>{room.memberCount}</Text>
              </View>
              {!room.isMember && (
                <View style={styles.joinBadge}>
                  <Text style={styles.joinBadgeText}>{t('chat.join')}</Text>
                </View>
              )}
            </View>
          </View>
        </View>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  row: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 14,
    paddingVertical: 11,
    backgroundColor: '#fff',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#f5f5f5',
  },
  avatar: {
    width: 42,
    height: 42,
    borderRadius: 21,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    marginRight: 10,
  },
  avatarImg: {
    width: 42,
    height: 42,
  },
  avatarInitials: {
    fontSize: 13,
    fontFamily: 'Nunito_700Bold',
    color: '#525252',
  },
  info: {
    flex: 1,
    minWidth: 0,
  },
  headerRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  footerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 3,
  },
  footerTextWrap: {
    flex: 1,
    minWidth: 0,
  },
  metaPill: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 8,
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 8,
    backgroundColor: '#f5f5f5',
  },
  name: {
    fontSize: 14,
    fontFamily: 'Nunito_700Bold',
    color: '#171717',
    flexShrink: 1,
  },
  defaultBadge: {
    marginLeft: 6,
    paddingHorizontal: 6,
    paddingVertical: 1,
    backgroundColor: '#eff6ff',
    borderRadius: 8,
  },
  defaultBadgeText: {
    fontSize: 9,
    fontFamily: 'Nunito_700Bold',
    color: '#007AFF',
  },
  lastMessage: {
    fontSize: 12,
    fontFamily: 'Nunito_400Regular',
    color: '#737373',
  },
  description: {
    fontSize: 12,
    fontFamily: 'Nunito_400Regular',
    color: '#a3a3a3',
  },
  right: {
    alignItems: 'flex-end',
    marginLeft: 8,
  },
  memberCount: {
    fontSize: 11,
    fontFamily: 'Nunito_700Bold',
    color: '#737373',
    marginLeft: 3,
  },
  time: {
    fontSize: 10,
    fontFamily: 'Nunito_500Medium',
    color: '#a3a3a3',
    marginLeft: 'auto',
    paddingLeft: 6,
  },
  joinBadge: {
    marginLeft: 6,
    paddingHorizontal: 8,
    paddingVertical: 3,
    backgroundColor: '#eff6ff',
    borderRadius: 10,
  },
  joinBadgeText: {
    fontSize: 10,
    fontFamily: 'Nunito_700Bold',
    color: '#007AFF',
  },
});