@oxy.so/services 11.14.0 → 11.16.0

package/src/ui/screens/EditProfileScreen.tsx

@@ -2,13 +2,13 @@ import type React from 'react';
 import { useMemo } from 'react';
 import { View } from 'react-native';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { getNormalizedUserHandle } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import { Avatar } from '@oxy.so/bloom/avatar';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
 import { SettingsIcon } from '../components/SettingsIcon';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import type { ProfileFieldType } from './EditProfileFieldScreen';
@@ -67,75 +67,78 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
       <ProfileSummaryCard
         displayName={displayName}
         avatarUri={avatarUri}
+        onAvatarPress={openAvatarPicker}
+        showCameraBadge
+        avatarAccessibilityLabel={t('editProfile.changeAvatar')}
         lines={[user?.username ? `@${user.username}` : null]}
       />
 
       {/* Profile picture */}
-      <SettingsListGroup title={t('editProfile.sections.profilePicture') || 'Profile Picture'}>
-        <SettingsListItem
+      <GroupedSection title={t('editProfile.sections.profilePicture') || 'Profile Picture'}>
+        <GroupedSectionItem
           icon={<SettingsIcon name="camera" color={bloomTheme.colors.primary} />}
           title={t('editProfile.changeAvatar') || 'Change avatar'}
           description={t('editProfile.items.avatar.subtitle') || 'Update your profile photo'}
           onPress={openAvatarPicker}
           rightElement={<Avatar source={avatarUri} name={displayName} size={32} />}
         />
-      </SettingsListGroup>
+      </GroupedSection>
 
       {/* Basic information */}
-      <SettingsListGroup title={t('editProfile.sections.basicInfo') || 'Basic Information'}>
-        <SettingsListItem
+      <GroupedSection title={t('editProfile.sections.basicInfo') || 'Basic Information'}>
+        <GroupedSectionItem
           icon={<SettingsIcon name="account" color={bloomTheme.colors.primary} />}
           title={t('editProfile.items.displayName.title') || 'Display Name'}
           description={displayName || notSet}
           onPress={() => goToField('displayName')}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="at" color={bloomTheme.colors.info} />}
           title={t('editProfile.items.username.title') || 'Username'}
           description={user?.username ? `@${user.username}` : notSet}
           onPress={() => goToField('username')}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="phone" color={bloomTheme.colors.warning} />}
           title={t('editProfile.items.phone.title') || 'Phone Number'}
           description={user?.phone || notSet}
           onPress={() => goToField('phone')}
         />
-      </SettingsListGroup>
+      </GroupedSection>
 
       {/* About you */}
-      <SettingsListGroup title={t('editProfile.sections.about') || 'About You'}>
-        <SettingsListItem
+      <GroupedSection title={t('editProfile.sections.about') || 'About You'}>
+        <GroupedSectionItem
           icon={<SettingsIcon name="text" color={bloomTheme.colors.primary} />}
           title={t('editProfile.items.bio.title') || 'Bio'}
           description={user?.bio || notSet}
           onPress={() => goToField('bio')}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="map-marker" color={bloomTheme.colors.info} />}
           title={t('editProfile.items.address.title') || 'Address'}
           description={user?.address || notSet}
           onPress={() => goToField('address')}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="cake-variant" color={bloomTheme.colors.warning} />}
           title={t('editProfile.items.birthday.title') || 'Birthday'}
-          description={user?.birthday || notSet}
+          description={user?.dateOfBirth || notSet}
           onPress={() => goToField('birthday')}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="link-variant" color={bloomTheme.colors.success} />}
           title={t('editProfile.items.links.title') || 'Links'}
           description={linkPreview}
           onPress={() => goToField('links')}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="map-marker-multiple" color={bloomTheme.colors.primary} />}
           title={t('editProfile.items.locations.title') || 'Locations'}
           description={locationPreview}
           onPress={() => goToField('locations')}
         />
-      </SettingsListGroup>
+      </GroupedSection>
     </View>
   );
 };

package/src/ui/screens/FileManagementScreen.tsx

@@ -1,25 +1,19 @@
+import { PressableScale } from '@oxy.so/bloom/pressable-scale';
+import { RiCloseLine } from '@oxy.so/bloom/icons/RiCloseLine';
+import { RiDeleteBinLine } from '@oxy.so/bloom/icons/RiDeleteBinLine';
+import { RiEyeLine } from '@oxy.so/bloom/icons/RiEyeLine';
 import { Button } from '@oxy.so/bloom/button';
 import type React from 'react';
 import { type ComponentRef, useState, useCallback, useMemo, useRef } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  ScrollView,
