@oxy.so/services 11.14.0 → 11.16.0

package/src/ui/screens/ReportBugScreen.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { Linking, View } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Field } from '@oxy.so/bloom/field';
+import { TextFieldInput } from '@oxy.so/bloom/text-field';
+import { Textarea } from '@oxy.so/bloom/textarea';
+import { Text } from '@oxy.so/bloom/typography';
+import { toast } from '@oxy.so/bloom/toast';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+
+export default function ReportBugScreen() {
+  const { t } = useI18n();
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [attempted, setAttempted] = useState(false);
+  const [opening, setOpening] = useState(false);
+  useSurfaceHeader({ title: t('help.reportBug.title') });
+
+  const openDraft = async () => {
+    setAttempted(true);
+    if (!title.trim() || !description.trim() || opening) return;
+    setOpening(true);
+    try {
+      await Linking.openURL(
+        `mailto:bugs@oxy.so?subject=${encodeURIComponent(title.trim())}&body=${encodeURIComponent(description.trim())}`,
+      );
+    } catch {
+      toast.error(t('help.reportError'));
+    } finally {
+      setOpening(false);
+    }
+  };
+
+  return (
+    <View className="px-screen-margin pb-space-24 gap-space-16">
+      <Field
+        label={t('help.reportBug.summary')}
+        error={attempted && !title.trim() ? t('help.reportBug.summaryRequired') : undefined}
+      >
+        <TextFieldInput
+          label={t('help.reportBug.summary')}
+          value={title}
+          onValueChange={setTitle}
+          maxLength={120}
+        />
+      </Field>
+      <Field
+        label={t('help.reportBug.description')}
+        error={
+          attempted && !description.trim() ? t('help.reportBug.descriptionRequired') : undefined
+        }
+      >
+        <Textarea
+          label={t('help.reportBug.description')}
+          value={description}
+          onValueChange={setDescription}
+          placeholder={t('help.reportBug.descriptionHint')}
+          maxLength={4000}
+        />
+      </Field>
+      <Text className="text-text-secondary">{t('help.reportBug.emailHint')}</Text>
+      <Button onPress={openDraft} disabled={opening}>
+        {t('help.reportBug.continueEmail')}
+      </Button>
+    </View>
+  );
+}

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -1,17 +1,16 @@
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Loading } from '@oxy.so/bloom/loading';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { Switch } from '@oxy.so/bloom/switch';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { useSettingToggles } from '../hooks/useSettingToggle';
-import { useOxy } from '../context/OxyContext';
-import { useCurrentUser } from '../hooks/queries/useAccountQueries';
-import type { User } from '@oxy.so/core';
+import { useUpdatePrivacySettings } from '../hooks/mutations/useAccountMutations';
+import { toast } from '@oxy.so/bloom/toast';
+import { useOxy } from '../context/oxyRuntimeContext';
+import { usePrivacySettings } from '../hooks/queries/useAccountQueries';
 
 interface SearchSettings {
   safeSearch: boolean;
@@ -22,70 +21,36 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
   // Search settings are persisted on the ACTIVE account's profile (the
   // org/project/bot when switched, else the personal user); reads/writes
   // authenticate as the active session, which IS that account.
-  const { oxyServices, user } = useOxy();
+  const { user } = useOxy();
   const { t } = useI18n();
 
   useSurfaceHeader({ title: t('searchSettings.title') || 'Search Settings' });
   const bloomTheme = useTheme();
 
-  // Use the existing useSettingToggles hook for toggle management
-  const {
-    values: settings,
-    toggle,
-    savingKeys,
-    setValues,
-  } = useSettingToggles<SearchSettings>({
-    initialValues: { safeSearch: false, searchPersonalization: true },
-    onSave: async (key, value) => {
-      if (!user?.id || !oxyServices) return;
-
-      const fieldMap: Record<keyof SearchSettings, string> = {
-        safeSearch: 'autoFilter',
-        searchPersonalization: 'dataSharing',
-      };
-
-      await oxyServices.users.updateMe({
-        privacySettings: {
-          [fieldMap[key]]: value,
-        },
-      });
-    },
-    errorMessage: (key) => t(`searchSettings.${key}.error`) || `Failed to update ${key}`,
-  });
-
-  const isSaving = savingKeys.size > 0;
-
-  // The profile comes from the shared React Query cache (the same entry every
-  // account surface reads), not a fetch of its own on every mount.
-  const currentUser = useCurrentUser({ enabled: Boolean(user?.id) });
-  const isLoading = Boolean(user?.id) && currentUser.isPending;
-  const privacySettings = (
-    currentUser.data as
-      | (User & { privacySettings?: { autoFilter?: boolean; dataSharing?: boolean } })
-      | undefined
-  )?.privacySettings;
+  const privacyQuery = usePrivacySettings(user?.id);
+  const updateSettings = useUpdatePrivacySettings();
+  const privacy = privacyQuery.data ?? user?.privacySettings;
+  const settings: SearchSettings = {
+    safeSearch: privacy?.autoFilter ?? true,
+    searchPersonalization: privacy?.dataSharing ?? true,
+  };
+  const isSaving = updateSettings.isPending;
+  const isLoading = !user?.id || privacyQuery.isPending;
+  const toggle = (key: keyof SearchSettings) => {
+    if (isSaving || isLoading) return;
+    const field = key === 'safeSearch' ? 'autoFilter' : 'dataSharing';
+    updateSettings.mutate({ userId: user.id, settings: { [field]: !settings[key] } });
+  };
   useEffect(() => {
-    if (!privacySettings) return;
-    setValues({
-      safeSearch: privacySettings.autoFilter ?? false,
-      searchPersonalization: privacySettings.dataSharing ?? true,
-    });
-  }, [privacySettings, setValues]);
-
-  if (isLoading) {
-    return (
-      <>
-        <Loading size="lg" color={bloomTheme.colors.text} />
-      </>
-    );
-  }
+    if (privacyQuery.error) toast.error(t('privacySettings.loadError'));
+  }, [privacyQuery.error, t]);
 
   return (
     <>
       <View className="px-screen-margin pb-space-24">
         {/* SafeSearch */}
-        <SettingsListGroup title={t('searchSettings.safeSearch.title') || 'SafeSearch'}>
-          <SettingsListItem
+        <GroupedSection title={t('searchSettings.safeSearch.title') || 'SafeSearch'}>
+          <GroupedSectionItem
             icon={<SettingsIcon name="shield-search" color={bloomTheme.colors.success} />}
             title={t('searchSettings.safeSearch.label') || 'Enable SafeSearch'}
             description={
@@ -96,18 +61,18 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
               <Switch
                 checked={settings.safeSearch}
                 onCheckedChange={() => toggle('safeSearch')}
-                disabled={isSaving}
+                disabled={isSaving || isLoading}
               />
             }
             showChevron={false}
           />
-        </SettingsListGroup>
+        </GroupedSection>
 
         {/* Search Personalization */}
-        <SettingsListGroup
+        <GroupedSection
           title={t('searchSettings.personalization.title') || 'Search Personalization'}
         >
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="account-search" color={bloomTheme.colors.primary} />}
             title={t('searchSettings.personalization.label') || 'Personalized Search'}
             description={
@@ -118,12 +83,12 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
               <Switch
                 checked={settings.searchPersonalization}
                 onCheckedChange={() => toggle('searchPersonalization')}
-                disabled={isSaving}
+                disabled={isSaving || isLoading}
               />
             }
             showChevron={false}
           />
