@oxyhq/services 6.10.7 → 7.0.0

package/src/ui/hooks/queries/queryKeys.ts

@@ -1,12 +1,14 @@
 /**
  * Centralized query keys for TanStack Query
- * 
+ *
  * Following best practices:
  * - Use arrays for hierarchical keys
  * - Include all parameters in the key
  * - Use consistent naming conventions
  */
 
+import type { QueryClient } from '@tanstack/react-query';
+
 export const queryKeys = {
   // Account queries
   accounts: {
@@ -72,6 +74,12 @@ export const queryKeys = {
     usage: () => [...queryKeys.storage.all, 'usage'] as const,
   },
 
+  // Connected apps (FedCM grants the user has authorized)
+  connectedApps: {
+    all: ['connectedApps'] as const,
+    list: () => [...queryKeys.connectedApps.all, 'list'] as const,
+  },
+
   // Payment / wallet / subscription queries
   payments: {
     all: ['payments'] as const,
@@ -96,21 +104,63 @@ export const queryKeys = {
 /**
  * Helper to invalidate all account-related queries
  */
-export const invalidateAccountQueries = (queryClient: any) => {
+export const invalidateAccountQueries = (queryClient: QueryClient): void => {
   queryClient.invalidateQueries({ queryKey: queryKeys.accounts.all });
 };
 
 /**
  * Helper to invalidate all user-related queries
  */
-export const invalidateUserQueries = (queryClient: any) => {
+export const invalidateUserQueries = (queryClient: QueryClient): void => {
   queryClient.invalidateQueries({ queryKey: queryKeys.users.all });
 };
 
 /**
  * Helper to invalidate all session-related queries
  */
-export const invalidateSessionQueries = (queryClient: any) => {
+export const invalidateSessionQueries = (queryClient: QueryClient): void => {
   queryClient.invalidateQueries({ queryKey: queryKeys.sessions.all });
 };
 
+/**
+ * Helper to invalidate all device-related queries
+ */
+export const invalidateDeviceQueries = (queryClient: QueryClient): void => {
+  queryClient.invalidateQueries({ queryKey: queryKeys.devices.all });
+};
+
+/**
+ * Helper to invalidate all privacy-settings queries
+ */
+export const invalidatePrivacyQueries = (queryClient: QueryClient): void => {
+  queryClient.invalidateQueries({ queryKey: queryKeys.privacy.all });
+};
+
+/**
+ * Helper to invalidate all security-activity queries
+ */
+export const invalidateSecurityQueries = (queryClient: QueryClient): void => {
+  queryClient.invalidateQueries({ queryKey: queryKeys.security.all });
+};
+
+/**
+ * Helper to invalidate all storage-usage queries
+ */
+export const invalidateStorageQueries = (queryClient: QueryClient): void => {
+  queryClient.invalidateQueries({ queryKey: queryKeys.storage.all });
+};
+
+/**
+ * Helper to invalidate all payments / wallet / subscription queries
+ */
+export const invalidatePaymentsQueries = (queryClient: QueryClient): void => {
+  queryClient.invalidateQueries({ queryKey: queryKeys.payments.all });
+};
+
+/**
+ * Helper to invalidate the user's connected-apps list
+ */
+export const invalidateConnectedAppsQueries = (queryClient: QueryClient): void => {
+  queryClient.invalidateQueries({ queryKey: queryKeys.connectedApps.all });
+};
+

package/src/ui/hooks/queries/useAccountQueries.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useQuery, useQueries, useQueryClient } from '@tanstack/react-query';
 import { authenticatedApiCall } from '@oxyhq/core';
-import type { User } from '@oxyhq/core';
+import type { AuthorizedApp, User } from '@oxyhq/core';
 import { queryKeys } from './queryKeys';
 import { mutationKeys } from '../mutations/mutationKeys';
 import { useOxy } from '../../context/OxyContext';
@@ -204,6 +204,30 @@ export const useUsersBySessions = (sessionIds: string[], options?: { enabled?: b
   });
 };
 
+/**
+ * List the authenticated user's authorized RP apps (FedCM grants).
+ *
+ * Returns the intersection of the user's grants with the currently-approved
+ * RP catalog. Drives the "Connected apps" management screen.
+ */
+export const useAuthorizedApps = (options?: { enabled?: boolean }) => {
+  const { oxyServices, activeSessionId, isAuthenticated } = useOxy();
+
+  return useQuery<AuthorizedApp[]>({
+    queryKey: queryKeys.connectedApps.list(),
+    queryFn: async () => {
+      return authenticatedApiCall<AuthorizedApp[]>(
+        oxyServices,
+        activeSessionId,
+        () => oxyServices.listAuthorizedApps()
+      );
+    },
+    enabled: (options?.enabled !== false) && isAuthenticated,
+    staleTime: 30 * 1000, // 30 seconds — short, drives a management UI
+    gcTime: 5 * 60 * 1000,
+  });
+};
+
 /**
  * Get privacy settings for a user
  */

package/src/ui/hooks/useAuth.ts

@@ -50,8 +50,14 @@ export interface AuthActions {
    * Sign in
    * - Web: Opens popup to auth.oxy.so (no public key needed)
    * - Native: Uses cryptographic identity from keychain
+   *
+   * @param publicKey - Native: identity public key. Ignored on web.
+   * @param preOpenedPopup - Web only: a popup the caller already opened
+   *   SYNCHRONOUSLY on the raw click via `oxyServices.openBlankPopup()`. This
+   *   keeps Chrome's user-activation alive across any prior `await` and is
+   *   the only reliable way to avoid the popup blocker on cross-domain flows.
    */
-  signIn: (publicKey?: string) => Promise<User>;
+  signIn: (publicKey?: string, preOpenedPopup?: Window | null) => Promise<User>;
 
   /**
    * Sign out current session
@@ -72,7 +78,7 @@ export interface AuthActions {
 export interface UseAuthReturn extends AuthState, AuthActions {
   /** Access to full OxyServices instance for advanced usage */
   oxyServices: ReturnType<typeof useOxy>['oxyServices'];
-  /** Open a bottom sheet screen (e.g. 'AccountSettings', 'FileManagement') */
+  /** Open a bottom sheet screen (e.g. 'ManageAccount', 'FileManagement') */
   showBottomSheet: ReturnType<typeof useOxy>['showBottomSheet'];
   /** Open the avatar picker bottom sheet */
   openAvatarPicker: ReturnType<typeof useOxy>['openAvatarPicker'];
@@ -106,7 +112,7 @@ export function useAuth(): UseAuthReturn {
     openAvatarPicker,
   } = useOxy();
 
-  const signIn = useCallback(async (publicKey?: string): Promise<User> => {
+  const signIn = useCallback(async (publicKey?: string, preOpenedPopup?: Window | null): Promise<User> => {
     // Check if we're on the identity provider itself
     // Only the IdP has local login forms - other apps are client apps
     const authWebUrl = oxyServices.config?.authWebUrl;
@@ -122,8 +128,18 @@ export function useAuth(): UseAuthReturn {
     // FedCM silent SSO already runs on page load via useWebSSO
     // If user is clicking "Sign In", they need interactive auth NOW
     if (isWebBrowser() && !publicKey && !isIdentityProvider) {
+      // Open the popup SYNCHRONOUSLY before any `await` runs so Chrome's
+      // transient user-activation is preserved across the async chain
+      // (React state updates + the `await` into `signInWithPopup`). If the
+      // caller already pre-opened one (e.g. they did so to be extra safe
+      // ahead of their own awaits), reuse it.
+      const popup: Window | null = preOpenedPopup
+        ?? oxyServices.openBlankPopup?.()
+        ?? null;
       try {
-        const popupSession = await oxyServices.signInWithPopup?.();
+        const popupSession = await oxyServices.signInWithPopup?.({
+          popup,
+        });
         if (popupSession?.user) {
           // The popup auth flow fetches full user data, so the session user
           // contains full User fields even though the base type is MinimalUserData.
@@ -137,6 +153,9 @@ export function useAuth(): UseAuthReturn {
         }
         throw new Error('Sign-in failed. Please try again.');
       } catch (popupError) {
+        if (popup && !popup.closed) {
+          popup.close();
+        }
         if (popupError instanceof Error && popupError.message.includes('blocked')) {
           throw new Error('Popup blocked. Please allow popups for this site.');
         }

package/src/ui/hooks/useSessionManagement.ts

@@ -8,6 +8,8 @@ import { handleAuthError, isInvalidSessionError } from '../utils/errorHandlers';
 import type { OxyServices } from '@oxyhq/core';
 import type { QueryClient } from '@tanstack/react-query';
 import { clearQueryCache } from './queryClient';
+import { isWebBrowser } from './useWebSSO';
+import { writeActiveAuthuser } from '../utils/activeAuthuser';
 
 export interface UseSessionManagementOptions {
   oxyServices: OxyServices;
@@ -265,6 +267,33 @@ export const useSessionManagement = ({
   const switchSession = useCallback(
     async (sessionId: string): Promise<User> => {
       try {
+        // Web multi-account: when the target session was sourced from
+        // `refreshAllSessions` it carries its `authuser` slot index. We
+        // proactively plant that slot's access token via the httpOnly
+        // refresh cookie BEFORE validating, so the bearer-protected
+        // validate/getCurrentUser calls don't need a token that was never
+        // in memory (cold reload / different browser tab). The native path
+        // has no per-session cookies and continues to rely on
+        // `validateSession` + `getTokenBySession` directly.
+        if (isWebBrowser()) {
+          const targetSession = sessionsRef.current.find((s) => s.sessionId === sessionId);
+          const targetAuthuser = targetSession?.authuser;
+          if (typeof targetAuthuser === 'number') {
+            const refreshed = await oxyServices.refreshTokenViaCookie({ authuser: targetAuthuser });
+            if (refreshed === null) {
+              // Slot's refresh cookie is missing / expired / reused. Fall
+              // through to the invalid-session branch below by throwing the
+              // canonical invalid-session error.
+              throw new Error('Session is invalid or expired');
+            }
+            // Plant the slot's fresh access token; subsequent bearer calls
+            // (`validateSession`, `getCurrentUser`) will use it. The server
+            // also rotated the cookie at this point.
+            oxyServices.httpService.setTokens(refreshed.accessToken);
+            writeActiveAuthuser(targetAuthuser);
+          }
+        }
+
         const validation = await oxyServices.validateSession(sessionId, { useHeaderValidation: true });
         if (!validation?.valid) {
           throw new Error('Session is invalid or expired');

package/src/ui/index.ts

@@ -1,110 +1,49 @@
 /**
- * UI Component exports - Frontend Only (with backend-safe fallbacks)
+ * @oxyhq/services/ui — public subpath
  *
- * This module exports all React/React Native UI components and hooks.
- * In backend, all exports are no-ops or empty objects.
+ * Tree-shakeable static re-exports of the most common UI surface. Backend
+ * environments (SSR) should import `@oxyhq/services/ui/server` instead;
+ * client-only callers can use `@oxyhq/services/ui/client` for a slightly
+ * narrower bundle.
  *
- * NOTE: This entry point uses runtime detection which prevents tree-shaking.
- * For better bundle optimization, use:
- * - '@oxyhq/services/ui/client' for client bundles (tree-shakeable)
- * - '@oxyhq/services/ui/server' for SSR environments (all noops)
- *
- * @example
- * // Client bundle (tree-shakeable)
- * import { OxyProvider, useOxy } from '@oxyhq/services/ui/client';
- *
- * // SSR (noops)
- * import { OxyProvider, useOxy } from '@oxyhq/services/ui/server';
+ * Static `export ... from` only — no runtime `require()`, no platform
+ * conditionals. The previous `if (isFrontend) require(...)` pattern was
+ * removed because it (a) violated the dual CJS/ESM build rule (ESM bundles
+ * cannot contain `require()` per CLAUDE.md) and (b) defeated tree-shaking.
  */
-import isFrontend from './isFrontend';
 
-// UI exports
-let OxyProvider;
-let OxySignInButton;
-let OxyLogo;
-let Avatar;
-let FollowButton;
-let OxyPayButton;
-let FontLoader;
-let setupFonts;
-let OxyIcon;
-let useOxy;
-let useAuth;
-let useFollow;
-let ProfileScreen;
-let useAuthStore;
-let useAccountStore;
-let useStorage;
+// Components
+export { default as OxyProvider } from './components/OxyProvider';
+export { default as OxySignInButton } from './components/OxySignInButton';
+export { default as OxyLogo } from './components/OxyLogo';
+export { default as Avatar } from './components/Avatar';
+export { default as FollowButton } from './components/FollowButton';
+export { default as OxyPayButton } from './components/OxyPayButton';
+export { FontLoader, setupFonts } from './components/FontLoader';
+export { default as OxyIcon } from './components/icon/OxyIcon';
+export { default as AccountMenu } from './components/AccountMenu';
+export { default as AccountMenuButton } from './components/AccountMenuButton';
 
-if (isFrontend) {
-  OxyProvider = require('./components/OxyProvider').default;
-  OxySignInButton = require('./components/OxySignInButton').default;
-  OxyLogo = require('./components/OxyLogo').default;
-  Avatar = require('./components/Avatar').default;
-  FollowButton = require('./components/FollowButton').default;
-  OxyPayButton = require('./components/OxyPayButton').default;
-  FontLoader = require('./components/FontLoader').FontLoader;
-  setupFonts = require('./components/FontLoader').setupFonts;
-  OxyIcon = require('./components/icon').OxyIcon;
-  useOxy = require('./context/OxyContext').useOxy;
-  useAuth = require('./hooks/useAuth').useAuth;
-  useFollow = require('./hooks').useFollow;
-  ProfileScreen = require('./screens/ProfileScreen').default;
-  useAuthStore = require('./stores/authStore').useAuthStore;
-  useAccountStore = require('./stores/accountStore').useAccountStore;
-  useStorage = require('./hooks/useStorage').useStorage;
-} else {
-  // Backend: no-op fallbacks
-  const noopComponent = () => null;
-  const noopHook = () => ({});
-  const noopStorageResult = { storage: null, isReady: false };
+// Context + hooks
+export { useOxy } from './context/OxyContext';
+export { useAuth } from './hooks/useAuth';
+export { useFollow } from './hooks/useFollow';
+export { useStorage } from './hooks/useStorage';
+export type { UseStorageOptions, UseStorageResult } from './hooks/useStorage';
 
-  OxyProvider = noopComponent;
-  OxySignInButton = noopComponent;
-  OxyLogo = noopComponent;
-  Avatar = noopComponent;
-  FollowButton = noopComponent;
-  OxyPayButton = noopComponent;
-  FontLoader = noopComponent;
-  setupFonts = () => {};
-  OxyIcon = noopComponent;
-  useOxy = noopHook;
-  useAuth = noopHook;
-  useFollow = noopHook;
-  ProfileScreen = noopComponent;
-  useAuthStore = noopHook;
-  useAccountStore = noopHook;
-  useStorage = () => noopStorageResult;
-}
+// Screens
+export { default as ProfileScreen } from './screens/ProfileScreen';
+export { default as ManageAccountScreen } from './screens/ManageAccountScreen';
 
-export {
-  OxyProvider,
-  OxySignInButton,
-  OxyLogo,
-  Avatar,
-  FollowButton,
-  OxyPayButton,
-  FontLoader,
-  setupFonts,
-  OxyIcon,
-  useOxy,
-  useAuth,
-  useFollow,
-  ProfileScreen,
-  useAuthStore,
-  useAccountStore,
-  useStorage,
-};
+// Stores
+export { useAuthStore } from './stores/authStore';
+export { useAccountStore } from './stores/accountStore';
 
-
-// Export error handler utilities (pure functions, no conditional needed)
+// Error handlers (pure functions)
 export {
-  handleAuthError,
-  isInvalidSessionError,
-  isTimeoutOrNetworkError,
-  extractErrorMessage,
+    handleAuthError,
+    isInvalidSessionError,
+    isTimeoutOrNetworkError,
+    extractErrorMessage,
 } from './utils/errorHandlers';
 export type { HandleAuthErrorOptions } from './utils/errorHandlers';
-
-// Export useStorage hook and types (kept for external consumers)
-export type { UseStorageOptions, UseStorageResult } from './hooks/useStorage';

package/src/ui/navigation/routes.ts

@@ -8,12 +8,8 @@ import type { BaseScreenProps } from '../types/navigation';
 // Define all available route names
 export type RouteName =
     | 'OxyAuth'          // Sign in with Oxy (QR code / deep link to Accounts app)
-    | 'AccountOverview'
-    | 'AccountSettings'
-    | 'AccountCenter'
-    | 'AccountSwitcher'
+    | 'ManageAccount'    // Unified "Manage your Oxy Account" surface
     | 'AccountVerification'
-    | 'SessionManagement'
     | 'PaymentGateway'
     | 'Profile'
     | 'LanguageSelector'
@@ -41,18 +37,17 @@ export type RouteName =
     | 'FollowersList'  // List of user's followers
     | 'FollowingList' // List of users being followed
     | 'CreateManagedAccount' // Create a new managed sub-account
-    | 'AvatarCrop'; // Square-crop editor presented before avatar upload
+    | 'AvatarCrop' // Square-crop editor presented before avatar upload
+    | 'Notifications' // Per-channel notification preferences
+    | 'ConnectedApps' // FedCM-authorized RP apps the user can revoke
+    | 'Preferences'; // General user preferences (theme, reduce-motion, etc.)
 
 // Lazy screen loaders - functions that return screen components on-demand
 // This breaks the require cycle by deferring imports until screens are actually needed
 const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     OxyAuth: () => require('../screens/OxyAuthScreen').default,
-    AccountOverview: () => require('../screens/AccountOverviewScreen').default,
-    AccountSettings: () => require('../screens/AccountSettingsScreen').default,
-    AccountCenter: () => require('../screens/AccountCenterScreen').default,
-    AccountSwitcher: () => require('../screens/AccountSwitcherScreen').default,
+    ManageAccount: () => require('../screens/ManageAccountScreen').default,
     AccountVerification: () => require('../screens/AccountVerificationScreen').default,
-    SessionManagement: () => require('../screens/SessionManagementScreen').default,
     PaymentGateway: () => require('../screens/PaymentGatewayScreen').default,
     Profile: () => require('../screens/ProfileScreen').default,
     LanguageSelector: () => require('../screens/LanguageSelectorScreen').default,
@@ -84,6 +79,9 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     FollowingList: () => require('../screens/FollowingListScreen').default,
     CreateManagedAccount: () => require('../screens/CreateManagedAccountScreen').default,
     AvatarCrop: () => require('../screens/AvatarCropScreen').default,
+    Notifications: () => require('../screens/NotificationsScreen').default,
+    ConnectedApps: () => require('../screens/ConnectedAppsScreen').default,
+    Preferences: () => require('../screens/PreferencesScreen').default,
 };
 
 // Cache loaded components to avoid re-requiring

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
-import { Header } from '../components';
+import Header from '../components/Header';
 import { SettingsListGroup } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -0,0 +1,225 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, View } from 'react-native';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import type { AuthorizedApp } from '@oxyhq/core';
+import { logger as loggerUtil } from '@oxyhq/core';
+import type { BaseScreenProps } from '../types/navigation';
+import Header from '../components/Header';
+import EmptyState from '../components/EmptyState';
+import { SettingsIcon } from '../components/SettingsIcon';
+import { useI18n } from '../hooks/useI18n';
+import { useOxy } from '../context/OxyContext';
+import { useAuthorizedApps } from '../hooks/queries/useAccountQueries';
+import { useRevokeAuthorizedApp } from '../hooks/mutations/useAccountMutations';
+import { useColorScheme } from '../hooks/useColorScheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
+
+/**
+ * Format an ISO-8601 timestamp as a human-readable relative time. Mirrors the
+ * formatter used in ManageAccountScreen — kept local to avoid pulling a new
+ * shared module into the package public surface for one consumer.
+ */
+const formatRelative = (iso: string): string => {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) {
+        return '—';
+    }
+    const diffMs = Date.now() - date.getTime();
+    const absMin = Math.abs(diffMs) / 60000;
+    if (absMin < 1) return 'just now';
+    if (absMin < 60) return `${Math.floor(absMin)}m ago`;
+    const hrs = absMin / 60;
+    if (hrs < 24) return `${Math.floor(hrs)}h ago`;
+    const days = hrs / 24;
+    if (days < 7) return `${Math.floor(days)}d ago`;
+    return date.toLocaleDateString();
+};
+
+/**
+ * ConnectedAppsScreen — list and revoke FedCM-authorized RP applications.
+ *
+ * Fetches via `useAuthorizedApps` (drives `GET /fedcm/me/authorized-apps`)
+ * and exposes a "Revoke" action that hits `DELETE /fedcm/me/authorized-apps/
+ * :origin`. Each revoke invalidates the connected-apps query so the list
+ * refreshes immediately.
+ */
+const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }) => {
+    const bloomTheme = useTheme();
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const palette = useMemo(
+        () => Colors[normalizeColorScheme(colorScheme, normalizeTheme(theme))],
+        [colorScheme, theme],
+    );
+    const { isAuthenticated } = useOxy();
+    const {
+        data: apps,
+        isLoading,
+        refetch,
+        isRefetching,
+    } = useAuthorizedApps({ enabled: isAuthenticated });
+    const revokeMutation = useRevokeAuthorizedApp();
+    const revokeDialog = useDialogControl();
+    const [pendingRevoke, setPendingRevoke] = useState<AuthorizedApp | null>(null);
+    const [revokingOrigin, setRevokingOrigin] = useState<string | null>(null);
+
+    const confirmRevoke = useCallback(
+        (app: AuthorizedApp) => {
+            setPendingRevoke(app);
+            revokeDialog.open();
+        },
+        [revokeDialog],
+    );
+
+    const handleRevoke = useCallback(async () => {
+        if (!pendingRevoke) {
+            return;
+        }
+        const target = pendingRevoke;
+        setRevokingOrigin(target.origin);
+        try {
+            await revokeMutation.mutateAsync(target.origin);
+            toast.success(
+                t('connectedApps.toasts.revoked', { name: target.name })
+                || `Revoked access for ${target.name}`,
+            );
+        } catch (error) {
+            loggerUtil.warn(
+                'Revoke authorized app failed',
+                { component: 'ConnectedAppsScreen' },
+                error,
+            );
+            toast.error(
+                t('connectedApps.toasts.revokeFailed')
+                || 'Failed to revoke access',
+            );
+        } finally {
+            setRevokingOrigin(null);
+            setPendingRevoke(null);
+        }
+    }, [pendingRevoke, revokeMutation, t]);
+
+    const renderEmpty = useCallback(
+        () => (
+            <View style={styles.emptyContainer}>
+                <EmptyState
+                    message={
+                        t('connectedApps.empty.subtitle')
+                        || 'Apps you authorize to sign in with your Oxy account will appear here'
+                    }
+                    textColor={bloomTheme.colors.textSecondary}
+                />
+            </View>
+        ),
+        [t, bloomTheme.colors.textSecondary],
+    );
+
+    const renderItem = useCallback(
+        ({ item }: { item: AuthorizedApp }) => {
+            const isRevoking = revokingOrigin === item.origin;
+            return (
+                <SettingsListGroup>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="apps" color={palette.iconData} />}
+                        title={item.name}
+                        description={
+                            t('connectedApps.item.lastUsed', {
+                                relative: formatRelative(item.lastUsedAt),
+                            })
+                            || `Last used ${formatRelative(item.lastUsedAt)}`
+                        }
+                        onPress={isRevoking ? undefined : () => confirmRevoke(item)}
+                        disabled={isRevoking}
+                        destructive
+                        showChevron={false}
+                        rightElement={
+                            isRevoking ? (
+                                <ActivityIndicator
+                                    color={bloomTheme.colors.error}
+                                    size="small"
+                                />
+                            ) : undefined
+                        }
+                    />
+                </SettingsListGroup>
+            );
+        },
+        [bloomTheme.colors.error, confirmRevoke, palette.iconData, revokingOrigin, t],
+    );
+
+    return (
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+            <Header
+                title={t('connectedApps.title') || 'Connected apps'}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
+            {isLoading && !apps ? (
+                <View style={styles.center}>
+                    <ActivityIndicator color={bloomTheme.colors.primary} size="large" />
+                </View>
+            ) : (
+                <FlatList
+                    data={apps ?? []}
+                    keyExtractor={(item) => item.origin}
+                    renderItem={renderItem}
+                    contentContainerStyle={styles.listContent}
+                    ListEmptyComponent={renderEmpty}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={isRefetching}
+                            onRefresh={refetch}
+                            tintColor={bloomTheme.colors.primary}
+                        />
+                    }
+                />
+            )}
+            <Dialog
+                control={revokeDialog}
+                title={t('connectedApps.confirm.title') || 'Revoke access'}
+                description={
+                    pendingRevoke
+                        ? (t('connectedApps.confirm.message', { name: pendingRevoke.name })
+                            || `Revoke ${pendingRevoke.name}'s access to your Oxy account?`)
+                        : ''
+                }
+                actions={[
+                    {
+                        label: t('common.revoke') || 'Revoke',
+                        color: 'destructive',
+                        onPress: handleRevoke,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    center: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    listContent: {
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        flexGrow: 1,
+    },
+    emptyContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 48,
+    },
+});
+
+export default React.memo(ConnectedAppsScreen);