@oxyhq/services 5.24.0 → 5.26.0

package/src/ui/navigation/routes.ts

@@ -6,7 +6,6 @@ import type { BaseScreenProps } from '../types/navigation';
 // before OxyContext is fully initialized
 
 // Define all available route names
-// Note: SignIn has been replaced with OxyAuth for cross-app authentication via Oxy Accounts
 export type RouteName =
     | 'OxyAuth'          // Sign in with Oxy (QR code / deep link to Accounts app)
     | 'AccountOverview'
@@ -31,23 +30,21 @@ export type RouteName =
     | 'UserLinks'
     | 'HistoryView'
     | 'SavesCollections'
-    | 'EditProfile' // For backward compatibility, maps to AccountSettings
     | 'EditProfileField' // Dedicated screen for editing a single profile field
+    | 'LearnMoreUsernames' // Informational screen about usernames
     | 'KarmaCenter'
     | 'KarmaLeaderboard'
     | 'KarmaRewards'
     | 'KarmaRules'
     | 'AboutKarma'
     | 'KarmaFAQ'
-    // Legacy aliases for backward compatibility
-    | 'SignIn';  // Maps to OxyAuth
+    | 'FollowersList'  // List of user's followers
+    | 'FollowingList'; // List of users being followed
 
 // Lazy screen loaders - functions that return screen components on-demand
 // This breaks the require cycle by deferring imports until screens are actually needed
 const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     OxyAuth: () => require('../screens/OxyAuthScreen').default,
-    // Legacy alias - SignIn now maps to OxyAuth
-    SignIn: () => require('../screens/OxyAuthScreen').default,
     AccountOverview: () => require('../screens/AccountOverviewScreen').default,
     AccountSettings: () => require('../screens/AccountSettingsScreen').default,
     AccountCenter: () => require('../screens/AccountCenterScreen').default,
@@ -70,10 +67,9 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     UserLinks: () => require('../screens/UserLinksScreen').default,
     HistoryView: () => require('../screens/HistoryViewScreen').default,
     SavesCollections: () => require('../screens/SavesCollectionsScreen').default,
-    // Backward compatibility - EditProfile maps to AccountSettings
-    EditProfile: () => require('../screens/AccountSettingsScreen').default,
-    // Dedicated screen for editing a single profile field
     EditProfileField: () => require('../screens/EditProfileFieldScreen').default,
+    // Informational screens
+    LearnMoreUsernames: () => require('../screens/LearnMoreUsernamesScreen').default,
     // Karma screens
     KarmaCenter: () => require('../screens/karma/KarmaCenterScreen').default,
     KarmaLeaderboard: () => require('../screens/karma/KarmaLeaderboardScreen').default,
@@ -81,6 +77,9 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     KarmaRules: () => require('../screens/karma/KarmaRulesScreen').default,
     AboutKarma: () => require('../screens/karma/KarmaAboutScreen').default,
     KarmaFAQ: () => require('../screens/karma/KarmaFAQScreen').default,
+    // User list screens (followers/following)
+    FollowersList: () => require('../screens/FollowersListScreen').default,
+    FollowingList: () => require('../screens/FollowingListScreen').default,
 };
 
 // Cache loaded components to avoid re-requiring

package/src/ui/screens/AccountCenterScreen.tsx

@@ -23,7 +23,7 @@ import GroupedSection from '../components/GroupedSection';
 import GroupedItem from '../components/GroupedItem';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
@@ -92,7 +92,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 <ProfileCard
                     user={user}
                     theme={normalizedTheme}
-                    onEditPress={() => navigate?.('EditProfile', { activeTab: 'profile' })}
+                    onEditPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     onClosePress={onClose}
                     showCloseButton={!!onClose}
                 />
@@ -105,7 +105,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                         theme={normalizedTheme}
                         actions={useMemo(() => [
                             { id: 'overview', icon: 'account-circle', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate?.('AccountOverview') },
-                            { id: 'settings', icon: 'cog', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('EditProfile') },
+                            { id: 'settings', icon: 'cog', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('AccountSettings') },
                             { id: 'sessions', icon: 'shield-check', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate?.('SessionManagement') },
                             { id: 'premium', icon: 'star', iconColor: colors.iconPayments, title: t('accountCenter.quickActions.premium') || 'Premium', onPress: () => navigate?.('PremiumSubscription') },
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate?.('PaymentGateway') }] : []),
@@ -133,7 +133,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: colors.iconData,
                                 title: t('accountCenter.items.editProfile.title') || 'Edit Profile',
                                 subtitle: t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences',
