@oxy.so/services 11.2.0-oxy-one.2 → 11.2.0-oxy-one.4

package/src/ui/screens/AccountMembersScreen.tsx

@@ -1,10 +1,11 @@
-import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '@oxy.so/bloom/segmented-control';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlItemText,
+} from '@oxy.so/bloom/segmented-control';
 import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
-import {
-  View,
-  ActivityIndicator,
-} from 'react-native';
+import { View, ActivityIndicator } from 'react-native';
 import Ionicons from '../icons/Ionicons';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from '@oxy.so/bloom/toast';
@@ -68,9 +69,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
   const permissions = callerMembership?.permissions ?? [];
   // The owner of an account (relationship 'self'/'owner') gets an implicit
   // full-permission set even when no explicit membership row exists.
-  const isImplicitOwner = accountQuery.data
-    ? accountQuery.data.relationship !== 'member'
-    : false;
+  const isImplicitOwner = accountQuery.data ? accountQuery.data.relationship !== 'member' : false;
   const can = useCallback(
     (permission: string): boolean => isImplicitOwner || permissions.includes(permission),
     [isImplicitOwner, permissions],
@@ -109,8 +108,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
     return labels;
   }, [memberProfilesQuery.data]);
   const memberDisplayLabel = useCallback(
-    (memberUserId: string): string =>
-      memberLabelByUserId.get(memberUserId) ?? memberUserId,
+    (memberUserId: string): string => memberLabelByUserId.get(memberUserId) ?? memberUserId,
     [memberLabelByUserId],
   );
   // DIRECT owners only. The list also carries members whose row lives on an
@@ -119,10 +117,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
   // would make a child that has no owner of its own look like it has exactly
   // one, and silently disable removing anybody.
   const ownerCount = useMemo(
-    () =>
-      members.filter(
-        (m) => m.role === 'owner' && (m.source ?? 'direct') === 'direct',
-      ).length,
+    () => members.filter((m) => m.role === 'owner' && (m.source ?? 'direct') === 'direct').length,
     [members],
   );
 
@@ -157,7 +152,9 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
         toast.error(message);
         return;
       }
-      toast.error(errorMessage(error, t('accounts.members.toasts.addFailed') || 'Failed to add member'));
+      toast.error(
+        errorMessage(error, t('accounts.members.toasts.addFailed') || 'Failed to add member'),
+      );
     },
   });
 
@@ -170,7 +167,9 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
       toast.success(t('accounts.members.toasts.roleUpdated') || 'Role updated');
     },
     onError: (error) => {
-      toast.error(errorMessage(error, t('accounts.members.toasts.roleFailed') || 'Failed to update role'));
+      toast.error(
+        errorMessage(error, t('accounts.members.toasts.roleFailed') || 'Failed to update role'),
+      );
     },
   });
 
@@ -182,7 +181,9 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
       toast.success(t('accounts.members.toasts.removed') || 'Member removed');
     },
     onError: (error) => {
-      toast.error(errorMessage(error, t('accounts.members.toasts.removeFailed') || 'Failed to remove member'));
+      toast.error(
+        errorMessage(error, t('accounts.members.toasts.removeFailed') || 'Failed to remove member'),
+      );
     },
   });
 
@@ -194,52 +195,68 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
       toast.success(t('accounts.members.toasts.transferred') || 'Ownership transferred');
     },
     onError: (error) => {
-      toast.error(errorMessage(error, t('accounts.members.toasts.transferFailed') || 'Failed to transfer ownership'));
+      toast.error(
+        errorMessage(
+          error,
+          t('accounts.members.toasts.transferFailed') || 'Failed to transfer ownership',
+        ),
+      );
     },
   });
 
   const handleInvite = useCallback(() => {
     const usernameOrEmail = inviteIdentifier.trim();
     if (!usernameOrEmail) {
-      setInviteError(t('accounts.members.errors.identifierRequired') || 'Enter a username or email to invite');
+      setInviteError(
+        t('accounts.members.errors.identifierRequired') || 'Enter a username or email to invite',
+      );
       return;
     }
     setInviteError(null);
     inviteMutation.mutate({ usernameOrEmail, role: inviteRole });
   }, [inviteIdentifier, inviteRole, inviteMutation, t]);
 
