fix: update language switch immediately and show settings icon in header

[BittuBarnwal7479]

🔗 Linked issue

#2526

🧭 Context

When switching language from Settings, the first change didn’t fully apply unless the page was refreshed. I also noticed the Settings item in the top header wasn’t showing the expected icon behavior.
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 also fixed header nav rendering so the Settings item consistently uses its configured icon. While touching this, I kept keyboard shortcuts aligned with the new behavior (c for Compare, s for Settings).

I tested this manually by:

switching locales multiple times from the Settings page
checking header labels/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 14, 2026 7:37pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 14, 2026 7:37pm
npmx-lunaria	Ignored		Apr 14, 2026 7:37pm

[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 summarizes the two main changes: fixing immediate language switching and correcting the settings icon display in the header.
Description check	✅ Passed	The pull request description clearly explains the issues being fixed (language switching and settings icon display) and maps directly to the code changes in both files.

_{✏️ 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 25.00000% with 3 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 ⚠️
app/components/AppHeader.vue	50.00%	1 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.