@oxyhq/services 5.7.5 → 5.8.1

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

@@ -11,6 +11,7 @@ var _Avatar = _interopRequireDefault(require("../components/Avatar"));
 var _OxyIcon = _interopRequireDefault(require("../components/icon/OxyIcon"));
 var _sonner = require("../../lib/sonner");
 var _confirmAction = require("../utils/confirmAction");
+var _components = require("../components");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -22,8 +23,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * - useMemo for additional accounts filtering (only recalculates when dependencies change)
  * - useCallback for event handlers to prevent unnecessary re-renders
  * - React.memo wrapper to prevent re-renders when props haven't changed
- */
-const AccountOverviewScreen = ({
+ * - GroupedSection components for better organization and cleaner code
+ */const AccountOverviewScreen = ({
   onClose,
   theme,
   navigate
@@ -159,545 +160,259 @@ const AccountOverviewScreen = ({
     style: [styles.container, {
       backgroundColor: '#f2f2f2'
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.headerTitle,
-        children: "Account"
-      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: styles.closeButton,
-        onPress: onClose,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.closeButtonText,
-          children: "\xD7"
-        })
-      })]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Header, {
+      title: "Account",
+      theme: theme,
+      onBack: onClose,
+      variant: "minimal",
+      elevation: "subtle"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
       style: styles.content,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionTitle,
-          children: "Profile"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.userIcon,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-              uri: user?.avatar?.url,
-              name: user?.name?.full,
-              size: 40,
-              theme: theme
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: user ? typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username : 'Loading...'
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: user ? user.email || user.username : 'Loading...'
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+        title: "Profile",
+        theme: theme,
+        isFirst: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: [{
+            id: 'profile-info',
+            icon: 'person',
+            iconColor: '#007AFF',
+            title: user ? typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username : 'Loading...',
+            subtitle: user ? user.email || user.username : 'Loading...',
+            onPress: () => _sonner.toast.info('Manage your Oxy Account feature coming soon!'),
+            customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.userIcon,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+                  uri: user?.avatar?.url,
+                  name: user?.name?.full,
+                  size: 40,
+                  theme: theme
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                style: styles.manageButton,
+                onPress: () => _sonner.toast.info('Manage your Oxy Account feature coming soon!'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.manageButtonText,
+                  children: "Manage"
+                })
               })]
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: styles.manageButton,
-            onPress: () => _sonner.toast.info('Manage your Oxy Account feature coming soon!'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.manageButtonText,
-              children: "Manage"
+          }],
+          theme: theme
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+        title: "Account Settings",
+        theme: theme,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: [{
+            id: 'edit-profile',
+            icon: 'person-circle',
+            iconColor: '#007AFF',
+            title: 'Edit Profile',
+            subtitle: 'Update your personal information',
+            onPress: () => navigate?.('EditProfile', {
+              activeTab: 'profile'
             })
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionTitle,
-          children: "Account Settings"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.firstSettingItem],
-          onPress: () => navigate?.('AccountSettings', {
-            activeTab: 'profile'
-          }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "person-circle",
-              size: 20,
-              color: "#007AFF",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Edit Profile"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Update your personal information"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.settingItem,
-          onPress: () => navigate?.('AccountSettings', {
-            activeTab: 'password'
-          }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "shield-checkmark",
-              size: 20,
-              color: "#30D158",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Security & Privacy"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Password, 2FA, and privacy settings"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.settingItem,
-          onPress: () => navigate?.('AccountSettings', {
-            activeTab: 'notifications'
-          }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "notifications",
-              size: 20,
-              color: "#FF9500",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Notifications"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Manage your notification preferences"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem],
-          onPress: () => navigate?.('PremiumSubscription'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "star",
-              size: 20,
-              color: "#FFD700",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Oxy+ Subscriptions"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: user?.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), user?.isPremium && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.lastSettingItem],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "card",
-              size: 20,
-              color: "#34C759",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Billing Management"
+          }, {
+            id: 'security-privacy',
+            icon: 'shield-checkmark',
+            iconColor: '#30D158',
+            title: 'Security & Privacy',
+            subtitle: 'Password, 2FA, and privacy settings',
+            onPress: () => navigate?.('EditProfile', {
+              activeTab: 'password'
+            })
+          }, {
+            id: 'notifications',
+            icon: 'notifications',
+            iconColor: '#FF9500',
+            title: 'Notifications',
+            subtitle: 'Manage your notification preferences',
+            onPress: () => navigate?.('EditProfile', {
+              activeTab: 'notifications'
+            })
+          }, {
+            id: 'premium-subscription',
+            icon: 'star',
+            iconColor: '#FFD700',
+            title: 'Oxy+ Subscriptions',
+            subtitle: user?.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features',
+            onPress: () => navigate?.('PremiumSubscription')
+          }, ...(user?.isPremium ? [{
+            id: 'billing-management',
+            icon: 'card',
+            iconColor: '#34C759',
+            title: 'Billing Management',
+            subtitle: 'Payment methods and invoices',
+            onPress: () => _sonner.toast.info('Billing management feature coming soon!')
+          }] : [])],
+          theme: theme
+        })
+      }), showMoreAccounts && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+        title: `Additional Accounts${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`,
+        theme: theme,
+        children: loadingAdditionalAccounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: [{
+            id: 'loading-accounts',
+            icon: 'sync',
+            iconColor: '#007AFF',
+            title: 'Loading accounts...',
+            subtitle: 'Please wait while we load your additional accounts',
+            customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.loadingContainer,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                size: "small",
+                color: "#007AFF"
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Payment methods and invoices"
+                style: styles.loadingText,
+                children: "Loading accounts..."
               })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        })]
