@oxyhq/services 6.9.28 → 6.9.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/lib/commonjs/ui/components/FollowButton.js +10 -7
  2. package/lib/commonjs/ui/components/FollowButton.js.map +1 -1
  3. package/lib/commonjs/ui/components/SettingsIcon.js +45 -0
  4. package/lib/commonjs/ui/components/SettingsIcon.js.map +1 -0
  5. package/lib/commonjs/ui/components/index.js +7 -0
  6. package/lib/commonjs/ui/components/index.js.map +1 -1
  7. package/lib/commonjs/ui/screens/AccountCenterScreen.js +127 -126
  8. package/lib/commonjs/ui/screens/AccountCenterScreen.js.map +1 -1
  9. package/lib/commonjs/ui/screens/AccountOverviewScreen.js +203 -191
  10. package/lib/commonjs/ui/screens/AccountOverviewScreen.js.map +1 -1
  11. package/lib/commonjs/ui/screens/AppInfoScreen.js +209 -205
  12. package/lib/commonjs/ui/screens/AppInfoScreen.js.map +1 -1
  13. package/lib/commonjs/ui/screens/HelpSupportScreen.js +66 -63
  14. package/lib/commonjs/ui/screens/HelpSupportScreen.js.map +1 -1
  15. package/lib/module/ui/components/FollowButton.js +10 -7
  16. package/lib/module/ui/components/FollowButton.js.map +1 -1
  17. package/lib/module/ui/components/SettingsIcon.js +40 -0
  18. package/lib/module/ui/components/SettingsIcon.js.map +1 -0
  19. package/lib/module/ui/components/index.js +1 -0
  20. package/lib/module/ui/components/index.js.map +1 -1
  21. package/lib/module/ui/screens/AccountCenterScreen.js +127 -126
  22. package/lib/module/ui/screens/AccountCenterScreen.js.map +1 -1
  23. package/lib/module/ui/screens/AccountOverviewScreen.js +204 -192
  24. package/lib/module/ui/screens/AccountOverviewScreen.js.map +1 -1
  25. package/lib/module/ui/screens/AppInfoScreen.js +210 -206
  26. package/lib/module/ui/screens/AppInfoScreen.js.map +1 -1
  27. package/lib/module/ui/screens/HelpSupportScreen.js +67 -64
  28. package/lib/module/ui/screens/HelpSupportScreen.js.map +1 -1
  29. package/lib/typescript/commonjs/ui/components/FollowButton.d.ts.map +1 -1
  30. package/lib/typescript/commonjs/ui/components/SettingsIcon.d.ts +14 -0
  31. package/lib/typescript/commonjs/ui/components/SettingsIcon.d.ts.map +1 -0
  32. package/lib/typescript/commonjs/ui/components/index.d.ts +1 -0
  33. package/lib/typescript/commonjs/ui/components/index.d.ts.map +1 -1
  34. package/lib/typescript/commonjs/ui/screens/AccountCenterScreen.d.ts.map +1 -1
  35. package/lib/typescript/commonjs/ui/screens/AccountOverviewScreen.d.ts.map +1 -1
  36. package/lib/typescript/commonjs/ui/screens/AppInfoScreen.d.ts.map +1 -1
  37. package/lib/typescript/commonjs/ui/screens/HelpSupportScreen.d.ts.map +1 -1
  38. package/lib/typescript/module/ui/components/FollowButton.d.ts.map +1 -1
  39. package/lib/typescript/module/ui/components/SettingsIcon.d.ts +14 -0
  40. package/lib/typescript/module/ui/components/SettingsIcon.d.ts.map +1 -0
  41. package/lib/typescript/module/ui/components/index.d.ts +1 -0
  42. package/lib/typescript/module/ui/components/index.d.ts.map +1 -1
  43. package/lib/typescript/module/ui/screens/AccountCenterScreen.d.ts.map +1 -1
  44. package/lib/typescript/module/ui/screens/AccountOverviewScreen.d.ts.map +1 -1
  45. package/lib/typescript/module/ui/screens/AppInfoScreen.d.ts.map +1 -1
  46. package/lib/typescript/module/ui/screens/HelpSupportScreen.d.ts.map +1 -1
  47. package/package.json +2 -2
  48. package/src/ui/components/FollowButton.tsx +10 -7
  49. package/src/ui/components/SettingsIcon.tsx +43 -0
  50. package/src/ui/components/index.ts +1 -0
  51. package/src/ui/screens/AccountCenterScreen.tsx +97 -145
  52. package/src/ui/screens/AccountOverviewScreen.tsx +154 -220
  53. package/src/ui/screens/AppInfoScreen.tsx +177 -248
  54. package/src/ui/screens/HelpSupportScreen.tsx +53 -76