-        </SettingsListGroup>
+        </GroupedSection>
       </View>
     </>
   );

package/src/ui/screens/SupervisionScreen.tsx

@@ -4,7 +4,7 @@ import { useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@oxy.so/bloom/button';
 import { Text } from '@oxy.so/bloom/typography';
 import type { PurchaseApproval, SafetyPerson, ReauthProof } from '@oxy.so/contracts';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useSupervision, supervisionQueryKeys } from '../hooks/queries/useSupervision';

package/src/ui/screens/UserListScreen.tsx

@@ -1,6 +1,8 @@
+import { Search } from '@oxy.so/bloom/search';
+import { RiSearchLine } from '@oxy.so/bloom/icons/RiSearchLine';
 import type React from 'react';
-import { useEffect, useState, useCallback } from 'react';
-import { View, StyleSheet, ActivityIndicator, FlatList, RefreshControl } from 'react-native';
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { View, StyleSheet, FlatList, RefreshControl } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { H6, Text } from '@oxy.so/bloom/typography';
@@ -10,7 +12,7 @@ import FollowButton from '../components/FollowButton';
 import Ionicons from '../icons/Ionicons';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { logger, getNormalizedUserHandle, getAccountFallbackHandle } from '@oxy.so/core';
 import type { User, FollowGraphSort } from '@oxy.so/core';
 
@@ -20,11 +22,7 @@ interface UserListScreenProps extends BaseScreenProps {
   userId: string;
   mode: ListMode;
   initialCount?: number;
-  /**
-   * Ordering of the list — `recent` (newest follow first) or `oldest`.
-   * Omitted ⇒ the server default (`recent`). Changing it re-fetches from
-   * offset 0, since a page boundary is meaningless across two orderings.
-   */
+  /** @deprecated Ordering is server-owned and never chronological. */
   sort?: FollowGraphSort;
 }
 