-      }), showMoreAccounts && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.sectionTitle,
-          children: ["Additional Accounts", additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : '']
-        }), loadingAdditionalAccounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.loadingContainer,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-              size: "small",
-              color: "#007AFF"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.loadingText,
-              children: "Loading accounts..."
-            })]
-          })
-        }) : additionalAccountsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: additionalAccountsData.map((account, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: [styles.settingItem, index === 0 && styles.firstSettingItem, index === additionalAccountsData.length - 1 && styles.lastSettingItem],
+            })
+          }],
+          theme: theme
+        }) : additionalAccountsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: additionalAccountsData.map((account, index) => ({
+            id: `account-${account.id}`,
+            icon: 'person',
+            iconColor: '#5856D6',
+            title: typeof account.name === 'object' ? account.name?.full || account.name?.first || account.username : account.name || account.username,
+            subtitle: account.email || account.username,
             onPress: () => {
               _sonner.toast.info(`Switch to ${account.username}?`);
               // TODO: Implement account switching logic
               // switchSession(account.sessionId);
             },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.userIcon,
-              children: account.avatar?.url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-                source: {
-                  uri: account.avatar.url
-                },
-                style: styles.accountAvatarImage
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.accountAvatarFallback,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.accountAvatarText,
-                  children: account.username?.charAt(0).toUpperCase() || '?'
+            customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.userIcon,
+                children: account.avatar?.url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: account.avatar.url
+                  },
+                  style: styles.accountAvatarImage
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.accountAvatarFallback,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.accountAvatarText,
+                    children: account.username?.charAt(0).toUpperCase() || '?'
+                  })
                 })
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.settingInfo,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.settingLabel,
-                  children: typeof account.name === 'object' ? account.name?.full || account.name?.first || account.username : account.name || account.username
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.settingDescription,
-                  children: account.email || account.username
-                })]
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "chevron-forward",
-              size: 16,
-              color: "#ccc"
-            })]
-          }, account.id))
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "person-outline",
-              size: 20,
-              color: "#ccc",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "No other accounts"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Add another account to switch between them"
-              })]
-            })]
-          })
-        })]
-      }), showMoreAccounts && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionTitle,
-          children: "Account Management"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.firstSettingItem],
-          onPress: handleAddAccount,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "add",
-              size: 20,
-              color: "#007AFF",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Add another account"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Sign in with a different account"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.lastSettingItem],
-          onPress: handleSignOutAll,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "log-out",
-              size: 20,
-              color: "#FF3B30",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Sign out of all accounts"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Remove all accounts from this device"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionTitle,
-          children: "Quick Actions"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.firstSettingItem],
-          onPress: () => setShowMoreAccounts(!showMoreAccounts),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "people",
-              size: 20,
-              color: "#5856D6",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: [showMoreAccounts ? 'Hide' : 'Show', " Account Switcher"]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: showMoreAccounts ? 'Hide account switcher' : additionalAccountsData.length > 0 ? `Switch between ${additionalAccountsData.length + 1} accounts` : loadingAdditionalAccounts ? 'Loading additional accounts...' : 'Manage multiple accounts'
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.settingItem,
-          onPress: () => _sonner.toast.info('Download account data feature coming soon!'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "download",
-              size: 20,
-              color: "#34C759",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Download My Data"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Export your account information"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.lastSettingItem],
-          onPress: () => _sonner.toast.info('Delete account feature coming soon!'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "trash",
-              size: 20,
-              color: "#FF3B30",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Delete Account"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Permanently delete your account"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionTitle,
-          children: "Support & Settings"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.firstSettingItem],
-          onPress: () => _sonner.toast.info('Account preferences coming soon!'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "settings",
-              size: 20,
-              color: "#8E8E93",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Account Preferences"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Customize your account experience"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.settingItem,
-          onPress: () => _sonner.toast.info('Help & support feature coming soon!'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "help-circle",
-              size: 20,
-              color: "#007AFF",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Help & Support"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Get help with your account"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                name: "chevron-forward",
+                size: 16,
+                color: "#ccc"
               })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.settingItem,
