@oxy.so/services 6.2.0 → 8.1.0

package/src/ui/components/authChooser/SignInRequestView.tsx

@@ -9,9 +9,8 @@
  * only the account dialog knows:
  *
  *  - which of the controller's facts map onto the surface's props;
- *  - which alternatives are genuine ones for the CURRENT presentation (the
- *    passkey ceremony is pointless once the request is already being confirmed,
- *    and a QR link is redundant while the QR itself is the primary visual);
+ *  - which alternatives are genuine ones for the CURRENT presentation (a QR
+ *    link is redundant while the QR itself is the primary visual);
  *  - the one piece of local intent the controller has no opinion on: leaving the
  *    acquisition surface via "I have Commons on another device".
  *
@@ -22,7 +21,7 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import type { AccountDialogSnapshot } from '@oxy.so/core';
+import type { AccountDialogSnapshot } from '@oxy.so/core/session';
 import OxySignInRequestSurface from '../OxySignInRequestSurface';
 import type { OxySignInSurfaceAction, SignInAlternatives, Translate } from './types';
 
@@ -50,24 +49,9 @@ const SignInRequestView: React.FC<SignInRequestViewProps> = ({
   // leads — until the user explicitly asks for the QR anyway.
   const acquiring = !failed && commonsAvailability === 'unavailable' && !qrRequested;
 
-  // A ceremony is pointless once the request is already being confirmed, and a
-  // ceremony FAILURE is toasted by the container — this link never renders an
-  // error of its own (owner mandate).
-  const passkeyAction: OxySignInSurfaceAction[] =
-    alternatives.passkeyAvailable && signIn.phase !== 'authorized' && signIn.phase !== 'completed'
-      ? [
-          {
-            key: 'passkey-signin-link',
-            label: t('accountSwitcher.useIdentityOnDevice'),
-            onPress: alternatives.onSignInWithPasskey,
-          },
-        ]
-      : [];
-
   const troubleActions = ((): OxySignInSurfaceAction[] => {
-    // Nothing about the chosen route is actionable any more — only the
-    // authentication alternatives are.
-    if (failed) return passkeyAction;
+    // Nothing about the chosen route is actionable any more: "Try again" is.
+    if (failed) return [];
     if (acquiring) {
       return [
         {
@@ -75,7 +59,6 @@ const SignInRequestView: React.FC<SignInRequestViewProps> = ({
           label: t('accountSwitcher.showQrAnyway'),
           onPress: () => setQrRequested(true),
         },
-        ...passkeyAction,
       ];
     }
     return [
@@ -89,7 +72,6 @@ const SignInRequestView: React.FC<SignInRequestViewProps> = ({
               onPress: alternatives.onShowQr,
             },
           ]),
-      ...passkeyAction,
       {
         key: 'get-commons-link',
         label: t('accountSwitcher.getCommons'),

package/src/ui/components/authChooser/TroubleDisclosure.tsx

@@ -2,7 +2,7 @@
  * The "Having trouble?" progressive disclosure (issue #691, Phase 5).
  *
  * The normal sign-in surface presents ONE primary action. Every alternative —
- * scanning a QR from another device, a passkey on this device, getting Commons,
+ * scanning a QR from another device, getting Commons,
  * creating an account — lives here, hidden until the user asks for it or the
  * chosen primary route fails.
  *

package/src/ui/components/authChooser/primitives.tsx

@@ -5,17 +5,10 @@
  */
 
 import type React from 'react';
-import { Pressable, View } from 'react-native';
-import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
-import { Avatar } from '@oxy.so/bloom/avatar';
-import { BloomColorScope } from '@oxy.so/bloom/theme';
+import { Pressable } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
-import type { SwitcherContextRow } from '@oxy.so/core';
 import { authChooserStyles as styles } from './styles';
-import { resolveAccentHex, toPreset, type Theme } from './types';
-
-/** Diameter of a row avatar (the sign-in view's account rows). */
-const ROW_AVATAR_SIZE = 40;
+import type { Theme } from './types';
 
 /**
  * A SUBORDINATE action: a small centred text link, never a button.
@@ -43,90 +36,3 @@ export const SubtleLink: React.FC<{
     <Text style={[styles.linkText, { color: theme.colors.textSecondary }]}>{label}</Text>
   </Pressable>
 );
-
-/**
- * A `principal acting as account` row on the sign-in entry — "continue as one of
- * these" rather than a choice of authentication METHOD, which is why it stays
- * above the primary CTA instead of behind the trouble disclosure.
- *
- * Pressing it activates the PAIR. The secondary line is the account's `@handle`:
- * the device directory carries a handle and no email, deliberately — it is the
- * minimum that renders a row for every person on the device, and this surface is
- * reached while signed out, where fetching anyone's profile is not an option.
- *
- * The accent comes from the row's OWN account (`context.color`, straight off the
- * directory), not from the theme and not from whoever is signed in. This surface
- * is where a device holding two people is most visible, and it is reached while
- * signed out — so there is no "current user" whose colour could stand in.
- *
- * `continueAsLabel` is the signed-out form. The device can list an identity
- * (and even mark it active) while this app holds no session, so a check there
- * would claim a sign-in that has not happened. Given a label, the row never
- * reads as current: its first line is "Continue as @handle", the account's
- * name moves to the second line, and it ends in a chevron like any other row.
- */
-export const AccountRow: React.FC<{
-  context: SwitcherContextRow;
-  /** The person this account is reached through, when that is not obvious. */
-  operatedBy: string | null;
-  /** Signed out: the row's "Continue as @handle" line. `null` when signed in. */
-  continueAsLabel?: string | null;
-  theme: Theme;
-  activating: boolean;
-  disabled: boolean;
-  onPress: () => void;
-}> = ({ context, operatedBy, continueAsLabel = null, theme, activating, disabled, onPress }) => {
-  const accent = resolveAccentHex(context.color, theme.colors.primary);
-  const rowDisabled = disabled || !context.canActivate;
-  const current = continueAsLabel === null && context.isActive;
-  const primary = continueAsLabel ?? context.displayName;
-  const secondary =
-    operatedBy ??
-    (continueAsLabel !== null ? context.displayName : context.handle ? `@${context.handle}` : null);
-
-  return (
-    <BloomColorScope colorPreset={toPreset(context.color)} asChild>
-      <Pressable
-        style={[
-          styles.accountRow,
-          {
-            borderColor: current ? accent : theme.colors.border,
-            backgroundColor: theme.colors.card,
-          },
-          rowDisabled && !activating ? styles.rowDisabled : null,
-        ]}
-        onPress={onPress}
-        disabled={rowDisabled}
-        accessibilityRole="button"
-        accessibilityState={{ selected: current, disabled: rowDisabled }}
-        accessibilityLabel={primary}
-      >
-        <View style={[styles.avatarRing, { borderColor: current ? accent : 'transparent' }]}>
-          <Avatar
-            source={context.avatarUrl ?? undefined}
-            variant="thumb"
-            name={context.displayName}
-            size={ROW_AVATAR_SIZE}
-          />
-        </View>
-        <View style={styles.rowMeta}>
-          <Text style={[styles.rowName, { color: theme.colors.text }]} numberOfLines={1}>
-            {primary}
-          </Text>
-          {secondary ? (
-            <Text style={[styles.rowHandle, { color: theme.colors.textSecondary }]} numberOfLines={1}>
-              {secondary}
-            </Text>
-          ) : null}
-        </View>
-        {activating ? (
-          <MaterialCommunityIcons name="loading" size={20} color={accent} />
-        ) : current ? (
-          <MaterialCommunityIcons name="check-circle" size={20} color={accent} />
-        ) : (
-          <MaterialCommunityIcons name="chevron-right" size={20} color={theme.colors.textSecondary} />
-        )}
-      </Pressable>
-    </BloomColorScope>
-  );
-};

package/src/ui/components/authChooser/requestSurfaces.tsx

@@ -19,7 +19,8 @@ import QRCode from 'react-native-qrcode-svg';
 import { Button } from '@oxy.so/bloom/button';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
-import type { CommonsDeliveryRoute, SignInProgress } from '@oxy.so/core';
+import type { CommonsDeliveryRoute } from '@oxy.so/core';
+import type { SignInProgress } from '@oxy.so/core/session';
 import { authChooserStyles as styles } from './styles';
 import type { Theme, Translate } from './types';
 

package/src/ui/components/authChooser/signInFailureMessage.ts

@@ -6,7 +6,7 @@
  * raw `signIn.error` is English or a server string, kept for diagnostics only.
  */
 
-import type { SignInFailureReason } from '@oxy.so/core';
+import type { SignInFailureReason } from '@oxy.so/core/session';
 import type { Translate } from './types';
 
 /** The toast for `failure`, or `null` when there is nothing to report. */

package/src/ui/components/authChooser/signInProgress.ts

@@ -16,7 +16,8 @@
  *     Identity confirmed
  */
 
-import type { CommonsDeliveryRoute, SignInProgress } from '@oxy.so/core';
+import type { CommonsDeliveryRoute } from '@oxy.so/core';
+import type { SignInProgress } from '@oxy.so/core/session';
 import type { Translate } from './types';
 
 /**

package/src/ui/components/authChooser/styles.ts

@@ -13,39 +13,6 @@ const QR_PLATE_BG = '#FFFFFF';
  * text-link rhythm every view's fallback affordances share.
  */
 export const authChooserStyles = StyleSheet.create({
-  rows: {
-    width: '100%',
-    gap: 8,
-  },
-  accountRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 16,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-  },
-  rowDisabled: {
-    opacity: 0.6,
-  },
-  avatarRing: {
-    borderRadius: 9999,
-    borderWidth: 2,
-    padding: 1,
-  },
-  rowMeta: {
-    flex: 1,
-    minWidth: 0,
-  },
-  rowName: {
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  rowHandle: {
-    fontSize: 12.5,
-    marginTop: 1,
-  },
   /**
    * Animated-collapse container for the account switch list — the outer clip and
    * the inner measuring wrapper. Style-based (NOT NativeWind): the container

package/src/ui/components/authChooser/types.ts

@@ -103,15 +103,6 @@ export interface AccountsMenuActions {
   }[];
 }
 
-/**
- * Where a passkey sign-in or sign-up can run from the current surface.
- *
- * `'hub'`  = web: it runs in auth.oxy.so's window over the app
- *            (`continueOnAuth`), on every web origin.
- * `'none'` = native, where Commons owns identity.
- */
-export type PasskeyMode = 'hub' | 'none';
-
 /**
  * Everything that is NOT the sign-in surface's one primary action.
  *
@@ -121,14 +112,11 @@ export type PasskeyMode = 'hub' | 'none';
  * fails). A view never renders one of these as a button.
  */
 export interface SignInAlternatives {
-  /** Whether a WebAuthn ceremony is reachable from this origin at all. */
-  passkeyAvailable: boolean;
-  onSignInWithPasskey: () => void;
   /** Fall back to the cross-device QR handoff (restarts the request). */
   onShowQr: () => void;
   /** Open the Commons store listing / landing page for this platform. */
   onGetCommons: () => void;
-  /** Create an account: the identity-origin window on web, the Commons flow on native. */
+  /** Create an account, in the dialog. */
   onCreateAccount: () => void;
 }
 

package/src/ui/components/signIn/InlineCommonsQr.tsx

@@ -22,7 +22,7 @@ import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
 import { RiRefreshLine } from '@oxy.so/bloom/icons/RiRefreshLine';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
-import type { AccountDialogController } from '@oxy.so/core';
+import type { AccountDialogController } from '@oxy.so/core/session';
 import { useI18n } from '../../hooks/useI18n';
 import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
 
@@ -46,7 +46,7 @@ export const InlineCommonsQr: React.FC<{ controller: AccountDialogController | n
 
   // One request for as long as the block is on screen. Withdrawn on the way
   // out only while it is still ours and still approvable: an attempt the
-  // person started meanwhile (a passkey window, "Continue with Oxy") is theirs.
+  // person started meanwhile ("Continue with Oxy") is theirs.
   useEffect(() => {
     if (!controller || !shown) return;
     const { signIn: current } = controller.getSnapshot();

package/src/ui/components/signIn/OxyAccountPicker.tsx

@@ -8,20 +8,34 @@
  * means — a switch, a "Continue as" sign-in, or activating the pair before an
  * OAuth consent — and passes the pair back, never an account id, which cannot
  * say whose route was chosen.
+ *
+ * One rounded list: each row is the account's name and `@handle` on the left,
+ * its avatar and a chevron on the right, with a hairline between rows that
+ * steps aside for a hovered row. Layout is NativeWind; hover is driven by
+ * `onHoverIn`/`onHoverOut` (web only), because this pipeline does not emit
+ * `hover:` variants — the same pattern as the account menu.
  */
 
 import type React from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Fragment, useState } from 'react';
+import { ScrollView } from 'react-native';
+import { Pressable, View } from 'react-native-css/components';
+import { Avatar } from '@oxy.so/bloom/avatar';
 import { RiArrowRightSLine } from '@oxy.so/bloom/icons/RiArrowRightSLine';
+import { RiCheckLine } from '@oxy.so/bloom/icons/RiCheckLine';
+import { RiLoader4Line } from '@oxy.so/bloom/icons/RiLoader4Line';
 import { RiUserAddLine } from '@oxy.so/bloom/icons/RiUserAddLine';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
-import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core';
+import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core/session';
 import { useI18n } from '../../hooks/useI18n';
-import { AccountRow } from '../authChooser/primitives';
-import { authChooserStyles } from '../authChooser/styles';
+import { resolveAccentHex } from '../authChooser/types';
 import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
 
+/** The list scrolls past this height (`max-h-96`). */
+const LIST_MAX_HEIGHT = 384;
+const AVATAR_SIZE = 40;
+
 export interface OxyAccountPickerProps {
   /** The device's people, each with the accounts they may act as (`useDeviceSwitcher`). */
   principals: SwitcherPrincipalRow[];
@@ -35,9 +49,9 @@ export interface OxyAccountPickerProps {
   /** Disables every row while a choice is in flight. */
   isLoading?: boolean;
   /**
-   * This origin holds no session. A row then reads "Continue as @handle" and
-   * never as the current account: the device can list an identity as active
-   * while nobody is signed in HERE.
+   * This origin holds no session. A row is then announced as "Continue as
+   * @handle" and never marked as the current account: the device can list an
+   * identity as active while nobody is signed in HERE.
    */
   signedOut?: boolean;
 }
@@ -53,77 +67,128 @@ export const OxyAccountPicker: React.FC<OxyAccountPickerProps> = ({
 }) => {
   const theme = useTheme();
   const { t } = useI18n();
+  const [hovered, setHovered] = useState<number | null>(null);
   // Whose route a row is only needs naming once someone holds more than one
   // account here — the same rule the account menu's group headers follow.
   const namesTheOperator = showsPrincipalHeaders(principals);
 
+  const rows = principals.flatMap((principal) =>
+    principal.contexts.map((context) => ({
+      context,
+      operatedBy:
+        namesTheOperator && context.isDelegated
+          ? t('accountSwitcher.context.operatedBy', { name: principal.displayName })
+          : null,
+    })),
+  );
+  const useAnotherIndex = rows.length;
+
+  /** The hairline under row `index`, hidden while either neighbour is hovered. */
+  const divider = (index: number) =>
+    hovered === index || hovered === index + 1 ? (
+      <View className="h-px mx-[8px]" />
+    ) : (
+      <View className="h-px mx-[8px] bg-border opacity-50" />
+    );
+
+  const rowClassName = (index: number, disabled: boolean) =>
+    `flex-row items-center gap-[12px] rounded-[14px] p-[8px] ${hovered === index && !disabled ? 'bg-fill' : ''} ${disabled ? 'opacity-50' : ''}`;
+
   return (
     <OxyAuthScreen>
       <OxyAuthScreenHeader
         title={t('signin.chooser.title')}
         description={appName ? t('signin.chooser.subtitleToApp', { app: appName }) : t('signin.chooser.subtitle')}
       />
-      <View style={authChooserStyles.rows}>
-        {principals.flatMap((principal) =>
-          principal.contexts.map((context) => (
-            <AccountRow
-              key={context.contextId}
-              context={context}
-              operatedBy={
-                namesTheOperator && context.isDelegated
-                  ? t('accountSwitcher.context.operatedBy', { name: principal.displayName })
-                  : null
-              }
-              continueAsLabel={
-                signedOut
-                  ? t('signin.chooser.continueAs', {
-                      name: context.handle ? `@${context.handle}` : context.displayName,
-                    })
-                  : null
-              }
-              theme={theme}
-              activating={pendingContextId === context.contextId}
-              disabled={isLoading}
-              onPress={() => onSelectContext(context)}
-            />
-          )),
-        )}
-        <Pressable
-          onPress={onUseAnother}
-          disabled={isLoading}
-          accessibilityRole="button"
-          accessibilityLabel={t('signin.chooser.useAnother')}
-          style={[
-            authChooserStyles.accountRow,
-            { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
-            isLoading ? authChooserStyles.rowDisabled : null,
-          ]}
-          testID="use-another-account"
-        >
-          <View style={[styles.addGlyph, { backgroundColor: theme.colors.backgroundSecondary }]}>
-            <RiUserAddLine size="md" fill={theme.colors.textSecondary} />
-          </View>
-          <Text style={[authChooserStyles.rowName, styles.addLabel, { color: theme.colors.text }]}>
-            {t('signin.chooser.useAnother')}
-          </Text>
-          <RiArrowRightSLine size="md" fill={theme.colors.textSecondary} />
-        </Pressable>
+      <View className="bg-fill-secondary rounded-[22px] overflow-hidden" testID="account-picker-list">
+        <ScrollView style={{ maxHeight: LIST_MAX_HEIGHT }} contentContainerStyle={{ padding: 8 }}>
+          {rows.map(({ context, operatedBy }, index) => {
+            const activating = pendingContextId === context.contextId;
+            const disabled = isLoading || !context.canActivate;
+            const current = !signedOut && context.isActive;
+            const accent = resolveAccentHex(context.color, theme.colors.primary);
+            const handle = context.handle ? `@${context.handle}` : null;
+            const label = signedOut
+              ? t('signin.chooser.continueAs', { name: handle ?? context.displayName })
+              : context.displayName;
+            return (
+              <Fragment key={context.contextId}>
+                <Pressable
+                  className={rowClassName(index, disabled && !activating)}
+                  onPress={() => onSelectContext(context)}
+                  onHoverIn={() => setHovered(index)}
+                  onHoverOut={() => setHovered((value) => (value === index ? null : value))}
+                  disabled={disabled}
+                  accessibilityRole="button"
+                  accessibilityLabel={label}
+                  accessibilityState={{ selected: current, disabled, busy: activating }}
+                >
+                  <View className="flex-1 min-w-0">
+                    <Text className="text-body text-text" style={{ fontWeight: '500' }} numberOfLines={1}>
+                      {context.displayName}
+                    </Text>
+                    {operatedBy || handle ? (
+                      <Text className="text-bodySmall text-text-secondary" numberOfLines={1}>
+                        {operatedBy ?? handle}
+                      </Text>
+                    ) : null}
+                  </View>
+                  <View className="flex-row items-center gap-[8px] shrink-0">
+                    <View style={{ width: AVATAR_SIZE, height: AVATAR_SIZE }}>
+                      <Avatar
+                        source={context.avatarUrl ?? undefined}
+                        variant="thumb"
+                        name={context.displayName}
+                        size={AVATAR_SIZE}
+                      />
+                      {current ? (
+                        <View
+                          className="absolute -bottom-[2px] -right-[2px] items-center justify-center rounded-full border-2 border-background"
+                          style={{ width: 18, height: 18, backgroundColor: accent }}
+                        >
+                          <RiCheckLine size="xs" fill="#ffffff" />
+                        </View>
+                      ) : null}
+                    </View>
+                    {activating ? (
+                      <RiLoader4Line size="sm" fill={accent} />
+                    ) : (
+                      <RiArrowRightSLine size="sm" fill={theme.colors.textSecondary} />
+                    )}
+                  </View>
+                </Pressable>
+                {divider(index)}
+              </Fragment>
+            );
+          })}
+          <Pressable
+            className={rowClassName(useAnotherIndex, isLoading)}
+            onPress={onUseAnother}
+            onHoverIn={() => setHovered(useAnotherIndex)}
+            onHoverOut={() => setHovered((value) => (value === useAnotherIndex ? null : value))}
+            disabled={isLoading}
+            accessibilityRole="button"
+            accessibilityLabel={t('signin.chooser.useAnother')}
+            testID="use-another-account"
+          >
+            <View className="flex-1 min-w-0">
+              <Text className="text-body text-text" style={{ fontWeight: '500' }} numberOfLines={1}>
+                {t('signin.chooser.useAnother')}
+              </Text>
+            </View>
+            <View className="flex-row items-center gap-[8px] shrink-0">
+              <View
+                className="bg-fill items-center justify-center rounded-full"
+                style={{ width: AVATAR_SIZE, height: AVATAR_SIZE }}
+              >
+                <RiUserAddLine size="md" fill={theme.colors.textSecondary} />
+              </View>
+              <RiArrowRightSLine size="sm" fill={theme.colors.textSecondary} />
+            </View>
+          </Pressable>
+        </ScrollView>
       </View>
       <OxyAuthTerms />
     </OxyAuthScreen>
   );
 };
-
-const styles = StyleSheet.create({
-  // Matches `AccountRow`'s 40px avatar plus its 2px ring and 1px gap.
-  addGlyph: {
-    width: 46,
-    height: 46,
-    borderRadius: 23,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  addLabel: {
-    flex: 1,
-  },
-});