fix: normalize "original" locale to "en" for datetime formatting

[leonardthethird]

Fix datetime strings being partially localized based on OS language when site is in "Untranslated" mode.

When users select "Untranslated" mode, the locale is set to "original" which is not a valid BCP 47 tag. Browser Intl APIs fall back to OS language, causing mixed-language strings like "Revealed el próximo mes".

Adds a normalizeIntlLocale() utility that maps "original" to "en" and applies it consistently across all components using Intl-based date formatting.

Fixes #4122

Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Enhanced locale handling consistency in date and time formatting components to ensure uniform display across all date-related UI elements throughout the application.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces locale normalization across multiple frontend components and utilities to ensure consistent internationalization (Intl) API usage. A new normalizeIntlLocale utility function is added that maps "original" locale to "en" while preserving other locales. This function is integrated into existing date/time formatting functions and components to standardize locale handling.

Changes

Cohort / File(s)	Summary
Locale Normalization Utility front_end/src/utils/formatters/date.ts	Introduced new normalizeIntlLocale() function that maps "original" to "en" and returns other locales unchanged. Updated three internal formatting functions (formatDate, formatDatetime, formatRelativeDate) to apply locale normalization before passing to Intl APIs. Added documentation comment explaining behavior.
Component Locale Updates front_end/src/app/(main)/(home)/components/research_and_updates.tsx, front_end/src/components/consumer_post_card/upcoming_cp.tsx, front_end/src/components/cp_reveal_time/cp_reveal_time.tsx, front_end/src/components/ui/local_daytime.tsx	Updated components to import normalizeIntlLocale and apply it to locale values obtained from getLocale() or useLocale() hooks. Ensures consistent locale normalization in date/time rendering across all affected components.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A rabbit hops through locale lands,
Where "original" caused translation strands,
Now normalization makes things bright,
From "original" to "en" shining light,
No more Spanish slipping through the night! 🌙✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: normalizing the 'original' locale to 'en' for datetime formatting, which directly addresses the core issue.
Linked Issues check	✅ Passed	The pull request comprehensively addresses issue #4122 by introducing normalizeIntlLocale() utility and applying it consistently across all components that format dates using Intl APIs, fixing mixed-language datetime strings.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to resolving the locale normalization issue; modifications are isolated to date formatting utilities and components, with no unrelated alterations introduced.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/issue-4122-some-feed-tile-text-inconsistently

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

front_end/src/utils/formatters/date.ts (1)

192-198: Add a small regression test around normalizeIntlLocale.

This helper is now the single guard for Untranslated mode, so a focused test for "original" -> "en" plus one passthrough locale would make the bugfix harder to regress.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@front_end/src/utils/formatters/date.ts` around lines 192 - 198, Add a small
unit test suite for normalizeIntlLocale: import normalizeIntlLocale from its
module, then add two tests — one asserting normalizeIntlLocale("original")
returns "en" and another asserting normalizeIntlLocale("fr") (or "en-US")
returns the same input (passthrough). Use the project's test framework (e.g.,
Jest) and place the test alongside other utils tests so it runs in CI; name the
tests clearly like "returns en for 'original' (Untranslated mode)" and "passes
through valid locales".

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@front_end/src/utils/formatters/date.ts`:
- Around line 192-198: Add a small unit test suite for normalizeIntlLocale:
import normalizeIntlLocale from its module, then add two tests — one asserting
normalizeIntlLocale("original") returns "en" and another asserting
normalizeIntlLocale("fr") (or "en-US") returns the same input (passthrough). Use
the project's test framework (e.g., Jest) and place the test alongside other
utils tests so it runs in CI; name the tests clearly like "returns en for
'original' (Untranslated mode)" and "passes through valid locales".

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7c986d69-6129-4fac-b08b-7fe3c66e37ad

📥 Commits

Reviewing files that changed from the base of the PR and between 2e79b4d and e30cc43.

📒 Files selected for processing (5)

• front_end/src/app/(main)/(home)/components/research_and_updates.tsx
• front_end/src/components/consumer_post_card/upcoming_cp.tsx
• front_end/src/components/cp_reveal_time/cp_reveal_time.tsx
• front_end/src/components/ui/local_daytime.tsx
• front_end/src/utils/formatters/date.ts

[github-actions]

🚀 Preview Environment

Your preview environment is ready!

Resource	Details
🌐 Preview URL	https://metaculus-pr-4472-claude-issue-4122-some-feed-ti-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:claude-issue-4122-some-feed-tile-text-inconsistently-e30cc43
🗄️ PostgreSQL	NeonDB branch preview/pr-4472-claude-issue-4122-some-feed-ti
⚡ Redis	Fly Redis mtc-redis-pr-4472-claude-issue-4122-some-feed-ti

Details

• Commit: 6ea4d4bd5aa45a44f0d83da454ab7575910ce636
• Branch: claude/issue-4122-some-feed-tile-text-inconsistently
• Fly App: metaculus-pr-4472-claude-issue-4122-some-feed-ti

---

ℹ️ Preview Environment Info

Isolation:

• PostgreSQL and Redis are fully isolated from production
• Each PR gets its own database branch and Redis instance
• Changes pushed to this PR will trigger a new deployment

Limitations:

• Background workers and cron jobs are not deployed in preview environments
• If you need to test background jobs, use Heroku staging environments

Cleanup:

• This preview will be automatically destroyed when the PR is closed