@oxy.so/services 11.13.0 → 11.15.0

package/lib/commonjs/ui/screens/ManageAccountScreen.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _OrganizationClaimReview = require("../components/organizations/OrganizationClaimReview.js");
 var _OrganizationClaims = require("../components/organizations/OrganizationClaims.js");
+var _loading = require("@oxy.so/bloom/loading");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _Ionicons = _interopRequireDefault(require("../icons/Ionicons.js"));
@@ -13,13 +14,13 @@ var _toast = require("@oxy.so/bloom/toast");
 var _surfaces = require("@oxy.so/bloom/surfaces");
 var _theme = require("@oxy.so/bloom/theme");
 var _typography = require("@oxy.so/bloom/typography");
-var _settingsList = require("@oxy.so/bloom/settings-list");
+var _groupedSection = require("@oxy.so/bloom/grouped-section");
 var _core = require("@oxy.so/core");
 var _ProfileSummaryCard = _interopRequireDefault(require("../components/ProfileSummaryCard.js"));
 var _SettingsIcon = require("../components/SettingsIcon.js");
 var _DeleteAccountModal = require("../components/modals/DeleteAccountModal.js");
 var _accountDeletionHandoff = require("../utils/accountDeletionHandoff.js");
-var _OxyContext = require("../context/OxyContext.js");
+var _oxyRuntimeContext = require("../context/oxyRuntimeContext.js");
 var _useI18n = require("../hooks/useI18n.js");
 var _useSurfaceHeader = require("../hooks/useSurfaceHeader.js");
 var _isWebBrowser = require("../utils/isWebBrowser.js");