-  ActivityIndicator,
-  RefreshControl,
-  useWindowDimensions,
-} from 'react-native';
+import { View, StyleSheet, ScrollView, RefreshControl, useWindowDimensions } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import { useQueryClient } from '@tanstack/react-query';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
 import { toast } from '@oxy.so/bloom/toast';
 import { surfaces } from '@oxy.so/bloom/surfaces';
-import * as Skeleton from '@oxy.so/bloom/skeleton';
 import Ionicons from '../icons/Ionicons';
 import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
-import { Pressable } from 'react-native';
 import type { FileMetadata } from '@oxy.so/core';
 import { queryKeys } from '../hooks/queries/queryKeys';
 import {
@@ -28,10 +22,9 @@ import {
   patchFileMetadataInCache,
 } from '../hooks/queries/useFileQueries';
 import { useSurfaceHeader, type SurfaceHeaderContent } from '../hooks/useSurfaceHeader';
-import { SurfaceHeaderAction } from '../components/SurfaceHeaderAction';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useReduceMotion } from '../hooks/useReduceMotion';
 import { useUploadFile } from '../hooks/mutations/useAccountMutations';
@@ -57,21 +50,6 @@ import { SegmentedControl, SegmentedControlItem } from '@oxy.so/bloom/segmented-
 import { Search } from '@oxy.so/bloom/search';
 
 // Photo tiles use expo-image dimensions; controls use Bloom primitives.
-// Nav-header slot layout for this screen's action row + review-mode back button.
-const fmHeaderStyles = StyleSheet.create({
-  actionsRow: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-  backButton: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
 const screenStyles = StyleSheet.create({
   justifiedPhotoImage: { width: '100%', height: '100%', borderRadius: 6 },
 });
@@ -118,8 +96,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     () => filesQuery.data?.pages.flatMap((page) => page.files) ?? [],
     [filesQuery.data],
   );
-  // No owner resolved yet reads as "loading" (matches the old skeleton-until-
-  // first-load behaviour); `isLoading` is the first-page fetch only.
+  // No owner resolved yet counts as pending to avoid an incorrect empty state.
   const isLoadingFiles = !targetUserId || filesQuery.isLoading;
   const isRefreshingFiles = filesQuery.isRefetching;
   const isFetchingMore = filesQuery.isFetchingNextPage;
@@ -825,7 +802,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
       const downloadUrl = thumbSourceFor(photo);
 
       return (
-        <TouchableOpacity
+        <PressableScale
           key={photo.id}
           className="rounded-[6px] overflow-hidden relative"
           style={{
@@ -839,7 +816,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
               : {}),
           }}
           onPress={() => handleFileOpen(photo)}
-          activeOpacity={0.8}
         >
           <View className="w-full h-full relative rounded-[6px] overflow-hidden">
             <ExpoImage
@@ -866,7 +842,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
               </View>
             )}
           </View>
-        </TouchableOpacity>
+        </PressableScale>
       );
     },
     [
@@ -880,7 +856,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     ],
   );
 
