fix(i18n): update language switch immediately without refresh

[BittuBarnwal7479]

🔗 Linked issue

#2526

🧭 Context

When switching language from Settings, the first change didn’t fully apply unless the page was refreshed.
This PR fixes both so the UI updates immediately and stays consistent.

📚 Description

I updated the language-change flow in Settings so locale updates are applied through the same path every time, including the first switch. That removes the partial-translation state and the refresh workaround.

I tested this manually by:

switching locales multiple times from the Settings page
checking header icons immediately after each switch
confirming shortcuts still navigate correctly

Before:

npmx.mp4

After:

Recording.2026-04-15.010332.mp4

[vercel]

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

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

2 Skipped Deployments

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates keyboard shortcut mappings in navigation (comma to 's' for settings, normalised 'c' for compare), corrects a prop binding on navigation links, and refactors locale change handling in settings to use controlled component pattern with a helper function.

Changes

Cohort / File(s)	Summary
Keyboard Shortcuts and Navigation app/components/AppHeader.vue	Modified keyboard shortcut mappings: removed comma (,), added s for settings navigation, and normalised c shortcut for compare. Updated LinkBase prop binding from :aria-keyshortcuts="link.keyshortcut" to :classicon="link.iconClass".
Locale Selection app/pages/settings.vue	Introduced handleLocaleChange helper function to safely handle locale updates with falsy input guards. Refactored language <SelectField> from v-model with inline setLocale invocation to controlled component pattern using :modelValue and @update:modelValue.

Suggested reviewers

• danielroe
• ghostdevv

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main objective of the PR, which addresses i18n language switching and updates to header navigation including the Settings icon, capturing the core fix described in the PR objectives.
Description check	✅ Passed	The PR description clearly explains the problem (language switching requiring refresh), the solution (unified locale update flow), and includes manual testing details with before/after screenshots.

_{✏️ 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.}

[github-actions]

Hello! Thank you for opening your first PR to npmx, @BittuBarnwal7479! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[codecov]

Codecov Report

❌ Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/settings.vue	0.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/AppHeader.vue (1)

313-320: ⚠️ Potential issue | 🟡 Minor

Keep ariaKeyshortcuts on these header links.

LinkBase still uses its ariaKeyshortcuts prop to set the aria-keyshortcuts attribute and render the visible <kbd> hint in app/components/Link/Base.vue:108-131. Adding :classicon fixes the icon, but dropping the shortcut prop regresses both accessibility metadata and the desktop hint badge for Compare and Settings.

Proposed fix

 <LinkBase
   v-for="link in desktopLinks"
   :key="link.name"
   class="border-none"
   variant="button-secondary"
   :to="link.to"
   :classicon="link.iconClass"
+  :ariaKeyshortcuts="link.keyshortcut"
 >
   {{ link.label }}
 </LinkBase>

🤖 Prompt for AI Agents

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

In `@app/components/AppHeader.vue` around lines 313 - 320, The header LinkBase
loop removed the ariaKeyshortcuts prop, which breaks the aria-keyshortcuts
attribute and the visible <kbd> hint rendered by Link/Base.vue (see render logic
around lines 108-131); restore the binding by passing ariaKeyshortcuts from each
link (e.g., :ariaKeyshortcuts="link.ariaKeyshortcuts") in the v-for so Compare
and Settings keep their accessibility metadata and desktop hint badge while
retaining the :classicon change.

🤖 Prompt for all review comments with AI agents

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

Outside diff comments:
In `@app/components/AppHeader.vue`:
- Around line 313-320: The header LinkBase loop removed the ariaKeyshortcuts
prop, which breaks the aria-keyshortcuts attribute and the visible <kbd> hint
rendered by Link/Base.vue (see render logic around lines 108-131); restore the
binding by passing ariaKeyshortcuts from each link (e.g.,
:ariaKeyshortcuts="link.ariaKeyshortcuts") in the v-for so Compare and Settings
keep their accessibility metadata and desktop hint badge while retaining the
:classicon change.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b29319e8-2afa-4fbd-8bfc-38a0cbfcb883

📥 Commits

Reviewing files that changed from the base of the PR and between e331d86 and b0a3548.

📒 Files selected for processing (2)

• app/components/AppHeader.vue
• app/pages/settings.vue

[romansp]

Thanks for looking into that as this was bugging me too.

Let's keep this PR minimal though and fix language switch issue only.

Icons and shortcuts in AppHeader seem to be this way by design right now. I don't know the reason behind choosing , and s might actually be better. Anyways, I suggest to revert this part. Let's open a new issue if you think that's a problem and we address it there instead.

[BittuBarnwal7479]

Thanks for looking into that as this was bugging me too.

Let's keep this PR minimal though and fix language switch issue only.

Icons and shortcuts in AppHeader seem to be this way by design right now. I don't know the reason behind choosing , and s might actually be better. Anyways, I suggest to revert this part. Let's open a new issue if you think that's a problem and we address it there instead.

Thanks, makes sense. I’ll keep this PR minimal and revert the AppHeader icon changes so it only fixes the language switch issue.

[BittuBarnwal7479]

@romansp please review.

[romansp]

This looks good to me. Thanks @BittuBarnwal7479.

To whoever will be merging I suggest use squash strategy to avoid revert commits appearing on main.