@oxyhq/services 10.5.0 → 11.1.0

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -1,32 +1,32 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    StyleSheet,
-    ScrollView,
-    Platform,
-} from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeTheme } from '@oxyhq/core';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '@oxyhq/bloom';
-import Header from '../components/Header';
+import { H1, Text } from '@oxyhq/bloom/typography';
+import { SearchInput } from '@oxyhq/bloom/search-input';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
 import { SUPPORTED_LANGUAGES } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 
 interface LanguageSelectorScreenProps extends BaseScreenProps { }
 
+// Size (in dp) of the circular flag chip rendered as each row's leading icon.
+const FLAG_CHIP_SIZE = 40;
+// Selected-row check indicator size (dp).
+const CHECK_ICON_SIZE = 24;
+
 /**
  * LanguageSelectorScreen - Optimized for performance
- * 
+ *
  * Performance optimizations:
- * - useMemo for language items to prevent recreation on every render
+ * - useMemo for the filtered language list to prevent recreation on every render
  * - useCallback for handlers to prevent unnecessary re-renders
- * - Memoized current language section
+ * - Memoized component to prevent unnecessary re-renders
  */
 const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     goBack,
@@ -39,6 +39,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     const bloomTheme = useTheme();
     const normalizedTheme = normalizeTheme(theme);
     const [isLoading, setIsLoading] = useState(false);
+    const [query, setQuery] = useState('');
 
     // Memoize the language select handler to prevent recreation on every render
     const handleLanguageSelect = useCallback(async (languageId: string) => {
@@ -91,32 +92,20 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
         }
     }, [currentLanguage, isLoading, isAuthenticated, user?.id, oxyServices, setLanguage, t, onClose, goBack]);
 
-    // Memoize language items to prevent recreation on every render
-    const languageItems = useMemo(() =>
-        SUPPORTED_LANGUAGES.map(language => {
-            const isSelected = currentLanguage === language.id;
-            return {
-                id: language.id,
-                title: language.name,
-                description: language.nativeName,
-                icon: (
-                    <View style={[styles.languageFlag, { backgroundColor: `${language.color}15` }]}>
-                        <Text style={styles.flagEmoji}>{language.flag}</Text>
-                    </View>
-                ),
-                onPress: () => handleLanguageSelect(language.id),
-                rightElement: isSelected ? (
-                    <Ionicons name="checkmark-circle" size={24} color={bloomTheme.colors.primary} />
-                ) : undefined,
-                showChevron: false,
-            };
-        }),
-        [currentLanguage, handleLanguageSelect, bloomTheme]
-    );
-
+    // Filter the supported languages by the search query (name + native name).
+    const filteredLanguages = useMemo(() => {
+        const normalized = query.trim().toLowerCase();
+        if (!normalized) {
+            return SUPPORTED_LANGUAGES;
+        }
+        return SUPPORTED_LANGUAGES.filter((language) =>
+            language.name.toLowerCase().includes(normalized) ||
+            language.nativeName.toLowerCase().includes(normalized)
+        );
+    }, [query]);
 
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
             <Header
                 title=""
                 subtitle=""
@@ -127,89 +116,86 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             />
 
             <ScrollView
-                style={styles.content}
-                contentContainerStyle={styles.contentContainer}
+                className="flex-1"
+                contentContainerClassName="px-screen-margin pt-space-24 pb-space-24"
                 showsVerticalScrollIndicator={false}
                 removeClippedSubviews={true}
+                keyboardShouldPersistTaps="handled"
             >
                 {/* Big Title */}
-                <View style={styles.titleContainer}>
-                    <Text style={[styles.bigTitle, { color: bloomTheme.colors.text }]}>
+                <View className="mb-space-16">
+                    <H1 className="text-text" style={styles.bigTitle}>
                         {t('language.title')}
-                    </Text>
-                    {t('language.subtitle') && (
-                        <Text style={[styles.bigSubtitle, { color: bloomTheme.colors.textSecondary }]}>
+                    </H1>
+                    {t('language.subtitle') ? (
+                        <Text className="text-text-secondary mt-space-2" style={styles.bigSubtitle}>
                             {t('language.subtitle')}
                         </Text>
-                    )}
+                    ) : null}
                 </View>
 
