fix(i18n): follow the active language in settings labels

[TomaszJanusz]

Summary

• Interface language choices and several settings labels stayed in English, or spilled out of their controls, after the UI language changed.
• Language options now show the English name and the name from the active translation. The English interface keeps English names only.
• Accent colors, protection copy, and X-Ray labels are read when the screen renders, so they follow the selected language. Long About links wrap inside their buttons.

Validation

• pnpm task lint
• pnpm task check
• pnpm task test:unit
• Both targets still build (pnpm task build:chrome, pnpm task build:firefox)
• Worker bundle regenerated if packages/refract-core changed
  (pnpm task generate:worker-source)
• Focused unit tests: accent labels, language option labels, i18n key coverage, options tab render, and options anchor links
• Spanish Storybook pass for About, Options, Rules, locations, trusted sites, onboarding, popup, and X-Ray: accent names are translated and visible button text stays inside its control

Changelog

• I updated CHANGELOG.md in ## [Unreleased] for user-facing changes.
• This change does not need a changelog entry (internal/test/CI/refactor only).

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}

Note

Make settings and X-Ray labels follow the active interface language

• Converts static, module-level label records into functions that read from the current translation object at call time. This affects accent names (accentOptionLabel, getThemeAccentOptions), surface-method labels (getSurfaceMethodLabels), surface copy (getSurfaceCopy), and X-Ray category/status/source labels (categoryLabel, statusLabel, sourceShortLabel, sharedWorkerLabel).
• Adds languageOptionLabel so the language selector shows English-only names in the English locale and bilingual names (English plus localized) in all other locales.
• Adds a localized interceptsApis formatter across en/es/pt/ru/uk so the spoofing method list reports the intercepted API count with singular/plural wording in each language.
• Replaces the fixed three-column grid in AboutSidebar with a wrapping flex layout so long translated link labels wrap instead of overflowing.
• Behavioral Change: labels are now resolved at render time from the active translation rather than captured once at module load. Components that imported the old static arrays (getThemeAccentOptions, surface-copy record, method-label record) must call the new function forms instead.

^{Macroscope summarized 9dd96aa.}

Summary by CodeRabbit

• Changed
  • Language options now show English names alongside their translated names, except when English is the active interface language.
  • Accent colors, protection labels, and X-Ray labels now follow the active interface language.
  • Browser protection summaries show the number of intercepted browser APIs in the selected language.
  • Long project link labels wrap within their buttons.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: b911bebd-ef7e-44a4-8623-b0cc66bc7922

📥 Commits

Reviewing files that changed from the base of the PR and between 15bcee7 and 9dd96aa.

📒 Files selected for processing (19)

• CHANGELOG.md
• src/ui/i18n/en-sections/options.ts
• src/ui/i18n/es-sections/options.ts
• src/ui/i18n/pt-sections/options.ts
• src/ui/i18n/ru-sections/options.ts
• src/ui/i18n/uk-sections/options.ts
• src/ui/options/components/onboarding/WelcomeWizard.tsx
• src/ui/options/components/tabs/AboutTab.tsx
• src/ui/options/components/tabs/options-preference-sections.tsx
• src/ui/options/components/tabs/options-spoofing-section.tsx
• src/ui/options/components/tabs/options-surface-data.tsx
• src/ui/options/interface-language-label.test.ts
• src/ui/options/interface-language-label.ts
• src/ui/shared/surface-method-labels.ts
• src/ui/shared/theme-accent-options.test.ts
• src/ui/shared/theme-accent-options.ts
• src/ui/sidebar/modules/xray/XRayAccessAccordion.tsx
• src/ui/sidebar/modules/xray/XRaySurfacesSection.tsx
• src/ui/sidebar/modules/xray/XRayWhySection.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The options UI now resolves language, accent, spoofing, and X-Ray labels through functions. It adds localized intercepted-API count text and adjusts language and accent label presentation and About project-link wrapping. Tests cover language and accent labels.

Changes

Localized interface labels

Layer / File(s)	Summary
Resolve language and accent labels src/ui/options/interface-language-label.ts, src/ui/options/interface-language-label.test.ts, src/ui/shared/theme-accent-options.ts, src/ui/shared/theme-accent-options.test.ts, src/ui/options/components/tabs/options-preference-sections.tsx, src/ui/options/components/onboarding/WelcomeWizard.tsx, src/ui/options/components/tabs/AboutTab.tsx, CHANGELOG.md	Language choices show English names alone for English and include the localized name for other interface languages. Accent options resolve labels through a function. The preference and onboarding components use the accent-option factory, and About project links wrap text.
Localize spoofing labels and API counts src/ui/i18n/*-sections/options.ts, src/ui/shared/surface-method-labels.ts, src/ui/options/components/tabs/options-spoofing-section.tsx, src/ui/options/components/tabs/options-surface-data.tsx	The options UI obtains surface labels and copy through functions. The intercepted-API count uses localized singular or plural text.
Resolve X-Ray labels src/ui/sidebar/modules/xray/*	X-Ray category, status, shared-worker, source, and surface-method labels are resolved through functions.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 9dd96

Language changes refresh the affected labels, and the current About link labels remain within their buttons. The change is mergeable after normal checks.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: making settings labels follow the active interface language.
Description check	✅ Passed	The description includes the required Summary, Validation, and Changelog sections. It explains the user-facing changes, records completed lint and focused tests, documents the Storybook validation, an…
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 18 files. (1 skipped: 1…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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