package/src/ui/screens/AppInfoScreen.tsx CHANGED
@@ -7,9 +7,7 @@ import {
7
7
  StyleSheet,
8
8
  Platform,
9
9
  Dimensions,
10
- Alert,
11
10
  Clipboard,
12
- SafeAreaView,
13
11
  ScrollView,
14
12
  ActivityIndicator,
15
13
  } from 'react-native';
@@ -17,15 +15,14 @@ import type { BaseScreenProps } from '../types/navigation';
17
15
  import { fontFamilies } from '../styles/fonts';
18
16
  import { packageInfo } from '@oxyhq/core';
19
17
  import { toast } from '../../lib/sonner';
20
- import { confirmAction } from '../utils/confirmAction';
21
- import OxyIcon from '../components/icon/OxyIcon';
22
18
  import { Ionicons } from '@expo/vector-icons';
23
19
  import OxyServicesLogo from '../../assets/icons/OxyServices';
24
- import { Section, GroupedSection } from '../components';
20
+ import { SettingsIcon } from '../components/SettingsIcon';
25
21
  import { useThemeStyles } from '../hooks/useThemeStyles';
26
22
  import { useColorScheme } from '../hooks/useColorScheme';
27
23
  import { useOxy } from '../context/OxyContext';
28
24
  import { useI18n } from '../hooks/useI18n';
25
+ import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
29
26
 
30
27
 