-  // SettingsListItem-based file items (for 'all' view)
+  // GroupedSectionItem-based file items (for 'all' view)
   const groupedFileItems: FileListItem[] = useMemo(() => {
     // filteredFiles is already sorted, so just use it directly
     const sortedFiles = filteredFiles;
@@ -1163,95 +1139,30 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
       </View>
     );
 
-  // Loading state — Bloom's shared `Skeleton` primitives own the shimmer, so
-  // this is pure layout: the top chrome (header / controls / search) plus a
-  // photo grid of shimmering tiles sized with the same 3-per-row geometry the
-  // real photo grid uses. No hand-rolled `Animated` shimmer.
-  //
-  // The image-only picker owns its OWN loading skeleton (rendered by
-  // `PhotoPickerView` when its photo list is still loading), so it inherits the
-  // picker's placement-aware container width / columns / tile size and the
-  // Dialog-vs-bottom-sheet sizing. Skipping the browse chrome here is what keeps
-  // the picker from flashing the wrong (file-manager) skeleton inside the Dialog.
-  // The Dialog owns the nav header; this screen contributes its state-dependent
-  // title/subtitle + action slots. The image-only picker mode is headerless
-  // (PhotoPickerView owns its own bar), so this config is simply ignored there.
-  const fmHeaderRight = useMemo<React.ReactNode>(() => {
-    const actions =
-      selectMode && multiSelect
-        ? [
-            {
-              key: 'clear',
-              label: t('fileManagement.clear'),
-              onPress: () => setSelectedIds(new Set()),
-              disabled: selectedIds.size === 0,
-            },
-            {
-              key: 'confirm',
-              label: t('fileManagement.confirm'),
-              onPress: confirmMultiSelection,
-              disabled: selectedIds.size === 0,
-            },
-          ]
-        : !selectMode && selectedIds.size > 0
-          ? [
-              {
-                key: 'clear',
-                label: t('fileManagement.clear'),
-                onPress: () => setSelectedIds(new Set()),
-                disabled: false,
-              },
-              {
-                key: 'delete',
-                label: t('fileManagement.moveToTrashCount', { count: selectedIds.size }),
-                onPress: confirmBulkDelete,
-                disabled: false,
-              },
-              {
-                key: 'visibility',
-                label: t('fileManagement.visibility'),
-                onPress: handleVisibilityChange,
-                disabled: false,
-              },
-            ]
-          : [];
-    if (actions.length === 0) return undefined;
-    return (
-      <View style={fmHeaderStyles.actionsRow}>
-        {actions.map((a) => (
-          <SurfaceHeaderAction
-            key={a.key}
-            label={a.label}
-            onPress={a.onPress}
-            disabled={a.disabled}
-          />
-        ))}
-      </View>
-    );
-  }, [
-    selectMode,
-    multiSelect,
-    selectedIds,
-    t,
-    confirmMultiSelection,
-    confirmBulkDelete,
-    handleVisibilityChange,
-  ]);
-
-  const fmHeaderBack = useMemo<React.ReactNode>(
-    () => (
-      <Pressable
-        onPress={handleCancelUpload}
-        accessibilityRole="button"
-        accessibilityLabel={t('common.back') || 'Back'}
-        hitSlop={8}
-        style={fmHeaderStyles.backButton}
-      >
-        <Ionicons name="chevron-back" size={20} color={colors.text} />
-      </Pressable>
-    ),
-    [handleCancelUpload, colors.text, t],
-  );
+  // Bloom renders the shared action group and primary selection CTA.
+  const fileHeaderActions = useMemo<SurfaceHeaderContent['actions']>(() => {
+    if (!(selectMode && multiSelect) && (selectMode || selectedIds.size === 0)) return undefined;
+    const clear = {
+      icon: RiCloseLine,
+      accessibilityLabel: t('fileManagement.clear'),
+      onPress: () => setSelectedIds(new Set()),
+      disabled: selectedIds.size === 0,
+    };
+    if (selectMode) return [clear];
+    return [
+      clear,
+      {
+        icon: RiDeleteBinLine,
+        accessibilityLabel: t('fileManagement.moveToTrashCount', { count: selectedIds.size }),
+        onPress: confirmBulkDelete,
+      },
+      {
+        icon: RiEyeLine,
+        accessibilityLabel: t('fileManagement.visibility'),
+        onPress: handleVisibilityChange,
+      },
+    ];
+  }, [selectMode, multiSelect, selectedIds.size, t, confirmBulkDelete, handleVisibilityChange]);
 
   // --- Image-only picker: shared-header chrome -----------------------------
   // The flagship photo picker now rides the SAME Dialog nav header as every
@@ -1261,22 +1172,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
   const isOwner = user?.id === targetUserId;
   const allowUpload = isOwner && allowUploadInSelectMode;
 
-  // Cancel = the nav bar's back affordance. A forward-nav picker (`onPicked`,
-  // e.g. the avatar flow) pops its own frame; legacy callback callers keep their
-  // close/back behaviour; a promise-based picker dismisses its surface.
-  const pickerCancel = useCallback(() => {
-    if (onPicked) {
-      // Forward-nav picker: Cancel/back pops THIS frame, returning to the
-      // frame that opened the picker — never closes the whole session.
-      goBack?.();
-    } else if (onSelect || onConfirmSelection) {
-      if (onClose) onClose();
-      else goBack?.();
-    } else {
-      dismiss?.();
-    }
-  }, [onPicked, onSelect, onConfirmSelection, onClose, goBack, dismiss]);
-
   // The picker's ONE trailing CTA, declared through the Dialog header's
   // `primaryAction` (a proper Bloom Button with loading/disabled) — the
   // multi-select confirm ("Done (N)") or, single-select, the Upload action whose
@@ -1315,7 +1210,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
       ? {
           title: t('fileManagement.reviewFiles'),
           subtitle: t('fileManagement.readyToUpload', { count: pendingFiles.length }),
-          left: fmHeaderBack,
+          onBack: handleCancelUpload,
           largeTitle: false,
         }
       : isImageOnlyPicker
@@ -1324,7 +1219,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             // `onImage` tone so the chrome stays legible over the black grid.
             title: t('fileManagement.choosePhoto'),
             largeTitle: false,
-            onBack: pickerCancel,
             primaryAction: pickerPrimaryAction,
             tone: 'onImage',
           }
