@oxy.so/services 12.4.0 → 12.6.0

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

@@ -1,3 +1,4 @@
+import { APP_COLOR_NAMES } from '@oxy.so/bloom/color-presets';
 /**
  * Shared types + per-account color resolution for the auth chooser's views.
  *
@@ -8,17 +9,11 @@
  */
 
 import type { AccountStorageUsageResponse } from '@oxy.so/core';
-import {
-  APP_COLOR_NAMES,
-  APP_COLOR_PRESETS,
-  type AppColorName,
-  type useTheme,
-} from '@oxy.so/bloom/theme';
+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
@@ -132,14 +127,19 @@ export interface SignInAlternatives {
  * renders in EVERY consumer regardless of NativeWind availability.
  */
 export function resolveAccentHex(color: string | null, fallback: string): string {
-  const preset = toPreset(color);
-  return preset ? APP_COLOR_PRESETS[preset].hex : fallback;
-}
+  const normalized = color?.trim().toLowerCase();
+  if (!normalized) return fallback;
+
+  if (/^#[0-9a-f]{3}$/i.test(normalized)) {
+    return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`;
+  }
+  if (/^#[0-9a-f]{6}$/i.test(normalized)) return normalized;
 
-/** Narrow a stored color string to a known `AppColorName`, or `undefined`. */
-export function toPreset(color: string | null): AppColorName | undefined {
-  if (!color) return undefined;
-  return (APP_COLOR_NAMES as readonly string[]).includes(color)
-    ? (color as AppColorName)
-    : undefined;
+  // `amber` was the retired name for `yellow`; existing user records are
+  // migrated, but inboxes can still render cached account data during rollout.
+  const preset = normalized === 'amber' ? 'yellow' : normalized;
+  if (APP_COLOR_NAMES.includes(preset as (typeof APP_COLOR_NAMES)[number])) {
+    return APP_COLOR_PRESETS[preset as (typeof APP_COLOR_NAMES)[number]].hex;
+  }
+  return fallback;
 }

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/screens/AccountSettingsScreen.tsx

@@ -1,9 +1,4 @@
 import type React from 'react';
-import {
-  ORGANIZATION_NAME_MAX_LENGTH,
-  organizationNameCheck,
-  checkContract,
-} from '@oxy.so/contracts/client';
 import { OrganizationSettings } from '../components/organizations/OrganizationSettings';
 import { useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
@@ -16,10 +11,11 @@ import { Button } from '@oxy.so/bloom/button';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import {
-  DISPLAY_NAME_INVALID_MESSAGE,
+  accountNameInvalidKey,
+  accountNameInvalidMessage,
+  accountNameMaxLength,
   getNormalizedUserHandle,
-  isValidDisplayName,
-  MAX_DISPLAY_NAME_LENGTH,
+  isValidAccountName,
   type UpdateAccountInput,
 } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
@@ -29,7 +25,6 @@ import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { clearedFieldsFromAccountUpdate, upsertCachedUser } from '../hooks/queries/userCache';
 
-const DISPLAY_NAME_MAX = MAX_DISPLAY_NAME_LENGTH;
 const BIO_MAX = 160;
 
 const errorMessage = (error: unknown, fallback: string): string =>
@@ -158,22 +153,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         setDisplayNameError('');
         return;
       }
-      if (node?.account.kind === 'organization') {
-        setDisplayNameError(
-          checkContract(organizationNameCheck, trimmed) !== null
-            ? ''
-            : t('organizationDirectory.invalidName'),
-        );
-        return;
-      }
-      const nameParts = trimmed.split(/\s+/).filter(Boolean);
-      const first = nameParts[0] || '';
-      const last = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
-      const invalidPart = [first, last].find((part) => part && !isValidDisplayName(part));
+      const kind = node?.account.kind;
       setDisplayNameError(
-        invalidPart
-          ? t('accounts.settings.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE
-          : '',
+        isValidAccountName(trimmed, kind)
+          ? ''
+          : t(`accounts.settings.displayName.${accountNameInvalidKey(kind)}`) ||
+              accountNameInvalidMessage(kind),
       );
     },
     [node?.account.kind, t],
@@ -235,11 +220,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                       value={displayName}
                       onChangeText={handleDisplayNameChange}
                       isInvalid={Boolean(displayNameError)}
-                      maxLength={
-                        node?.account.kind === 'organization'
-                          ? ORGANIZATION_NAME_MAX_LENGTH
-                          : DISPLAY_NAME_MAX
-                      }
+                      maxLength={accountNameMaxLength(node?.account.kind)}
                     />
                   </TextField>
                   {displayNameError ? (

package/src/ui/screens/CreateAccountScreen.tsx

@@ -1,10 +1,5 @@
 import type React from 'react';
 import type { OrganizationType } from '@oxy.so/contracts';
-import {
-  ORGANIZATION_NAME_MAX_LENGTH,
-  organizationNameCheck,
-  checkContract,
-} from '@oxy.so/contracts/client';
 import { OrganizationDirectorySearch } from '../components/organizations/OrganizationDirectorySearch';
 import { OrganizationTypePicker } from '../components/organizations/OrganizationTypePicker';
 import { useState, useCallback, useRef, useEffect } from 'react';
@@ -13,10 +8,11 @@ import Ionicons from '../icons/Ionicons';
 import type { AccountCategoryId, AccountKind, CreateAccountInput } from '@oxy.so/core';
 import {
   accountCategoryLabel,
-  DISPLAY_NAME_INVALID_MESSAGE,
-  isValidDisplayName,
+  accountNameInvalidKey,
+  accountNameInvalidMessage,
+  accountNameMaxLength,
+  isValidAccountName,
   MAX_ACCOUNT_CATEGORIES,
-  MAX_DISPLAY_NAME_LENGTH,
   SELECTABLE_ACCOUNT_CATEGORY_IDS,
 } from '@oxy.so/core';
 import {
@@ -61,7 +57,6 @@ type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
 type CreatableAccountKind = Extract<AccountKind, 'organization' | 'project' | 'bot'>;
 
 const DEBOUNCE_MS = 400;
-const DISPLAY_NAME_MAX = MAX_DISPLAY_NAME_LENGTH;
 const BIO_MAX = 160;
 
 interface KindOption {
@@ -286,22 +281,11 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
         setDisplayNameError('');
         return;
       }
-      if (kind === 'organization') {
-        setDisplayNameError(
-          checkContract(organizationNameCheck, trimmed) !== null
-            ? ''
-            : t('organizationDirectory.invalidName'),
-        );
-        return;
-      }
-      const nameParts = trimmed.split(/\s+/);
-      const firstName = nameParts[0] || '';
-      const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
-      const invalidPart = [firstName, lastName].find((part) => part && !isValidDisplayName(part));
       setDisplayNameError(
-        invalidPart
-          ? t('accounts.create.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE
-          : '',
+        isValidAccountName(trimmed, kind)
+          ? ''
+          : t(`accounts.create.displayName.${accountNameInvalidKey(kind)}`) ||
+              accountNameInvalidMessage(kind),
       );
     },
     [kind, t],
@@ -548,9 +532,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
                     value={displayName}
                     onChangeText={handleDisplayNameChange}
                     isInvalid={Boolean(displayNameError)}
-                    maxLength={
-                      kind === 'organization' ? ORGANIZATION_NAME_MAX_LENGTH : DISPLAY_NAME_MAX
-                    }
+                    maxLength={accountNameMaxLength(kind)}
                   />
                 </TextField>
                 {displayNameError ? (

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -22,7 +22,7 @@ import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/oxyRuntimeContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
 import { toast } from '@oxy.so/bloom/toast';
-import { DISPLAY_NAME_INVALID_MESSAGE, isValidDisplayName } from '@oxy.so/core';
+import { accountNameInvalidKey, accountNameInvalidMessage, isValidAccountName } from '@oxy.so/core';
 import { getLinkTitle, getLinkDescription, linksToListItems } from './linkFormat';
 
 /**
@@ -217,6 +217,12 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
     fieldType === 'username',
   );
 
+  // The name policy is the account's kind's: an organization a person switched
+  // into is named by the title policy, not held to a person's.
+  const kind = user?.kind;
+  const invalidNameMessage =
+    t(`editProfile.items.displayName.${accountNameInvalidKey(kind)}`) ||
+    accountNameInvalidMessage(kind);
   // Get field configuration based on fieldType
   const fieldConfig = useMemo((): FieldConfig => {
     switch (fieldType) {
@@ -233,9 +239,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
               placeholder:
                 t('editProfile.items.displayName.firstNamePlaceholder') || 'Enter first name',
               validation: (value) =>
-                isValidDisplayName(value)
-                  ? undefined
-                  : t('editProfile.items.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE,
+                isValidAccountName(value, kind) ? undefined : invalidNameMessage,
             },
             {
               key: 'lastName',
@@ -244,9 +248,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                 t('editProfile.items.displayName.lastNamePlaceholder') ||
                 'Enter last name (optional)',
               validation: (value) =>
-                isValidDisplayName(value)
-                  ? undefined
-                  : t('editProfile.items.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE,
+                isValidAccountName(value, kind) ? undefined : invalidNameMessage,
             },
           ],
         };
@@ -360,7 +362,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
           fields: [],
         };
     }
-  }, [fieldType, t]);
+  }, [fieldType, t, kind, invalidNameMessage]);
 
   // Field change handler
   const handleFieldChange = useCallback(

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