@oxy.so/services 12.5.0 → 12.7.0

package/src/ui/components/FollowTargetButton.tsx

@@ -22,6 +22,8 @@
  * small vocabulary of defaults and a full override, rather than a lookup keyed
  * on kind — a kind→verb table in this package would need a release every time
  * an application invents a kind, which is exactly the coupling #809 removes.
+ * The vocabulary and its translated words live in `followLabels`, shared with
+ * `FollowButton`.
  *
  * ## Relationship to the legacy `FollowButton`
  *
@@ -58,55 +60,28 @@ import {
   type FollowDuration,
   type FollowMenuItem,
 } from './followRules';
-
-/**
- * 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;
-}
-
-const VERB_LABELS: Record<FollowVerb, FollowLabels> = {
-  follow: { idle: 'Follow', active: 'Following', pending: 'Requested', disabled: 'Off here' },
-  subscribe: {
-    idle: 'Subscribe',
-    active: 'Subscribed',
-    pending: 'Requested',
-    disabled: 'Off here',
-  },
-  join: { idle: 'Join', active: 'Joined', pending: 'Requested', disabled: 'Off here' },
-  watch: { idle: 'Watch', active: 'Watching', pending: 'Requested', disabled: 'Off here' },
-};
+import { type FollowLabels, type FollowVerb, useFollowLabels } from './followLabels';
+import { useI18n } from '../hooks/useI18n';
 
 const HOUR = 60 * 60;
 
 /**
  * Defaults chosen for the cases a timed follow is actually for: a live event
  * tonight, a story running this week. Not a general-purpose duration picker —
- * an application that needs one passes its own.
+ * an application that needs one passes its own. Labels are catalog keys, read
+ * at render in the app's language.
  */
