@oxyhq/services 10.5.0 → 11.1.0

package/src/ui/screens/trust/TrustFAQScreen.tsx

@@ -1,38 +1,36 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { View, Text, StyleSheet, ScrollView, Platform, TextInput, LayoutAnimation } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import { Ionicons } from '@expo/vector-icons';
 import Header from '../../components/Header';
-import { SettingsListItem } from '@oxyhq/bloom/settings-list';
-import { useI18n } from '../../hooks/useI18n';
+import EmptyState from '../../components/EmptyState';
+import { SearchInput } from '@oxyhq/bloom/search-input';
+import {
+    Accordion,
+    AccordionItem,
+    AccordionTrigger,
+    AccordionContent,
+} from '@oxyhq/bloom/accordion';
+import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { normalizeColorScheme } from '@oxyhq/core';
-import { useColorScheme } from '../../hooks/useColorScheme';
-import { Colors } from '../../constants/theme';
+import { useI18n } from '../../hooks/useI18n';
 
 const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'] as const;
 
 /**
- * TrustFAQScreen - Optimized for performance
+ * TrustFAQScreen
  *
- * Performance optimizations implemented:
- * - useMemo for theme calculations (only recalculates when theme changes)
- * - useMemo for filtered FAQs (only recalculates when search changes)
- * - useCallback for event handlers to prevent unnecessary re-renders
- * - React.memo wrapper to prevent re-renders when props haven't changed
+ * Frequently asked questions about Oxy Trust, rendered with the shared Bloom
+ * Accordion (single-expand) + SearchInput. Styling is centralized Bloom token
+ * classes; the Bloom Accordion owns its own expand/collapse animation, so no
+ * `LayoutAnimation` is used here.
  */
-const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
     const { t } = useI18n();
-    const [expanded, setExpanded] = useState<string | null>(null);
-    const [search, setSearch] = useState('');
-
-    // Memoize theme-related calculations to prevent unnecessary recalculations
     const bloomTheme = useTheme();
-    const colorScheme = useColorScheme();
-    const normalizedColorScheme = normalizeColorScheme(colorScheme);
-    const colors = Colors[normalizedColorScheme];
 
