@oxy.so/services 12.5.0 → 12.6.0

package/src/ui/components/__tests__/followButtonAccessibility.test.tsx

@@ -9,6 +9,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
+import { translate } from '@oxy.so/core';
 import {
   describeFollowAllButton,
   describeFollowButton,
@@ -52,6 +53,7 @@ jest.mock('../../hooks/useFollow', () => ({
 
 jest.mock('../../context/oxyRuntimeContext', () => ({
   useOxy: () => ({ oxyServices: {}, canUsePrivateApi: true, user: { id: 'viewer' } }),
+  useOptionalOxy: () => null,
 }));
 
 let mockTarget = {
@@ -73,8 +75,16 @@ jest.mock('../../hooks/useFollowTarget', () => ({
 import { FollowButton } from '../FollowButton';
 import { FollowTargetButton } from '../FollowTargetButton';
 
+const t = (key: string, vars?: Record<string, string | number>) => translate('en-US', key, vars);
+
 describe('describeFollowButton', () => {
-  const known = { isKnown: true, isPending: false, username: 'nate' };
+  const known = {
+    isKnown: true,
+    isPending: false,
+    username: 'nate',
+    verb: 'follow' as const,
+    labels: { idle: 'Follow', active: 'Following' },
+  };
 
   it.each([
     [{ ...known, isFollowing: true }, 'Following @nate', 'Unfollows @nate'],
@@ -94,7 +104,7 @@ describe('describeFollowButton', () => {
       undefined,
     ],
   ])('%o reads "%s"', (input, label, hint) => {
-    expect(describeFollowButton(input)).toEqual(
+    expect(describeFollowButton(input, t)).toEqual(
       hint ? { accessibilityLabel: label, accessibilityHint: hint } : { accessibilityLabel: label },
     );
   });
@@ -112,22 +122,22 @@ describe('describeFollowAllButton', () => {
 
   it('names the state and counts the accounts in the hint', () => {
     expect(
-      describeFollowAllButton({ ...labels, allFollowing: false, isPending: false, count: 3 }),
+      describeFollowAllButton({ ...labels, allFollowing: false, isPending: false, count: 3 }, t),
     ).toEqual({
       accessibilityLabel: 'Follow all',
       accessibilityHint: 'Follows all 3 accounts',
     });
     expect(
-      describeFollowAllButton({ ...labels, allFollowing: true, isPending: false, count: 1 }),
+      describeFollowAllButton({ ...labels, allFollowing: true, isPending: false, count: 1 }, t),
     ).toEqual({
       accessibilityLabel: 'Following',
-      accessibilityHint: 'Unfollows all 1 account',
+      accessibilityHint: 'Unfollows 1 account',
     });
   });
 
   it('drops the hint while the bulk write is in flight', () => {
     expect(
-      describeFollowAllButton({ ...labels, allFollowing: true, isPending: true, count: 3 }),
+      describeFollowAllButton({ ...labels, allFollowing: true, isPending: true, count: 3 }, t),
     ).toEqual({
       accessibilityLabel: 'Following',
     });
@@ -178,6 +188,22 @@ describe('FollowButton hands Bloom a name that follows the state', () => {
     });
   });
 
+  it('reads its verb: "Join" and "Joined", named and hinted to match', () => {
+    mockFollowState = { isFollowing: false, isKnown: true, isLoading: false };
+    render(<FollowButton userId="c-id" username="fediverse" verb="join" />);
+    expect(lastBloomProps()).toMatchObject({
+      label: 'Join',
+      followingLabel: 'Joined',
+      accessibilityLabel: 'Join @fediverse',
+    });
+    mockFollowState = { isFollowing: true, isKnown: true, isLoading: false };
+    render(<FollowButton userId="c-id" username="fediverse" verb="join" />);
+    expect(lastBloomProps()).toMatchObject({
+      accessibilityLabel: 'Joined @fediverse',
+      accessibilityHint: 'Leaves @fediverse',
+    });
+  });
+
   it('names the "Follow all" button by its state too', () => {
     mockMulti = { allFollowing: true, isAnyLoading: false };
     render(<FollowButton userIds={['a', 'b']} />);

package/src/ui/components/__tests__/followTargetButton.test.ts

@@ -28,7 +28,7 @@ import {
 
 const DURATIONS = [
   { label: '24 hours', seconds: 86400 },
-  { label: 'A week', seconds: 604800 },
+  { label: 'a week', seconds: 604800 },
 ];
 
 const base = {
@@ -97,6 +97,12 @@ describe('buildFollowMenuItems', () => {
       expect(buildFollowMenuItems(following)[0].label).toBe('Don’t show in Mention');
     });
 
+    it('words "everywhere" with the button’s verb', () => {
+      expect(buildFollowMenuItems({ ...following, verb: 'join' })[1].label).toBe(
+        'Leave everywhere',
+      );
+    });
+
     it('offers turning it back on once it is off here', () => {
       const items = buildFollowMenuItems({ ...following, applicationMode: 'disabled' });
       expect(keys(items)).toEqual(['enable-here', 'unfollow-everywhere']);

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

@@ -11,10 +11,9 @@ import { APP_COLOR_NAMES } from '@oxy.so/bloom/color-presets';
 import type { AccountStorageUsageResponse } from '@oxy.so/core';
 import { APP_COLOR_PRESETS, type useTheme } from '@oxy.so/bloom/theme';
 import type { AccountDialogMenuSection } from '../../navigation/accountDialogManager';
-import type { useI18n } from '../../hooks/useI18n';
 
 export type Theme = ReturnType<typeof useTheme>;
-export type Translate = ReturnType<typeof useI18n>['t'];
+export type { Translate } from '../../hooks/useI18n';
 
 /**
  * One SUBORDINATE action on a sign-in surface — an alternative revealed behind

package/src/ui/components/followButtonAccessibility.ts

@@ -8,10 +8,16 @@
  * (OxyHQ/oxy#1375 item 22). The name now says the state, and who it is for
  * when the caller knows the handle.
  *
+ * The words follow the button's verb ("Joined @fediverse", hinted "Leaves
+ * @fediverse") and its language: every string is `@oxy.so/core`'s `follow.*`.
+ *
  * Pure, and kept apart from the components, so every state is pinned by a
  * table test rather than by a render that can only see one state at a time.
  */
 
+import type { Translate } from '../hooks/useI18n';
+import type { FollowLabels, FollowVerb } from './followLabels';
+
 export interface FollowButtonAccessibility {
   accessibilityLabel: string;
   accessibilityHint?: string;
@@ -33,36 +39,40 @@ export function formatHandle(username: string | undefined): string | undefined {
  *   because a press does nothing until the write settles.
  * - Following: "Following @nate", hinted "Unfollows @nate", because pressing
  *   it unfollows, which the visible "Following" does not say.
+ *
+ * The name is the visible label (the caller's, when it passed `labels`) beside
+ * the handle; the checking line and the hint are the verb's.
  */
-export function describeFollowButton(input: {
-  isKnown: boolean;
-  isFollowing: boolean;
-  isPending: boolean;
-  username?: string;
-}): FollowButtonAccessibility {
+export function describeFollowButton(
+  input: {
+    isKnown: boolean;
+    isFollowing: boolean;
+    isPending: boolean;
+    username?: string;
+    verb: FollowVerb;
+    labels: Pick<FollowLabels, 'idle' | 'active'>;
+  },
+  t: Translate,
+): FollowButtonAccessibility {
   const handle = formatHandle(input.username);
+  const words = `follow.verbs.${input.verb}`;
 
   if (!input.isKnown) {
     return {
       accessibilityLabel: handle
-        ? `Checking whether you follow ${handle}`
-        : 'Checking follow status',
+        ? t(`${words}.checkingNamed`, { name: handle })
+        : t(`${words}.checking`),
     };
   }
 
-  const accessibilityLabel = input.isFollowing
-    ? handle
-      ? `Following ${handle}`
-      : 'Following'
-    : handle
-      ? `Follow ${handle}`
-      : 'Follow';
+  const label = input.isFollowing ? input.labels.active : input.labels.idle;
+  const accessibilityLabel = handle ? t('follow.named', { label, name: handle }) : label;
 
   if (input.isPending || !input.isFollowing) return { accessibilityLabel };
 
   return {
     accessibilityLabel,
-    accessibilityHint: handle ? `Unfollows ${handle}` : 'Unfollows this account',
+    accessibilityHint: handle ? t(`${words}.undoNamed`, { name: handle }) : t(`${words}.undo`),
   };
 }
 
@@ -70,18 +80,21 @@ export function describeFollowButton(input: {
  * The "Follow all" button. The labels are the caller's, since a starter pack
  * and a feed's member list word it differently; the hint carries the count.
  */
-export function describeFollowAllButton(input: {
-  allFollowing: boolean;
-  isPending: boolean;
-  count: number;
-  followAllLabel: string;
-  followedAllLabel: string;
-}): FollowButtonAccessibility {
+export function describeFollowAllButton(
+  input: {
+    allFollowing: boolean;
+    isPending: boolean;
+    count: number;
+    followAllLabel: string;
+    followedAllLabel: string;
+  },
+  t: Translate,
+): FollowButtonAccessibility {
   const accessibilityLabel = input.allFollowing ? input.followedAllLabel : input.followAllLabel;
   if (input.isPending) return { accessibilityLabel };
-  const accounts = input.count === 1 ? '1 account' : `${input.count} accounts`;
+  const hint = input.allFollowing ? 'follow.all.undoHint' : 'follow.all.hint';
   return {
     accessibilityLabel,
-    accessibilityHint: input.allFollowing ? `Unfollows all ${accounts}` : `Follows all ${accounts}`,
+    accessibilityHint: t(input.count === 1 ? `${hint}One` : hint, { count: input.count }),
   };
 }

package/src/ui/components/followLabels.ts

@@ -0,0 +1,48 @@
+/**
+ * The words on a follow button, for every verb the ecosystem uses.
+ *
+ * "Follow" is wrong for half the things an Oxy user can follow: you subscribe
+ * to a channel, you join a community, you watch a listing. Both follow buttons
+ * read their words here, translated through `@oxy.so/core`'s `follow.*`
+ * strings, so a verb reads the same — and in the same language — wherever it is
+ * drawn.
+ */
+
+import { useMemo } from 'react';
+import { useI18n } from '../hooks/useI18n';
+
+/**
+ * The small vocabulary of verbs the ecosystem actually uses. An application
+ * whose verb is not here passes `labels` instead — the escape hatch exists so
+ * this union never has to grow to accommodate one product's wording.
+ */
+export type FollowVerb = 'follow' | 'subscribe' | 'join' | 'watch';
+
+export interface FollowLabels {
+  /** Not following yet. */
+  idle: string;
+  /** Following, and this application acts on it. */
+  active: string;
+  /** Asked, waiting for the other side to accept. */
+  pending: string;
+  /** Following globally, but switched off in this application. */
+  disabled: string;
+}
+
+/** The labels for `verb` in the current language, with the caller's `overrides` on top. */
+export function useFollowLabels(
+  verb: FollowVerb = 'follow',
+  overrides?: Partial<FollowLabels>,
+): FollowLabels {
+  const { t } = useI18n();
+  return useMemo(
+    () => ({
+      idle: t(`follow.verbs.${verb}.idle`),
+      active: t(`follow.verbs.${verb}.active`),
+      pending: t('follow.pending'),
+      disabled: t('follow.disabled'),
+      ...overrides,
+    }),
+    [t, verb, overrides],
+  );
+}

package/src/ui/components/followRules.ts

@@ -5,16 +5,26 @@
  * application drawing its own affordance (a chip grid, a compact row) imports
  * them from here — through `@oxy.so/services/ui/client` — without paying for the
  * button's dropdown menu.
+ *
+ * The menu's words are `@oxy.so/core`'s `follow.*` strings, read through the
+ * caller's `t`; without one they are English.
  */
 
 import type { FollowApplicationMode } from '@oxy.so/contracts';
+import { translate } from '@oxy.so/core';
+import type { Translate } from '../hooks/useI18n';
+import type { FollowVerb } from './followLabels';
 
 /** A timed-follow choice offered in the menu. */
 export interface FollowDuration {
+  /** The duration as it reads inside a sentence: "24 hours", "a week". */
   label: string;
   seconds: number;
 }
 
+/** The fallback language for a caller that passes no translator. */
+const english: Translate = (key, vars) => translate(undefined, key, vars);
+
 /**
  * Whether an action leaves the target ACTIVE in this application.
  *
@@ -50,15 +60,6 @@ export interface FollowMenuItem {
     | { type: 'unfollow' };
 }
 
-/**
- * Which choices exist, given the state.
- *
- * Pure and exported because this is the product decision, not a rendering
- * detail: a timed follow is only offered before following, turning it off here
- * is only offered while following, and NEITHER is offered before the server has
- * answered — every one of them addresses a relationship that does not exist
- * yet, so offering them mid-write would mean sending a guessed id.
- */
 /**
  * What the main button should do for the current state.
  *
@@ -75,15 +76,30 @@ export function resolveFollowPrimaryAction(input: {
   return 'unfollow';
 }
 
+/**
+ * Which choices exist, given the state.
+ *
+ * Pure and exported because this is the product decision, not a rendering
+ * detail: a timed follow is only offered before following, turning it off here
+ * is only offered while following, and NEITHER is offered before the server has
+ * answered — every one of them addresses a relationship that does not exist
+ * yet, so offering them mid-write would mean sending a guessed id.
+ */
 export function buildFollowMenuItems(input: {
   following: boolean;
   applicationMode: FollowApplicationMode;
   hasRelationship: boolean;
   isPending: boolean;
   durations: FollowDuration[] | false;
+  /** The button's idle label, which a timed choice starts with: "Follow for 24 hours". */
   idleVerb: string;
   applicationName: string;
+  /** Words the "everywhere" line with this verb: "Leave everywhere". Default `follow`. */
+  verb?: FollowVerb;
+  /** `useI18n().t`, for the menu in the app's language. Default English. */
+  t?: Translate;
 }): FollowMenuItem[] {
+  const t = input.t ?? english;
   const items: FollowMenuItem[] = [];
 
   if (!input.following) {
@@ -91,7 +107,7 @@ export function buildFollowMenuItems(input: {
     for (const d of input.durations) {
       items.push({
         key: `for-${d.seconds}`,
-        label: `${input.idleVerb} for ${d.label.toLowerCase()}`,
+        label: t('follow.menu.forDuration', { label: input.idleVerb, duration: d.label }),
         action: { type: 'follow-timed', seconds: d.seconds, durationLabel: d.label },
       });
     }
@@ -104,12 +120,12 @@ export function buildFollowMenuItems(input: {
     input.applicationMode === 'disabled'
       ? {
           key: 'enable-here',
-          label: `Show in ${input.applicationName}`,
+          label: t('follow.menu.showIn', { app: input.applicationName }),
           action: { type: 'enable-here' },
         }
       : {
           key: 'disable-here',
-          label: `Don’t show in ${input.applicationName}`,
+          label: t('follow.menu.hideIn', { app: input.applicationName }),
           action: { type: 'disable-here' },
         },
   );
@@ -117,7 +133,7 @@ export function buildFollowMenuItems(input: {
     // Named for what it does. "Unfollow" beside "don't show here" would read as
     // the same action twice, and the user would pick the wrong one.
     key: 'unfollow-everywhere',
-    label: 'Unfollow everywhere',
+    label: t(`follow.verbs.${input.verb ?? 'follow'}.everywhere`),
     action: { type: 'unfollow' },
   });
 

package/src/ui/hooks/useI18n.ts

@@ -9,6 +9,9 @@ import { getLocalesVersion, subscribeLocales, translate } from '@oxy.so/core';
  */
 const FALLBACK_LOCALE = 'en-US';
 
+/** `useI18n().t`: a key and its `{{placeholders}}` in, the current language's text out. */
+export type Translate = (key: string, vars?: Record<string, string | number>) => string;
+
 /**
  * Display copy for SDK surfaces.
  *
@@ -32,9 +35,8 @@ export function useI18n() {
     getLocalesVersion,
   );
   // biome-ignore lint/correctness/useExhaustiveDependencies: `localesVersion` is the re-translate signal — a new `t` makes consumers re-render once a dictionary lands.
-  const t = useMemo(() => {
-    return (key: string, vars?: Record<string, string | number>) =>
-      translate(currentLanguage, key, vars);
+  const t = useMemo<Translate>(() => {
+    return (key, vars) => translate(currentLanguage, key, vars);
   }, [currentLanguage, localesVersion]);
   return { t, locale: currentLanguage };
 }

package/src/ui/utils/deviceSessionTitle.ts

@@ -1,6 +1,5 @@
 import { getNormalizedUserHandle, type DeviceLinkedSession } from '@oxy.so/core';
-
-type Translate = (key: string, vars?: Record<string, string | number>) => string;
+import type { Translate } from '../hooks/useI18n';
 
 /**
  * The title of one row in "Sessions & devices".