@@ -40,16 +38,12 @@ const ERROR_ICON_SIZE = 48;
 const resolveUserId = (user: User): string =>
   user.id || (typeof user._id === 'string' ? user._id : '');
 
-const UserListScreen: React.FC<UserListScreenProps> = ({
-  userId,
-  mode,
-  initialCount,
-  sort,
-  navigate,
-}) => {
+const UserListScreen: React.FC<UserListScreenProps> = ({ userId, mode, sort, navigate }) => {
   const { oxyServices, user: currentUser } = useOxy();
   const [users, setUsers] = useState<User[]>([]);
-  const [total, setTotal] = useState(initialCount ?? 0);
+  const fetching = useRef(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [search, setSearch] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -69,6 +63,8 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         return;
       }
 
+      if (fetching.current) return;
+      fetching.current = true;
       try {
         if (isRefresh) {
           setIsRefreshing(true);
@@ -80,7 +76,6 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         setError(null);
 
         let newUsers: User[];
-        let total: number;
         let hasMore: boolean;
 
         if (mode === 'followers') {
@@ -90,7 +85,6 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
             sort,
           });
           newUsers = result.followers;
-          total = result.total;
           hasMore = result.hasMore;
         } else {
           const result = await oxyServices.follows.following(userId, {
@@ -99,7 +93,6 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
             sort,
           });
           newUsers = result.following;
-          total = result.total;
           hasMore = result.hasMore;
         }
 
@@ -109,8 +102,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
           setUsers((prev) => [...prev, ...newUsers]);
         }
 
-        setTotal(total);
-        setHasMore(hasMore);
+        setHasMore(hasMore && newUsers.length > 0);
       } catch (err) {
         logger.error(
           `Failed to fetch ${mode}`,
@@ -121,14 +113,12 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         );
         setError(`Failed to load ${mode}. Please try again.`);
       } finally {
+        fetching.current = false;
         setIsLoading(false);
         setIsLoadingMore(false);
         setIsRefreshing(false);
       }
     },
-    // `sort` belongs here: without it the callback would close over the first
-    // ordering forever, and the mount effect below (keyed on `fetchUsers`)
-    // would never re-run — flipping the control would change nothing.
     [userId, mode, sort, oxyServices],
   );
 
@@ -160,7 +150,8 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
     ({ item }: { item: User }) => {
       const itemUserId = resolveUserId(item);
       const isCurrentUser = itemUserId === currentUserId;
-      const description = typeof item.description === 'string' ? item.description : '';
+      const description =
+        item.bio || (typeof item.description === 'string' ? item.description : '');
       const displayName = item.name?.displayName ?? getNormalizedUserHandle(item) ?? '';
       const handle = getAccountFallbackHandle(item);
 
@@ -199,8 +190,44 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
     [handleUserPress, currentUserId, oxyServices],
   );
 
+  const normalizedSearch = search.trim().toLocaleLowerCase();
+  const visibleUsers = useMemo(
+    () =>
+      normalizedSearch
+        ? users.filter((user) =>
+            [user.name?.displayName, getNormalizedUserHandle(user)].some((value) =>
+              value?.toLocaleLowerCase().includes(normalizedSearch),
+            ),
+          )
+        : users,
+    [users, normalizedSearch],
+  );
+
+  // Search walks the remaining pages too: a match after the first page must
+  // not be reported as absent. One page at a time, stopping on error/clear.
+  useEffect(() => {
+    if (normalizedSearch && hasMore && !isLoading && !isLoadingMore && !isRefreshing && !error) {
+      void fetchUsers(users.length);
+    }
+  }, [
+    normalizedSearch,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    isRefreshing,
+    error,
+    users.length,
+    fetchUsers,
+  ]);
+
   const renderEmpty = useCallback(() => {
-    if (isLoading) return null;
+    if (isLoading || (normalizedSearch && (hasMore || isLoadingMore) && !error)) return null;
+    if (normalizedSearch)
+      return (
+        <View className="px-space-24 py-space-24">
+          <Text>{t('userList.noSearchResults')}</Text>
+        </View>
+      );
     return (
       <View style={styles.emptyContainer} className="px-space-32 gap-space-8">
         <Ionicons
@@ -222,34 +249,29 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         </Text>
       </View>
     );
-  }, [isLoading, mode, bloomTheme, t]);
-
-  const renderFooter = useCallback(() => {
-    if (!isLoadingMore) return null;
-    return (
-      <View style={styles.footerLoader} className="py-space-16">
-        <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
-      </View>
-    );
-  }, [isLoadingMore, bloomTheme]);
+  }, [isLoading, mode, bloomTheme, t, normalizedSearch, hasMore, isLoadingMore, error]);
 
   const title =
     mode === 'followers'
       ? t('userList.followers') || 'Followers'
       : t('userList.following') || 'Following';
 