-                {/* Available languages - Main section */}
-                <View style={styles.sectionContainer}>
-                    <View style={[styles.materialCard, {
-                        backgroundColor: bloomTheme.colors.card,
-                    }]}>
-                        <SettingsListGroup>
-                            {languageItems.map(item => (
-                                <SettingsListItem
-                                    key={item.id}
-                                    icon={item.icon}
-                                    title={item.title}
-                                    description={item.description}
-                                    onPress={item.onPress}
-                                    rightElement={item.rightElement}
-                                    showChevron={false}
-                                />
-                            ))}
-                        </SettingsListGroup>
-                    </View>
+                {/* Search / filter */}
+                <View className="mb-space-16">
+                    <SearchInput
+                        value={query}
+                        onChangeText={setQuery}
+                        onClearText={() => setQuery('')}
+                        label={t('language.search') || 'Search languages'}
+                    />
                 </View>
+
+                {/* Available languages - Main section */}
+                <SettingsListGroup>
+                    {filteredLanguages.map((language) => {
+                        const isSelected = currentLanguage === language.id;
+                        return (
+                            <SettingsListItem
+                                key={language.id}
+                                icon={
+                                    <View
+                                        className="bg-fill-secondary items-center justify-center"
+                                        style={styles.languageFlag}
+                                    >
+                                        <Text style={styles.flagEmoji}>{language.flag}</Text>
+                                    </View>
+                                }
+                                title={language.name}
+                                description={language.nativeName}
+                                onPress={() => handleLanguageSelect(language.id)}
+                                rightElement={
+                                    isSelected ? (
+                                        <Ionicons
+                                            name="checkmark-circle"
+                                            size={CHECK_ICON_SIZE}
+                                            color={bloomTheme.colors.primary}
+                                        />
+                                    ) : undefined
+                                }
+                                showChevron={false}
+                            />
+                        );
+                    })}
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );
 };
 
+// StyleSheet retained ONLY for measured layout (sizes / line metrics) — no colors.
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flex: 1,
-    },
-    contentContainer: {
-        padding: 16,
-        paddingTop: 24,
-    },
-    titleContainer: {
-        marginBottom: 32,
-        paddingTop: 0,
-    },
     bigTitle: {
         fontSize: 34,
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
         lineHeight: 40,
-        marginBottom: 8,
         letterSpacing: -0.5,
     },
     bigSubtitle: {
         fontSize: 16,
         lineHeight: 22,
-        opacity: 0.7,
-        marginTop: 4,
-    },
-    sectionContainer: {
-        marginBottom: 8,
-    },
-    materialCard: {
-        borderRadius: 12,
-        overflow: 'hidden',
     },
     languageFlag: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        alignItems: 'center',
-        justifyContent: 'center',
+        width: FLAG_CHIP_SIZE,
+        height: FLAG_CHIP_SIZE,
+        borderRadius: FLAG_CHIP_SIZE / 2,
     },
     flagEmoji: {
         fontSize: 20,

package/src/ui/screens/LearnMoreUsernamesScreen.tsx

@@ -1,22 +1,26 @@
 import type React from 'react';
-import { useState, useCallback, useMemo } from 'react';
+import { useCallback, useState } from 'react';
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Text } from '@oxyhq/bloom/typography';
+import { IconCircle } from '@oxyhq/bloom/icon-circle';
 import {
-    View,
-    Text,
-    TouchableOpacity,
-    StyleSheet,
-    ScrollView,
-} from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+    Accordion,
+    AccordionItem,
+    AccordionTrigger,
+    AccordionContent,
+} from '@oxyhq/bloom/accordion';
+import * as Icons from '@oxyhq/bloom/icons';
+import type { Props as IconProps } from '@oxyhq/bloom/icons';
 import type { BaseScreenProps } from '../types/navigation';