-  const handleChangeRole = useCallback((member: AccountMember, role: AccountRole) => {
-    if (role === member.role || role === 'owner') {
-      return;
-    }
-    updateMutation.mutate({ memberId: member._id, role });
-  }, [updateMutation]);
+  const handleChangeRole = useCallback(
+    (member: AccountMember, role: AccountRole) => {
+      if (role === member.role || role === 'owner') {
+        return;
+      }
+      updateMutation.mutate({ memberId: member._id, role });
+    },
+    [updateMutation],
+  );
 
-  const confirmRemove = useCallback(async (member: AccountMember) => {
-    const confirmed = await surfaces.confirm({
-      title: t('accounts.members.removeConfirm.title') || 'Remove member',
-      description:
-        t('accounts.members.removeConfirm.description')
-        || 'Remove this member from the account? They will lose all access.',
-      confirmLabel: t('accounts.members.actions.remove') || 'Remove',
-      cancelLabel: t('common.cancel') || 'Cancel',
-      destructive: true,
-    });
-    if (confirmed) removeMutation.mutate(member._id);
-  }, [removeMutation, t]);
+  const confirmRemove = useCallback(
+    async (member: AccountMember) => {
+      const confirmed = await surfaces.confirm({
+        title: t('accounts.members.removeConfirm.title') || 'Remove member',
+        description:
+          t('accounts.members.removeConfirm.description') ||
+          'Remove this member from the account? They will lose all access.',
+        confirmLabel: t('accounts.members.actions.remove') || 'Remove',
+        cancelLabel: t('common.cancel') || 'Cancel',
+        destructive: true,
+      });
+      if (confirmed) removeMutation.mutate(member._id);
+    },
+    [removeMutation, t],
+  );
 