-                                onPress: () => navigate?.('EditProfile'),
+                                onPress: () => navigate?.('AccountSettings'),
                             },
                             {
                                 id: 'sessions',
@@ -191,7 +191,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('SignIn'),
+                                    onPress: () => navigate?.('OxyAuth'),
                                 },
                             ], [sessions.length, navigate, t, colors])}
 
@@ -210,7 +210,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('SignIn'),
+                                    onPress: () => navigate?.('OxyAuth'),
                                 },
                             ], [navigate, t, colors])}
 
@@ -228,7 +228,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: colors.iconStorage,
                                 title: t('accountCenter.items.notifications.title') || 'Notifications',
                                 subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings',
-                                onPress: () => navigate?.('EditProfile', { activeTab: 'notifications' }),
+                                onPress: () => navigate?.('AccountSettings', { activeTab: 'notifications' }),
                             }] : []),
                             {
                                 id: 'language',

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -23,8 +23,8 @@ import { Ionicons } from '@expo/vector-icons';
 import { Section, GroupedSection, GroupedItem } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { getDisplayName, getShortDisplayName } from '../utils/user-utils';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { getDisplayName, getShortDisplayName } from '../utils/userUtils';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 import { useUsersBySessions } from '../hooks/queries/useAccountQueries';
@@ -389,7 +389,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: displayName,
                                 subtitle: user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...'),
-                                onPress: () => navigate?.('EditProfile', { activeTab: 'profile' }),
+                                onPress: () => navigate?.('AccountSettings', { activeTab: 'profile' }),
                             },
                         ]}
                     />
@@ -405,7 +405,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.editProfile.title'),
                                 subtitle: t('accountOverview.items.editProfile.subtitle'),
