@oxy.so/services 11.2.0-oxy-one.3 → 11.2.0-oxy-one.4

package/src/ui/components/FollowButton.tsx

@@ -1,10 +1,6 @@
 import type React from 'react';
 import { useEffect, useCallback, useMemo, useState, memo } from 'react';
-import type {
-  ViewStyle,
-  TextStyle,
-  StyleProp,
-} from 'react-native';
+import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import { toast } from '@oxy.so/bloom/toast';
 import { FollowButton as BloomFollowButton } from '@oxy.so/bloom/media-header';
@@ -75,31 +71,31 @@ const FollowButtonInner = memo(function FollowButtonInner({
   showLoadingState = true,
   preventParentActions = true,
 }: SingleFollowButtonProps & { oxyServices: OxyServices }) {
+  const { isFollowing, isKnown, isLoading, toggleFollow, resolveStatus } = useFollowForButton(
+    userId,
+    oxyServices,
+    initiallyFollowing,
+  );
 
-  const {
-    isFollowing,
-    isKnown,
-    isLoading,
-    toggleFollow,
-    resolveStatus,
-  } = useFollowForButton(userId, oxyServices, initiallyFollowing);
-
-  const handlePress = useCallback(async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
-    if (preventParentActions && event?.preventDefault) {
-      event.preventDefault();
-      event.stopPropagation?.();
-    }
-    // Ignore presses while a mutation is in flight or the status is still unknown.
-    if (disabled || isLoading || !isKnown) return;
-
-    try {
-      const accepted = await toggleFollow();
-      if (accepted) onFollowChange?.(!isFollowing);
-    } catch (err: unknown) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      toast.error(error.message || 'Failed to update follow status');
-    }
-  }, [disabled, isLoading, isKnown, toggleFollow, onFollowChange, isFollowing, preventParentActions]);
+  const handlePress = useCallback(
+    async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
+      if (preventParentActions && event?.preventDefault) {
+        event.preventDefault();
+        event.stopPropagation?.();
+      }
+      // Ignore presses while a mutation is in flight or the status is still unknown.
+      if (disabled || isLoading || !isKnown) return;
+
+      try {
+        const accepted = await toggleFollow();
+        if (accepted) onFollowChange?.(!isFollowing);
+      } catch (err: unknown) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        toast.error(error.message || 'Failed to update follow status');
+      }
+    },
+    [disabled, isLoading, isKnown, toggleFollow, onFollowChange, isFollowing, preventParentActions],
+  );
 
   // Enqueue a batched status fetch ONLY when the status is genuinely unknown
   // (not seeded from `initiallyFollowing`, not already resolved). All buttons
@@ -124,7 +120,9 @@ const FollowButtonInner = memo(function FollowButtonInner({
   return (
     <BloomFollowButton
       following={showFollowing}
-      onFollowChange={() => { void handlePress(); }}
+      onFollowChange={() => {
+        void handlePress();
+      }}
       size={size}
       loading={showSpinner}
       disabled={disabled || isBusy}
@@ -166,7 +164,7 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
           : null;
       }
       return statuses;
-    })
+    }),
   );
 
   const hasKnownNotFollowing = userIds.some((uid) => initialFollowStatuses[uid] === false);
@@ -192,54 +190,69 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
     fetchAllStatuses?.();
   }, [fetchAllStatuses]);
 