-import { useTheme } from '@oxyhq/bloom/theme';
+import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
 
 interface InfoSection {
     id: string;
     titleKey: string;
     contentKey: string;
-    icon: string;
+    Icon: React.ComponentType<IconProps>;
 }
 
 const INFO_SECTIONS: InfoSection[] = [
@@ -24,211 +28,124 @@ const INFO_SECTIONS: InfoSection[] = [
         id: 'what',
         titleKey: 'learnMoreUsernames.sections.what.title',
         contentKey: 'learnMoreUsernames.sections.what.content',
-        icon: 'at-outline',
+        Icon: Icons.At_Stroke2_Corner0_Rounded,
     },
     {
         id: 'rules',
         titleKey: 'learnMoreUsernames.sections.rules.title',
         contentKey: 'learnMoreUsernames.sections.rules.content',
-        icon: 'list-outline',
+        Icon: Icons.BulletList_Stroke2_Corner0_Rounded,
     },
     {
         id: 'unique',
         titleKey: 'learnMoreUsernames.sections.unique.title',
         contentKey: 'learnMoreUsernames.sections.unique.content',
-        icon: 'finger-print-outline',
+        Icon: Icons.Key_Stroke2_Corner2_Rounded,
     },
     {
         id: 'change',
         titleKey: 'learnMoreUsernames.sections.change.title',
         contentKey: 'learnMoreUsernames.sections.change.content',
-        icon: 'refresh-outline',
+        Icon: Icons.ArrowRotateClockwise_Stroke2_Corner0_Rounded,
     },
     {
         id: 'tips',
         titleKey: 'learnMoreUsernames.sections.tips.title',
         contentKey: 'learnMoreUsernames.sections.tips.content',
-        icon: 'bulb-outline',
+        Icon: Icons.Sparkle_Stroke2_Corner0_Rounded,
     },
 ];
 
 const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
-    theme,
+    onClose,
+    goBack,
 }) => {
     const bloomTheme = useTheme();
     const { t } = useI18n();
-    const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(['what'])); // Start with first section expanded
+    // Start with the first section expanded.
+    const [expandedIds, setExpandedIds] = useState<string[]>(['what']);
 
-    const toggleExpanded = useCallback((id: string) => {
-        setExpandedIds(prev => {
-            const next = new Set(prev);
-            if (next.has(id)) {
-                next.delete(id);
+    const handleAccordionChange = useCallback(
+        (value: string | string[] | undefined) => {
+            if (Array.isArray(value)) {
+                setExpandedIds(value);
+            } else if (value == null) {
+                setExpandedIds([]);
             } else {
-                next.add(id);
+                setExpandedIds([value]);
             }
-            return next;
-        });
-    }, []);
-
-    const styles = useMemo(() => createStyles(), []);
+        },
+        [],
+    );
 
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
+            <Header
+                title={t('learnMoreUsernames.introTitle')}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
             <ScrollView
-                style={styles.content}
+                className="flex-1 px-screen-margin"
                 showsVerticalScrollIndicator={false}
-                contentContainerStyle={styles.contentContainer}
+                contentContainerClassName="pb-space-32"
             >
-                <View style={styles.introSection}>
-                    <View style={[styles.introIcon, { backgroundColor: `${bloomTheme.colors.primary}15` }]}>
-                        <Ionicons name="at" size={32} color={bloomTheme.colors.primary} />
-                    </View>
-                    <Text style={[styles.introTitle, { color: bloomTheme.colors.text }]}>
-                        {t('learnMoreUsernames.introTitle')}
-                    </Text>
-                    <Text style={[styles.introText, { color: bloomTheme.colors.textSecondary }]}>
+                <View className="items-center py-space-24 gap-space-12">
+                    <IconCircle icon={Icons.At_Stroke2_Corner0_Rounded} />
+                    <Text className="font-sans text-body text-text-secondary text-center">
                         {t('learnMoreUsernames.introText')}
                     </Text>
                 </View>
 
-                {INFO_SECTIONS.map((section, index) => {
-                    const isExpanded = expandedIds.has(section.id);
-                    const sectionTitle = t(section.titleKey);
-                    return (
-                        <View
-                            key={section.id}
-                            style={[
-                                styles.section,
-                                { backgroundColor: bloomTheme.colors.backgroundSecondary, borderColor: bloomTheme.colors.border },
-                                index === 0 && styles.sectionFirst,
-                            ]}
-                        >
-                            <TouchableOpacity
-                                style={styles.sectionHeader}
-                                onPress={() => toggleExpanded(section.id)}
-                                accessibilityRole="button"
-                                accessibilityLabel={sectionTitle}
-                                accessibilityHint={isExpanded ? t('learnMoreUsernames.collapseHint') : t('learnMoreUsernames.expandHint')}
-                                accessibilityState={{ expanded: isExpanded }}
+                <Accordion
+                    type="multiple"
+                    value={expandedIds}
+                    onValueChange={handleAccordionChange}
+                >
+                    {INFO_SECTIONS.map(({ id, titleKey, contentKey, Icon }) => (
+                        <AccordionItem key={id} value={id}>
+                            <AccordionTrigger
+                                icon={
+                                    <View
+                                        className="bg-fill-secondary rounded-radius-12"
+                                        style={styles.iconSquare}
+                                    >
+                                        <Icon
+                                            size="md"
+                                            style={{ color: bloomTheme.colors.primary }}
+                                        />
+                                    </View>
+                                }
                             >
-                                <View style={[styles.sectionIconContainer, { backgroundColor: `${bloomTheme.colors.primary}15` }]}>
-                                    <Ionicons
-                                        name={section.icon}
-                                        size={20}
-                                        color={bloomTheme.colors.primary}
-                                    />
-                                </View>
-                                <Text style={[styles.sectionTitle, { color: bloomTheme.colors.text }]}>
-                                    {sectionTitle}
+                                {t(titleKey)}
+                            </AccordionTrigger>
+                            <AccordionContent>
+                                <Text className="font-sans text-bodyMedium text-text-secondary">
+                                    {t(contentKey)}
                                 </Text>
-                                <Ionicons
-                                    name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                                    size={20}
-                                    color={bloomTheme.colors.textSecondary}
-                                />
-                            </TouchableOpacity>
-                            {isExpanded && (
-                                <View style={[styles.sectionContent, { borderTopColor: bloomTheme.colors.border }]}>
-                                    <Text style={[styles.sectionText, { color: bloomTheme.colors.textSecondary }]}>
-                                        {t(section.contentKey)}
-                                    </Text>
-                                </View>
-                            )}
-                        </View>
-                    );
-                })}
+                            </AccordionContent>
+                        </AccordionItem>
+                    ))}
+                </Accordion>
 
-                <View style={styles.footer}>
-                    <Text style={[styles.footerText, { color: bloomTheme.colors.textSecondary }]}>
-                        {t('learnMoreUsernames.footer')}
-                    </Text>
-                </View>
+                <Text className="font-sans text-caption text-text-tertiary text-center mt-space-16">
+                    {t('learnMoreUsernames.footer')}
+                </Text>
             </ScrollView>
         </View>
     );
 };
 
