@oxyhq/services 13.1.3 → 13.1.5

package/src/ui/components/ProfileButton.tsx

@@ -28,6 +28,33 @@ const MENU_WIDTH = 300;
 /** Gutter, in px, kept between the popover and the viewport edges on web. */
 const VIEWPORT_GUTTER = 8;
 
+/**
+ * Web-only Bluesky-style hover animation timings, mirrored from
+ * `social-app/src/view/shell/desktop/LeftNav.tsx`. The row background and the
+ * name/handle/chevron opacity cross-fade quickly; the avatar shrink+slide is
+ * slower and more deliberate. A short delay on the LEAVE transition keeps the
+ * row from flickering when the pointer crosses a child boundary.
+ */
+const BG_TRANSITION_MS = 150;
+const AVATAR_TRANSITION_MS = 250;
+const OPACITY_TRANSITION_MS = 150;
+const LEAVE_DELAY_MS = 50;
+
+/** Shrunk-avatar scale on hover, matching Bluesky's `scale: 2/3`. */
+const ACTIVE_AVATAR_SCALE = 2 / 3;
+
+/**
+ * Reads the OS "reduce motion" preference on web. Guards `window`/`matchMedia`
+ * so it is safe during SSR and on native (where it is never called). When
+ * reduced motion is on, the avatar transform snaps instead of transitioning.
+ */
+const prefersReducedMotion = (): boolean => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return false;
+    }
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+
 export interface ProfileButtonProps {
     /**
      * Expanded row (avatar + name + handle + chevron) when `true` (default), or a
@@ -93,6 +120,11 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     const [menuOpen, setMenuOpen] = useState(false);
     const [anchor, setAnchor] = useState<ProfileMenuAnchor | null>(null);
 
+    // Web-only hover/focus tracking for the Bluesky-style reveal animation.
+    // Native has no hover, so these stay false and the row renders statically.
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+
     // Trigger ref for the web anchor measurement. RN-Web exposes `measure()` on
     // host views, so we anchor the popover to the button rect and open upward.
     const triggerRef = useRef<View | null>(null);
@@ -159,7 +191,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         const signInLabel = t('common.actions.signIn') || 'Sign in';
         return (
             <Pressable
-                className={`flex-row items-center gap-3 rounded-full px-2 py-2 ${className ?? ''}`}
+                className={`${expanded ? 'w-full ' : ''}flex-row items-center gap-3 rounded-full px-2 py-2 ${className ?? ''}`}
                 style={style}
                 onPress={() => { void signIn(); }}
                 accessibilityRole="button"
@@ -201,16 +233,46 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         />
     );
 
+    // `active` combines hover, keyboard focus, and menu-open — exactly like
+    // Bluesky's `state.hovered || state.focused || control.isOpen`. Only web
+    // ever sets `hovered`/`focused`, so on native this reduces to `menuOpen`.
+    const active = hovered || focused || menuOpen;
+    const accountLabel = t('accountSwitcher.switchWhileSignedInAs', { name: displayName })
+        || `Switch account, signed in as ${displayName}`;
+
+    // Web-only pointer/focus handlers. RN-Web forwards `onHoverIn`/`onHoverOut`
+    // to the underlying element; native Pressable ignores them harmlessly, but
+    // we only attach them on web to keep the native path pristine.
+    const webInteractionProps = isWeb
+        ? {
+            onHoverIn: () => setHovered(true),
+            onHoverOut: () => setHovered(false),
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+        }
+        : undefined;
+
     if (!expanded) {
+        // Collapsed: avatar-only. On web, hovering just fades a subtle round
+        // background behind the avatar — no shrink, no text.
+        const collapsedBgStyle: ViewStyle | undefined = isWeb
+            ? {
+                backgroundColor: active ? colors.backgroundSecondary : 'transparent',
+                transitionProperty: 'background-color',
+                transitionDuration: `${BG_TRANSITION_MS}ms`,
+                transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
+            }
+            : undefined;
         return (
             <View className={className} style={style}>
                 <Pressable
                     ref={triggerRef}
                     className="rounded-full"
+                    style={collapsedBgStyle}
                     onPress={openMenu}
                     accessibilityRole="button"
-                    accessibilityLabel={t('accountSwitcher.switchWhileSignedInAs', { name: displayName })
-                        || `Switch account, signed in as ${displayName}`}
+                    accessibilityLabel={accountLabel}
+                    {...webInteractionProps}
                 >
                     {avatarNode}
                 </Pressable>
@@ -227,18 +289,78 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         );
     }
 
+    // ── Expanded row animation ──────────────────────────────────────────────
+    // On native everything is statically visible (no hover exists). On web we
+    // reproduce Bluesky's reveal: the row fills with a subtle contrast bg, the
+    // avatar shrinks + slides left, and the name/handle/chevron fade in. The
+    // negative left margin tucks the identity block under the shrunk avatar so
+    // it slides out from behind it as the avatar contracts.
+    const reducedMotion = isWeb && prefersReducedMotion();
+
+    // Slide the shrunk avatar left so its visual left edge stays put as it
+    // contracts. The avatar loses `size * (1 - scale)` of width; half of that
+    // (the left half, since scale is centered) is the offset, plus the row's
+    // left padding (px-2 = 8px) so it hugs the row edge like Bluesky's.
+    const activeAvatarTranslateX =
+        -(resolvedAvatarSize * (1 - ACTIVE_AVATAR_SCALE)) / 2 - 8;
+
+    const rowStyle: StyleProp<ViewStyle> = isWeb
+        ? {
+            backgroundColor: active ? colors.backgroundSecondary : 'transparent',
+            transitionProperty: 'background-color',
+            transitionDuration: `${BG_TRANSITION_MS}ms`,
+            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
+        }
+        : undefined;
+
+    const avatarWrapperStyle: ViewStyle | undefined = isWeb
+        ? {
+            zIndex: 10,
+            ...(reducedMotion
+                ? {}
+                : {
+                    transitionProperty: 'transform',
+                    transitionDuration: `${AVATAR_TRANSITION_MS}ms`,
+                    transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
+                }),
+            transform: active
+                ? [{ scale: ACTIVE_AVATAR_SCALE }, { translateX: activeAvatarTranslateX }]
+                : [{ scale: 1 }, { translateX: 0 }],
+        }
+        : undefined;
+
+    const identityStyle: ViewStyle | undefined = isWeb
+        ? {
+            marginLeft: -resolvedAvatarSize / 2,
+            opacity: active ? 1 : 0,
+            transitionProperty: 'opacity',
+            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
+            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
+        }
+        : undefined;
+
+    const chevronStyle: ViewStyle | undefined = isWeb
+        ? {
+            opacity: active ? 1 : 0,
+            transitionProperty: 'opacity',
+            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
+            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
+        }
+        : undefined;
+
     return (
-        <View className={className} style={style}>
+        <View className={`w-full ${className ?? ''}`} style={style}>
             <Pressable
                 ref={triggerRef}
-                className="flex-row items-center gap-3 rounded-full px-2 py-2"
+                className="w-full flex-row items-center gap-3 rounded-full px-2 py-2"
+                style={rowStyle}
                 onPress={openMenu}
                 accessibilityRole="button"
-                accessibilityLabel={t('accountSwitcher.switchWhileSignedInAs', { name: displayName })
-                    || `Switch account, signed in as ${displayName}`}
+                accessibilityLabel={accountLabel}
+                {...webInteractionProps}
             >
-                {avatarNode}
-                <View className="min-w-0 flex-1">
+                <View style={avatarWrapperStyle}>{avatarNode}</View>
+                <View className="min-w-0 flex-1" style={identityStyle}>
                     <Text className="font-bold text-foreground" numberOfLines={1}>
                         {displayName}
                     </Text>
@@ -248,11 +370,13 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                         </Text>
                     ) : null}
                 </View>
-                <MaterialCommunityIcons
-                    name="unfold-more-horizontal"
-                    size={18}
-                    color={colors.textSecondary}
-                />
+                <View style={chevronStyle}>
+                    <MaterialCommunityIcons
+                        name="unfold-more-horizontal"
+                        size={18}
+                        color={colors.textSecondary}
+                    />
+                </View>
             </Pressable>
             <ProfileMenu
                 open={menuOpen}

package/src/ui/components/ProfileMenu.tsx

@@ -62,7 +62,7 @@ export interface ProfileMenuProps {
  * Renders as an upward-opening popover anchored to the trigger on web, and a
  * bottom-sheet style modal on native.
  */
-const ProfileMenu: React.FC<ProfileMenuProps> = ({
+const ProfileMenuBody: React.FC<ProfileMenuProps> = ({
     open,
     onClose,
     anchor,
@@ -413,4 +413,19 @@ const styles = {
     } satisfies ViewStyle,
 };
 
+/**
+ * Public wrapper: renders nothing — and runs NO hooks — until `open`. Mounting
+ * the body only while open keeps the account hooks (`useDeviceAccounts` /
+ * refresh-all, Bloom dialog/toast controls) off the render path when the menu is
+ * closed, which is every time the sidebar or native drawer mounts
+ * `ProfileButton`. A hook that is unsafe on a given platform (e.g. throws during
+ * a native render) therefore never runs unless the user actually opens the menu.
+ */
+const ProfileMenu: React.FC<ProfileMenuProps> = (props) => {
+    if (!props.open) {
+        return null;
+    }
+    return <ProfileMenuBody {...props} />;
+};
+
 export default ProfileMenu;

package/src/ui/index.ts

@@ -13,6 +13,7 @@
  */
 
 /// <reference path="../types/react-native-classname.d.ts" />
+/// <reference path="../types/react-native-web-style.d.ts" />
 
 // Components
 export { default as OxyProvider } from './components/OxyProvider';