-  const headerSubtitle = total > 0 ? String(total) : undefined;
-  useSurfaceHeader({ title, subtitle: headerSubtitle });
-
-  if (isLoading && users.length === 0) {
-    return (
-      <View className="flex-1 bg-bg">
-        <View style={styles.center}>
-          <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
-        </View>
-      </View>
-    );
-  }
+  useSurfaceHeader({
+    title,
+    subtitle: t(
+      mode === 'followers' ? 'userList.followersDescription' : 'userList.followingDescription',
+    ),
+    actions: [
+      {
+        icon: RiSearchLine,
+        accessibilityLabel: t('userList.search'),
+        onPress: () => {
+          setSearchOpen((open) => !open);
+          setSearch('');
+        },
+      },
+    ],
+  });
 
   if (error) {
     return (
@@ -266,17 +288,26 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
   }
 
   return (
-    <View className="flex-1 bg-bg">
+    <View style={{ flex: 1, minHeight: 0 }}>
+      {searchOpen ? (
+        <View className="px-screen-margin pb-space-12" style={{ flexShrink: 0 }}>
+          <Search
+            label={t('userList.search')}
+            placeholder={t('userList.searchPlaceholder')}
+            value={search}
+            onValueChange={setSearch}
+            autoFocus
+          />
+        </View>
+      ) : null}
       <FlatList
-        data={users}
+        style={{ flex: 1 }}
+        data={visibleUsers}
         renderItem={renderUser}
         keyExtractor={(item, index) => resolveUserId(item) || `user-${index}`}
         contentContainerStyle={styles.listContent}
-        ItemSeparatorComponent={() => (
-          <View style={styles.separator} className="border-b border-border" />
-        )}
+        ItemSeparatorComponent={() => <View style={{ height: 2 }} />}
         ListEmptyComponent={renderEmpty}
-        ListFooterComponent={renderFooter}
         onEndReached={handleLoadMore}
         onEndReachedThreshold={0.3}
         refreshControl={
@@ -307,20 +338,12 @@ const styles = StyleSheet.create({
   userInfo: {
     flex: 1,
   },
-  // Inset the hairline separator to align with the start of the user's text
-  // content (avatar width + screen margin + gap).
-  separator: {
-    marginLeft: 72,
-  },
   emptyContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     paddingTop: 80,
   },
-  footerLoader: {
-    alignItems: 'center',
-  },
 });
 
 export default UserListScreen;

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -11,7 +11,7 @@ import { H1, Text } from '@oxy.so/bloom/typography';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
 import { getNormalizedUserHandle, type User } from '@oxy.so/core';
 

package/src/ui/screens/fileManagement/FileListSection.tsx

@@ -1,10 +1,11 @@
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import type React from 'react';
-import { View, ScrollView, RefreshControl, ActivityIndicator } from 'react-native';
+import { View, ScrollView, RefreshControl } from 'react-native';
 import { Button } from '@oxy.so/bloom/button';
 import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import type { FileMetadata } from '@oxy.so/core';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import type { useTheme } from '@oxy.so/bloom/theme';
 
 type ThemeColors = ReturnType<typeof useTheme>['colors'];
@@ -94,9 +95,9 @@ const FileListSection: React.FC<FileListSectionProps> = ({
         renderEmptyState()
       ) : (
         <>
-          <SettingsListGroup>
+          <GroupedSection>
             {items.map((item) => (
-              <SettingsListItem
+              <GroupedSectionItem
                 key={item.id}
                 icon={item.icon}
                 title={item.title}
@@ -106,10 +107,10 @@ const FileListSection: React.FC<FileListSectionProps> = ({
                 rightElement={item.rightElement}
               />
             ))}
-          </SettingsListGroup>
+          </GroupedSection>
           {paging.loadingMore && (
             <View className="flex-row items-center justify-center py-space-12 gap-space-8">
-              <ActivityIndicator size="small" color={colors.primary} />
+              <SpinnerIcon size={16} color={colors.primary} />
               <Text className="text-[13px] font-medium" style={{ color: colors.text }}>
                 {t('fileManagement.loadingMore')}
               </Text>