-  const handlePress = useCallback(async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
-    if (preventParentActions && event?.preventDefault) {
-      event.preventDefault();
-      event.stopPropagation?.();
-    }
-    if (disabled || isLoading) return;
+  const handlePress = useCallback(
+    async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
+      if (preventParentActions && event?.preventDefault) {
+        event.preventDefault();
+        event.stopPropagation?.();
+      }
+      if (disabled || isLoading) return;
+
+      if (allFollowing) {
+        if (!unfollowAllUsers) return;
+        setIsSubmitting(true);
+        try {
+          const result = await unfollowAllUsers();
+          // `unfollowManyUsers` flips each user to not-following in the store, so
+          // `allFollowing` becomes false reactively — no local flag.
+          onFollowChange?.(false);
+          onBulkUnfollow?.(result);
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err : new Error(String(err));
+          toast.error(error.message || 'Failed to update follow status');
+        } finally {
+          setIsSubmitting(false);
+        }
+        return;
+      }
 
-    if (allFollowing) {
-      if (!unfollowAllUsers) return;
+      if (!followAllUsers) return;
       setIsSubmitting(true);
       try {
-        const result = await unfollowAllUsers();
-        // `unfollowManyUsers` flips each user to not-following in the store, so
-        // `allFollowing` becomes false reactively — no local flag.
-        onFollowChange?.(false);
-        onBulkUnfollow?.(result);
+        const result = await followAllUsers();
+        const allAlreadyFollowing =
+          result.followedCount === 0 &&
+          result.results.length > 0 &&
+          result.results.every((entry) => entry.alreadyFollowing);
+        const anyFollowed =
+          result.followedCount > 0 ||
+          result.results.some((entry) => entry.success || entry.alreadyFollowing);
+
+        // `followManyUsers` marks each user followed in the store, so `allFollowing`
+        // flips to true reactively — no local flag to set here.
+        if (allAlreadyFollowing || anyFollowed) {
+          onFollowChange?.(true);
+        }
+        onBulkFollow?.(result);
       } catch (err: unknown) {
         const error = err instanceof Error ? err : new Error(String(err));
         toast.error(error.message || 'Failed to update follow status');
       } finally {
         setIsSubmitting(false);
       }
-      return;
-    }
-
-    if (!followAllUsers) return;
-    setIsSubmitting(true);
-    try {
-      const result = await followAllUsers();
-      const allAlreadyFollowing = result.followedCount === 0
-        && result.results.length > 0
-        && result.results.every((entry) => entry.alreadyFollowing);
-      const anyFollowed = result.followedCount > 0
-        || result.results.some((entry) => entry.success || entry.alreadyFollowing);
-
-      // `followManyUsers` marks each user followed in the store, so `allFollowing`
-      // flips to true reactively — no local flag to set here.
-      if (allAlreadyFollowing || anyFollowed) {
-        onFollowChange?.(true);
-      }
-      onBulkFollow?.(result);
-    } catch (err: unknown) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      toast.error(error.message || 'Failed to update follow status');
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [disabled, isLoading, allFollowing, followAllUsers, unfollowAllUsers, onFollowChange, onBulkFollow, onBulkUnfollow, preventParentActions]);
+    },
+    [
+      disabled,
+      isLoading,
+      allFollowing,
+      followAllUsers,
+      unfollowAllUsers,
+      onFollowChange,
+      onBulkFollow,
+      onBulkUnfollow,
+      preventParentActions,
+    ],
+  );
 
   const showSpinner = showLoadingState && isLoading;
   const { accessibilityLabel, accessibilityHint } = describeFollowAllButton({
@@ -255,7 +268,9 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
       following={allFollowing}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      onFollowChange={() => { void handlePress(); }}
+      onFollowChange={() => {
+        void handlePress();
+      }}
       label={followAllLabel}
       followingLabel={followedAllLabel}
       size={size}
@@ -296,12 +311,7 @@ const FollowButton: React.FC<FollowButtonProps> = (props) => {
     if (multiUserIds.length === 0) {
       return null;
     }
-    return (
-      <FollowButtonMultiInner
-        {...props}
-        userIds={multiUserIds}
-      />
-    );
+    return <FollowButtonMultiInner {...props} userIds={multiUserIds} />;
   }
 
   const targetUserId = props.userId ? String(props.userId).trim() : '';
@@ -309,13 +319,7 @@ const FollowButton: React.FC<FollowButtonProps> = (props) => {
     return null;
   }
 
-  return (
-    <FollowButtonInner
-      {...props}
-      userId={targetUserId}
-      oxyServices={oxyServices}
-    />
-  );
+  return <FollowButtonInner {...props} userId={targetUserId} oxyServices={oxyServices} />;
 };
 
 export { FollowButton };

package/src/ui/components/FollowTargetButton.tsx

@@ -25,7 +25,7 @@
  *
  * ## Relationship to the legacy `FollowButton`
  *
- * `FollowButton` follows a USER through the Mongo-backed social graph and
+ * `FollowButton` follows a USER through the user social graph and
  * remains the correct component for that until the user graph is migrated onto
  * `/v2/follows`. When it is, that component is deleted and this one takes the
  * name — not aliased, not deprecated in place.
@@ -204,7 +204,15 @@ export const FollowTargetButton = memo(function FollowTargetButton({
         if (await follow()) onChange?.(FOLLOW_ACTION_LEAVES_ACTIVE.follow);
         else reportMutationFailure();
     }
-  }, [isFollowing, status.applicationMode, follow, unfollow, enableHere, onChange, reportMutationFailure]);
+  }, [
+    isFollowing,
+    status.applicationMode,
+    follow,
+    unfollow,
+    enableHere,
+    onChange,
+    reportMutationFailure,
+  ]);
 
   const handleTimed = useCallback(
     async (seconds: number, durationLabel: string) => {
@@ -218,7 +226,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
       // Which is also why it must not appear when the promise was not made.
       toast.success(`Following for ${durationLabel.toLowerCase()}`);
     },
-    [follow, onChange, reportMutationFailure]
+    [follow, onChange, reportMutationFailure],
   );
 
   const menuItems = useMemo(
@@ -240,7 +248,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
       durations,
       text.idle,
       applicationName,
-    ]
+    ],
   );
 
   const runItem = useCallback(
@@ -273,7 +281,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
           });
       }
     },