-          onPress: () => _sonner.toast.info('Connected apps feature coming soon!'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "link",
-              size: 20,
-              color: "#32D74B",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Connected Apps"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Manage third-party app access"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.settingItem,
-          onPress: () => _sonner.toast.info('Privacy Policy feature coming soon!'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "document-lock",
-              size: 20,
-              color: "#FF9F0A",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Privacy Policy"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Learn about data protection"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.lastSettingItem],
-          onPress: () => _sonner.toast.info('Terms of Service feature coming soon!'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "document-text",
-              size: 20,
-              color: "#5856D6",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingLabel,
-                children: "Terms of Service"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Read our terms and conditions"
-              })]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-            name: "chevron-forward",
-            size: 16,
-            color: "#ccc"
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.section,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.signOutButton],
+            })
+          })),
+          theme: theme
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: [{
+            id: 'no-accounts',
+            icon: 'person-outline',
+            iconColor: '#ccc',
+            title: 'No other accounts',
+            subtitle: 'Add another account to switch between them'
+          }],
+          theme: theme
+        })
+      }), showMoreAccounts && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+        title: "Account Management",
+        theme: theme,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: [{
+            id: 'add-account',
+            icon: 'add',
+            iconColor: '#007AFF',
+            title: 'Add another account',
+            subtitle: 'Sign in with a different account',
+            onPress: handleAddAccount
+          }, {
+            id: 'sign-out-all',
+            icon: 'log-out',
+            iconColor: '#FF3B30',
+            title: 'Sign out of all accounts',
+            subtitle: 'Remove all accounts from this device',
+            onPress: handleSignOutAll
+          }],
+          theme: theme
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+        title: "Quick Actions",
+        theme: theme,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: [{
+            id: 'account-switcher',
+            icon: 'people',
+            iconColor: '#5856D6',
+            title: `${showMoreAccounts ? 'Hide' : 'Show'} Account Switcher`,
+            subtitle: showMoreAccounts ? 'Hide account switcher' : additionalAccountsData.length > 0 ? `Switch between ${additionalAccountsData.length + 1} accounts` : loadingAdditionalAccounts ? 'Loading additional accounts...' : 'Manage multiple accounts',
+            onPress: () => setShowMoreAccounts(!showMoreAccounts)
+          }, {
+            id: 'download-data',
+            icon: 'download',
+            iconColor: '#34C759',
+            title: 'Download My Data',
+            subtitle: 'Export your account information',
+            onPress: () => _sonner.toast.info('Download account data feature coming soon!')
+          }, {
+            id: 'delete-account',
+            icon: 'trash',
+            iconColor: '#FF3B30',
+            title: 'Delete Account',
+            subtitle: 'Permanently delete your account',
+            onPress: () => _sonner.toast.info('Delete account feature coming soon!')
+          }],
+          theme: theme
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+        title: "Support & Settings",
+        theme: theme,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+          items: [{
+            id: 'account-preferences',
+            icon: 'settings',
+            iconColor: '#8E8E93',
+            title: 'Account Preferences',
+            subtitle: 'Customize your account experience',
+            onPress: () => _sonner.toast.info('Account preferences coming soon!')
+          }, {
+            id: 'help-support',
+            icon: 'help-circle',
+            iconColor: '#007AFF',
+            title: 'Help & Support',
+            subtitle: 'Get help with your account',
+            onPress: () => _sonner.toast.info('Help & support feature coming soon!')
+          }, {
+            id: 'connected-apps',
+            icon: 'link',
+            iconColor: '#32D74B',
+            title: 'Connected Apps',
+            subtitle: 'Manage third-party app access',
+            onPress: () => _sonner.toast.info('Connected apps feature coming soon!')
+          }, {
+            id: 'about',
+            icon: 'information-circle',
+            iconColor: '#8E8E93',
+            title: 'About',
+            subtitle: 'App version and information',
+            onPress: () => navigate?.('AppInfo')
+          }],
+          theme: theme
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+        title: "Account Actions",
+        theme: theme,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedItem, {
+          icon: "log-out",
+          iconColor: "#FF3B30",
+          title: "Sign Out",
+          subtitle: "Sign out of your current account",
+          theme: theme,
           onPress: confirmLogout,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.settingInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-              name: "log-out",
-              size: 20,
-              color: "#ff4757",
-              style: styles.settingIcon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.settingLabel, {
-                  color: '#ff4757'
-                }],
-                children: "Sign Out"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.settingDescription,
-                children: "Sign out of your account"
-              })]
-            })]
-          })
+          isFirst: true,
+          isLast: true,
+          showChevron: false
         })
       })]
     })]