@@ -29,7 +30,6 @@ var _useServicesQueries = require("../hooks/queries/useServicesQueries.js");
 var _deviceSessionTitle = require("../utils/deviceSessionTitle.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AVATAR_SIZE = 88;
 const formatRelative = dateString => {
   if (!dateString) {
     return '—';
@@ -67,10 +67,12 @@ const formatRelative = dateString => {
  * device, and security/destructive actions for THIS account. Multi-account
  * surface lives in the unified `OxyAccountDialogScreen` — keep these concerns separate.
  */
+
 const ManageAccountScreen = ({
   onClose,
   goBack,
-  navigate
+  navigate,
+  section
 }) => {
   const bloomTheme = (0, _theme.useTheme)();
   const {
@@ -78,7 +80,7 @@ const ManageAccountScreen = ({
     locale
   } = (0, _useI18n.useI18n)();
   (0, _useSurfaceHeader.useSurfaceHeader)({
-    title: t('manageAccount.title') || 'Manage your Oxy Account'
+    title: section === 'data' ? t('accountMenu.data') : t('manageAccount.title')
   });
   const {
     user: contextUser,
@@ -90,7 +92,7 @@ const ManageAccountScreen = ({
     accounts,
     openAccountDialog,
     hasIdentity
-  } = (0, _OxyContext.useOxy)();
+  } = (0, _oxyRuntimeContext.useOxy)();
   const {
     data: userFromQuery,
     isLoading: userLoading
@@ -306,193 +308,180 @@ const ManageAccountScreen = ({
       })
     });
   }
-  if (userLoading && !user) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        className: "items-center py-space-40",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          color: bloomTheme.colors.primary,
-          size: "large"
-        })
-      })
-    });
-  }
   const deviceRows = deviceSessions ?? [];
   const otherDevices = deviceRows.filter(d => !d.isCurrent);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       className: "px-screen-margin pb-space-24",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileSummaryCard.default, {
-        displayName: displayName,
-        avatarUri: avatarUri,
-        avatarSize: AVATAR_SIZE,
-        onAvatarPress: openAvatarPicker,
-        showCameraBadge: true,
-        avatarAccessibilityLabel: t('editProfile.changeAvatar') || 'Change avatar',
-        lines: [handle ? user?.username ? `@${handle}` : handle : null, user?.email || null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        title: t('manageAccount.sections.profile') || 'Profile',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "account-circle",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('manageAccount.items.editProfile.title') || 'Edit profile',
-          description: t('manageAccount.items.editProfile.subtitle') || 'Name, username, bio, links',
-          onPress: () => navigate?.('EditProfile')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "palette",
-            color: bloomTheme.colors.info
-          }),
-          title: t('manageAccount.items.theme.title') || 'Theme color',
-          description: t('manageAccount.items.theme.subtitle') || 'Personalize your Bloom color',
-          onPress: () => navigate?.('Preferences')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "eye",
-            color: bloomTheme.colors.success
-          }),
-          title: t('editProfile.items.previewProfile.title') || 'Preview profile',
-          description: t('editProfile.items.previewProfile.subtitle') || 'See how your profile looks to others',
-          onPress: () => user?.id ? navigate?.('Profile', {
-            userId: user.id
-          }) : undefined,
-          disabled: !user?.id
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "check-circle",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('editProfile.items.verifyAccount.title') || 'Verify account',
-          description: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
-          onPress: () => navigate?.('AccountVerification')
-        })]
-      }), user?.kind === 'organization' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
-        title: t('organizationDirectory.title'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          title: t('organizationDirectory.view'),
-          onPress: () => navigate?.('AccountSettings', {
-            accountId: user.id
+      children: [section !== 'data' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileSummaryCard.default, {
+          displayName: displayName,
+          avatarUri: avatarUri,
+          onAvatarPress: openAvatarPicker,
+          showCameraBadge: true,
+          avatarAccessibilityLabel: t('editProfile.changeAvatar') || 'Change avatar',
+          lines: [handle ? user?.username ? `@${handle}` : handle : null, user?.email || null]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
+          title: t('manageAccount.sections.profile') || 'Profile',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "account-circle",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('manageAccount.items.editProfile.title') || 'Edit profile',
+            description: t('manageAccount.items.editProfile.subtitle') || 'Name, username, bio, links',
+            onPress: () => navigate?.('EditProfile')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "palette",
+              color: bloomTheme.colors.info
+            }),
+            title: t('manageAccount.items.theme.title') || 'Theme color',
+            description: t('manageAccount.items.theme.subtitle') || 'Personalize your Bloom color',
+            onPress: () => navigate?.('Preferences')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "eye",
+              color: bloomTheme.colors.success
+            }),
+            title: t('editProfile.items.previewProfile.title') || 'Preview profile',
+            description: t('editProfile.items.previewProfile.subtitle') || 'See how your profile looks to others',
+            onPress: () => user?.id ? navigate?.('Profile', {
+              userId: user.id
+            }) : undefined,
+            disabled: !user?.id
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "check-circle",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('editProfile.items.verifyAccount.title') || 'Verify account',
+            description: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
+            onPress: () => navigate?.('AccountVerification')
+          })]
+        }), user?.kind === 'organization' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSection, {
+          title: t('organizationDirectory.title'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            title: t('organizationDirectory.view'),
+            onPress: () => navigate?.('AccountSettings', {
+              accountId: user.id
+            })
           })