-const createStyles = () => StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flex: 1,
-    },
-    contentContainer: {
-        padding: 16,
-        paddingBottom: 32,
-    },
-    introSection: {
-        alignItems: 'center',
-        paddingVertical: 24,
-        paddingHorizontal: 16,
-    },
-    introIcon: {
-        width: 64,
-        height: 64,
-        borderRadius: 32,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 16,
-    },
-    introTitle: {
-        fontSize: 24,
-        fontWeight: '700',
-        marginBottom: 8,
-        textAlign: 'center',
-    },
-    introText: {
-        fontSize: 16,
-        lineHeight: 24,
-        textAlign: 'center',
-    },
-    section: {
-        borderRadius: 12,
-        borderWidth: 1,
-        marginBottom: 12,
-        overflow: 'hidden',
-    },
-    sectionFirst: {
-        marginTop: 8,
-    },
-    sectionHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 16,
-    },
-    sectionIconContainer: {
+// Measured layout only (no color): fixed-size square that hosts the leading
+// section icon inside the accordion trigger. Color comes from the
+// `bg-fill-secondary` token class on the View.
+const styles = StyleSheet.create({
+    iconSquare: {
         width: 36,
         height: 36,
-        borderRadius: 18,
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: 12,
-    },
-    sectionTitle: {
-        flex: 1,
-        fontSize: 16,
-        fontWeight: '600',
-        marginRight: 12,
-    },
-    sectionContent: {
-        padding: 16,
-        paddingTop: 12,
-        borderTopWidth: 1,
-    },
-    sectionText: {
-        fontSize: 14,
-        lineHeight: 22,
-    },
-    footer: {
-        marginTop: 16,
-        paddingHorizontal: 16,
-    },
-    footerText: {
-        fontSize: 14,
-        textAlign: 'center',
-        lineHeight: 20,
     },
 });