@@ -1348,74 +1242,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
               : filteredFiles.length === 1
                 ? t('fileManagement.itemCount', { count: filteredFiles.length })
                 : t('fileManagement.itemCount_plural', { count: filteredFiles.length }),
-            right: fmHeaderRight,
+            actions: fileHeaderActions,
+            primaryAction:
+              selectMode && multiSelect
+                ? {
+                    label: t('fileManagement.confirm'),
+                    onPress: confirmMultiSelection,
+                    disabled: selectedIds.size === 0,
+                  }
+                : undefined,
             largeTitle: false,
           },
   );
 
-  if (isLoadingFiles && !isImageOnlyPicker) {
-    const GRID_PADDING = 10;
-    const TILE_GAP = 4;
-    const GRID_COLUMNS = 3;
-    const GRID_ROWS = 6;
-    const tileSize = Math.floor(
-      (safeContainerWidth - GRID_PADDING * 2 - TILE_GAP * (GRID_COLUMNS - 1)) / GRID_COLUMNS,
-    );
-
-    return (
-      <View className="flex-1" style={{ backgroundColor }}>
-        {/* Header */}
-        <View
-          className="flex-row items-center justify-between px-[16px] py-[12px]"
-          style={{ borderBottomColor: colors.border, borderBottomWidth: StyleSheet.hairlineWidth }}
-        >
-          <Skeleton.Box width={44} height={44} borderRadius={12} />
-          <Skeleton.Col style={{ alignItems: 'center', marginHorizontal: 16, gap: 6 }}>
-            <Skeleton.Box width={140} height={20} />
-            <Skeleton.Box width={100} height={14} />
-          </Skeleton.Col>
-          <Skeleton.Box width={44} height={44} borderRadius={12} />
-        </View>
-
-        {/* Controls bar */}
-        <Skeleton.Row
-          style={{
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            paddingHorizontal: 12,
-            paddingVertical: 12,
-          }}
-        >
-          <Skeleton.Box width={100} height={36} borderRadius={18} />
-          <Skeleton.Box width={44} height={44} borderRadius={22} />
-        </Skeleton.Row>
-
-        {/* Search bar */}
-        <View className="mx-[12px] mb-[12px]">
-          <Skeleton.Box width="100%" height={44} borderRadius={22} />
-        </View>
-
-        {/* Photo grid — static skeleton placeholders; index keys are stable */}
-        <View style={{ padding: GRID_PADDING, gap: TILE_GAP }}>
-          {Array.from({ length: GRID_ROWS }, (_, row) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: fixed-size skeleton grid, order never changes
-            <Skeleton.Row key={`skeleton-row-${row}`} style={{ gap: TILE_GAP }}>
-              {Array.from({ length: GRID_COLUMNS }, (_, col) => (
-                <Skeleton.Box
-                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed-size skeleton grid, order never changes
-                  key={`skeleton-${row}-${col}`}
-                  width={tileSize}
-                  height={tileSize}
-                  borderRadius={6}
-                />
-              ))}
-            </Skeleton.Row>
-          ))}
-        </View>
-      </View>
-    );
-  }
-
   // Dedicated flagship-style photo picker view used in the avatar-picker
   // context (selectMode + image-only filter). The picker is intentionally
   // minimal: black backdrop, edge-to-edge grid, translucent header. The

package/src/ui/screens/FileTrashScreen.tsx

@@ -9,7 +9,7 @@ import { useTheme } from '@oxy.so/bloom/theme';
 import { useQueryClient } from '@tanstack/react-query';
 import type { BaseScreenProps } from '../types/navigation';
 import Ionicons from '../icons/Ionicons';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { queryKeys } from '../hooks/queries/queryKeys';

package/src/ui/screens/HelpSupportScreen.tsx

@@ -1,15 +1,17 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useContext } from 'react';
 import { View, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxy.so/bloom/toast';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { OxySupportContext } from '../context/oxySupportContext';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
-const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
+const HelpSupportScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
   const { t } = useI18n();
+  const { onAskAlia, documentationUrl, aliaAvatar } = useContext(OxySupportContext);
 
   useSurfaceHeader({ title: t('help.title') || 'Help & Support' });
   const bloomTheme = useTheme();
@@ -23,27 +25,18 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     [t],
   );
 