-        })
-      }) : null, user?.kind === 'personal' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OrganizationClaims.OrganizationClaims, {}, user.id), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrganizationClaimReview.OrganizationClaimReview, {}, `review:${user.id}`)]
-      }) : null, user?.kind === 'personal' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
-        title: t('supervision.title'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+        }) : null, user?.kind === 'personal' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OrganizationClaims.OrganizationClaims, {}, user.id), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrganizationClaimReview.OrganizationClaimReview, {}, `review:${user.id}`)]
+        }) : null, user?.kind === 'personal' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSection, {
           title: t('supervision.title'),
-          description: t('supervision.entryDescription'),
-          onPress: () => navigate?.('Supervision')
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        title: t('manageAccount.sections.sessions') || 'Sessions & devices',
-        children: [deviceSessionsLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "sync",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('manageAccount.sessions.loading') || 'Loading sessions…',
-          rightElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            color: bloomTheme.colors.primary,
-            size: "small"
-          }),
-          showChevron: false,
-          disabled: true
-        }) : deviceRows.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "cellphone",
-            color: bloomTheme.colors.textTertiary
-          }),
-          title: t('manageAccount.sessions.empty') || 'No active sessions',
-          showChevron: false,
-          disabled: true
-        }) : deviceRows.map(device => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: device.isCurrent ? 'cellphone' : 'cellphone-basic',
-            color: device.isCurrent ? bloomTheme.colors.success : bloomTheme.colors.primary
-          }),
-          title: (0, _deviceSessionTitle.deviceSessionTitle)(device, t),
-          description: t('manageAccount.sessions.lastActive', {
-            relative: formatRelative(device.lastActive)
-          }) || `Last active ${formatRelative(device.lastActive)}`,
-          onPress: device.isCurrent ? undefined : () => confirmRemoveDevice(device),
-          disabled: device.isCurrent || removingDeviceId === device.sessionId,
-          rightElement: !device.isCurrent ? removingDeviceId === device.sessionId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            color: bloomTheme.colors.error,
-            size: "small"
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            name: "log-out-outline",
-            size: 18,
-            color: bloomTheme.colors.error
-          }) : undefined,
-          showChevron: false
-        }, `device-${device.sessionId}`)), otherDevices.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "logout",
-            color: bloomTheme.colors.error
-          }),
-          title: t('manageAccount.sessions.signOutAllOnThisDevice') || 'Sign out of all other devices',
-          description: t('manageAccount.sessions.signOutAllSubtitle', {
-            count: otherDevices.length
-          }) || `End ${otherDevices.length} other device session(s)`,
-          onPress: handleSignOutAllDevices,
-          destructive: true,
-          showChevron: false,
-          disabled: signingOutAllDevices,
-          rightElement: signingOutAllDevices ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            color: bloomTheme.colors.error,
-            size: "small"
-          }) : undefined
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        title: t('manageAccount.sections.security') || 'Security',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "shield-check",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('manageAccount.items.security.title') || 'Security settings',
-          description: t('manageAccount.items.security.subtitle') || 'Password, 2FA, recovery',
-          onPress: () => navigate?.('PrivacySettings')
-        }), user && !user.publicKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            title: t('supervision.title'),
+            description: t('supervision.entryDescription'),
+            onPress: () => navigate?.('Supervision')
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
+          title: t('manageAccount.sections.sessions') || 'Sessions & devices',
+          children: [deviceSessionsLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
             icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-              name: "key",
+              name: "sync",
               color: bloomTheme.colors.primary
             }),
-            title: t('signInSecurity.password.title'),
-            description: t('signInSecurity.password.row'),
-            onPress: () => navigate?.('SignInPassword')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+            title: t('manageAccount.sessions.loading') || 'Loading sessions…',
+            rightElement: null,
+            showChevron: false,
+            disabled: true
+          }) : deviceRows.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "cellphone",
+              color: bloomTheme.colors.textTertiary
+            }),
+            title: t('manageAccount.sessions.empty') || 'No active sessions',
+            showChevron: false,
+            disabled: true
+          }) : deviceRows.map(device => /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: device.isCurrent ? 'cellphone' : 'cellphone-basic',
+              color: device.isCurrent ? bloomTheme.colors.success : bloomTheme.colors.primary
+            }),
+            title: (0, _deviceSessionTitle.deviceSessionTitle)(device, t),
+            description: t('manageAccount.sessions.lastActive', {
+              relative: formatRelative(device.lastActive)
+            }) || `Last active ${formatRelative(device.lastActive)}`,
+            onPress: device.isCurrent ? undefined : () => confirmRemoveDevice(device),
+            disabled: device.isCurrent || removingDeviceId === device.sessionId,
+            rightElement: !device.isCurrent ? removingDeviceId === device.sessionId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.SpinnerIcon, {
+              color: bloomTheme.colors.error,
+              size: 16
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              name: "log-out-outline",
+              size: 18,
+              color: bloomTheme.colors.error
+            }) : undefined,
+            showChevron: false
+          }, `device-${device.sessionId}`)), otherDevices.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "logout",
+              color: bloomTheme.colors.error
+            }),
+            title: t('manageAccount.sessions.signOutAllOnThisDevice') || 'Sign out of all other devices',
+            description: t('manageAccount.sessions.signOutAllSubtitle', {
+              count: otherDevices.length
+            }) || `End ${otherDevices.length} other device session(s)`,
+            onPress: handleSignOutAllDevices,
+            destructive: true,
+            showChevron: false,
+            disabled: signingOutAllDevices,
+            rightElement: signingOutAllDevices ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.SpinnerIcon, {
+              color: bloomTheme.colors.error,
+              size: 16
+            }) : undefined
+          }) : null]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
+          title: t('manageAccount.sections.security') || 'Security',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
             icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
               name: "shield-check",
               color: bloomTheme.colors.primary
             }),
