feat(frontend): implement internationalization (i18n) support for Onb…

[dumbdev]

…oarding Progress Tracker

closes #1157

Adds full internationalization support to the Onboarding Progress Tracker. Every user-visible string — titles, status labels, step aria-labels, progress summaries, announcements, and error messages — is now sourced from the onboarding translation namespace instead of being hardcoded in English. A dedicated useOnboardingI18n hook centralises all string construction so no component or hook duplicates translation logic.

Changes
New files

useOnboardingI18n.ts
— centralised hook wrapping useTranslations("onboarding"). Exposes typed helpers: stepAriaLabel, stepAnnouncement, statusLabel, progressAnnouncement, stepsCompletedLabel, percentCompleteLabel, and all static strings.

useOnboardingProgress.ts
— encapsulates all tracker state: reducer ownership, optimistic step navigation with rollback, external prop sync, SYNC_STEPS dispatch on step count changes, translated screen-reader announcements via useOnboardingI18n, and the completion side-effect.
Modified files

en.json
/ es.json / pt.json — added onboarding namespace with 26 keys fully translated in English, Spanish, and Portuguese.

onboarding-reducer.ts
— added SYNC_STEPS action; readonly members on OnboardingState; pure selectors selectEffectiveStep and selectProgressPercent.

OnboardingProgressTracker.tsx
— full i18n refactor (see details below).

OnboardingProgressTracker.test.tsx
— expanded to 45+ tests covering all new behaviour.
src/app/(public)/register/page.tsx — wired OnboardingProgressTracker with typed ONBOARDING_STEPS constant; dark mode applied to page header and footer.
Component refactor details
i18n

All hardcoded English strings replaced with i18n.* calls from useOnboardingI18n.
Parameterised keys for step announcements (stepAnnouncement), progress summaries (stepsCompleted, percentComplete), and error messages (stepChangeFailed).
All three supported locales (en / es / pt) fully translated.
Dark mode

Full dark: Tailwind variant coverage on every surface, border, text, and gradient.
Progress bar gradient adapts: pluto-400→500→600 in light, pluto-500→400→300 in dark.
Completion banner, status badges, connector lines, and focus rings all dark-mode aware.
Responsiveness

Vertical layout by default; orientation="horizontal" stacks vertically on mobile and switches to sm:flex-row on tablet+.
Compact variant reduces padding and font sizes for sidebar/drawer use.
Accessibility

Every aria-label sourced from useOnboardingI18n — no hardcoded English in ARIA attributes.
aria-busy with inline SVG spinner on the pending step during optimistic updates.
focus-visible rings with dark:ring-offset-pluto-950.
aria-roledescription="onboarding step", aria-setsize, aria-posinset, aria-current="step".
role="alert" + aria-live="polite" on the completion banner.
prefers-reduced-motion respected — all framer-motion variants have reduced-motion counterparts that fade only.
Sub-components

StepIcon — renders checkmark, loading spinner (pending state), or step number. Memoised.
StatusBadge — renders completed / in-progress / pending pill with dark mode colours. Memoised.

[vercel]

@dumbdev is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@dumbdev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits