@oxy.so/services 11.14.0 → 11.15.0

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -1,18 +1,18 @@
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import React, { useCallback, useState } from 'react';
-import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, View } from 'react-native';
+import { FlatList, RefreshControl, StyleSheet, View } from 'react-native';
 import { toast } from '@oxy.so/bloom/toast';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import type { ConnectedApp } from '@oxy.so/core';
 import { logger as loggerUtil } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import { Avatar } from '@oxy.so/bloom/avatar';
-import { Loading } from '@oxy.so/bloom/loading';
 import { Text } from '@oxy.so/bloom/typography';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useConnectedApps } from '../hooks/queries/useAccountQueries';
 import { useRevokeConnectedApp } from '../hooks/mutations/useAccountMutations';
 
@@ -107,8 +107,8 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
     ({ item }: { item: ConnectedApp }) => {
       const isRevoking = revokingAppId === item.applicationId;
       return (
-        <SettingsListGroup>
-          <SettingsListItem
+        <GroupedSection>
+          <GroupedSectionItem
             icon={<Avatar name={item.name} size={APP_ICON_SIZE} />}
             title={item.name}
             description={t('connectedApps.item.granted', {
@@ -119,12 +119,10 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
             destructive
             showChevron={false}
             rightElement={
-              isRevoking ? (
-                <ActivityIndicator color={bloomTheme.colors.error} size="small" />
-              ) : undefined
+              isRevoking ? <SpinnerIcon color={bloomTheme.colors.error} size={16} /> : undefined
             }
           />
-        </SettingsListGroup>
+        </GroupedSection>
       );
     },
     [bloomTheme.colors.error, confirmRevoke, revokingAppId, t],
@@ -132,16 +130,14 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
 
   return (
     <View className="flex-1 bg-bg">
-      {isLoading && !apps ? (
-        <Loading size="lg" color={bloomTheme.colors.primary} />
-      ) : (
+      {
         <FlatList
           data={apps ?? []}
           keyExtractor={(item) => item.applicationId}
           renderItem={renderItem}
           contentContainerClassName="px-screen-margin py-space-16"
           contentContainerStyle={styles.listContent}
-          ListEmptyComponent={renderEmpty}
+          ListEmptyComponent={isLoading ? undefined : renderEmpty}
           refreshControl={
             <RefreshControl
               refreshing={isRefetching}
@@ -152,7 +148,7 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
             />
           }
         />
-      )}
+      }
     </View>
   );
 };

package/src/ui/screens/CreateAccountScreen.tsx

@@ -35,8 +35,8 @@ import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import { Button } from '@oxy.so/bloom/button';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
-import { useOxy } from '../context/OxyContext';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { toast } from '@oxy.so/bloom/toast';
 
 type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
@@ -405,20 +405,20 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
   return (
     <View className="gap-space-16 px-screen-margin pt-space-16 pb-space-32">
       {user?.kind === 'personal' && !parentId ? (
-        <SettingsListGroup title={t('supervision.title')}>
-          <SettingsListItem
+        <GroupedSection title={t('supervision.title')}>
+          <GroupedSectionItem
             title={t('supervision.setupOwn')}
             description={t('supervision.setupOwnDescription')}
             onPress={() => navigate?.('Supervision')}
           />
-        </SettingsListGroup>
+        </GroupedSection>
       ) : null}
       {/* Account type — canonical grouped selection rows (checkmark on the chosen one) */}
-      <SettingsListGroup title={t('accounts.create.typeSection') || 'Account type'}>
+      <GroupedSection title={t('accounts.create.typeSection') || 'Account type'}>
         {KIND_OPTIONS.map((option) => {
           const selected = option.value === kind;
           return (
-            <SettingsListItem
+            <GroupedSectionItem
               key={option.value}
               icon={
                 <Ionicons
@@ -440,7 +440,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
             />
           );
         })}
-      </SettingsListGroup>
+      </GroupedSection>
 
       {kind === 'organization' && !newOrganization ? (
         <OrganizationDirectorySearch
@@ -470,13 +470,13 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
           POSITION, so the primary is legible as "1" rather than being a rule the
           user has to be told. */}
           <View className="gap-space-4">
-            <SettingsListGroup title={t('accounts.create.accountCategory.label')}>
+            <GroupedSection title={t('accounts.create.accountCategory.label')}>
               {ACCOUNT_CATEGORY_OPTIONS.map((option) => {
                 const position = accountCategories.indexOf(option);
                 const selected = position >= 0;
                 const label = accountCategoryLabel(locale, option);
                 return (
-                  <SettingsListItem
+                  <GroupedSectionItem
                     key={option}
                     title={label}
                     disabled={!selected && accountCategories.length >= MAX_ACCOUNT_CATEGORIES}
@@ -493,14 +493,14 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
                   />
                 );
               })}
-            </SettingsListGroup>
+            </GroupedSection>
             <Text className="text-caption font-caption text-text-tertiary px-space-4">
               {t('accounts.create.accountCategory.hint', { max: MAX_ACCOUNT_CATEGORIES })}
             </Text>
           </View>
 
           {/* Details — a grouped section card hosting the form fields */}
-          <SettingsListGroup title={t('accounts.create.detailsSection') || 'Details'}>
+          <GroupedSection title={t('accounts.create.detailsSection') || 'Details'}>
             <View className="p-space-16 gap-space-16">
               {/* Username */}
               <View className="gap-space-8">
@@ -579,7 +579,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
                 </Text>
               </View>
             </View>
-          </SettingsListGroup>
+          </GroupedSection>
 
           {/* Create Button */}
           <Button

package/src/ui/screens/DomainsScreen.tsx

@@ -3,8 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import type { DomainVerificationInstructions, VerifiedDomain } from '@oxy.so/contracts';
 import { Button } from '@oxy.so/bloom/button';
-import { Loading } from '@oxy.so/bloom/loading';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { TextField, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -12,7 +11,7 @@ import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
 import type { BaseScreenProps } from '../types/navigation';
 import { SettingsIcon } from '../components/SettingsIcon';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { queryKeys } from '../hooks/queries/queryKeys';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
@@ -93,14 +92,10 @@ const DomainsScreen: React.FC<BaseScreenProps> = () => {
     if (name && !request.isPending) request.mutate(name);
   };
 
-  if (domains.isPending && isAuthenticated) {
-    return <Loading size="lg" color={bloomTheme.colors.primary} />;
-  }
-
   return (
     <View className="px-screen-margin pb-space-24">
       {pending ? (
-        <SettingsListGroup title={t('domains.instructions.title', { domain: pending.domain })}>
+        <GroupedSection title={t('domains.instructions.title', { domain: pending.domain })}>
           <View className="px-space-16 py-space-12" style={styles.instructions}>
             <Text className="text-text-secondary">{t('domains.instructions.dns')}</Text>
             <Text selectable testID="domains-dns-name">
@@ -135,9 +130,9 @@ const DomainsScreen: React.FC<BaseScreenProps> = () => {
               {t('common.cancel') || 'Cancel'}
             </Button>
           </View>
-        </SettingsListGroup>
+        </GroupedSection>
       ) : (
-        <SettingsListGroup title={t('domains.add.title')}>
+        <GroupedSection title={t('domains.add.title')}>
           <View className="px-space-16 py-space-12" style={styles.instructions}>
             <TextFieldLabel>{t('domains.add.label')}</TextFieldLabel>
             <TextField disabled={request.isPending}>
@@ -165,17 +160,17 @@ const DomainsScreen: React.FC<BaseScreenProps> = () => {
               {t('domains.add.action')}
             </Button>
           </View>
-        </SettingsListGroup>
+        </GroupedSection>
       )}
 
-      <SettingsListGroup title={t('domains.list.title')}>
+      <GroupedSection title={t('domains.list.title')}>
         {(domains.data ?? []).length === 0 ? (
           <Text className="text-text-secondary px-space-16 py-space-12">
             {t('domains.list.empty')}
           </Text>
         ) : (
           (domains.data ?? []).map((item) => (
-            <SettingsListItem
+            <GroupedSectionItem
               key={item.domain}
               icon={<SettingsIcon name="web" color={bloomTheme.colors.success} />}
               title={item.domain}
@@ -189,7 +184,7 @@ const DomainsScreen: React.FC<BaseScreenProps> = () => {
             />
           ))
         )}
-      </SettingsListGroup>
+      </GroupedSection>
     </View>
   );
 };