feat: add language switcher #1337
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes introduced in this pull request enhance the internationalization features across various components of the application. Key modifications include the addition of language selection functionality in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Footer
participant CommandMenu
participant MenuSwitcher
participant LanguageSwitcherDialog
User->>Footer: Clicks language button
Footer->>LanguageSwitcherDialog: Opens dialog
LanguageSwitcherDialog->>User: Displays language options
User->>LanguageSwitcherDialog: Selects language
LanguageSwitcherDialog->>Footer: Closes dialog
Footer->>CommandMenu: Updates language
CommandMenu->>User: Displays updated language
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (14)
Files skipped from review due to trivial changes (5)
Additional comments not posted (16)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 💚🚀 |
|
ready when you are |
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (2)
packages/ui/components/common/language-switcher-dialog.tsx (1)
1-57: LGTM, but consider improving accessibility.The
LanguageSwitcherDialogcomponent is well-structured and correctly handles language switching and cookie updates. The usage of theCommandDialogprimitive andSUPPORTED_LANGUAGESconstant is appropriate.However, the component can be further improved by adding accessibility attributes and keyboard navigation support.
Consider applying the following changes to improve accessibility:
<CommandDialog open={open} onOpenChange={setOpen}> - <CommandInput placeholder={_(msg`Search languages...`)} /> + <CommandInput + placeholder={_(msg`Search languages...`)} + aria-label={_(msg`Search languages`)} + /> <CommandList> <CommandGroup> {Object.values(SUPPORTED_LANGUAGES).map((language) => ( <CommandItem key={language.short} value={language.full} onSelect={async () => setLanguage(language.short)} + aria-label={_(msg`Select language: ${language.full}`)} > <CheckIcon className={cn( 'mr-2 h-4 w-4', i18n.locale === language.short ? 'opacity-100' : 'opacity-0', )} + aria-label={_(msg`Selected`)} /> {SUPPORTED_LANGUAGES[language.short].full} </CommandItem> ))} </CommandGroup> </CommandList> </CommandDialog>These changes add appropriate ARIA labels to improve screen reader support and provide better context for keyboard navigation.
packages/lib/translations/de/web.po (1)
Line range hint
1-1: TODO: Add testsThe TODO comment indicates that tests are missing for this module. Having unit tests is important to ensure code correctness and prevent regressions.
Do you need any help with setting up a testing framework or writing the unit tests? I'd be happy to assist or provide some examples. Just let me know!
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (14)
- apps/marketing/src/components/(marketing)/footer.tsx (4 hunks)
- apps/web/src/components/(dashboard)/common/command-menu.tsx (6 hunks)
- apps/web/src/components/(dashboard)/layout/menu-switcher.tsx (5 hunks)
- apps/web/src/middleware.ts (2 hunks)
- packages/lib/constants/app.ts (1 hunks)
- packages/lib/server-only/i18n/switch-i18n-language.ts (1 hunks)
- packages/lib/translations/de/common.po (1 hunks)
- packages/lib/translations/de/marketing.po (1 hunks)
- packages/lib/translations/de/web.po (28 hunks)
- packages/lib/translations/en/common.po (1 hunks)
- packages/lib/translations/en/marketing.po (1 hunks)
- packages/lib/translations/en/web.po (28 hunks)
- packages/lib/utils/i18n.ts (1 hunks)
- packages/ui/components/common/language-switcher-dialog.tsx (1 hunks)
Files skipped from review due to trivial changes (5)
- apps/web/src/middleware.ts
- packages/lib/translations/de/common.po
- packages/lib/translations/de/marketing.po
- packages/lib/translations/en/common.po
- packages/lib/translations/en/marketing.po
Additional comments not posted (16)
packages/lib/server-only/i18n/switch-i18n-language.ts (1)
7-7: LGTM!The change in the cookie key from
'i18n'to'language'is a semantic update that better reflects the purpose of the stored value. It does not introduce any functional issues.packages/lib/constants/app.ts (1)
13-13: LGTM, but verify the impact.The change to enable internationalization features for the web application by setting
IS_APP_WEB_I18N_ENABLEDtotrueis approved.However, this change may affect the control flow where this constant is utilized. Ensure that the application behaves as expected with this change.
Run the following script to verify the usage of
IS_APP_WEB_I18N_ENABLED:packages/lib/utils/i18n.ts (1)
39-39: Verify the impact of the breaking change in the cookie key.The cookie key used to retrieve the preferred locale has been changed from
'i18n'to'language'. This is a breaking change.Ensure that this change is thoroughly tested to confirm that it behaves as expected and does not break any existing functionality that relies on the
'i18n'cookie.Run the following script to verify the cookie usage:
Verification successful
Verification Successful: No Impact on Other Parts of the Codebase
The change in the cookie key from
'i18n'to'language'is localized to the i18n utility functions. There are no occurrences of the'i18n'cookie elsewhere, and the'language'cookie is used only within the expected utility functions. This indicates that the change does not break existing functionality outside these functions.
- The
'i18n'cookie is not used elsewhere in the codebase.- The
'language'cookie is used appropriately within the i18n utility functions.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the 'i18n' and 'language' cookies. # Test 1: Search for the usage of the 'i18n' cookie. Expect: No occurrences. rg --type typescript $'\'i18n\'' # Test 2: Search for the usage of the 'language' cookie. Expect: Only occurrences in the i18n utility functions. rg --type typescript $'\'language\'' -g '!packages/lib/utils/i18n.ts'Length of output: 182
Script:
#!/bin/bash # Description: Verify the usage of the 'i18n' and 'language' cookies. # Test 1: Search for the usage of the 'i18n' cookie. Expect: No occurrences. rg -t typescript $'\'i18n\'' # Test 2: Search for the usage of the 'language' cookie. Expect: Only occurrences in the i18n utility functions. rg -t typescript $'\'language\'' -g '!packages/lib/utils/i18n.ts'Length of output: 174
Script:
#!/bin/bash # Description: Verify the usage of the 'i18n' and 'language' cookies. # Find all TypeScript files and search for the usage of the 'i18n' cookie. Expect: No occurrences. fd --extension ts --exec rg $'\'i18n\'' # Find all TypeScript files and search for the usage of the 'language' cookie. Expect: Only occurrences in the i18n utility functions. fd --extension ts --exec rg $'\'language\'' -g '!packages/lib/utils/i18n.ts'Length of output: 225
apps/marketing/src/components/(marketing)/footer.tsx (1)
47-49: LGTM!The changes to the
Footercomponent to add language switching functionality are approved.Also applies to: 102-109, 117-117
apps/web/src/components/(dashboard)/common/command-menu.tsx (2)
215-217: LGTM!The changes to the
CommandMenucomponent to add a new command item for changing the language are approved.Also applies to: 231-231
283-324: LGTM!The new
LanguageCommandscomponent is approved.apps/web/src/components/(dashboard)/layout/menu-switcher.tsx (4)
3-4: LGTM!The code changes are approved.
22-22: LGTM!The code changes are approved.
47-48: LGTM!The code changes are approved.
Line range hint
282-301: LGTM!The code changes are approved.
packages/lib/translations/en/web.po (6)
301-303: LGTM!The new translation entry for "Admin panel" looks good.
309-311: LGTM!The new translation entry for "All documents" looks good.
325-327: LGTM!The new translation entry for "All templates" looks good.
Line range hint
479-515: LGTM!The line number change for "An unknown error occurred" looks good. It's likely a result of reorganizing the entries.
1776-1779: LGTM!The new translation entry for "Language" looks good.
3537-3540: LGTM!The new translation entry for "Unable to change the language at this time. Please try again later." looks good.
Description
Web changes:
Web and marketing changes:
Summary by CodeRabbit
New Features
Bug Fixes
Translations
Chores