-            title: t('signInSecurity.totp.title'),
-            description: t('signInSecurity.totp.row'),
-            onPress: () => navigate?.('SignInAuthenticator')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+            title: t('manageAccount.items.security.title') || 'Security settings',
+            description: t('manageAccount.items.security.subtitle') || 'Password, 2FA, recovery',
+            onPress: () => navigate?.('PrivacySettings')
+          }), user && !user.publicKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+                name: "key",
+                color: bloomTheme.colors.primary
+              }),
+              title: t('signInSecurity.password.title'),
+              description: t('signInSecurity.password.row'),
+              onPress: () => navigate?.('SignInPassword')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+                name: "shield-check",
+                color: bloomTheme.colors.primary
+              }),
+              title: t('signInSecurity.totp.title'),
+              description: t('signInSecurity.totp.row'),
+              onPress: () => navigate?.('SignInAuthenticator')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+                name: "link",
+                color: bloomTheme.colors.primary
+              }),
+              title: t('linkCommons.title'),
+              description: t('linkCommons.row'),
+              onPress: () => navigate?.('LinkCommons')
+            })]
+          }) : null, user?.isPremium || subscription?.status === 'active' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
             icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-              name: "link",
-              color: bloomTheme.colors.primary
+              name: "credit-card",
+              color: bloomTheme.colors.success
             }),
-            title: t('linkCommons.title'),
-            description: t('linkCommons.row'),
-            onPress: () => navigate?.('LinkCommons')
-          })]
-        }) : null, user?.isPremium || subscription?.status === 'active' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "credit-card",
-            color: bloomTheme.colors.success
-          }),
-          title: t('manageAccount.items.billing.title') || 'Billing',
-          description: t('manageAccount.items.billing.subtitle') || 'Manage subscription and payment methods',
-          onPress: () => navigate?.('PaymentGateway')
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
+            title: t('manageAccount.items.billing.title') || 'Billing',
+            description: t('manageAccount.items.billing.subtitle') || 'Manage subscription and payment methods',
+            onPress: () => navigate?.('PaymentGateway')
+          }) : null]
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
         title: t('accountOverview.sections.quickActions') || 'Account & data',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
             name: "clock",
             color: bloomTheme.colors.primary