-  const confirmTransfer = useCallback(async (member: AccountMember) => {
-    const confirmed = await surfaces.confirm({
-      title: t('accounts.members.transferConfirm.title') || 'Transfer ownership',
-      description:
-        t('accounts.members.transferConfirm.description')
-        || 'Transfer ownership of this account to this member? You will be demoted to admin. This cannot be undone.',
-      confirmLabel: t('accounts.members.actions.transfer') || 'Transfer ownership',
-      cancelLabel: t('common.cancel') || 'Cancel',
-      destructive: true,
-    });
-    if (confirmed) transferMutation.mutate(member.memberUserId);
-  }, [transferMutation, t]);
+  const confirmTransfer = useCallback(
+    async (member: AccountMember) => {
+      const confirmed = await surfaces.confirm({
+        title: t('accounts.members.transferConfirm.title') || 'Transfer ownership',
+        description:
+          t('accounts.members.transferConfirm.description') ||
+          'Transfer ownership of this account to this member? You will be demoted to admin. This cannot be undone.',
+        confirmLabel: t('accounts.members.actions.transfer') || 'Transfer ownership',
+        cancelLabel: t('common.cancel') || 'Cancel',
+        destructive: true,
+      });
+      if (confirmed) transferMutation.mutate(member.memberUserId);
+    },
+    [transferMutation, t],
+  );
 
   if (!id) {
     return (
@@ -254,175 +271,228 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
   }
 
   return (
-      <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
-          {!accountQuery.isLoading && !canRead ? (
-            <Text className="text-body font-body text-text-secondary text-center py-space-24">
-              {t('accounts.members.errors.noPermission') || 'You do not have permission to view members.'}
+    <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
+      {!accountQuery.isLoading && !canRead ? (
+        <Text className="text-body font-body text-text-secondary text-center py-space-24">
+          {t('accounts.members.errors.noPermission') ||
+            'You do not have permission to view members.'}
+        </Text>
+      ) : null}
+
+      {/* Invite form */}
+      {canInvite ? (
+        <View className="gap-space-12 p-space-16 rounded-radius-20 bg-fill">
+          <Text className="text-body font-semibold text-text">
+            {t('accounts.members.invite.title') || 'Add a member'}
+          </Text>
+          <TextField isInvalid={!!inviteError}>
+            <TextFieldInput
+              floatingLabel
+              label={t('accounts.members.invite.identifierLabel') || 'Username or email'}
+              value={inviteIdentifier}
+              onChangeText={(value) => {
+                setInviteIdentifier(value);
+                if (inviteError) setInviteError(null);
+              }}
+              isInvalid={!!inviteError}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoComplete="off"
+            />
+          </TextField>
+          {inviteError ? (
+            <Text
+              className="text-caption font-caption px-space-4"
+              style={{ color: colors.negative }}
+            >
+              {inviteError}
             </Text>
           ) : null}
 
-          {/* Invite form */}
-          {canInvite ? (
-            <View className="gap-space-12 p-space-16 rounded-radius-20 bg-fill">
-              <Text className="text-body font-semibold text-text">
-                {t('accounts.members.invite.title') || 'Add a member'}
-              </Text>
-              <TextField isInvalid={!!inviteError}>
-                <TextFieldInput
-                  floatingLabel
-                  label={t('accounts.members.invite.identifierLabel') || 'Username or email'}
-                  value={inviteIdentifier}
-                  onChangeText={(value) => {
-                    setInviteIdentifier(value);
-                    if (inviteError) setInviteError(null);
-                  }}
-                  isInvalid={!!inviteError}
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  autoComplete="off"
-                />
-              </TextField>
-              {inviteError ? (
-                <Text className="text-caption font-caption px-space-4" style={{ color: colors.negative }}>
-                  {inviteError}
-                </Text>
-              ) : null}
+          <Text className="text-caption font-caption text-text-secondary px-space-4">
+            {t('accounts.members.invite.roleLabel') || 'Role'}
+          </Text>
+          <SegmentedControl
+            type="radio"
+            label={t('accounts.members.invite.roleLabel') || 'Role'}
+            value={inviteRole}
+            onValueChange={setInviteRole}
+            size="sm"
+          >
+            {ASSIGNABLE_ROLES.map((role) => (
+              <SegmentedControlItem key={role} value={role}>
+                <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
+              </SegmentedControlItem>
+            ))}
+          </SegmentedControl>
 
-              <Text className="text-caption font-caption text-text-secondary px-space-4">
-                {t('accounts.members.invite.roleLabel') || 'Role'}
-              </Text>
-              <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'} value={inviteRole} onValueChange={setInviteRole} size="sm">
-                {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
-                  <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
-                </SegmentedControlItem>)}
-              </SegmentedControl>
+          <Button
+            appearance="solid"
+            tone="accent"
+            onPress={handleInvite}
+            disabled={inviteMutation.isPending || !inviteIdentifier.trim()}
+            loading={inviteMutation.isPending}
+            accessibilityLabel={t('accounts.members.invite.submit') || 'Add member'}
+            className="w-full"
+          >
+            {t('accounts.members.invite.submit') || 'Add member'}
+          </Button>
+        </View>
+      ) : null}
 
-              <Button
-                appearance="solid" tone="accent"
-                onPress={handleInvite}
-                disabled={inviteMutation.isPending || !inviteIdentifier.trim()}
-                loading={inviteMutation.isPending}
-                accessibilityLabel={t('accounts.members.invite.submit') || 'Add member'}
-                className="w-full"
-              >
-                {t('accounts.members.invite.submit') || 'Add member'}
-              </Button>
+      {/* Member list */}
+      {canRead ? (
+        <View className="gap-space-8">
+          {membersQuery.isLoading ? (
+            <View className="items-center py-space-24">
+              <ActivityIndicator color={colors.primary} />
             </View>
-          ) : null}
-
-          {/* Member list */}
-          {canRead ? (
-            <View className="gap-space-8">
-              {membersQuery.isLoading ? (
-                <View className="items-center py-space-24">
-                  <ActivityIndicator color={colors.primary} />
-                </View>
-              ) : members.length === 0 ? (
-                <Text className="text-body font-body text-text-secondary text-center py-space-24">
-                  {t('accounts.members.empty') || 'No members yet.'}
-                </Text>
-              ) : (
-                <View className="rounded-radius-20 bg-fill overflow-hidden">
-                  {members.map((member, index) => {
-                    const isOwner = member.role === 'owner';
-                    const isLastOwner = isOwner && ownerCount <= 1;
-                    // An INHERITED entry's row lives on an ancestor account, and
-                    // every member mutation is scoped to rows on the account in
-                    // the path — so offering to edit, remove or promote one would
-                    // be offering a request the server answers 404. The row is
-                    // changed where it lives, on that ancestor's own member
-                    // screen.
-                    const isEditableHere = (member.source ?? 'direct') === 'direct';
-                    const canEditThisRole = canUpdate && isEditableHere && !isOwner;
-                    const canRemoveThisMember =
-                      canRemove && isEditableHere && !isLastOwner && (!isOwner || canTransfer);
-                    const canTransferToThis =
-                      canTransfer && isEditableHere && !isOwner && member.status === 'active';
-                    return (
-                      <View key={member._id}>
-                        {index > 0 ? <Divider color={colors.border} spacing={0} /> : null}
-                        <View className="p-space-16 gap-space-8">
-                          <View className="flex-row items-center gap-space-8">
-                            <Text className="text-body font-bodyBold text-text flex-1" numberOfLines={1}>
-                              {memberDisplayLabel(member.memberUserId)}
+          ) : members.length === 0 ? (
+            <Text className="text-body font-body text-text-secondary text-center py-space-24">
+              {t('accounts.members.empty') || 'No members yet.'}
+            </Text>
+          ) : (
+            <View className="rounded-radius-20 bg-fill overflow-hidden">
+              {members.map((member, index) => {
+                const isOwner = member.role === 'owner';
+                const isLastOwner = isOwner && ownerCount <= 1;
+                // An INHERITED entry's row lives on an ancestor account, and
+                // every member mutation is scoped to rows on the account in
+                // the path — so offering to edit, remove or promote one would
+                // be offering a request the server answers 404. The row is
+                // changed where it lives, on that ancestor's own member
+                // screen.
+                const isEditableHere = (member.source ?? 'direct') === 'direct';
+                const canEditThisRole = canUpdate && isEditableHere && !isOwner;
+                const canRemoveThisMember =
+                  canRemove && isEditableHere && !isLastOwner && (!isOwner || canTransfer);
+                const canTransferToThis =
+                  canTransfer && isEditableHere && !isOwner && member.status === 'active';
+                return (
+                  <View key={member._id}>
+                    {index > 0 ? <Divider color={colors.border} spacing={0} /> : null}
+                    <View className="p-space-16 gap-space-8">
+                      <View className="flex-row items-center gap-space-8">
+                        <Text
+                          className="text-body font-bodyBold text-text flex-1"
+                          numberOfLines={1}
+                        >
+                          {memberDisplayLabel(member.memberUserId)}
+                        </Text>
+                        {isOwner ? (
+                          <View
+                            className="px-space-8 py-space-4 rounded-radius-full"
+                            style={{ backgroundColor: colors.primarySubtle }}
+                          >
+                            <Text
+                              className="text-caption font-semibold"
+                              style={{ color: colors.primary }}
+                            >
+                              {roleLabel('owner')}
                             </Text>
-                            {isOwner ? (
-                              <View className="px-space-8 py-space-4 rounded-radius-full" style={{ backgroundColor: colors.primarySubtle }}>
-                                <Text className="text-caption font-semibold" style={{ color: colors.primary }}>
-                                  {roleLabel('owner')}
-                                </Text>
-                              </View>
-                            ) : null}
-                            {!isEditableHere ? (
-                              <View className="px-space-8 py-space-4 rounded-radius-full" style={{ backgroundColor: colors.card }}>
-                                <Text className="text-caption font-caption text-text-secondary">
-                                  {t('accounts.members.inherited') || 'Inherited'}
-                                </Text>
-                              </View>
-                            ) : null}
-                            {member.status !== 'active' ? (
-                              <View className="px-space-8 py-space-4 rounded-radius-full" style={{ backgroundColor: colors.card }}>
-                                <Text className="text-caption font-caption capitalize text-text-secondary">
-                                  {member.status}
-                                </Text>
-                              </View>
-                            ) : null}
                           </View>
-
-                          {/* Role chips (editable) or static role label */}
-                          {canEditThisRole ? (
-                            <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'}
-                              value={member.role} onValueChange={role => handleChangeRole(member, role)} disabled={updateMutation.isPending} size="sm">
-                              {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
-                                <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
-                              </SegmentedControlItem>)}
-                            </SegmentedControl>
-                          ) : !isOwner ? (
+                        ) : null}
+                        {!isEditableHere ? (
+                          <View
+                            className="px-space-8 py-space-4 rounded-radius-full"
+                            style={{ backgroundColor: colors.card }}
+                          >
                             <Text className="text-caption font-caption text-text-secondary">
-                              {roleLabel(member.role)}
+                              {t('accounts.members.inherited') || 'Inherited'}
                             </Text>
-                          ) : null}
+                          </View>
+                        ) : null}
+                        {member.status !== 'active' ? (
+                          <View
+                            className="px-space-8 py-space-4 rounded-radius-full"
+                            style={{ backgroundColor: colors.card }}
+                          >
+                            <Text className="text-caption font-caption capitalize text-text-secondary">
+                              {member.status}
+                            </Text>
+                          </View>
+                        ) : null}
+                      </View>
+
+                      {/* Role chips (editable) or static role label */}
+                      {canEditThisRole ? (
+                        <SegmentedControl
+                          type="radio"
+                          label={t('accounts.members.invite.roleLabel') || 'Role'}
+                          value={member.role}
+                          onValueChange={(role) => handleChangeRole(member, role)}
+                          disabled={updateMutation.isPending}
+                          size="sm"
+                        >
+                          {ASSIGNABLE_ROLES.map((role) => (
+                            <SegmentedControlItem key={role} value={role}>
+                              <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
+                            </SegmentedControlItem>
+                          ))}
+                        </SegmentedControl>
+                      ) : !isOwner ? (
+                        <Text className="text-caption font-caption text-text-secondary">
+                          {roleLabel(member.role)}
+                        </Text>
+                      ) : null}
 
-                          {/* Actions */}
-                          {(canTransferToThis || canRemoveThisMember) ? (
-                            <View className="flex-row gap-space-16 pt-space-4">
-                              {canTransferToThis ? (
-                                <Button appearance="plain" tone="neutral" size="sm"
-                                  accessibilityRole="button"
-                                  accessibilityLabel={t('accounts.members.actions.transfer') || 'Transfer ownership'}
-                                  onPress={() => confirmTransfer(member)}
-                                  className="flex-row items-center gap-space-4"
-                                >
-                                  <Ionicons name="swap-horizontal-outline" size={16} color={colors.icon} />
-                                  <Text className="text-caption font-semibold text-text-secondary">
-                                    {t('accounts.members.actions.transfer') || 'Transfer ownership'}
-                                  </Text>
-                                </Button>
-                              ) : null}
-                              {canRemoveThisMember ? (
-                                <Button appearance="plain" tone="neutral" size="sm"
-                                  accessibilityRole="button"
-                                  accessibilityLabel={t('accounts.members.actions.remove') || 'Remove member'}
-                                  onPress={() => confirmRemove(member)}
-                                  className="flex-row items-center gap-space-4"
-                                >
-                                  <Ionicons name="trash-outline" size={16} color={colors.error} />
-                                  <Text className="text-caption font-semibold" style={{ color: colors.error }}>
-                                    {t('accounts.members.actions.remove') || 'Remove'}
-                                  </Text>
-                                </Button>
-                              ) : null}
-                            </View>
+                      {/* Actions */}
+                      {canTransferToThis || canRemoveThisMember ? (
+                        <View className="flex-row gap-space-16 pt-space-4">
+                          {canTransferToThis ? (
+                            <Button
+                              appearance="plain"
+                              tone="neutral"
+                              size="sm"
+                              accessibilityRole="button"
+                              accessibilityLabel={
+                                t('accounts.members.actions.transfer') || 'Transfer ownership'
+                              }
+                              onPress={() => confirmTransfer(member)}
+                              className="flex-row items-center gap-space-4"
+                            >
+                              <Ionicons
+                                name="swap-horizontal-outline"
+                                size={16}
+                                color={colors.icon}
+                              />
+                              <Text className="text-caption font-semibold text-text-secondary">
+                                {t('accounts.members.actions.transfer') || 'Transfer ownership'}
+                              </Text>
+                            </Button>
+                          ) : null}
+                          {canRemoveThisMember ? (
+                            <Button
+                              appearance="plain"
+                              tone="neutral"
+                              size="sm"
+                              accessibilityRole="button"
+                              accessibilityLabel={
+                                t('accounts.members.actions.remove') || 'Remove member'
+                              }
+                              onPress={() => confirmRemove(member)}
+                              className="flex-row items-center gap-space-4"
+                            >
+                              <Ionicons name="trash-outline" size={16} color={colors.error} />
+                              <Text
+                                className="text-caption font-semibold"
+                                style={{ color: colors.error }}
+                              >
+                                {t('accounts.members.actions.remove') || 'Remove'}
+                              </Text>
+                            </Button>
                           ) : null}
                         </View>
-                      </View>
-                    );
-                  })}
-                </View>
-              )}
+                      ) : null}
+                    </View>
+                  </View>
+                );
+              })}
             </View>
-          ) : null}
-      </View>
+          )}
+        </View>
+      ) : null}
+    </View>
   );
 };
 

package/src/ui/screens/AccountSecurityPanelScreen.tsx

@@ -12,7 +12,9 @@ import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 /** Bloom's large-title gutter (`screen-margin`), as the account dialog uses. */
 const SCREEN_MARGIN = 20;
 
-export const AccountSecurityPanelFrame: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const AccountSecurityPanelFrame: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   useSurfaceHeader({});
   return <View style={styles.body}>{children}</View>;
 };