-    // Memoize filtered FAQs to prevent filtering on every render
+    const [search, setSearch] = useState('');
+    const [expanded, setExpanded] = useState<string | undefined>(undefined);
+
     const faqs = useMemo(() => FAQ_KEYS.map(key => ({
         id: key,
         q: t(`trust.faq.items.${key}.q`) || '',
@@ -48,123 +46,65 @@ const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
         );
     }, [search, faqs]);
 
-    // Memoize toggle handler to prevent recreation on every render
-    const handleToggle = useCallback((id: string) => {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-        setExpanded(prev => prev === id ? null : id);
-    }, []);
+    const handleAccordionChange = useCallback(
+        (value: string | string[] | undefined) => {
+            setExpanded(Array.isArray(value) ? value[0] : value);
+        },
+        [],
+    );
 
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
             <Header
                 title={t('trust.faq.title') || 'Trust FAQ'}
                 subtitle={t('trust.faq.subtitle') || 'Frequently asked questions about Oxy Trust'}
                 subtitleVariant="muted"
-
                 onBack={goBack}
                 elevation="subtle"
             />
-            <ScrollView
-                contentContainerStyle={styles.contentContainer}
-                showsVerticalScrollIndicator={false}
-            >
-                <View style={[styles.searchContainer, { backgroundColor: colors.card }]}>
-                    <Ionicons name="search" size={22} color={colors.icon} />
-                    <TextInput
-                        style={[styles.searchInput, { color: bloomTheme.colors.text }]}
-                        placeholder={t('trust.faq.search') || 'Search FAQ...'}
-                        placeholderTextColor={bloomTheme.colors.textTertiary}
-                        value={search}
-                        onChangeText={setSearch}
-                        returnKeyType="search"
-                    />
-                </View>
+
+            <View className="px-screen-margin pt-space-20 pb-space-12">
+                <SearchInput
+                    label={t('trust.faq.search') || 'Search FAQ...'}
+                    value={search}
+                    onChangeText={setSearch}
+                    onClearText={() => setSearch('')}
+                    accessibilityLabel="Search Trust FAQ"
+                />
+            </View>
+
+            <ScrollView className="flex-1 px-screen-margin" showsVerticalScrollIndicator={false}>
                 {filteredFaqs.length === 0 ? (
-                    <Text style={[styles.noResults, { color: colors.secondaryText }]}>
-                        {t('trust.faq.noResults', { query: search }) || `No FAQ items found matching "${search}"`}
-                    </Text>
+                    <EmptyState
+                        message={
+                            t('trust.faq.noResults', { query: search }) ||
+                            `No FAQ items found matching "${search}"`
+                        }
+                        textColor={bloomTheme.colors.text}
+                    />
                 ) : (
-                    <View style={styles.groupedSectionContainer}>
-                        {filteredFaqs.map((faq, idx) => {
-                            const isExpanded = expanded === faq.id;
-                            const isLast = idx === filteredFaqs.length - 1;
-
-                            return (
-                                <View key={faq.id} style={[styles.faqItemWrapper, { marginBottom: idx < filteredFaqs.length - 1 ? 4 : 0 }]}>
-                                    <SettingsListItem
-                                        title={faq.q}
-                                        onPress={() => handleToggle(faq.id)}
-                                        showChevron={false}
-                                        rightElement={
-                                            <Ionicons
-                                                name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                                                size={20}
-                                                color={colors.icon}
-                                            />
-                                        }
-                                    />
-                                    {isExpanded && (
-                                        <View style={[styles.answerContainer, { backgroundColor: colors.card }, isLast && styles.lastAnswerContainer]}>
-                                            <Text style={[styles.answer, { color: bloomTheme.colors.text }]}>
-                                                {faq.a}
-                                            </Text>
-                                        </View>
-                                    )}
-                                </View>
-                            );
-                        })}
-                    </View>
+                    <Accordion
+                        type="single"
+                        value={expanded}
+                        onValueChange={handleAccordionChange}
+                    >
+                        {filteredFaqs.map(faq => (
+                            <AccordionItem key={faq.id} value={faq.id}>
+                                <AccordionTrigger>
+                                    {faq.q}
+                                </AccordionTrigger>
+                                <AccordionContent>
+                                    <Text className="font-sans text-bodyMedium text-text-secondary">
+                                        {faq.a}
+                                    </Text>
+                                </AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
                 )}
             </ScrollView>
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-    contentContainer: {
-        paddingHorizontal: 24,
-        paddingTop: 20,
-        paddingBottom: 40,
-    },
-    searchContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        marginBottom: 12,
-        borderRadius: 999,
-        gap: 10,
-    },
-    searchInput: {
-        flex: 1,
-        fontSize: 16,
-        lineHeight: 20,
-    },
-    groupedSectionContainer: {
-        width: '100%',
-    },
-    faqItemWrapper: {
-        width: '100%',
-    },
-    answerContainer: {
-        paddingHorizontal: 10,
-        paddingTop: 4,
-        paddingBottom: 12,
-    },
-    lastAnswerContainer: {
-        borderBottomLeftRadius: 18,
-        borderBottomRightRadius: 18,
-    },
-    answer: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    noResults: {
-        fontSize: 16,
-        marginTop: 32,
-        textAlign: 'center',
-    },
-});
-
 export default React.memo(TrustFAQScreen);

package/src/ui/screens/trust/TrustLeaderboardScreen.tsx

@@ -1,101 +1,224 @@
 import type React from 'react';
-import { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    View,
+    StyleSheet,
+    ActivityIndicator,
+    FlatList,
+    TouchableOpacity,
+} from 'react-native';
 import type { ReputationLeaderboardEntry } from '@oxyhq/core';
+import { getAccountDisplayName, logger } from '@oxyhq/core';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { H6, Text } from '@oxyhq/bloom/typography';
+import { Chip } from '@oxyhq/bloom/chip';
+import { Button } from '@oxyhq/bloom/button';
+import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../../types/navigation';
 import Avatar from '../../components/Avatar';
 import Header from '../../components/Header';
 import { useI18n } from '../../hooks/useI18n';
-import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../../context/OxyContext';
 import { getTrustTierLabel } from './trustTier';
 
-const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
-    // Use useOxy() hook for OxyContext values
-    const { oxyServices } = useOxy();
-    const { t } = useI18n();
+const AVATAR_SIZE = 40;
+const EMPTY_ICON_SIZE = 64;
+const ERROR_ICON_SIZE = 48;
+/** Ranks within the podium (1–3) get a highlighted row surface. */
+const PODIUM_RANK = 3;
+
+const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, navigate }) => {
+    const { oxyServices, user: currentUser } = useOxy();
+    const { t, locale } = useI18n();
+    const bloomTheme = useTheme();
+
     const [leaderboard, setLeaderboard] = useState<ReputationLeaderboardEntry[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    const bloomTheme = useTheme();
-    // Override primaryColor for Oxy Trust screens (purple instead of blue)
-    const primaryColor = '#d169e5';
+    const currentUserId = currentUser?.id ?? '';
 
-    useEffect(() => {
+    const loadLeaderboard = useCallback(() => {
         setIsLoading(true);
         setError(null);
-        oxyServices.getReputationLeaderboard()
+        oxyServices
+            .getReputationLeaderboard()
             .then((data) => setLeaderboard(Array.isArray(data) ? data : []))
-            .catch((err: unknown) => setError((err instanceof Error ? err.message : null) || 'Failed to load leaderboard'))
+            .catch((err: unknown) => {
+                logger.error(
+                    'Failed to load trust leaderboard',
+                    err instanceof Error ? err : new Error(String(err)),
+                    { component: 'TrustLeaderboardScreen' },
+                );
+                setError(err instanceof Error ? err.message : null);
+            })
             .finally(() => setIsLoading(false));
     }, [oxyServices]);
 
-    return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-            <Header
-                title={t('trust.leaderboard.title') || 'Trust Leaderboard'}
-                subtitle={t('trust.leaderboard.subtitle') || 'Top contributors in the community'}
+    useEffect(() => {
+        loadLeaderboard();
+    }, [loadLeaderboard]);
+
+    const title = t('trust.leaderboard.title') || 'Trust Leaderboard';
+    const subtitle = t('trust.leaderboard.subtitle') || 'Top contributors in the community';
+
+    const handleEntryPress = useCallback(
+        (entry: ReputationLeaderboardEntry) => {
+            navigate?.('Profile', { userId: entry.user.id, username: entry.user.username });
+        },
+        [navigate],
+    );
+
+    const renderEntry = useCallback(
+        ({ item }: { item: ReputationLeaderboardEntry }) => {
+            const displayName = getAccountDisplayName(item.user, locale);
+            const isViewer = currentUserId !== '' && item.user.id === currentUserId;
+            const isPodium = item.rank <= PODIUM_RANK;
+            // Viewer's own row and podium ranks get a subtle highlighted surface.
+            const highlightClass = isViewer || isPodium ? 'bg-fill-secondary' : '';
+
+            return (
+                <TouchableOpacity
+                    style={styles.row}
+                    className={`px-screen-margin py-space-12 gap-space-12 rounded-radius-12 ${highlightClass}`}
+                    onPress={() => handleEntryPress(item)}
+                    activeOpacity={0.7}
+                    accessibilityRole="button"
+                    accessibilityLabel={`${displayName}, ${t('trust.leaderboard.rankLabel', { rank: item.rank }) || `rank ${item.rank}`}`}
+                >
+                    <Text
+                        className="text-text-secondary font-bold text-subtitle text-center"
+                        style={styles.rank}
+                        numberOfLines={1}
+                    >
+                        {item.rank}
+                    </Text>
+                    <Avatar
+                        uri={item.user.avatar ? oxyServices.getFileDownloadUrl(item.user.avatar, 'thumb') : undefined}
+                        name={displayName}
+                        size={AVATAR_SIZE}
+                    />
+                    <View style={styles.userColumn}>
+                        <Text className="text-text font-medium text-base" numberOfLines={1}>
+                            {displayName}
+                        </Text>
+                        <View style={styles.tierRow} className="mt-space-4">
+                            <Chip size="small" variant="soft" color={isPodium ? 'primary' : 'default'}>
+                                {getTrustTierLabel(item.trustTier, t)}
+                            </Chip>
+                        </View>
+                    </View>
+                    <Text className="text-text font-bold text-base" numberOfLines={1}>
+                        {item.total}
+                    </Text>
+                </TouchableOpacity>
+            );
+        },
+        [oxyServices, locale, currentUserId, handleEntryPress, t],
+    );
+
+    const keyExtractor = useCallback(
+        (item: ReputationLeaderboardEntry, index: number) => item.user.id || `entry-${index}`,
+        [],
+    );
+
+    const ItemSeparator = useMemo(
+        () => () => <View style={styles.separator} className="border-b border-border-image" />,
+        [],
+    );
+
+    if (isLoading) {
+        return (
+            <View className="flex-1 bg-bg">
+                <Header title={title} subtitle={subtitle} onBack={goBack} elevation="subtle" />
+                <View style={styles.center}>
+                    <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
+                </View>
+            </View>
+        );
+    }
 
-                onBack={goBack}
-                elevation="subtle"
+    if (error) {
+        return (
+            <View className="flex-1 bg-bg">
+                <Header title={title} subtitle={subtitle} onBack={goBack} elevation="subtle" />
+                <View style={styles.center} className="px-space-32 gap-space-16">
+                    <Ionicons name="alert-circle" size={ERROR_ICON_SIZE} color={bloomTheme.colors.error} />
+                    <Text className="text-text-secondary text-base text-center">
+                        {error || t('trust.leaderboard.error') || 'Failed to load leaderboard'}
+                    </Text>
+                    <Button variant="primary" onPress={loadLeaderboard}>
+                        {t('common.retry') || 'Retry'}
+                    </Button>
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <View className="flex-1 bg-bg">
+            <Header title={title} subtitle={subtitle} onBack={goBack} elevation="subtle" />
+            <FlatList
+                data={leaderboard}
+                renderItem={renderEntry}
+                keyExtractor={keyExtractor}
+                contentContainerStyle={styles.listContent}
+                className="px-space-8 pt-space-12"
+                ItemSeparatorComponent={ItemSeparator}
+                ListEmptyComponent={
+                    <View style={styles.emptyContainer} className="px-space-32 gap-space-8">
+                        <Ionicons name="trophy-outline" size={EMPTY_ICON_SIZE} color={bloomTheme.colors.textSecondary} />
+                        <H6 className="text-text text-center mt-space-8">
+                            {t('trust.leaderboard.empty') || 'No leaderboard data'}
+                        </H6>
+                        <Text className="text-text-secondary text-sm text-center">
+                            {t('trust.leaderboard.emptyDesc') || 'Top contributors will appear here as the community grows.'}
+                        </Text>
+                    </View>
+                }
             />
-            {isLoading ? (
-                <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
-            ) : error ? (
-                <Text style={[styles.error, { color: bloomTheme.colors.error }]}>{error}</Text>
-            ) : (
-                <ScrollView contentContainerStyle={styles.listContainer}>
-                    {leaderboard.length === 0 ? (
-                        <Text style={[styles.placeholder, { color: bloomTheme.colors.text }]}>{t('trust.leaderboard.empty') || 'No leaderboard data.'}</Text>
-                    ) : (
-                        leaderboard.map((entry) => {
-                            const username = entry.user.username;
-                            const displayName = username || entry.user.id;
-                            return (
-                                <TouchableOpacity
-                                    key={entry.user.id}
-                                    style={[styles.row, { borderColor: bloomTheme.colors.border }, entry.rank <= 3 && { backgroundColor: bloomTheme.colors.primarySubtle }]}
-                                    onPress={() => navigate?.('Profile', { userId: entry.user.id, username })}
-                                    activeOpacity={0.7}
-                                >
-                                    <Text style={[styles.rank, { color: primaryColor }]}>{entry.rank}</Text>
-                                    <Avatar name={username || 'User'} size={40} style={styles.avatar} />
-                                    <View style={styles.userColumn}>
-                                        <Text style={[styles.username, { color: bloomTheme.colors.text }]} numberOfLines={1}>{displayName}</Text>
-                                        <Text style={[styles.tier, { color: bloomTheme.colors.textTertiary }]} numberOfLines={1}>
-                                            {getTrustTierLabel(entry.trustTier, t)}
-                                        </Text>
-                                    </View>
-                                    <Text style={[styles.reputation, { color: primaryColor }]}>{entry.total}</Text>
-                                </TouchableOpacity>
-                            );
-                        })
-                    )}
-                </ScrollView>
-            )}
         </View>
     );
 };
 
+// Layout-only styles: flex centering, measured rank column width, separator
+// inset, and row flex layout. Colors, spacing, radius, and typography roles
+// live on Bloom components + NativeWind token classes.
 const styles = StyleSheet.create({
-    container: { flex: 1 },
-    listContainer: { paddingBottom: 40, paddingTop: 20 },
+    center: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    listContent: {
+        flexGrow: 1,
+        paddingBottom: 40,
+    },
     row: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 20,
-        borderBottomWidth: 1,
     },
-    rank: { fontSize: 20, width: 32, textAlign: 'center', fontWeight: 'bold' },
-    avatar: { marginHorizontal: 8 },
-    userColumn: { flex: 1, marginLeft: 8 },
-    username: { fontSize: 16 },
-    tier: { fontSize: 12, marginTop: 1 },
-    reputation: { fontSize: 18, fontWeight: 'bold', marginLeft: 12 },
-    placeholder: { fontSize: 16, textAlign: 'center', marginTop: 40 },
-    error: { fontSize: 16, textAlign: 'center', marginTop: 40 },
+    rank: {
+        width: 28,
+    },
+    userColumn: {
+        flex: 1,
+    },
+    tierRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    // Inset the hairline separator to align with the start of the entry's text
+    // content (rank column + avatar + screen margin + gaps).
+    separator: {
+        marginLeft: 80,
+    },
+    emptyContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: 80,
+    },
 });
 
 export default TrustLeaderboardScreen;