docs(ui): add stories for Translation Status page

[cylewaitforit]

🔗 Linked issue

#2150

🧭 Context

This would enable a storybook mock page, storybook a11y checks, and chromatic visual regression tests for this page as documented by the storybook stories.

📚 Description

Adds stories for Translation Status page.

Moved i18nStatusHandler into its own file in a new handlers directory since the amount of mock data in that handler had grown considerably to support mocking this page.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 17, 2026 6:11pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 17, 2026 6:11pm
npmx-lunaria	Ignored		Apr 17, 2026 6:11pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a8c89038-ba58-4ca8-b0f8-84915ca496fe

📥 Commits

Reviewing files that changed from the base of the PR and between 8e8113c and f55046e.

📒 Files selected for processing (1)

• .storybook/handlers/lunaria-status.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• .storybook/handlers/lunaria-status.ts

---

📝 Walkthrough

Summary by CodeRabbit

• Refactor

  • Reorganised MSW handler structure for improved code organisation.

• Tests

  • Added Storybook stories for the translation status page, including default and edge-case scenarios.

Walkthrough

Extracted the Storybook MSW i18n status handler into a new .storybook/handlers/lunaria-status.ts file, updated imports to use the new handler, and added a new Storybook file app/pages/translation-status.stories.ts with two stories demonstrating presence and absence of translation data.

Changes

Cohort / File(s)	Summary
MSW Handler Extraction \.storybook/handlers.ts, \.storybook/handlers/lunaria-status.ts	Removed the exported i18nStatusHandler from the main handlers file and added a new dedicated handler file lunaria-status.ts that returns a fixed JSON payload for GET /lunaria/status.json.
Story Import Update app/pages/settings.stories.ts	Updated import to reference the new handler path ../../.storybook/handlers/lunaria-status while leaving msw.handlers: [i18nStatusHandler] usage unchanged.
New Story: Translation Status app/pages/translation-status.stories.ts	Added a new Storybook module for the translation-status page with two stories: Default (uses i18nStatusHandler) and WithoutTranslationData (overrides MSW handlers to [] to simulate no data).

Possibly related PRs

• docs(ui): add stories for Settings page #2545: Refactors/relocates the Storybook MSW i18nStatusHandler and updates story imports — directly related to moving the handler and story updates.

Suggested reviewers

• ghostdevv

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately summarises the main change: adding Storybook stories for the Translation Status page, which aligns with the file additions and the core objective.
Description check	✅ Passed	The PR description is directly related to the changeset, explaining the purpose (enabling Storybook testing), the issue linked (#2150), and the refactoring of the i18nStatusHandler.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[cylewaitforit]

When the translation data is unavailable or loading, the page uses new Date().toISOString(). That will mean that the visual regression snapshot for this test will constantly have a different date on it.

While we could probably mock Date() to make that less flaky for the visual regression tests, I wonder if the page should show something else when the data isn't present. Open to other's thoughts.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In @.storybook/handlers/lunaria-status.ts:
- Around line 160-177: The pt-PT missingKeys array in
.storybook/handlers/lunaria-status.ts contains a duplicate entry
'package.license', causing the list length to be off; open the missingKeys array
for locale 'pt-PT' (look for the literal array that includes 'package.license'
twice) and remove the duplicate so every key is unique, or replace the literal
with a deduplicated construct (e.g., build the array via a Set) so the count
equals totalKeys - completedKeys; ensure the final array contains 75 distinct
entries and update any inline comments if present.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1c161b07-b07a-4995-b755-af31190b0b52

📥 Commits

Reviewing files that changed from the base of the PR and between cbcdc54 and 8e8113c.

📒 Files selected for processing (4)

• .storybook/handlers.ts
• .storybook/handlers/lunaria-status.ts
• app/pages/settings.stories.ts
• app/pages/translation-status.stories.ts

💤 Files with no reviewable changes (1)

• .storybook/handlers.ts