refactor(i18n): use typed i18n functions with explicit prop passing

[ChibiBlasphem]

Purpose

This branch tries to fix one of current issues which are hydration errors due to mismatch of translation namespaces used on server and client.

How

This is actually working on 2 phases:

• First, we ensure the namespaces for the translations are only used on the route files with handle.i18n which is also used server side
• Second, we allow passing the translations function without TS erroring due to the order of namespaces with the new helper useTranslationObject(namespaces)

[Copilot]

Pull Request Overview

A refactor to improve type safety and explicit handling of translation functions to prevent hydration mismatches between server and client.

• Introduce a typed TranslationObject and a useTranslationObject hook
• Expand route-level handle.i18n namespaces to include workflows
• Replace useTranslation calls with useTranslationObject and pass translation functions explicitly via props

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/app-builder/src/types/i18n.ts	Add TranslationObject type mapping namespaces to typed TFunction.
packages/app-builder/src/hooks/useTranslationObject.ts	Add useTranslationObject hook that returns named translation methods.
packages/app-builder/src/hooks/useTranslationObject.test.ts	Add comprehensive tests for the new hook.
packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx	Swap out useTranslation for useTranslationObject, update namespaces, and pass translations via translationObject props.
packages/app-builder/package.json	Add Testing Library dependencies for the new tests.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx:292

• The QuickVersionAccess component expects a translationObject prop but it’s not provided here. Pass it explicitly, e.g.: <QuickVersionAccess scenarioIteration={quickVersion} translationObject={{ tScenarios }} />.

        {quickVersion ? <QuickVersionAccess scenarioIteration={quickVersion} /> : null}

packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx:293

• The QuickVersionAccess component expects a translationObject prop but it’s not provided here. Pass it explicitly, e.g.: <QuickVersionAccess scenarioIteration={quickDraft} translationObject={{ tScenarios }} />.

        {quickDraft ? <QuickVersionAccess scenarioIteration={quickDraft} /> : null}

[Copilot]

Creating the translationObject inline produces a new object on every render, which can trigger unnecessary re-renders of child components. Consider memoizing it with React.useMemo to keep a stable reference.