-    [handleTimed, enableHere, disableHere, unfollow, onChange, reportMutationFailure]
+    [handleTimed, enableHere, disableHere, unfollow, onChange, reportMutationFailure],
   );
 
   const primary = (
@@ -308,7 +316,8 @@ export const FollowTargetButton = memo(function FollowTargetButton({
         */}
         <DropdownMenuTrigger asChild disabled={disabled || isUnknown}>
           <Button
-            appearance="subtle" tone="support"
+            appearance="subtle"
+            tone="support"
             size={size === 'lg' ? 'lg' : 'sm'}
             icon={<ChevronDown width={16} />}
             disabled={disabled || isUnknown}

package/src/ui/components/LanguageBridge.tsx

@@ -19,26 +19,31 @@ import type { OxyLanguageConfig } from '../types/navigation';
  * when this config is supplied, so an app with no i18n of its own pays
  * nothing.
  */
-export function LanguageBridge({ supportedLocales, fallbackLocale, onChange, onError }: OxyLanguageConfig): null {
-    const { currentLanguage } = useOxy();
-    const resolvedLocale = useMemo(
-        () => coerceToSupportedLocale(currentLanguage, supportedLocales, fallbackLocale),
-        [currentLanguage, supportedLocales, fallbackLocale],
-    );
+export function LanguageBridge({
+  supportedLocales,
+  fallbackLocale,
+  onChange,
+  onError,
+}: OxyLanguageConfig): null {
+  const { currentLanguage } = useOxy();
+  const resolvedLocale = useMemo(
+    () => coerceToSupportedLocale(currentLanguage, supportedLocales, fallbackLocale),
+    [currentLanguage, supportedLocales, fallbackLocale],
+  );
 
-    // Refs, not effect dependencies: an inline `onChange`/`onError` (the common
-    // case) must not re-fire the effect on every render — only a genuine
-    // change in the RESOLVED locale should call it again.
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    const onErrorRef = useRef(onError);
-    onErrorRef.current = onError;
+  // Refs, not effect dependencies: an inline `onChange`/`onError` (the common
+  // case) must not re-fire the effect on every render — only a genuine
+  // change in the RESOLVED locale should call it again.
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
 
-    useEffect(() => {
-        Promise.resolve(onChangeRef.current(resolvedLocale)).catch((error: unknown) => {
-            onErrorRef.current?.(error, resolvedLocale);
-        });
-    }, [resolvedLocale]);
+  useEffect(() => {
+    Promise.resolve(onChangeRef.current(resolvedLocale)).catch((error: unknown) => {
+      onErrorRef.current?.(error, resolvedLocale);
+    });
+  }, [resolvedLocale]);
 
-    return null;
+  return null;
 }

package/src/ui/components/OxyAuthChooser.tsx

@@ -324,7 +324,14 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
       // uploads / clears the picked photo — the single shared avatar write path.
       onEditAvatar: () => openAvatarPicker(),
     }),
-    [handleActivate, handleRemoveContext, handleRemovePrincipal, handleAdd, handleManage, openAvatarPicker],
+    [
+      handleActivate,
+      handleRemoveContext,
+      handleRemovePrincipal,
+      handleAdd,
+      handleManage,
+      openAvatarPicker,
+    ],
   );
 
   /**
@@ -337,7 +344,8 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
    * The accent is not in that category — every row is drawn in its own account's
    * (issue #961), this one included, from the same field.
    */
-  const hero = useMemo<AccountHeroModel | null>(() => (user ? buildHero(user, theme.colors.primary, oxyServices) : null),
+  const hero = useMemo<AccountHeroModel | null>(
+    () => (user ? buildHero(user, theme.colors.primary, oxyServices) : null),
     [user, theme.colors.primary, oxyServices],
   );
 
@@ -438,7 +446,13 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
   }
 
   if (view === 'signup') {
-    return <OxySignUpPanel host="dialog" onSignedIn={() => onComplete?.()} onSignIn={() => controller.setView('signin')} />;
+    return (
+      <OxySignUpPanel
+        host="dialog"
+        onSignedIn={() => onComplete?.()}
+        onSignIn={() => controller.setView('signin')}
+      />
+    );
   }
 
   return (

package/src/ui/components/OxyAuthPrompt.tsx

@@ -8,30 +8,30 @@ import LogoIcon from './logo/LogoIcon';
 import OxySignInButton from './OxySignInButton';
 
 export interface OxyAuthPromptProps {
-    /**
-     * Short label describing what the user is trying to access. Rendered as
-     * the prompt title (e.g. "Notifications", "Privacy"). Keep it to 1-3
-     * words; the subtitle expands on the rationale.
-     */
-    label: string;
+  /**
+   * Short label describing what the user is trying to access. Rendered as
+   * the prompt title (e.g. "Notifications", "Privacy"). Keep it to 1-3
+   * words; the subtitle expands on the rationale.
+   */
+  label: string;
 
-    /**
-     * Optional longer description. If omitted, a generic
-     * `"Sign in to access your {label.toLowerCase()}."` is shown.
-     */
-    description?: string;
+  /**
+   * Optional longer description. If omitted, a generic
+   * `"Sign in to access your {label.toLowerCase()}."` is shown.
+   */
+  description?: string;
 
-    /**
-     * Variant of the embedded `OxySignInButton`. Defaults to `contained` for
-     * primary placement; pass `outline` or `default` for secondary contexts.
-     */
-    signInButtonVariant?: 'default' | 'outline' | 'contained';
+  /**
+   * Variant of the embedded `OxySignInButton`. Defaults to `contained` for
+   * primary placement; pass `outline` or `default` for secondary contexts.
+   */
+  signInButtonVariant?: 'default' | 'outline' | 'contained';
 
-    /**
-     * Container style override. Use sparingly - the prompt is designed to fit
-     * inside a parent screen / sheet body with its own spacing.
-     */
-    style?: StyleProp<ViewStyle>;
+  /**
+   * Container style override. Use sparingly - the prompt is designed to fit
+   * inside a parent screen / sheet body with its own spacing.
+   */
+  style?: StyleProp<ViewStyle>;
 }
 
 /**
@@ -66,92 +66,73 @@ export interface OxyAuthPromptProps {
  * ```
  */
 export const OxyAuthPrompt: React.FC<OxyAuthPromptProps> = ({
-    label,
-    description,
-    signInButtonVariant = 'contained',
-    style,
+  label,
+  description,
+  signInButtonVariant = 'contained',
+  style,
 }) => {
-    const theme = useTheme();
-    const isAuthenticated = useAuthStore(
-        useShallow((state) => state.isAuthenticated)
-    );
+  const theme = useTheme();
+  const isAuthenticated = useAuthStore(useShallow((state) => state.isAuthenticated));
 
-    if (isAuthenticated) return null;
+  if (isAuthenticated) return null;
 
-    const resolvedDescription =
-        description ?? `Sign in to access your ${label.toLowerCase()}.`;
+  const resolvedDescription = description ?? `Sign in to access your ${label.toLowerCase()}.`;
 
-    return (
-        <View style={[styles.container, style]}>
-            <View
-                style={[
-                    styles.logoBadge,
-                    { backgroundColor: `${theme.colors.primary}15` },
-                ]}
-            >
-                <LogoIcon height={44} color={theme.colors.primary} />
-            </View>
+  return (
+    <View style={[styles.container, style]}>
+      <View style={[styles.logoBadge, { backgroundColor: `${theme.colors.primary}15` }]}>
+        <LogoIcon height={44} color={theme.colors.primary} />
+      </View>
 
-            <View style={styles.copy}>
-                <Text
-                    accessibilityRole="header"
-                    style={[styles.title, { color: theme.colors.text }]}
-                >
-                    {label}
-                </Text>
-                <Text
-                    style={[
-                        styles.subtitle,
-                        { color: theme.colors.textSecondary },
-                    ]}
-                >
-                    {resolvedDescription}
-                </Text>
-            </View>
+      <View style={styles.copy}>
+        <Text accessibilityRole="header" style={[styles.title, { color: theme.colors.text }]}>
+          {label}
+        </Text>
+        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+          {resolvedDescription}
+        </Text>
+      </View>
 
-            <OxySignInButton
-                variant={signInButtonVariant}
-                style={styles.cta}
-            />
-        </View>
-    );
+      <OxySignInButton variant={signInButtonVariant} style={styles.cta} />
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        paddingHorizontal: 32,
-        paddingVertical: 48,
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 20,
-    },
-    logoBadge: {
-        width: 88,
-        height: 88,
-        borderRadius: 44,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    copy: {
-        alignItems: 'center',
-        gap: 6,
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: '700',
-        textAlign: 'center',
-    },
-    subtitle: {
-        fontSize: 14,
-        lineHeight: 20,
-        textAlign: 'center',
-        maxWidth: 320,
-    },
-    cta: {
-        marginTop: 4,
-        width: '100%',
-        maxWidth: 320,
-    },
+  container: {
+    paddingHorizontal: 32,
+    paddingVertical: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 20,
+  },
+  logoBadge: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  copy: {
+    alignItems: 'center',
+    gap: 6,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+    maxWidth: 320,
+  },
+  cta: {
+    marginTop: 4,
+    width: '100%',
+    maxWidth: 320,
+  },
 });
 
 export default OxyAuthPrompt;