-                                onPress: () => navigate?.('EditProfile', { activeTab: 'profile' }),
+                                onPress: () => navigate?.('AccountSettings', { activeTab: 'profile' }),
                             },
                             {
                                 id: 'security-privacy',
@@ -413,7 +413,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.security.title'),
                                 subtitle: t('accountOverview.items.security.subtitle'),
-                                onPress: () => navigate?.('EditProfile', { activeTab: 'password' }),
+                                onPress: () => navigate?.('AccountSettings', { activeTab: 'password' }),
                             },
                             {
                                 id: 'notifications',
@@ -421,7 +421,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: baseThemeStyles.colors.iconStorage,
                                 title: t('accountOverview.items.notifications.title'),
                                 subtitle: t('accountOverview.items.notifications.subtitle'),
-                                onPress: () => navigate?.('EditProfile', { activeTab: 'notifications' }),
+                                onPress: () => navigate?.('AccountSettings', { activeTab: 'notifications' }),
                             },
                             {
                                 id: 'premium-subscription',

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -17,11 +17,11 @@ import { useAuthStore } from '../stores/authStore';
 import { GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import type { ProfileFieldType } from './EditProfileFieldScreen';
-import { getDisplayName } from '../utils/user-utils';
+import { getDisplayName } from '../utils/userUtils';
 import { useOxy } from '../context/OxyContext';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUploadAvatar } from '../hooks/mutations/useAccountMutations';

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -24,7 +24,7 @@ import Avatar from '../components/Avatar';
 import { Header, GroupedSection, LoadingState } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 
@@ -460,7 +460,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                         iconColor: '#007AFF',
                                         title: 'Add Another Account',
                                         subtitle: 'Sign in with a different account',
-                                        onPress: () => navigate?.('SignIn'),
+                                        onPress: () => navigate?.('OxyAuth'),
                                     },
                                     {
                                         id: 'device-management',
@@ -561,7 +561,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                             iconColor: '#ccc',
                                             title: t('accountSwitcher.empty.title') || 'No saved accounts',
                                             subtitle: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
-                                            onPress: () => navigate?.('SignIn'),
+                                            onPress: () => navigate?.('OxyAuth'),
                                             customContent: (
                                                 <View style={styles.emptyStateContainer}>
                                                     <OxyIcon name="person-outline" size={48} color="#ccc" />
@@ -571,7 +571,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                     </Text>
                                                     <TouchableOpacity
                                                         style={styles.addAccountButton}
-                                                        onPress={() => navigate?.('SignIn')}
+                                                        onPress={() => navigate?.('OxyAuth')}
                                                     >
                                                         <Text style={styles.addAccountButtonText}>{t('accountCenter.sections.addAccount') || 'Add Account'}</Text>
                                                     </TouchableOpacity>

package/src/ui/screens/AppInfoScreen.tsx

@@ -23,7 +23,7 @@ import { Ionicons } from '@expo/vector-icons';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { Section, GroupedSection } from '../components';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { useOxy } from '../context/OxyContext';
 
 

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -14,7 +14,7 @@ import {
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Header } from '../components';
 import { useI18n } from '../hooks/useI18n';

package/src/ui/screens/FileManagementScreen.tsx

@@ -38,7 +38,7 @@ import Header from '../components/Header';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
 import { GroupedSection } from '../components';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 import { useUploadFile } from '../hooks/mutations/useAccountMutations';

package/src/ui/screens/FollowersListScreen.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+import UserListScreen from './UserListScreen';
+
+interface FollowersListScreenProps extends BaseScreenProps {
+  userId: string;
+  initialCount?: number;
+}
+
+const FollowersListScreen: React.FC<FollowersListScreenProps> = (props) => {
+  return <UserListScreen {...props} mode="followers" />;
+};
+
+export default FollowersListScreen;

package/src/ui/screens/FollowingListScreen.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+import UserListScreen from './UserListScreen';
+
+interface FollowingListScreenProps extends BaseScreenProps {
+  userId: string;
+  initialCount?: number;
+}
+
+const FollowingListScreen: React.FC<FollowingListScreenProps> = (props) => {
+  return <UserListScreen {...props} mode="following" />;
+};
+
+export default FollowingListScreen;

package/src/ui/screens/HelpSupportScreen.tsx

@@ -12,7 +12,7 @@ import { toast } from '../../lib/sonner';
 import { Header, Section, GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     onClose,

package/src/ui/screens/HistoryViewScreen.tsx

@@ -10,7 +10,7 @@ import { confirmAction } from '../utils/confirmAction';
 import { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { useOxy } from '../context/OxyContext';
 
 interface HistoryItem {

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';

package/src/ui/screens/LearnMoreUsernamesScreen.tsx

@@ -0,0 +1,231 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    ScrollView,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import type { BaseScreenProps } from '../types/navigation';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+
+interface InfoSection {
+    id: string;
+    title: string;
+    content: string;
+    icon: string;
+}
+
+const INFO_SECTIONS: InfoSection[] = [
+    {
+        id: 'what',
+        title: 'What is a username?',
+        content: 'Your username is your unique identifier on Oxy. It\'s how other people find and mention you. Think of it like your handle on social media - it\'s public and represents your identity across all Oxy apps.',
+        icon: 'at-outline',
+    },
+    {
+        id: 'rules',
+        title: 'Username rules',
+        content: 'Usernames can only contain lowercase letters (a-z) and numbers (0-9). They must be at least 4 characters long. Special characters, spaces, and uppercase letters are not allowed to keep usernames simple and easy to remember.',
+        icon: 'list-outline',
+    },
+    {
+        id: 'unique',
+        title: 'Why must it be unique?',
+        content: 'Each username can only belong to one person. This ensures that when someone searches for you or mentions you, they find the right person. It also prevents confusion and impersonation.',
+        icon: 'finger-print-outline',
+    },
+    {
+        id: 'change',
+        title: 'Can I change it later?',
+        content: 'Yes! You can change your username anytime in your account settings. Keep in mind that your old username will become available for others to use, and people who knew your old username will need to find you with the new one.',
+        icon: 'refresh-outline',
+    },
+    {
+        id: 'tips',
+        title: 'Tips for choosing a username',
+        content: 'Choose something memorable and easy to spell. Avoid using personal information like your birth year or phone number. Consider using a name that represents you across all contexts - professional and personal.',
+        icon: 'bulb-outline',
+    },
+];
+
+const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
+    theme,
+}) => {
+    const themeStyles = useThemeStyles(theme || 'light');
+    const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(['what'])); // Start with first section expanded
+
+    const toggleExpanded = useCallback((id: string) => {
+        setExpandedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+
+    const styles = useMemo(() => createStyles(themeStyles), [themeStyles]);
+
+    return (
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <ScrollView
+                style={styles.content}
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={styles.contentContainer}
+            >
+                <View style={styles.introSection}>
+                    <View style={[styles.introIcon, { backgroundColor: themeStyles.primaryColor + '15' }]}>
+                        <Ionicons name="at" size={32} color={themeStyles.primaryColor} />
+                    </View>
+                    <Text style={[styles.introTitle, { color: themeStyles.textColor }]}>
+                        Your unique identity
+                    </Text>
+                    <Text style={[styles.introText, { color: themeStyles.mutedTextColor }]}>
+                        Your username is how people find and recognize you across all Oxy apps.
+                    </Text>
+                </View>
+
+                {INFO_SECTIONS.map((section, index) => {
+                    const isExpanded = expandedIds.has(section.id);
+                    return (
+                        <View
+                            key={section.id}
+                            style={[
+                                styles.section,
+                                { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor },
+                                index === 0 && styles.sectionFirst,
+                            ]}
+                        >
+                            <TouchableOpacity
+                                style={styles.sectionHeader}
+                                onPress={() => toggleExpanded(section.id)}
+                                accessibilityRole="button"
+                                accessibilityLabel={section.title}
+                                accessibilityHint={isExpanded ? 'Collapse section' : 'Expand section'}
+                                accessibilityState={{ expanded: isExpanded }}
+                            >
+                                <View style={[styles.sectionIconContainer, { backgroundColor: themeStyles.primaryColor + '15' }]}>
+                                    <Ionicons
+                                        name={section.icon}
+                                        size={20}
+                                        color={themeStyles.primaryColor}
+                                    />
+                                </View>
+                                <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>
+                                    {section.title}
+                                </Text>
+                                <Ionicons
+                                    name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                                    size={20}
+                                    color={themeStyles.mutedTextColor}
+                                />
+                            </TouchableOpacity>
+                            {isExpanded && (
+                                <View style={[styles.sectionContent, { borderTopColor: themeStyles.borderColor }]}>
+                                    <Text style={[styles.sectionText, { color: themeStyles.mutedTextColor }]}>
+                                        {section.content}
+                                    </Text>
+                                </View>
+                            )}
+                        </View>
+                    );
+                })}
+
+                <View style={styles.footer}>
+                    <Text style={[styles.footerText, { color: themeStyles.mutedTextColor }]}>
+                        Need more help? Visit our Help Center for additional information.
+                    </Text>
+                </View>
+            </ScrollView>
+        </View>
+    );
+};
+
+const createStyles = (themeStyles: ReturnType<typeof useThemeStyles>) => 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: {
+        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,
+    },
+});
+
+export default LearnMoreUsernamesScreen;

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -10,7 +10,7 @@ import { toast } from '../../lib/sonner';
 import { Header, Section, GroupedSection, LoadingState } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
     onClose,

package/src/ui/screens/OxyAuthScreen.tsx

@@ -28,6 +28,9 @@ import { useThemeColors } from '../styles';
 import { useOxy } from '../context/OxyContext';
 import QRCode from 'react-native-qrcode-svg';
 import OxyLogo from '../components/OxyLogo';
+import { createDebugLogger } from '../../shared/utils/debugUtils';
+
+const debug = createDebugLogger('OxyAuthScreen');
 
 const OXY_ACCOUNTS_WEB_URL = 'https://accounts.oxy.so';
 const OXY_AUTH_WEB_URL = 'https://auth.oxy.so';
@@ -150,9 +153,7 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
         }
       }
     } catch (err) {
-      if (__DEV__) {
-        console.error('Error completing auth:', err);
-      }
+      debug.error('Error completing auth:', err);
       setError('Authorization successful but failed to complete sign in. Please try again.');
       isProcessingRef.current = false;
     }