@@ -500,7 +489,7 @@ const ManageAccountScreen = ({
           title: t('accountOverview.items.history.title') || 'History',
           description: t('accountOverview.items.history.subtitle') || 'View and manage your search history',
           onPress: () => navigate?.('HistoryView')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
             name: "folder",
             color: bloomTheme.colors.info
@@ -508,7 +497,7 @@ const ManageAccountScreen = ({
           title: t('accountCenter.items.fileManagement.title') || 'Files',
           description: t('accountCenter.items.fileManagement.subtitle') || 'Upload, download, and manage your files',
           onPress: () => navigate?.('FileManagement')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
             name: "download",
             color: bloomTheme.colors.primary
@@ -517,159 +506,161 @@ const ManageAccountScreen = ({
           description: t('accountOverview.items.downloadData.subtitle') || 'Export a copy of your account data',
           onPress: handleDownloadData
         })]
-      }), accounts.length > 0 || isAuthenticated ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        title: t('accountCenter.sections.accounts') || 'Accounts',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "account-switch",
-            color: bloomTheme.colors.info
-          }),
-          title: t('accounts.manage.switch.title') || 'Switch account',
-          description: accounts.length > 0 ?
-          // One account is "1 account", not "1 accounts".
-          t(accounts.length === 1 ? 'accounts.manage.switch.countOne' : 'accounts.manage.switch.count', {
-            count: accounts.length
-          }) : t('accounts.manage.switch.empty') || 'Accounts you own or share',
-          onPress: () => openAccountDialog('accounts')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "account-plus",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('accounts.create.title') || 'Create account',
-          description: t('accounts.manage.create.subtitle') || 'Add an organization, project, or bot',
-          onPress: () => navigate?.('CreateAccount')
-        })]
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        title: t('manageAccount.sections.preferences') || 'Preferences',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "cog",
-            color: bloomTheme.colors.info
-          }),
-          title: t('preferences.title') || 'Preferences',
-          description: t('preferences.subtitle') || 'Theme, motion, and regional settings',
-          onPress: () => navigate?.('Preferences')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "bell",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('notifications.title') || 'Notifications',
-          description: t('notifications.subtitle') || 'Manage push, email, and security alerts',
-          onPress: () => navigate?.('Notifications')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "translate",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('language.title') || 'Language',
-          description: t('language.subtitle') || 'Choose your preferred language',
-          onPress: () => navigate?.('LanguageSelector')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "apps",
-            color: bloomTheme.colors.info
-          }),
-          title: t('connectedApps.title') || 'Connected apps',
-          description: t('connectedApps.subtitle') || 'Manage third-party app access',
-          onPress: () => navigate?.('ConnectedApps')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "web",
-            color: bloomTheme.colors.success
-          }),
-          title: t('domains.title'),
-          description: t('domains.subtitle'),
-          onPress: () => navigate?.('Domains')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "magnify",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('accountOverview.items.searchSettings.title') || 'Search settings',
-          description: t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization',
-          onPress: () => navigate?.('SearchSettings')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        title: t('accountOverview.sections.support') || 'Support',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "help-circle",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('accountOverview.items.help.title') || 'Help & support',
-          description: t('accountOverview.items.help.subtitle') || 'Get help and contact support',
-          onPress: () => navigate?.('HelpSupport')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "information",
-            color: bloomTheme.colors.success
-          }),
-          title: t('accountOverview.items.about.title') || 'About',
-          description: t('accountOverview.items.about.subtitle') || 'Version and system details',
-          onPress: () => navigate?.('AppInfo')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        title: t('manageAccount.sections.legal') || 'Legal',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "shield-check",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('accountOverview.items.privacyPolicy.title') || 'Privacy policy',
-          description: t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data',
-          onPress: () => navigate?.('LegalDocuments', {
-            initialStep: 1
+      }), section !== 'data' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [accounts.length > 0 || isAuthenticated ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
+          title: t('accountCenter.sections.accounts') || 'Accounts',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "account-switch",
+              color: bloomTheme.colors.info
+            }),
+            title: t('accounts.manage.switch.title') || 'Switch account',
+            description: accounts.length > 0 ?
+            // One account is "1 account", not "1 accounts".
+            t(accounts.length === 1 ? 'accounts.manage.switch.countOne' : 'accounts.manage.switch.count', {
+              count: accounts.length
+            }) : t('accounts.manage.switch.empty') || 'Accounts you own or share',
+            onPress: () => openAccountDialog('accounts')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "account-plus",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('accounts.create.title') || 'Create account',
+            description: t('accounts.manage.create.subtitle') || 'Add an organization, project, or bot',
+            onPress: () => navigate?.('CreateAccount')
+          })]
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
+          title: t('manageAccount.sections.preferences') || 'Preferences',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "cog",
+              color: bloomTheme.colors.info
+            }),
+            title: t('preferences.title') || 'Preferences',
+            description: t('preferences.subtitle') || 'Theme, motion, and regional settings',
+            onPress: () => navigate?.('Preferences')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "bell",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('notifications.title') || 'Notifications',
+            description: t('notifications.subtitle') || 'Manage push, email, and security alerts',
+            onPress: () => navigate?.('Notifications')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "translate",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('language.title') || 'Language',
+            description: t('language.subtitle') || 'Choose your preferred language',
+            onPress: () => navigate?.('LanguageSelector')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "apps",
+              color: bloomTheme.colors.info
+            }),
+            title: t('connectedApps.title') || 'Connected apps',
+            description: t('connectedApps.subtitle') || 'Manage third-party app access',
+            onPress: () => navigate?.('ConnectedApps')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "web",
+              color: bloomTheme.colors.success
+            }),
+            title: t('domains.title'),
+            description: t('domains.subtitle'),
+            onPress: () => navigate?.('Domains')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "magnify",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('accountOverview.items.searchSettings.title') || 'Search settings',
+            description: t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization',
+            onPress: () => navigate?.('SearchSettings')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
+          title: t('accountOverview.sections.support') || 'Support',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "help-circle",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('accountOverview.items.help.title') || 'Help & support',
+            description: t('accountOverview.items.help.subtitle') || 'Get help and contact support',
+            onPress: () => navigate?.('HelpSupport')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "information",
+              color: bloomTheme.colors.success
+            }),
+            title: t('accountOverview.items.about.title') || 'About',
+            description: t('accountOverview.items.about.subtitle') || 'Version and system details',
+            onPress: () => navigate?.('AppInfo')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_groupedSection.GroupedSection, {
+          title: t('manageAccount.sections.legal') || 'Legal',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "shield-check",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('accountOverview.items.privacyPolicy.title') || 'Privacy policy',
+            description: t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data',
+            onPress: () => navigate?.('LegalDocuments', {
+              initialStep: 1
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "file-document",
+              color: bloomTheme.colors.primary
+            }),
+            title: t('accountOverview.items.termsOfService.title') || 'Terms of service',
+            description: t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use',
+            onPress: () => navigate?.('LegalDocuments', {
+              initialStep: 2
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSection, {
+          title: t('manageAccount.sections.dangerZone') || 'Danger zone',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "delete",
+              color: bloomTheme.colors.error
+            }),
+            title: t('accountOverview.items.deleteAccount.title') || 'Delete account',
+            description: t('accountOverview.items.deleteAccount.subtitle') || 'Permanently delete your account and all data',
+            onPress: handleDeleteAccount,
+            destructive: true
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "file-document",
-            color: bloomTheme.colors.primary
-          }),
-          title: t('accountOverview.items.termsOfService.title') || 'Terms of service',
-          description: t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use',
-          onPress: () => navigate?.('LegalDocuments', {
-            initialStep: 2
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSection, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+              name: "logout",
+              color: bloomTheme.colors.error
+            }),
+            title: t('manageAccount.signOutOfThisAccount') || 'Sign out of this account',
+            onPress: handleSignOut,
+            destructive: true,
+            showChevron: false,
+            disabled: signingOut,
+            rightElement: signingOut ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.SpinnerIcon, {
+              color: bloomTheme.colors.error,
+              size: 16
+            }) : undefined
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          className: "items-center mt-space-12 mb-space-8",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            className: "text-text-tertiary text-xs",
+            children: t('accountCenter.version', {
+              version: _core.packageInfo.version
+            }) || `Version ${_core.packageInfo.version}`
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
-        title: t('manageAccount.sections.dangerZone') || 'Danger zone',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "delete",
-            color: bloomTheme.colors.error
-          }),
-          title: t('accountOverview.items.deleteAccount.title') || 'Delete account',
-          description: t('accountOverview.items.deleteAccount.subtitle') || 'Permanently delete your account and all data',
-          onPress: handleDeleteAccount,
-          destructive: true
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: "logout",
-            color: bloomTheme.colors.error
-          }),
-          title: t('manageAccount.signOutOfThisAccount') || 'Sign out of this account',
-          onPress: handleSignOut,
-          destructive: true,
-          showChevron: false,
-          disabled: signingOut,
-          rightElement: signingOut ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            color: bloomTheme.colors.error,
-            size: "small"
-          }) : undefined
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        className: "items-center mt-space-12 mb-space-8",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          className: "text-text-tertiary text-xs",
-          children: t('accountCenter.version', {
-            version: _core.packageInfo.version
-          }) || `Version ${_core.packageInfo.version}`
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.footerSpacer
       })]
     })