-const DEFAULT_DURATIONS: FollowDuration[] = [
-  { label: '24 hours', seconds: 24 * HOUR },
-  { label: '72 hours', seconds: 72 * HOUR },
-  { label: 'A week', seconds: 7 * 24 * HOUR },
-];
+const DEFAULT_DURATIONS = [
+  { key: 'follow.durations.day', seconds: 24 * HOUR },
+  { key: 'follow.durations.threeDays', seconds: 72 * HOUR },
+  { key: 'follow.durations.week', seconds: 7 * 24 * HOUR },
+] as const;
 
 export interface FollowTargetButtonProps {
   /** The registered target's id. Registration is separate — see the SDK. */
   targetId: string;
   verb?: FollowVerb;
-  /** Full override, for a verb the vocabulary above does not carry. */
+  /** Full override, for a verb the vocabulary does not carry. */
   labels?: Partial<FollowLabels>;
   size?: 'sm' | 'md' | 'lg';
   style?: StyleProp<ViewStyle>;
@@ -118,7 +93,8 @@ export interface FollowTargetButtonProps {
   showOptions?: boolean;
   /**
    * Offer timed follows. Pass `false` where a temporary follow makes no sense —
-   * a store you buy from, an account you know.
+   * a store you buy from, an account you know. Default: 24 hours, 72 hours and
+   * a week, translated.
    */
   durations?: FollowDuration[] | false;
   /**
@@ -156,7 +132,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
   style,
   disabled = false,
   showOptions = true,
-  durations = DEFAULT_DURATIONS,
+  durations,
   applicationName,
   initialStatus,
   onChange,
@@ -164,13 +140,18 @@ export const FollowTargetButton = memo(function FollowTargetButton({
   const { status, isFollowing, isUnknown, isPending, follow, unfollow, disableHere, enableHere } =
     useFollowTarget(targetId, { initialStatus });
 
+  const { t } = useI18n();
+  const text = useFollowLabels(verb, labels);
+
+  const timedChoices = useMemo<FollowDuration[] | false>(
+    () => durations ?? DEFAULT_DURATIONS.map(({ key, seconds }) => ({ label: t(key), seconds })),
+    [durations, t],
+  );
+
   const reportMutationFailure = useCallback(() => {
-    const message =
-      useFollowTargetStore.getState().errors[targetId] ?? 'Could not update follow status';
+    const message = useFollowTargetStore.getState().errors[targetId] ?? t('follow.errors.update');
     toast.error(message);
-  }, [targetId]);
-
-  const text = useMemo(() => ({ ...VERB_LABELS[verb], ...labels }), [verb, labels]);
+  }, [targetId, t]);
 
   const label = useMemo(() => {
     if (status.globalState === 'requested') return text.pending;
@@ -224,9 +205,9 @@ export const FollowTargetButton = memo(function FollowTargetButton({
       // The confirmation is the point: a follow that ends on its own is a
       // promise, and a user who does not see it made will not believe it.
       // Which is also why it must not appear when the promise was not made.
-      toast.success(`Following for ${durationLabel.toLowerCase()}`);
+      toast.success(t('follow.menu.forDuration', { label: text.active, duration: durationLabel }));
     },
-    [follow, onChange, reportMutationFailure],
+    [follow, onChange, reportMutationFailure, t, text.active],
   );
 
   const menuItems = useMemo(
@@ -236,18 +217,22 @@ export const FollowTargetButton = memo(function FollowTargetButton({
         applicationMode: status.applicationMode,
         hasRelationship: Boolean(status.relationshipId),
         isPending,
-        durations,
+        durations: timedChoices,
         idleVerb: text.idle,
-        applicationName: applicationName ?? 'this app',
+        applicationName: applicationName ?? t('follow.menu.thisApp'),
+        verb,
+        t,
       }),
     [
       isFollowing,
       status.applicationMode,
       status.relationshipId,
       isPending,
-      durations,
+      timedChoices,
       text.idle,
       applicationName,
+      verb,
+      t,
     ],
   );
 
@@ -304,6 +289,8 @@ export const FollowTargetButton = memo(function FollowTargetButton({
     return <View style={style}>{primary}</View>;
   }
 
+  const optionsLabel = t('follow.menu.options', { label });
+
   return (
     <View style={[{ flexDirection: 'row', alignItems: 'center', gap: 4 }, style]}>
       {primary}
@@ -321,11 +308,11 @@ export const FollowTargetButton = memo(function FollowTargetButton({
             size={size === 'lg' ? 'lg' : 'sm'}
             icon={<ChevronDown width={16} />}
             disabled={disabled || isUnknown}
-            accessibilityLabel={`${label} options`}
-            accessibilityHint="Opens follow options"
+            accessibilityLabel={optionsLabel}
+            accessibilityHint={t('follow.menu.optionsHint')}
           />
         </DropdownMenuTrigger>
-        <DropdownMenuContent label={`${label} options`}>
+        <DropdownMenuContent label={optionsLabel}>
           {menuItems.map((item) => (
             <DropdownMenuItem key={item.key} onPress={() => runItem(item)}>
               {item.label}

package/src/ui/components/OxyConsentScreen.tsx

@@ -27,7 +27,7 @@ import { Avatar } from '@oxy.so/bloom/avatar';
 import { Button, LinkButton } from '@oxy.so/bloom/button';
 import { Text } from '@oxy.so/bloom/typography';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { useI18n } from '../hooks/useI18n';
+import { type Translate, useI18n } from '../hooks/useI18n';
 import { LogoIcon } from './logo/LogoIcon';
 
 /** The requesting application, resolved by the caller (never user-supplied raw). */
@@ -133,8 +133,6 @@ const SCOPE_LABEL_KEYS: Readonly<Record<string, string>> = {
   'federation:write': 'consent.scopes.federationWrite',
 };
 
-type Translate = ReturnType<typeof useI18n>['t'];
-
 /** One permission row of the "Permissions requested" list. */
 interface PermissionRow {
   /** Stable list key / testID suffix — the first scope that produced this row. */

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/useAccountColor.ts

@@ -0,0 +1,52 @@
+/**
+ * useAccountColor
+ *
+ * The account's colour is one value that every Oxy app wears: `users.color`, a
+ * Bloom preset NAME the API only stores after its entitlement check (`oxy` and
+ * `faircoin` belong to the account with that handle, `mono` to an active
+ * benefit). This hook is the single place an app turns that stored name into its
+ * Bloom theme, so two apps cannot disagree about which field wins.
+ *
+ * The portable `themePreference.colorPreset` is the fallback for an account that
+ * has no `color` yet. Mode (light/dark) is deliberately out of scope: whether to
+ * follow the account's mode is each app's own choice, the colour is not.
+ *
+ * An app with a stricter rule of its own (a plan the SDK cannot see) passes
+ * `canUse`; a name it refuses is simply not applied, so the app keeps its own
+ * default instead of a colour the viewer is not entitled to.
+ */
+
+import { useEffect } from 'react';
+import type { User } from '@oxy.so/core';
+import { APP_COLOR_PRESETS, useBloomTheme, type AppColorName } from '@oxy.so/bloom/theme';
+import { useAuth } from './useAuth';
+
+function isAppColorName(value: unknown): value is AppColorName {
+  return (
+    typeof value === 'string' && Object.prototype.hasOwnProperty.call(APP_COLOR_PRESETS, value)
+  );
+}
+
+/** The preset an account wears, or `null` when it has none Bloom knows. */
+export function resolveAccountColor(
+  user: Pick<User, 'color' | 'themePreference'> | null | undefined,
+): AppColorName | null {
+  const stored = user?.color ?? user?.themePreference?.colorPreset;
+  return isAppColorName(stored) ? stored : null;
+}
+
+export function useAccountColor({
+  canUse,
+}: {
+  canUse?: (name: AppColorName) => boolean;
+} = {}): void {
+  const { isAuthenticated, user } = useAuth();
+  const { colorPreset, setColorPreset } = useBloomTheme();
+  const accountColor = resolveAccountColor(user);
+  const allowed = accountColor !== null && (canUse?.(accountColor) ?? true);
+
+  useEffect(() => {
+    if (!isAuthenticated || !accountColor || !allowed || accountColor === colorPreset) return;
+    setColorPreset(accountColor);
+  }, [isAuthenticated, accountColor, allowed, colorPreset, setColorPreset]);
+}

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".