31
28
  interface SystemInfo {
@@ -172,264 +169,199 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
172
169
 
173
170
  <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
174
171
  {/* Package Information */}
175
- <Section title={t('appInfo.sections.package')} >
176
- <GroupedSection
177
- items={[
178
- {
179
- id: 'name',
180
- icon: 'information',
181
- iconColor: themeStyles.colors.iconSecurity,
182
- title: t('appInfo.items.name'),
183
- subtitle: packageInfo.name,
184
- onPress: () => copyToClipboard(packageInfo.name, t('appInfo.items.name')),
185
- customContent: <OxyServicesLogo width={20} height={20} style={styles.settingIcon} />,
186
- },
187
- {
188
- id: 'version',
189
- icon: 'tag',
190
- iconColor: themeStyles.colors.iconData,
191
- title: t('appInfo.items.version'),
192
- subtitle: packageInfo.version,
193
- onPress: () => copyToClipboard(packageInfo.version, t('appInfo.items.version')),
194
- },
195
- {
196
- id: 'description',
197
- icon: 'file-document',
198
- iconColor: themeStyles.colors.iconPersonalInfo,
199
- title: t('appInfo.items.description'),
200
- subtitle: packageInfo.description || t('appInfo.items.noDescription'),
201
- },
202
- {
203
- id: 'main-entry',
204
- icon: 'code-tags',
205
- iconColor: themeStyles.colors.iconStorage,
206
- title: t('appInfo.items.mainEntry'),
207
- subtitle: packageInfo.main || 'N/A',
208
- onPress: () => copyToClipboard(packageInfo.main || 'N/A', t('appInfo.items.mainEntry')),
209
- },
210
- {
211
- id: 'module-entry',
212
- icon: 'library',
213
- iconColor: themeStyles.colors.iconSharing,
214
- title: t('appInfo.items.moduleEntry'),
215
- subtitle: packageInfo.module || 'N/A',
216
- onPress: () => copyToClipboard(packageInfo.module || 'N/A', t('appInfo.items.moduleEntry')),
217
- },
218
- {
219
- id: 'types-entry',
220
- icon: 'wrench',
221
- iconColor: themeStyles.colors.iconPersonalInfo,
222
- title: t('appInfo.items.typesEntry'),
223
- subtitle: packageInfo.types || 'N/A',
224
- onPress: () => copyToClipboard(packageInfo.types || 'N/A', t('appInfo.items.typesEntry')),
225
- },
226
- ]}
172
+ <SettingsListGroup title={t('appInfo.sections.package')}>
173
+ <SettingsListItem
174
+ icon={<OxyServicesLogo width={20} height={20} />}
175
+ title={t('appInfo.items.name')}
176
+ description={packageInfo.name}
177
+ onPress={() => copyToClipboard(packageInfo.name, t('appInfo.items.name'))}
227
178
  />
228
- </Section>
179
+ <SettingsListItem
180
+ icon={<SettingsIcon name="tag" color={themeStyles.colors.iconData} />}
181
+ title={t('appInfo.items.version')}
182
+ description={packageInfo.version}
183
+ onPress={() => copyToClipboard(packageInfo.version, t('appInfo.items.version'))}
184
+ />
185
+ <SettingsListItem
186
+ icon={<SettingsIcon name="file-document" color={themeStyles.colors.iconPersonalInfo} />}
187
+ title={t('appInfo.items.description')}
188
+ description={packageInfo.description || t('appInfo.items.noDescription')}
189
+ />
190
+ <SettingsListItem
191
+ icon={<SettingsIcon name="code-tags" color={themeStyles.colors.iconStorage} />}
192
+ title={t('appInfo.items.mainEntry')}
193
+ description={packageInfo.main || 'N/A'}
194
+ onPress={() => copyToClipboard(packageInfo.main || 'N/A', t('appInfo.items.mainEntry'))}
195
+ />
196
+ <SettingsListItem
197
+ icon={<SettingsIcon name="library" color={themeStyles.colors.iconSharing} />}
198
+ title={t('appInfo.items.moduleEntry')}
199
+ description={packageInfo.module || 'N/A'}
200
+ onPress={() => copyToClipboard(packageInfo.module || 'N/A', t('appInfo.items.moduleEntry'))}
201
+ />
202
+ <SettingsListItem
203
+ icon={<SettingsIcon name="wrench" color={themeStyles.colors.iconPersonalInfo} />}
204
+ title={t('appInfo.items.typesEntry')}
205
+ description={packageInfo.types || 'N/A'}
206
+ onPress={() => copyToClipboard(packageInfo.types || 'N/A', t('appInfo.items.typesEntry'))}
207
+ />
208
+ </SettingsListGroup>
229
209
 
230
210
  {/* System Information */}
231
- <Section title={t('appInfo.sections.system')} >
232
- <GroupedSection
233
- items={[
234
- {
235
- id: 'platform',
236
- icon: 'cellphone',
237
- iconColor: themeStyles.colors.iconSecurity,
238
- title: t('appInfo.items.platform'),
239
- subtitle: Platform.OS,
240
- },
241
- {
242
- id: 'platform-version',
243
- icon: 'chip',
244
- iconColor: themeStyles.colors.iconData,
245
- title: t('appInfo.items.platformVersion'),
246
- subtitle: systemInfo?.version || t('common.status.loading'),
247
- },
248
- {
249
- id: 'screen-width',
250
- icon: 'resize',
251
- iconColor: themeStyles.colors.iconStorage,
252
- title: t('appInfo.items.screenWidth'),
253
- subtitle: `${systemInfo?.screenDimensions.width || 0}px`,
254
- },
255
- {
256
- id: 'screen-height',
257
- icon: 'resize',
258
- iconColor: themeStyles.colors.iconSharing,
259
- title: t('appInfo.items.screenHeight'),
260
- subtitle: `${systemInfo?.screenDimensions.height || 0}px`,
261
- },
262
- {
263
- id: 'environment',
264
- icon: 'cog',
265
- iconColor: themeStyles.colors.iconPersonalInfo,
266
- title: t('appInfo.items.environment'),
267
- subtitle: __DEV__ ? t('appInfo.items.development') : t('appInfo.items.production'),
268
- },
269
- ]}
211
+ <SettingsListGroup title={t('appInfo.sections.system')}>
212
+ <SettingsListItem
213
+ icon={<SettingsIcon name="cellphone" color={themeStyles.colors.iconSecurity} />}
214
+ title={t('appInfo.items.platform')}
215
+ description={Platform.OS}
216
+ />
217
+ <SettingsListItem
218
+ icon={<SettingsIcon name="chip" color={themeStyles.colors.iconData} />}
219
+ title={t('appInfo.items.platformVersion')}
220
+ description={systemInfo?.version || t('common.status.loading')}
221
+ />
222
+ <SettingsListItem
223
+ icon={<SettingsIcon name="resize" color={themeStyles.colors.iconStorage} />}
224
+ title={t('appInfo.items.screenWidth')}
225
+ description={`${systemInfo?.screenDimensions.width || 0}px`}
226
+ />
227
+ <SettingsListItem
228
+ icon={<SettingsIcon name="resize" color={themeStyles.colors.iconSharing} />}
229
+ title={t('appInfo.items.screenHeight')}
230
+ description={`${systemInfo?.screenDimensions.height || 0}px`}
231
+ />
232
+ <SettingsListItem
233
+ icon={<SettingsIcon name="cog" color={themeStyles.colors.iconPersonalInfo} />}
234
+ title={t('appInfo.items.environment')}
235
+ description={__DEV__ ? t('appInfo.items.development') : t('appInfo.items.production')}
270
236
  />
271
- </Section>
237
+ </SettingsListGroup>
272
238
 
273
239
  {/* User Information */}
274
- <Section title={t('appInfo.sections.user')} >
275
- <GroupedSection
276
- items={[
277
- {
278
- id: 'auth-status',
279
- icon: 'shield-check',
280
- iconColor: isAuthenticated ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing,
281
- title: t('appInfo.items.authStatus'),
282
- subtitle: isAuthenticated ? t('appInfo.items.authenticated') : t('appInfo.items.notAuthenticated'),
283
- },
284
- ...(user ? [
285
- {
286
- id: 'user-id',
287
- icon: 'account',
288
- iconColor: themeStyles.colors.iconSecurity,
289
- title: t('appInfo.items.userId'),
290
- subtitle: user.id,
291
- onPress: () => copyToClipboard(user.id, t('appInfo.items.userId')),
292
- },
293
- {
294
- id: 'username',
295
- icon: 'at',
296
- iconColor: themeStyles.colors.iconData,
297
- title: t('appInfo.items.username'),
298
- subtitle: user.username || 'N/A',
299
- onPress: () => {
300
- if (user?.username && navigate) {
301
- navigate('Profile', { userId: user.id });
302
- } else {
303
- toast.info(t('appInfo.toasts.noUsernameOrNav'));
304
- }
305
- },
306
- },
307
- {
308
- id: 'email',
309
- icon: 'mail',
310
- iconColor: themeStyles.colors.iconStorage,
311
- title: t('appInfo.items.email'),
312
- subtitle: user.email || 'N/A',
313
- },
314
- {
315
- id: 'premium-status',
316
- icon: 'star',
317
- iconColor: user.isPremium ? '#FFD700' : '#8E8E93',
318
- title: t('appInfo.items.premiumStatus'),
319
- subtitle: user.isPremium ? t('appInfo.items.premium') : t('appInfo.items.standard'),
320
- },
321
- ] : []),
322
- {
323
- id: 'active-sessions',
324
- icon: 'account-group',
325
- iconColor: themeStyles.colors.iconPersonalInfo,
326
- title: t('appInfo.items.totalActiveSessions'),
327
- subtitle: sessions?.length?.toString() || '0',
328
- },
329
- ]}
240
+ <SettingsListGroup title={t('appInfo.sections.user')}>
241
+ <SettingsListItem
242
+ icon={<SettingsIcon name="shield-check" color={isAuthenticated ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing} />}
243
+ title={t('appInfo.items.authStatus')}
244
+ description={isAuthenticated ? t('appInfo.items.authenticated') : t('appInfo.items.notAuthenticated')}
330
245
  />
331
- </Section>
246
+ {user && (
247
+ <>
248
+ <SettingsListItem
249
+ icon={<SettingsIcon name="account" color={themeStyles.colors.iconSecurity} />}
250
+ title={t('appInfo.items.userId')}
251
+ description={user.id}
252
+ onPress={() => copyToClipboard(user.id, t('appInfo.items.userId'))}
253
+ />
254
+ <SettingsListItem
255
+ icon={<SettingsIcon name="at" color={themeStyles.colors.iconData} />}
256
+ title={t('appInfo.items.username')}
257
+ description={user.username || 'N/A'}
258
+ onPress={() => {
259
+ if (user?.username && navigate) {
260
+ navigate('Profile', { userId: user.id });
261
+ } else {
262
+ toast.info(t('appInfo.toasts.noUsernameOrNav'));
263
+ }
264
+ }}
265
+ />
266
+ <SettingsListItem
267
+ icon={<SettingsIcon name="email" color={themeStyles.colors.iconStorage} />}
268
+ title={t('appInfo.items.email')}
269
+ description={user.email || 'N/A'}
270
+ />
271
+ <SettingsListItem
272
+ icon={<SettingsIcon name="star" color={user.isPremium ? '#FFD700' : '#8E8E93'} />}
273
+ title={t('appInfo.items.premiumStatus')}
274
+ description={user.isPremium ? t('appInfo.items.premium') : t('appInfo.items.standard')}
275
+ />
276
+ </>
277
+ )}
278
+ <SettingsListItem
279
+ icon={<SettingsIcon name="account-group" color={themeStyles.colors.iconPersonalInfo} />}
280
+ title={t('appInfo.items.totalActiveSessions')}
281
+ description={sessions?.length?.toString() || '0'}
282
+ />
283
+ </SettingsListGroup>
332
284
 
333
285
  {/* API Configuration */}
334
- <Section title={t('appInfo.sections.api')} >
335
- <GroupedSection
336
- items={[
337
- {
338
- id: 'api-base-url',
339
- icon: 'server',
340
- iconColor: themeStyles.colors.iconSecurity,
341
- title: t('appInfo.items.apiBaseUrl'),
342
- subtitle: oxyServices?.getBaseURL() || t('appInfo.items.notConfigured'),
343
- onPress: () => copyToClipboard(oxyServices?.getBaseURL() || t('appInfo.items.notConfigured'), t('appInfo.items.apiBaseUrl')),
344
- },
345
- {
346
- id: 'connection-status',
347
- icon: connectionStatus === 'checking' ? 'sync' : connectionStatus === 'connected' ? 'wifi' : 'wifi-off',
348
- iconColor: connectionStatus === 'checking' ? themeStyles.colors.iconStorage : connectionStatus === 'connected' ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing,
349
- title: t('appInfo.items.connectionStatus'),
350
- subtitle: connectionStatus === 'checking' ? t('appInfo.items.checking') : connectionStatus === 'connected' ? t('appInfo.items.connected') : connectionStatus === 'disconnected' ? t('appInfo.items.disconnected') : t('appInfo.items.unknown'),
351
- onPress: async () => {
352
- setConnectionStatus('checking');
286
+ <SettingsListGroup title={t('appInfo.sections.api')}>
287
+ <SettingsListItem
288
+ icon={<SettingsIcon name="server" color={themeStyles.colors.iconSecurity} />}
289
+ title={t('appInfo.items.apiBaseUrl')}
290
+ description={oxyServices?.getBaseURL() || t('appInfo.items.notConfigured')}
291
+ onPress={() => copyToClipboard(oxyServices?.getBaseURL() || t('appInfo.items.notConfigured'), t('appInfo.items.apiBaseUrl'))}
292
+ />
293
+ <SettingsListItem
294
+ icon={<SettingsIcon
295
+ name={connectionStatus === 'checking' ? 'sync' : connectionStatus === 'connected' ? 'wifi' : 'wifi-off'}
296
+ color={connectionStatus === 'checking' ? themeStyles.colors.iconStorage : connectionStatus === 'connected' ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing}
297
+ />}
298
+ title={t('appInfo.items.connectionStatus')}
299
+ description={connectionStatus === 'checking' ? t('appInfo.items.checking') : connectionStatus === 'connected' ? t('appInfo.items.connected') : connectionStatus === 'disconnected' ? t('appInfo.items.disconnected') : t('appInfo.items.unknown')}
300
+ onPress={async () => {
301
+ setConnectionStatus('checking');
353
302
 
354
- if (!oxyServices) {
355
- setConnectionStatus('disconnected');
356
- toast.error(t('appInfo.toasts.oxyServicesNotInitialized'));
357
- return;
358
- }
303
+ if (!oxyServices) {
304
+ setConnectionStatus('disconnected');
305
+ toast.error(t('appInfo.toasts.oxyServicesNotInitialized'));
306
+ return;
307
+ }
359
308
 
360
- try {
361
- await oxyServices.healthCheck();
362
- setConnectionStatus('connected');
363
- toast.success(t('appInfo.toasts.apiConnectionSuccess'));
364
- } catch (error) {
365
- setConnectionStatus('disconnected');
366
- toast.error(t('appInfo.toasts.apiConnectionFailed'));
367
- }
368
- },
369
- },
370
- ]}
309
+ try {
310
+ await oxyServices.healthCheck();
311
+ setConnectionStatus('connected');
312
+ toast.success(t('appInfo.toasts.apiConnectionSuccess'));
313
+ } catch (error) {
314
+ setConnectionStatus('disconnected');
315
+ toast.error(t('appInfo.toasts.apiConnectionFailed'));
316
+ }
317
+ }}
371
318
  />
372
- </Section>
319
+ </SettingsListGroup>
373
320
 
374
321
  {/* Build Information */}
375
- <Section title={t('appInfo.sections.build')} >
376
- <GroupedSection
377
- items={[
378
- {
379
- id: 'build-timestamp',
380
- icon: 'clock',
381
- iconColor: themeStyles.colors.iconSecurity,
382
- title: t('appInfo.items.buildTimestamp'),
383
- subtitle: systemInfo?.timestamp || t('common.status.loading'),
384
- onPress: () => copyToClipboard(systemInfo?.timestamp || t('common.status.loading'), t('appInfo.items.buildTimestamp')),
385
- },
386
- {
387
- id: 'react-native',
388
- icon: 'react',
389
- iconColor: '#61DAFB',
390
- title: t('appInfo.items.reactNative'),
391
- subtitle: t('appInfo.items.reactNativeValue'),
392
- },
393
- {
394
- id: 'js-engine',
395
- icon: 'flash',
396
- iconColor: themeStyles.colors.iconSharing,
397
- title: t('appInfo.items.jsEngine'),
398
- subtitle: t('appInfo.items.jsEngineValue'),
399
- },
400
- ]}
322
+ <SettingsListGroup title={t('appInfo.sections.build')}>
323
+ <SettingsListItem
324
+ icon={<SettingsIcon name="clock" color={themeStyles.colors.iconSecurity} />}
325
+ title={t('appInfo.items.buildTimestamp')}
326
+ description={systemInfo?.timestamp || t('common.status.loading')}
327
+ onPress={() => copyToClipboard(systemInfo?.timestamp || t('common.status.loading'), t('appInfo.items.buildTimestamp'))}
401
328
  />
402
- </Section>
329
+ <SettingsListItem
330
+ icon={<SettingsIcon name="react" color="#61DAFB" />}
331
+ title={t('appInfo.items.reactNative')}
332
+ description={t('appInfo.items.reactNativeValue')}
333
+ />
334
+ <SettingsListItem
335
+ icon={<SettingsIcon name="flash" color={themeStyles.colors.iconSharing} />}
336
+ title={t('appInfo.items.jsEngine')}
337
+ description={t('appInfo.items.jsEngineValue')}
338
+ />
339
+ </SettingsListGroup>
403
340
 
404
341
  {/* Quick Actions */}
405
- <Section title={t('appInfo.sections.quickActions')} >
406
- <GroupedSection
407
- items={[
408
- {
409
- id: 'copy-full-report',
410
- icon: 'content-copy',
411
- iconColor: themeStyles.colors.iconSecurity,
412
- title: t('appInfo.items.copyFullReport'),
413
- subtitle: t('appInfo.items.copyFullReportSubtitle'),
414
- onPress: handleCopyFullReport,
415
- },
416
- {
417
- id: 'run-system-check',
418
- icon: isRunningSystemCheck ? 'sync' : 'check-circle',
419
- iconColor: isRunningSystemCheck ? '#FF9500' : '#34C759',
420
- title: isRunningSystemCheck ? t('appInfo.items.runningSystemCheck') : t('appInfo.items.runSystemCheck'),
421
- subtitle: isRunningSystemCheck
422
- ? t('appInfo.items.systemCheckRunning')
423
- : t('appInfo.items.systemCheckSubtitle'),
424
- onPress: runSystemCheck,
425
- disabled: isRunningSystemCheck,
426
- customContent: isRunningSystemCheck ? (
427
- <ActivityIndicator color="#FF9500" size="small" style={{ marginRight: 16 }} />
428
- ) : null,
429
- },
430
- ]}
342
+ <SettingsListGroup title={t('appInfo.sections.quickActions')}>
343
+ <SettingsListItem
344
+ icon={<SettingsIcon name="content-copy" color={themeStyles.colors.iconSecurity} />}
345
+ title={t('appInfo.items.copyFullReport')}
346
+ description={t('appInfo.items.copyFullReportSubtitle')}
347
+ onPress={handleCopyFullReport}
431
348
  />
432
- </Section>
349
+ <SettingsListItem
350
+ icon={<SettingsIcon
351
+ name={isRunningSystemCheck ? 'sync' : 'check-circle'}
352
+ color={isRunningSystemCheck ? '#FF9500' : '#34C759'}
353
+ />}
354
+ title={isRunningSystemCheck ? t('appInfo.items.runningSystemCheck') : t('appInfo.items.runSystemCheck')}
355
+ description={isRunningSystemCheck
356
+ ? t('appInfo.items.systemCheckRunning')
357
+ : t('appInfo.items.systemCheckSubtitle')}
358
+ onPress={runSystemCheck}
359
+ disabled={isRunningSystemCheck}
360
+ rightElement={isRunningSystemCheck ? (
361
+ <ActivityIndicator color="#FF9500" size="small" />
362
+ ) : undefined}
363
+ />
364
+ </SettingsListGroup>
433
365
  </ScrollView>
434
366
  </View>
435
367
  );
