@oxyhq/services 11.0.0 → 11.1.0

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, View } from 'react-native';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -7,15 +7,15 @@ import type { AuthorizedApp } from '@oxyhq/core';
 import { logger as loggerUtil } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
+import Avatar from '../components/Avatar';
 import EmptyState from '../components/EmptyState';
-import { SettingsIcon } from '../components/SettingsIcon';
+import LoadingState from '../components/LoadingState';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 import { useAuthorizedApps } from '../hooks/queries/useAccountQueries';
 import { useRevokeAuthorizedApp } from '../hooks/mutations/useAccountMutations';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { Colors } from '../constants/theme';
-import { normalizeColorScheme, normalizeTheme } from '@oxyhq/core';
+
+const APP_ICON_SIZE = 40;
 
 /**
  * Format an ISO-8601 timestamp as a human-readable relative time. Mirrors the
@@ -46,14 +46,9 @@ const formatRelative = (iso: string): string => {
  * :origin`. Each revoke invalidates the connected-apps query so the list
  * refreshes immediately.
  */
-const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }) => {
+const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     const bloomTheme = useTheme();
     const { t } = useI18n();
-    const colorScheme = useColorScheme();
-    const palette = useMemo(
-        () => Colors[normalizeColorScheme(colorScheme, normalizeTheme(theme))],
-        [colorScheme, theme],
-    );
     const { isAuthenticated } = useOxy();
     const {
         data: apps,
@@ -104,7 +99,7 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack
 
     const renderEmpty = useCallback(
         () => (
-            <View style={styles.emptyContainer}>
+            <View className="flex-1 items-center justify-center py-space-32">
                 <EmptyState
                     message={
                         t('connectedApps.empty.subtitle')
@@ -123,7 +118,7 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack
             return (
                 <SettingsListGroup>
                     <SettingsListItem
-                        icon={<SettingsIcon name="apps" color={palette.iconData} />}
+                        icon={<Avatar name={item.name} size={APP_ICON_SIZE} />}
                         title={item.name}
                         description={
                             t('connectedApps.item.lastUsed', {
@@ -147,11 +142,11 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack
                 </SettingsListGroup>
             );
         },
-        [bloomTheme.colors.error, confirmRevoke, palette.iconData, revokingOrigin, t],
+        [bloomTheme.colors.error, confirmRevoke, revokingOrigin, t],
     );
 
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
             <Header
                 title={t('connectedApps.title') || 'Connected apps'}
                 onBack={goBack || onClose}
@@ -159,14 +154,13 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack
                 elevation="subtle"
             />
             {isLoading && !apps ? (
-                <View style={styles.center}>
-                    <ActivityIndicator color={bloomTheme.colors.primary} size="large" />
-                </View>
+                <LoadingState color={bloomTheme.colors.primary} />
             ) : (
                 <FlatList
                     data={apps ?? []}
                     keyExtractor={(item) => item.origin}
                     renderItem={renderItem}
+                    contentContainerClassName="px-screen-margin py-space-16"
                     contentContainerStyle={styles.listContent}
                     ListEmptyComponent={renderEmpty}
                     refreshControl={
@@ -200,26 +194,14 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack
     );
 };
 
+// Layout-only style: `flexGrow` lets the FlatList content fill the viewport so
+// the empty state centers vertically. Not expressible as a Bloom token class —
+// all colors, spacing, radius, and typography live on token classes + Bloom
+// components.
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    center: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
     listContent: {
-        paddingHorizontal: 16,
-        paddingVertical: 16,
         flexGrow: 1,
     },
-    emptyContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 48,
-    },
 });
 
 export default React.memo(ConnectedAppsScreen);

package/src/ui/screens/CreateManagedAccountScreen.tsx

@@ -2,27 +2,29 @@ import type React from 'react';
 import { useState, useCallback, useRef, useEffect } from 'react';
 import {
   View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
+  Platform,
   ActivityIndicator,
   ScrollView,
-  Platform,
   KeyboardAvoidingView,
 } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { H1, Text } from '@oxyhq/bloom/typography';
+import { Button } from '@oxyhq/bloom/button';
+import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { useOxy } from '../context/OxyContext';
 import { toast } from '@oxyhq/bloom';
-import { screenContentStyle } from '../constants/spacing';
 
 type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
 
 const USERNAME_REGEX = /^[a-zA-Z0-9_-]{3,30}$/;
 const DEBOUNCE_MS = 400;
+const USERNAME_MAX = 30;
+const DISPLAY_NAME_MAX = 50;
+const BIO_MAX = 160;
 
 const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
   onClose,
@@ -123,18 +125,16 @@ const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
     }
   }, [canCreate, username, displayName, bio, createManagedAccount, setActingAs, onClose]);
 
-  const getStatusColor = (): string => {
-    switch (usernameStatus) {
-      case 'available': return bloomTheme.colors.success;
-      case 'taken':
-      case 'invalid': return bloomTheme.colors.error;
-      case 'checking': return bloomTheme.colors.primary;
-      default: return 'transparent';
-    }
-  };
+  // Status icon + color shown alongside the username field message
+  const usernameIsInvalid = usernameStatus === 'taken' || usernameStatus === 'invalid';
+  const statusColor = usernameStatus === 'available'
+    ? bloomTheme.colors.success
+    : usernameIsInvalid
+      ? bloomTheme.colors.negative
+      : bloomTheme.colors.textSecondary;
 
   return (
-    <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+    <View className="flex-1 bg-bg">
       <Header
         title="Create Identity"
         onBack={goBack}
@@ -145,183 +145,107 @@ const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
       />
 
       <KeyboardAvoidingView
-        style={styles.flex}
+        className="flex-1"
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
       >
         <ScrollView
-          style={styles.flex}
-          contentContainerStyle={screenContentStyle}
+          className="flex-1"
+          contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
+          showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
-          <Text style={[styles.description, { color: bloomTheme.colors.text }]}>
-            Create a managed identity that you control. It will have its own profile, posts, and interactions.
-          </Text>
+          {/* Big Title */}
+          <View className="gap-space-8">
+            <H1 className="text-headerBold font-headerBold text-text">
+              Create Identity
+            </H1>
+            <Text className="text-body font-body text-text-secondary">
+              Create a managed identity that you control. It will have its own profile, posts, and interactions.
+            </Text>
+          </View>
 
-          {/* Username */}
-          <View style={styles.fieldGroup}>
-            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Username</Text>
-            <View style={[
-              styles.inputContainer,
-              { borderColor: usernameStatus !== 'idle' ? getStatusColor() : bloomTheme.colors.border },
-            ]}>
-              <Text style={[styles.inputPrefix, { color: bloomTheme.colors.text + '80' }]}>@</Text>
-              <TextInput
-                style={[styles.input, { color: bloomTheme.colors.text }]}
-                value={username}
-                onChangeText={handleUsernameChange}
-                placeholder="username"
-                placeholderTextColor={bloomTheme.colors.text + '40'}
-                autoCapitalize="none"
-                autoCorrect={false}
-                autoComplete="off"
-                maxLength={30}
-              />
-              {usernameStatus === 'checking' && (
-                <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
-              )}
-              {usernameStatus === 'available' && (
-                <Text style={[styles.statusIcon, { color: bloomTheme.colors.success }]}>OK</Text>
-              )}
+          {/* Form Content */}
+          <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
+            {/* Username */}
+            <View className="gap-space-8">
+              <TextField isInvalid={usernameIsInvalid}>
+                <TextFieldInput
+                  floatingLabel
+                  label="Username"
+                  value={username}
+                  onChangeText={handleUsernameChange}
+                  isInvalid={usernameIsInvalid}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  autoComplete="off"
+                  maxLength={USERNAME_MAX}
+                />
+              </TextField>
+              {(usernameStatus === 'checking' || usernameMessage) ? (
+                <View className="flex-row items-center gap-space-4 px-space-4">
+                  {usernameStatus === 'checking' ? (
+                    <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
+                  ) : usernameStatus === 'available' ? (
+                    <Ionicons name="checkmark-circle" size={16} color={bloomTheme.colors.success} />
+                  ) : usernameIsInvalid ? (
+                    <Ionicons name="alert-circle" size={16} color={bloomTheme.colors.negative} />
+                  ) : null}
+                  {usernameMessage ? (
+                    <Text className="text-caption font-caption" style={{ color: statusColor }}>
+                      {usernameMessage}
+                    </Text>
+                  ) : null}
+                </View>
+              ) : null}
             </View>
-            {usernameMessage ? (
-              <Text style={[styles.statusMessage, { color: getStatusColor() }]}>
-                {usernameMessage}
-              </Text>
-            ) : null}
-          </View>
 
-          {/* Display Name */}
-          <View style={styles.fieldGroup}>
-            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Display Name</Text>
-            <View style={[styles.inputContainer, { borderColor: bloomTheme.colors.border }]}>
-              <TextInput
-                style={[styles.input, { color: bloomTheme.colors.text }]}
+            {/* Display Name */}
+            <TextField>
+              <TextFieldInput
+                floatingLabel
+                label="Display Name"
                 value={displayName}
                 onChangeText={setDisplayName}
-                placeholder="Display name"
-                placeholderTextColor={bloomTheme.colors.text + '40'}
-                maxLength={50}
-              />
-            </View>
-          </View>
-
-          {/* Bio */}
-          <View style={styles.fieldGroup}>
-            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Bio (optional)</Text>
-            <View style={[styles.inputContainer, styles.bioContainer, { borderColor: bloomTheme.colors.border }]}>
-              <TextInput
-                style={[styles.input, styles.bioInput, { color: bloomTheme.colors.text }]}
-                value={bio}
-                onChangeText={setBio}
-                placeholder="Tell people about this identity"
-                placeholderTextColor={bloomTheme.colors.text + '40'}
-                maxLength={160}
-                multiline
-                numberOfLines={3}
-                textAlignVertical="top"
+                maxLength={DISPLAY_NAME_MAX}
               />
+            </TextField>
+
+            {/* Bio */}
+            <View className="gap-space-4">
+              <TextField>
+                <TextFieldInput
+                  floatingLabel
+                  label="Bio (optional)"
+                  value={bio}
+                  onChangeText={setBio}
+                  maxLength={BIO_MAX}
+                  multiline
+                  numberOfLines={3}
+                  textAlignVertical="top"
+                />
+              </TextField>
+              <Text className="text-caption font-caption text-text-tertiary px-space-4 text-right">
+                {bio.length}/{BIO_MAX}
+              </Text>
             </View>
-            <Text style={[styles.charCount, { color: bloomTheme.colors.text + '60' }]}>
-              {bio.length}/160
-            </Text>
           </View>
 
           {/* Create Button */}
-          <TouchableOpacity
-            style={[
-              styles.createButton,
-              { backgroundColor: bloomTheme.colors.primary },
-              !canCreate && styles.createButtonDisabled,
-            ]}
+          <Button
+            variant="primary"
             onPress={handleCreate}
             disabled={!canCreate}
-            activeOpacity={0.7}
+            loading={isCreating}
+            accessibilityLabel="Create Identity"
+            className="w-full"
           >
-            {isCreating ? (
-              <ActivityIndicator size="small" color={bloomTheme.colors.negativeForeground} />
-            ) : (
-              <Text style={[styles.createButtonText, { color: bloomTheme.colors.negativeForeground }]}>Create Identity</Text>
-            )}
-          </TouchableOpacity>
+            Create Identity
+          </Button>
         </ScrollView>
       </KeyboardAvoidingView>
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  flex: {
-    flex: 1,
-  },
-  description: {
-    fontSize: 15,
-    lineHeight: 22,
-    marginBottom: 24,
-  },
-  fieldGroup: {
-    marginBottom: 20,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: Platform.OS === 'web' ? '600' : undefined,
-    marginBottom: 8,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 14,
-    height: 48,
-  },
-  inputPrefix: {
-    fontSize: 16,
-    marginRight: 2,
-  },
-  input: {
-    flex: 1,
-    fontSize: 16,
-    paddingVertical: 0,
-  },
-  bioContainer: {
-    height: 88,
-    alignItems: 'flex-start',
-    paddingVertical: 12,
-  },
-  bioInput: {
-    height: 64,
-  },
-  statusIcon: {
-    fontSize: 13,
-    fontWeight: Platform.OS === 'web' ? '600' : undefined,
-  },
-  statusMessage: {
-    fontSize: 13,
-    marginTop: 6,
-  },
-  charCount: {
-    fontSize: 12,
-    textAlign: 'right',
-    marginTop: 4,
-  },
-  createButton: {
-    height: 50,
-    borderRadius: 25,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 12,
-  },
-  createButtonDisabled: {
-    opacity: 0.5,
-  },
-  createButtonText: {
-    fontSize: 16,
-    fontWeight: Platform.OS === 'web' ? '600' : undefined,
-  },
-});
-
 export default CreateManagedAccountScreen;