@oxy.so/services 4.0.1 → 4.0.2

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

@@ -205,9 +205,19 @@ export const authChooserStyles = StyleSheet.create({
     width: '100%',
     alignItems: 'center',
   },
-  /** The disclosure trigger, aligned with the subordinate links it reveals. */
+  /**
+   * The disclosure spans the content width, so the alternatives it reveals are
+   * centred across the sheet rather than inside the trigger's own width. It
+   * used to be `alignSelf: 'center'` — shrink-wrapped — and on Android that
+   * both wrapped the trigger to "Having / trouble?" and squeezed the revealed
+   * links into the same narrow column (OxyHQ/oxy#1375).
+   */
+  troubleDisclosure: {
+    width: '100%',
+    marginTop: 12,
+  },
+  /** The trigger itself stays a compact, centred affordance like the links. */
   troubleTrigger: {
     alignSelf: 'center',
-    marginTop: 12,
   },
 });

package/src/ui/hooks/accountDialogSnapshot.ts

@@ -14,6 +14,7 @@ import type { AccountDialogSnapshot } from '@oxy.so/core';
  */
 export const EMPTY_ACCOUNT_DIALOG_SNAPSHOT: AccountDialogSnapshot = {
   view: 'accounts',
+  backView: null,
   directory: null,
   activeContext: null,
   activatingContextId: null,

package/src/ui/icons/Ionicons.ts

@@ -1,11 +1,16 @@
 import createIconSet from '@expo/vector-icons/createIconSet';
+import { decorativeIconSet } from './decorativeIconSet';
 import font from '../../assets/fonts/icons/OxyServicesIonicons.ttf';
 import { ioniconsGlyphMap } from './subsetGlyphMaps';
 
-const Ionicons = createIconSet(
-  ioniconsGlyphMap,
-  'OxyServicesIonicons',
-  font,
+/** Glyphs are decorative: hidden from assistive technology (see `decorativeIconSet`). */
+const Ionicons = decorativeIconSet(
+  createIconSet(
+    ioniconsGlyphMap,
+    'OxyServicesIonicons',
+    font,
+  ),
+  'Ionicons',
 );
 
 export default Ionicons;

package/src/ui/icons/MaterialCommunityIcons.ts

@@ -1,11 +1,16 @@
 import createIconSet from '@expo/vector-icons/createIconSet';
+import { decorativeIconSet } from './decorativeIconSet';
 import font from '../../assets/fonts/icons/OxyServicesMaterialCommunityIcons.ttf';
 import { materialCommunityIconsGlyphMap } from './subsetGlyphMaps';
 
-const MaterialCommunityIcons = createIconSet(
-  materialCommunityIconsGlyphMap,
-  'OxyServicesMaterialCommunityIcons',
-  font,
+/** Glyphs are decorative: hidden from assistive technology (see `decorativeIconSet`). */
+const MaterialCommunityIcons = decorativeIconSet(
+  createIconSet(
+    materialCommunityIconsGlyphMap,
+    'OxyServicesMaterialCommunityIcons',
+    font,
+  ),
+  'MaterialCommunityIcons',
 );
 
 export default MaterialCommunityIcons;

package/src/ui/icons/__tests__/decorativeIconSet.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * Icon-font glyphs are private-use code points in a `Text` node; unhidden, a
+ * screen reader announces them (`"\u{F0140}"` beside "Switch account" in the
+ * Android account menu, OxyHQ/oxy#1375). Both SDK icon families hide every
+ * glyph, and a caller cannot switch that back on.
+ */
+
+import { render } from '@testing-library/react';
+import Ionicons from '../Ionicons';
+import MaterialCommunityIcons from '../MaterialCommunityIcons';
+import { decorativeIconSet } from '../decorativeIconSet';
+
+describe('the SDK icon families are decorative', () => {
+  it.each([
+    ['MaterialCommunityIcons', MaterialCommunityIcons, 'chevron-down'],
+    ['Ionicons', Ionicons, 'add'],
+  ] as const)('%s hides its glyph from assistive technology', (_family, Icon, name) => {
+    const { container } = render(<Icon name={name as never} size={20} />);
+
+    expect(container.querySelector(`[data-icon="${name}"]`)?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('keeps the glyph hidden even when a caller asks otherwise', () => {
+    const { container } = render(
+      <MaterialCommunityIcons name="chevron-down" aria-hidden={false} />,
+    );
+
+    expect(container.querySelector('[data-icon]')?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('carries the family statics, so it stays a drop-in for the family', () => {
+    expect(MaterialCommunityIcons.glyphMap['chevron-down']).toEqual(expect.any(Number));
+    expect(Ionicons.glyphMap.add).toEqual(expect.any(Number));
+
+    const Family = Object.assign(() => null, { glyphMap: { a: 1 }, getFontFamily: () => 'F' });
+    const Wrapped = decorativeIconSet(Family, 'Wrapped');
+    expect(Wrapped.glyphMap).toBe(Family.glyphMap);
+    expect(Wrapped.getFontFamily()).toBe('F');
+  });
+});

package/src/ui/icons/decorativeIconSet.ts

@@ -0,0 +1,41 @@
+import { createElement, type ComponentProps, type ComponentType } from 'react';
+
+/** Function built-ins and statics a function component must not inherit. */
+const NOT_COPIED = new Set(['length', 'name', 'prototype', 'caller', 'arguments', 'defaultProps', 'displayName']);
+
+/**
+ * Wrap an icon-font family so every glyph it renders is hidden from assistive
+ * technology.
+ *
+ * A vector-icons glyph is a `Text` node whose content is a private-use code
+ * point. A screen reader reads it like any other text: Android QA of the account
+ * menu found `"\u{F0140}"` announced next to "Switch account" (OxyHQ/oxy#1375),
+ * and on Android the code point is folded into the label of the pressable around
+ * it, because RN builds an unlabelled accessible view's description from its
+ * children's text.
+ *
+ * Every glyph in this SDK is decorative — the control or row around it carries
+ * the words — so it is hidden here, once, rather than at each call site where
+ * the next icon would forget it. `aria-hidden` is
+ * `importantForAccessibility="no-hide-descendants"` on Android,
+ * `accessibilityElementsHidden` on iOS and `aria-hidden` on web. It is applied
+ * AFTER the caller's props so it cannot be switched back on; a glyph that needs
+ * a name belongs inside a control that has one. (Mention's own wrapper,
+ * `components/common/Ionicons.tsx`, is the same rule.)
+ *
+ * The family's statics (`glyphMap`, `getImageSource`, `loadFont`, …) are carried
+ * over, so the wrapper is a drop-in for the family itself.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: an icon family's own props are whatever `createIconSet` typed them as; the wrapper returns the SAME type.
+export function decorativeIconSet<T extends ComponentType<any>>(IconSet: T, displayName: string): T {
+  function DecorativeIcon(props: ComponentProps<T>) {
+    return createElement(IconSet, { ...props, 'aria-hidden': true });
+  }
+  for (const key of Object.getOwnPropertyNames(IconSet)) {
+    if (NOT_COPIED.has(key)) continue;
+    const descriptor = Object.getOwnPropertyDescriptor(IconSet, key);
+    if (descriptor) Object.defineProperty(DecorativeIcon, key, descriptor);
+  }
+  DecorativeIcon.displayName = displayName;
+  return DecorativeIcon as unknown as T;
+}

package/src/ui/screens/ManageAccountScreen.tsx

@@ -20,6 +20,7 @@ import {
     getNormalizedUserHandle,
     logger as loggerUtil,
     packageInfo,
+    type DeviceLinkedSession,
 } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
@@ -33,16 +34,9 @@ import { isWebBrowser } from '../utils/isWebBrowser';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUserSubscription } from '../hooks/queries/usePaymentQueries';
 import { useDeviceSessions } from '../hooks/queries/useServicesQueries';
+import { deviceSessionTitle } from '../utils/deviceSessionTitle';
 
-interface DeviceSessionRow {
-    sessionId: string;
-    deviceId: string;
-    deviceName: string;
-    isActive: boolean;
-    lastActive: string;
-    expiresAt: string;
-    isCurrent: boolean;
-}
+type DeviceSessionRow = DeviceLinkedSession;
 
 const AVATAR_SIZE = 88;
 
@@ -172,8 +166,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
         const confirmed = await surfaces.confirm({
             title: t('manageAccount.confirms.removeDeviceTitle') || 'Remove device',
             description:
-                t('manageAccount.confirms.removeDevice', { name: device.deviceName })
-                || `Sign out from "${device.deviceName}"?`,
+                t('manageAccount.confirms.removeDevice', { name: deviceSessionTitle(device, t) }),
             confirmLabel: t('common.remove') || 'Remove',
             cancelLabel: t('common.cancel') || 'Cancel',
             destructive: true,
@@ -186,8 +179,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
             await oxyServices.logoutSession(activeSessionId, device.sessionId);
             await refetchDeviceSessions();
             toast.success(
-                t('manageAccount.toasts.deviceRemoved', { name: device.deviceName })
-                || `Signed out from ${device.deviceName}`,
+                t('manageAccount.toasts.deviceRemoved', { name: deviceSessionTitle(device, t) }),
             );
         } catch (error) {
             loggerUtil.warn('Remove device failed', { component: 'ManageAccountScreen' }, error as unknown);
@@ -503,7 +495,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                                         }
                                     />
                                 }
-                                title={`${device.deviceName}${device.isCurrent ? ` (${t('manageAccount.sessions.thisDevice') || 'This device'})` : ''}`}
+                                title={deviceSessionTitle(device, t)}
                                 description={
                                     t('manageAccount.sessions.lastActive', {
                                         relative: formatRelative(device.lastActive),
@@ -711,10 +703,13 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                             description={
                                 accounts.length > 0
                                     ? (
-                                        t('accounts.manage.switch.count', {
-                                            count: accounts.length,
-                                        })
-                                        || `${accounts.length} ${accounts.length === 1 ? 'account' : 'accounts'}`
+                                        // One account is "1 account", not "1 accounts".
+                                        t(
+                                            accounts.length === 1
+                                                ? 'accounts.manage.switch.countOne'
+                                                : 'accounts.manage.switch.count',
+                                            { count: accounts.length },
+                                        )
                                     )
                                     : (
                                         t('accounts.manage.switch.empty')

package/src/ui/utils/__tests__/deviceSessionTitle.test.ts

@@ -0,0 +1,31 @@
+import type { User } from '@oxy.so/core';
+import { deviceSessionTitle } from '../deviceSessionTitle';
+
+const t = (key: string) =>
+  ({
+    'manageAccount.sessions.thisDevice': 'This device',
+    'manageAccount.sessions.otherSession': 'Another session',
+  })[key] ?? key;
+
+describe('deviceSessionTitle', () => {
+  it('never reads "undefined" when the server sends no device name (OxyHQ/oxy#1375 item 11)', () => {
+    // The live response shape: no `deviceName` key at all.
+    const title = deviceSessionTitle({ isCurrent: true } as never, t);
+    expect(title).toBe('This device');
+    expect(title).not.toContain('undefined');
+  });
+
+  it("names another session by its account, which the response does carry", () => {
+    const user = { id: 'u2', username: 'bob', name: { displayName: 'Bob' } } as unknown as User;
+    expect(deviceSessionTitle({ isCurrent: false, user } as never, t)).toBe('Bob');
+  });
+
+  it('falls back to a generic label when nothing names the session', () => {
+    expect(deviceSessionTitle({ isCurrent: false } as never, t)).toBe('Another session');
+  });
+
+  it('keeps a real device name, marking the current one', () => {
+    expect(deviceSessionTitle({ deviceName: 'Pixel 8a', isCurrent: true }, t)).toBe('Pixel 8a (This device)');
+    expect(deviceSessionTitle({ deviceName: 'Pixel 8a', isCurrent: false }, t)).toBe('Pixel 8a');
+  });
+});

package/src/ui/utils/deviceSessionTitle.ts

@@ -0,0 +1,29 @@
+import { getNormalizedUserHandle, type DeviceLinkedSession } from '@oxy.so/core';
+
+type Translate = (key: string, vars?: Record<string, string | number>) => string;
+
+/**
+ * The title of one row in "Sessions & devices".
+ *
+ * `GET /session/device/sessions/:sessionId` lists the sessions that share THIS
+ * physical device — one per account signed in here — and sends no
+ * `deviceName` at all, although the model declared one. The row interpolated
+ * it unconditionally and Android QA read "undefined (This device)"
+ * (OxyHQ/oxy#1375 item 11).
+ *
+ * A name the server does send is used; otherwise the current session is "This
+ * device" and any other is named by the account it belongs to, which the
+ * response does carry. Never the string "undefined".
+ */
+export function deviceSessionTitle(
+  session: Pick<DeviceLinkedSession, 'deviceName' | 'isCurrent' | 'user'>,
+  t: Translate,
+): string {
+  const thisDevice = t('manageAccount.sessions.thisDevice');
+  const deviceName = typeof session.deviceName === 'string' ? session.deviceName.trim() : '';
+  if (deviceName) return session.isCurrent ? `${deviceName} (${thisDevice})` : deviceName;
+  if (session.isCurrent) return thisDevice;
+  const user = session.user;
+  const name = user?.name?.displayName?.trim() || (user ? getNormalizedUserHandle(user) : null);
+  return name || t('manageAccount.sessions.otherSession');
+}