-  const handleReportBug = useMemo(
-    () => () => {
-      Linking.openURL('mailto:bugs@oxy.so?subject=Bug Report').catch(() => {
-        toast.error(t('help.reportError') || 'Failed to open email client');
-      });
-    },
-    [t],
-  );
-
   const handleDocumentation = useMemo(
     () => () => {
-      Linking.openURL('https://developer.oxy.so/docs').catch(() => {
+      Linking.openURL(documentationUrl ?? 'https://oxy.so/developers/docs/').catch(() => {
         toast.error(t('help.linkError') || 'Failed to open link');
       });
     },
-    [t],
+    [t, documentationUrl],
   );
 
   const handleCommunity = useMemo(
     () => () => {
-      Linking.openURL('https://community.oxy.so').catch(() => {
+      Linking.openURL('https://t.me/OxyHQInc').catch(() => {
         toast.error(t('help.linkError') || 'Failed to open link');
       });
     },
@@ -52,7 +45,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
 
   const handleDevelopersPortal = useMemo(
     () => () => {
-      Linking.openURL('https://developer.oxy.so').catch(() => {
+      Linking.openURL('https://oxy.so/developers/').catch(() => {
         toast.error(t('help.linkError') || 'Failed to open link');
       });
     },
@@ -60,49 +53,62 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
   );
 
   return (
-    <>
-      <View className="px-screen-margin pb-space-24">
-        {/* Help Options */}
-        <SettingsListGroup title={t('help.options') || 'Get Help'}>
-          <SettingsListItem
+    <View className="px-screen-margin pb-space-24">
+      {/* Help Options */}
+      <GroupedSection title={t('help.options') || 'Get Help'}>
+        {onAskAlia ? (
+          <GroupedSectionItem
+            icon={aliaAvatar ?? <SettingsIcon name="star" color={bloomTheme.colors.primary} />}
+            title={t('help.alia.title')}
+            description={t('help.alia.subtitle')}
+            onPress={async () => {
+              try {
+                await onAskAlia();
+              } catch {
+                toast.error(t('help.alia.openError'));
+              }
+            }}
+          />
+        ) : (
+          <GroupedSectionItem
             icon={<SettingsIcon name="email" color={bloomTheme.colors.success} />}
             title={t('help.contact.title') || 'Contact Support'}
             description={t('help.contact.subtitle') || 'Get help from our support team'}
             onPress={handleContactSupport}
           />
-          <SettingsListItem
-            icon={<SettingsIcon name="bug" color={bloomTheme.colors.warning} />}
-            title={t('help.reportBug.title') || 'Report a Bug'}
-            description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
-            onPress={handleReportBug}
-          />
-        </SettingsListGroup>
+        )}
+        <GroupedSectionItem
+          icon={<SettingsIcon name="bug" color={bloomTheme.colors.warning} />}
+          title={t('help.reportBug.title') || 'Report a Bug'}
+          description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
+          onPress={() => navigate?.('ReportBug')}
+        />
+      </GroupedSection>
 
-        {/* Resources */}
-        <SettingsListGroup title={t('help.resources') || 'Resources'}>
-          <SettingsListItem
-            icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
-            title={t('help.documentation.title') || 'Documentation'}
-            description={t('help.documentation.subtitle') || 'User guides and tutorials'}
-            onPress={handleDocumentation}
-          />
-          <SettingsListItem
-            icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
-            title={t('help.community.title') || 'Community'}
-            description={t('help.community.subtitle') || 'Join our community'}
-            onPress={handleCommunity}
-          />
-          <SettingsListItem
-            icon={<SettingsIcon name="code-tags" color={bloomTheme.colors.error} />}
-            title={t('help.developersPortal.title') || 'Developers Portal'}
-            description={
-              t('help.developersPortal.subtitle') || 'API documentation and developer resources'
-            }
-            onPress={handleDevelopersPortal}
-          />
-        </SettingsListGroup>
-      </View>
-    </>
+      {/* Resources */}
+      <GroupedSection title={t('help.resources') || 'Resources'}>
+        <GroupedSectionItem
+          icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
+          title={t('help.documentation.title') || 'Documentation'}
+          description={t('help.documentation.subtitle') || 'User guides and tutorials'}
+          onPress={handleDocumentation}
+        />
+        <GroupedSectionItem
+          icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
+          title={t('help.community.title') || 'Community'}
+          description={t('help.community.subtitle') || 'Join our community'}
+          onPress={handleCommunity}
+        />
+        <GroupedSectionItem
+          icon={<SettingsIcon name="code-tags" color={bloomTheme.colors.error} />}
+          title={t('help.developersPortal.title') || 'Developers Portal'}
+          description={
+            t('help.developersPortal.subtitle') || 'API documentation and developer resources'
+          }
+          onPress={handleDevelopersPortal}
+        />
+      </GroupedSection>
+    </View>
   );
 };