pastilhas
0ddcdcbdbf
Each wrapper built a fresh closure every render, so `t` in a dependency array recomputed forever. That is the documented useClient()/Jellyfin trap in platform/CLAUDE.md, and phase 2 needs t in useMemo deps immediately. useTranslation in officer-web now also returns tUi, typed against the shared components' catalog. 'Cancel' and 'Close' recur across the shell and already exist in ui.* — the alternative was importing two hooks in a hundred files.
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
import type { TranslationKeys } from 'i18n';
|
|
import type { InterpolationParams } from 'i18n';
|
|
import { useCallback } from 'react';
|
|
import { useTranslation as useTranslationBase } from 'i18n';
|
|
import type en from '../locales/en-GB.json';
|
|
import type uiEn from '@/components/locales/en-GB.json';
|
|
|
|
type AppTranslationKey = TranslationKeys<typeof en>;
|
|
type UiTranslationKey = TranslationKeys<typeof uiEn>;
|
|
|
|
/**
|
|
* `t` for this workspace's own catalog, `tUi` for the shared-component one.
|
|
*
|
|
* Both are here rather than in two imports because "Cancel", "Close" and "Search" recur across the
|
|
* shell and genuinely belong to `ui.*` — phase 1 put them there so phases 2 and 3 could reach for them
|
|
* instead of inventing a second key for the same word. Anything feature-specific stays in `app.*`:
|
|
* per D6 a `ui.*` key may not name a feature.
|
|
*
|
|
* Both are memoized. An unstable `t` is unusable in a dependency array, and this repo has already lost
|
|
* days to exactly that shape — see platform/CLAUDE.md on `useClient()` and the Jellyfin player.
|
|
*/
|
|
export const useTranslation = () => {
|
|
const { t: baseT, locale } = useTranslationBase();
|
|
|
|
const t = useCallback((key: AppTranslationKey, params?: InterpolationParams) => baseT(`app.${key}`, params), [baseT]);
|
|
|
|
const tUi = useCallback((key: UiTranslationKey, params?: InterpolationParams) => baseT(`ui.${key}`, params), [baseT]);
|
|
|
|
return { t, tUi, locale };
|
|
};
|
|
|
|
export type { AppTranslationKey };
|