@@ -173,24 +174,18 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
     socketRef.current = socket;
 
     socket.on('connect', () => {
-      if (__DEV__) {
-        console.log('Auth socket connected');
-      }
+      debug.log('Auth socket connected');
       // Join the room for this session token
       socket.emit('join', sessionToken);
       setConnectionType('socket');
     });
 
     socket.on('joined', () => {
-      if (__DEV__) {
-        console.log('Joined auth session room');
-      }
+      debug.log('Joined auth session room');
     });
 
     socket.on('auth_update', (payload: AuthUpdatePayload) => {
-      if (__DEV__) {
-        console.log('Auth update received:', payload);
-      }
+      debug.log('Auth update received:', payload);
 
       if (payload.status === 'authorized' && payload.sessionId) {
         cleanup();
@@ -205,18 +200,14 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
     });
 
     socket.on('connect_error', (err) => {
-      if (__DEV__) {
-        console.log('Socket connection error, falling back to polling:', err.message);
-      }
+      debug.log('Socket connection error, falling back to polling:', err.message);
       // Fall back to polling if socket fails
       socket.disconnect();
       startPolling(sessionToken);
     });
 
     socket.on('disconnect', () => {
-      if (__DEV__) {
-        console.log('Auth socket disconnected');
-      }
+      debug.log('Auth socket disconnected');
     });
   }, [oxyServices, handleAuthSuccess]);
 
@@ -247,9 +238,7 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
         }
       } catch (err) {
         // Silent fail for polling - will retry
-        if (__DEV__) {
-          console.log('Auth polling error:', err);
-        }
+        debug.log('Auth polling error:', err);
       }
     }, POLLING_INTERVAL_MS);
   }, [oxyServices, handleAuthSuccess]);

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -21,7 +21,7 @@ import Avatar from '../components/Avatar';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
 import { normalizeTheme } from '../utils/themeUtils';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { useOxy } from '../context/OxyContext';
 
 interface SubscriptionPlan {