@@ -463,9 +395,6 @@ const styles = StyleSheet.create({
463
395
  flex: 1,
464
396
  padding: 16,
465
397
  },
466
- settingIcon: {
467
- marginRight: 12,
468
- },
469
398
  });
470
399
 
471
400
  export default AppInfoScreen;
package/src/ui/screens/HelpSupportScreen.tsx CHANGED
@@ -1,18 +1,18 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import {
3
3
  View,
4
- Text,
5
- TouchableOpacity,
6
4
  StyleSheet,
7
5
  ScrollView,
8
6
  Linking,
9
7
  } from 'react-native';
10
8
  import type { BaseScreenProps } from '../types/navigation';
11
9
  import { toast } from '../../lib/sonner';
12
- import { Header, Section, GroupedSection } from '../components';
10
+ import { Header } from '../components';
11
+ import { SettingsIcon } from '../components/SettingsIcon';
13
12
  import { useI18n } from '../hooks/useI18n';
14
13
  import { useThemeStyles } from '../hooks/useThemeStyles';
15
14
  import { useColorScheme } from '../hooks/useColorScheme';
15
+ import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
16
16
 
17
17
  const HelpSupportScreen: React.FC<BaseScreenProps> = ({
18
18
  onClose,
@@ -57,82 +57,60 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
57
57
 
58
58
  <ScrollView style={styles.content}>
59
59
  {/* Help Options */}
60
- <Section title={t('help.options') || 'Get Help'} isFirst={true}>
61
- <GroupedSection
62
- items={[
63
- {
64
- id: 'faq',
65
- icon: 'help-circle',
66
- iconColor: themeStyles.colors.iconSecurity,
67
- title: t('help.faq.title') || 'Frequently Asked Questions',
68
- subtitle: t('help.faq.subtitle') || 'Find answers to common questions',
69
- onPress: handleFAQ,
70
- },
71
- {
72
- id: 'contact',
73
- icon: 'mail',
74
- iconColor: themeStyles.colors.iconPersonalInfo,
75
- title: t('help.contact.title') || 'Contact Support',
76
- subtitle: t('help.contact.subtitle') || 'Get help from our support team',
77
- onPress: handleContactSupport,
78
- },
79
- {
80
- id: 'report-bug',
81
- icon: 'bug',
82
- iconColor: themeStyles.colors.iconStorage,
83
- title: t('help.reportBug.title') || 'Report a Bug',
84
- subtitle: t('help.reportBug.subtitle') || 'Help us improve by reporting issues',
85
- onPress: handleReportBug,
86
- },
87
- ]}
88
-
60
+ <SettingsListGroup title={t('help.options') || 'Get Help'}>
61
+ <SettingsListItem
62
+ icon={<SettingsIcon name="help-circle" color={themeStyles.colors.iconSecurity} />}
63
+ title={t('help.faq.title') || 'Frequently Asked Questions'}
64
+ description={t('help.faq.subtitle') || 'Find answers to common questions'}
65
+ onPress={handleFAQ}
66
+ />
67
+ <SettingsListItem
68
+ icon={<SettingsIcon name="email" color={themeStyles.colors.iconPersonalInfo} />}
69
+ title={t('help.contact.title') || 'Contact Support'}
70
+ description={t('help.contact.subtitle') || 'Get help from our support team'}
71
+ onPress={handleContactSupport}
89
72
  />
90
- </Section>
73
+ <SettingsListItem
74
+ icon={<SettingsIcon name="bug" color={themeStyles.colors.iconStorage} />}
75
+ title={t('help.reportBug.title') || 'Report a Bug'}
76
+ description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
77
+ onPress={handleReportBug}
78
+ />
79
+ </SettingsListGroup>
91
80
 
92
81
  {/* Resources */}
93
- <Section title={t('help.resources') || 'Resources'} >
94
- <GroupedSection
95
- items={[
96
- {
97
- id: 'documentation',
98
- icon: 'file-document',
99
- iconColor: '#8E8E93',
100
- title: t('help.documentation.title') || 'Documentation',
101
- subtitle: t('help.documentation.subtitle') || 'User guides and tutorials',
102
- onPress: () => {
103
- Linking.openURL('https://developer.oxy.so/docs').catch(() => {
104
- toast.error(t('help.linkError') || 'Failed to open link');
105
- });
106
- },
107
- },
108
- {
109
- id: 'community',
110
- icon: 'account-group',
111
- iconColor: themeStyles.colors.iconData,
112
- title: t('help.community.title') || 'Community',
113
- subtitle: t('help.community.subtitle') || 'Join our community',
114
- onPress: () => {
115
- Linking.openURL('https://community.oxy.so').catch(() => {
116
- toast.error(t('help.linkError') || 'Failed to open link');
117
- });
118
- },
119
- },
120
- {
121
- id: 'developers-portal',
122
- icon: 'code-tags',
123
- iconColor: themeStyles.colors.iconSharing,
124
- title: t('help.developersPortal.title') || 'Developers Portal',
125
- subtitle: t('help.developersPortal.subtitle') || 'API documentation and developer resources',
126
- onPress: () => {
127
- Linking.openURL('https://developer.oxy.so').catch(() => {
128
- toast.error(t('help.linkError') || 'Failed to open link');
129
- });
130
- },
131
- },
132
- ]}
133
-
82
+ <SettingsListGroup title={t('help.resources') || 'Resources'}>
83
+ <SettingsListItem
84
+ icon={<SettingsIcon name="file-document" color="#8E8E93" />}
85
+ title={t('help.documentation.title') || 'Documentation'}
86
+ description={t('help.documentation.subtitle') || 'User guides and tutorials'}
87
+ onPress={() => {
88
+ Linking.openURL('https://developer.oxy.so/docs').catch(() => {
89
+ toast.error(t('help.linkError') || 'Failed to open link');
90
+ });
91
+ }}
134
92
  />
135
- </Section>
93
+ <SettingsListItem
94
+ icon={<SettingsIcon name="account-group" color={themeStyles.colors.iconData} />}
95
+ title={t('help.community.title') || 'Community'}
96
+ description={t('help.community.subtitle') || 'Join our community'}
97
+ onPress={() => {
98
+ Linking.openURL('https://community.oxy.so').catch(() => {
99
+ toast.error(t('help.linkError') || 'Failed to open link');
100
+ });
101
+ }}
102
+ />
103
+ <SettingsListItem
104
+ icon={<SettingsIcon name="code-tags" color={themeStyles.colors.iconSharing} />}
105
+ title={t('help.developersPortal.title') || 'Developers Portal'}
106
+ description={t('help.developersPortal.subtitle') || 'API documentation and developer resources'}
107
+ onPress={() => {
108
+ Linking.openURL('https://developer.oxy.so').catch(() => {
109
+ toast.error(t('help.linkError') || 'Failed to open link');
110
+ });
111
+ }}
112
+ />
113
+ </SettingsListGroup>
136
114
  </ScrollView>
137
115
  </View>
138
116
  );
@@ -149,4 +127,3 @@ const styles = StyleSheet.create({
149
127
  });
150
128
 
151
129
  export default React.memo(HelpSupportScreen);
152
-