@@ -708,78 +423,10 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     backgroundColor: '#f2f2f2'
   },
-  header: {
-    paddingHorizontal: 20,
-    paddingTop: 60,
-    paddingBottom: 16,
-    backgroundColor: '#fff',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  headerTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#000'
-  },
-  closeButton: {
-    padding: 8
-  },
-  closeButtonText: {
-    fontSize: 24,
-    color: '#000',
-    fontWeight: '300'
-  },
   content: {
     flex: 1,
     padding: 16
   },
-  section: {
-    marginBottom: 24
-  },
-  sectionTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 12
-  },
-  settingItem: {
-    backgroundColor: '#fff',
-    padding: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 2
-  },
-  firstSettingItem: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24
-  },
-  lastSettingItem: {
-    borderBottomLeftRadius: 24,
-    borderBottomRightRadius: 24,
-    marginBottom: 8
-  },
-  settingInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1
-  },
-  settingIcon: {
-    marginRight: 12
-  },
-  settingLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#333',
-    marginBottom: 2
-  },
-  settingDescription: {
-    fontSize: 14,
-    color: '#666'
-  },
   userIcon: {
     marginRight: 12
   },
@@ -812,10 +459,6 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 18,
     fontWeight: 'bold'
   },
-  signOutButton: {
-    borderWidth: 1,
-    borderColor: '#ff4757'
-  },
   message: {
     fontSize: 16,
     textAlign: 'center',