Conversation
WalkthroughThis update focuses on minor UI text and formatting improvements across multiple Vue components. Changes include adjustments to translation key usage, replacement of special characters and emojis, updates to displayed keyboard shortcuts, and consistent use of the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UIComponent
participant i18n
User->>UIComponent: Interacts with UI (e.g., open modal, view card)
UIComponent->>i18n: Calls t('translation.key')
i18n-->>UIComponent: Returns localized string
UIComponent-->>User: Displays updated text/label (e.g., "⌘+K", "→", hyphen, etc.)
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (2)
src/features/ups/components/UpsCreateModalNew.vue (1)
25-29: Title updated but subtitle still uses the legacy key — update for consistency.The title now points to
ups.create_title, but the subtitle still referencesups.create_modal_subtitle. That breaks the new naming scheme and may leave the string untranslated once the old key is removed.- {{ t('ups.create_modal_subtitle') }} + {{ t('ups.create_subtitle') }}After changing the key here, remember to:
- Add
ups.create_subtitleto your locale files.- Remove the deprecated
ups.create_modal_subtitlekey.src/features/history/components/HistoryEventCard.vue (1)
16-35: Localize the hard-coded “Unknown User” fallback.
HistoryEventCardis now importinguseI18n, but the fallback string is still hard-coded English. Since the PR’s objective is i18n refactoring, this is a good spot to finish the job and keep UI text consistent with the rest of the update.-const { locale } = useI18n(); +const { t, locale } = useI18n(); ... - return event.metadata?.userEmail || 'Unknown User'; + return event.metadata?.userEmail || t('common.unknownUser');This keeps the existing behaviour while allowing translators to supply the proper string for other locales.
🧹 Nitpick comments (8)
src/features/auth/components/RecoveryCodesCard.vue (1)
23-25: Consider replacing the removed emoji with an accessible icon component instead of plain text.Removing the emoji declutters the heading, but a visual cue can still help users quickly recognise the security context.
A lightweight option is to use the existing Lucide icon set already imported elsewhere in the project:- <h3 class="text-lg font-semibold text-center text-neutral-darker"> - {{ t('auth.messages.recovery_codes_title') }} - </h3> + <h3 class="text-lg font-semibold text-center text-neutral-darker flex items-center justify-center gap-1"> + <ShieldCheck class="w-4 h-4 text-primary" aria-hidden="true" /> + {{ t('auth.messages.recovery_codes_title') }} + </h3>This keeps the UI consistent with the rest of the application, improves accessibility (screen-reader-friendly) and avoids embedding raw emojis in source.
Import at top if not already:import { ShieldCheck } from 'lucide-vue-next';Please verify that the translation string
auth.messages.recovery_codes_titleitself does not still contain an emoji, otherwise you’ll end up with a duplicate visual cue.src/features/servers/views/ServerCreateView.vue (1)
221-226: Success & error messages: consider consolidating into a reusable alert component.Good call removing the ✅ / ❌ characters for a cleaner UI.
Since both success and error states share styling logic, factoring them into anAlertcomponent (e.g.,<BaseAlert type="success" :message="successMessage" />) would:• eliminate duplication of classes
• ensure consistent colouring and spacing across the app
• make it easier to extend with icons or ARIA roles later.Optional, but promotes DRY and improves maintainability.
src/features/servers/components/ServerCard.vue (1)
66-66: Consider localizing the fallback value instead of hard-coded hyphenUsing a literal
'-'means the UI shows an English-centric symbol and can’t be translated. Prefer re-using a generic “N/A” / “None” key so translators can adapt it or present it differently.- <strong>{{ t('servers.ups') }} :</strong> {{ server.upsId || '-' }} + <strong>{{ t('servers.ups') }} :</strong> + {{ server.upsId || t('common.not_available') }}src/features/auth/components/FirstInstallAlert.vue (1)
18-19: Move arrow glyph into the translation for RTL / localisation friendlinessHard-coding “→” prevents translators from re-ordering or choosing an appropriate glyph for right-to-left languages. Consider a dedicated key or using an icon component.
- {{ t('auth.first_install.cta') }} → + {{ t('auth.first_install.cta_arrow') }}src/features/rooms/components/RoomCard.vue (1)
95-95: Arrow glyph should be part of the localized stringPlacing the hard-coded “→” outside the
t('rooms.view_details')token prevents translators from re-ordering or replacing the symbol (e.g. with “←” in RTL locales, or with text). Move the arrow inside the translation value or replace it with the existingArrowRightIconto keep visual parity with the list-view button below.- {{ t('rooms.view_details') }} → + {{ t('rooms.view_details_with_arrow') }}Follow-up: add
rooms.view_details_with_arrowto locale files.src/features/groups/components/panel/EditModeContent.vue (1)
264-264: Minor optimisation: cachetin computed/render heavy sections
EditModeContent.vuecallst()dozens of times in a single render. While cheap, repeated look-ups can be avoided by extracting derived labels into a smallcomputedmap (especially for pluralised strings). This keeps templates lean and slightly reduces re-render overhead.No action strictly required, but worth considering if the form grows further.
src/features/groups/components/ResourceSelector.vue (1)
231-231: Nit: keep destructured imports sortedTo stay tidy with the rest of the script, place
const { t } = useI18n();directly under other imports rather than in the middle of variable declarations.src/features/changelog/components/TeamSection.vue (1)
233-233: Unused variable warning
const { t } = useI18n();is declared but not referenced inside<script setup>since all calls are in the template. Vite will tree-shake it, but you can silence ESLint’sno-unused-varsby prefixing with an underscore:-const { t } = useI18n(); +const { t: _t } = useI18n();Purely cosmetic.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
src/components/CommandPalette/CommandPaletteHeader.vue(1 hunks)src/features/auth/components/FirstInstallAlert.vue(1 hunks)src/features/auth/components/RecoveryCodesCard.vue(1 hunks)src/features/changelog/components/ReleaseCard.vue(1 hunks)src/features/changelog/components/TeamSection.vue(3 hunks)src/features/groups/components/DeleteConfirmModal.vue(5 hunks)src/features/groups/components/GroupDetailsModal.vue(13 hunks)src/features/groups/components/GroupEditModal.vue(13 hunks)src/features/groups/components/ResourceSelector.vue(7 hunks)src/features/groups/components/panel/EditModeContent.vue(10 hunks)src/features/history/components/HistoryEventCard.vue(2 hunks)src/features/rooms/components/RoomCard.vue(1 hunks)src/features/rooms/components/RoomCreateModal.vue(1 hunks)src/features/rooms/components/RoomCreateModalNew.vue(1 hunks)src/features/rooms/views/RoomListView.vue(1 hunks)src/features/servers/components/ServerCard.vue(1 hunks)src/features/servers/views/ServerCreateView.vue(1 hunks)src/features/settings/views/SettingsView.vue(31 hunks)src/features/ups/components/UpsCreateModalNew.vue(1 hunks)src/features/ups/views/UpsListView.vue(2 hunks)src/layouts/components/TreeNavbar.vue(3 hunks)src/layouts/views/DefaultLayout.vue(1 hunks)
🔇 Additional comments (19)
src/components/CommandPalette/CommandPaletteHeader.vue (1)
28-28: LGTM! Improved keyboard shortcut clarity.The addition of the "+" symbol follows standard keyboard shortcut notation conventions and makes it clearer that this is a key combination (Command + K).
src/layouts/views/DefaultLayout.vue (1)
226-226: LGTM! Consistent keyboard shortcut formatting.This change aligns with the identical update in
src/components/CommandPalette/CommandPaletteHeader.vue, ensuring consistent keyboard shortcut display throughout the application.src/features/rooms/components/RoomCreateModal.vue (1)
25-29: Subtitle key rename looks good – please clean up unused keys.
rooms.create_subtitlealigns with the new naming convention and matches the title key already migrated. Just make sure you drop the obsoleterooms.create_modal_subtitleentry from your locale JSON files to avoid orphaned messages.src/features/rooms/components/RoomCreateModalNew.vue (1)
25-29: Key renames are consistent — looks good.Both title and subtitle were migrated to
rooms.create_title/rooms.create_subtitle, mirroring the change in the older modal component. 👍src/features/history/components/HistoryEventCard.vue (1)
26-32: Good micro-refactor on user display string.Directly trimming the interpolated string makes the function shorter and removes an unnecessary temporary variable without changing behavior.
src/features/changelog/components/ReleaseCard.vue (1)
23-24: Minor symbol change looks goodThe switch from an em-dash to a hyphen is purely cosmetic and doesn’t affect layout or accessibility. 👍
src/features/ups/views/UpsListView.vue (2)
387-388: Translation key verified in all localesBoth
src/locales/en.jsonandsrc/locales/fr.jsonincludeups.connected_servers. No missing entries—no further action needed.
399-400: Translations updated:ups.loadingpresent,ups.loading_moreremovedVerified in both
src/locales/en.jsonandsrc/locales/fr.json. All translation files defineups.loadingand no longer includeups.loading_more.src/features/rooms/views/RoomListView.vue (2)
318-319: Checkrooms.loadingkey availabilitySame concern as above—UI will show the raw key if it’s missing.
324-325:rooms.load_morekey must be added & oldscroll_for_moreremovedDouble-check locale files to avoid inconsistencies.
src/layouts/components/TreeNavbar.vue (3)
108-110: Good switch from$tto composabletThe inline update correctly references the scoped
tfunction – no issues spotted.
135-136: Consistent i18n usage – looks goodSecond occurrence is likewise updated; nothing further.
168-168: Redundant alias removed – props to the cleanup
const { t } = useI18n()matches the template changes and avoids the needless$talias.src/features/groups/components/ResourceSelector.vue (1)
8-9: 👍 i18n standardisation completedAll user-visible strings now consistently go through
t(), including dynamic counts and placeholders—nice catch.Also applies to: 24-32, 69-70, 83-84, 159-162, 184-188
src/features/changelog/components/TeamSection.vue (1)
7-11: Translations moved to locale files – great for future editingThe hard-coded heading, subtitle, quote and author are now translated – this improves localisation coverage.
Also applies to: 220-224
src/features/groups/components/GroupEditModal.vue (1)
298-298: LGTM: Comprehensive i18n refactoring successfully appliedThe refactoring consistently replaces
$twith the locally importedtfunction fromuseI18n()throughout the component. This follows Vue 3 composition API best practices and improves code maintainability.Also applies to: 39-40, 60-60, 67-67, 75-75, 81-81, 89-89, 108-108, 127-127, 148-148, 153-154, 169-169, 191-192, 221-222, 238-238, 249-249, 529-529, 552-559, 564-564, 570-570
src/features/settings/views/SettingsView.vue (1)
40-40: LGTM: Extensive i18n refactoring successfully completedThe refactoring comprehensively replaces
$twith the locally importedtfunction across all settings sections. The destructuring correctly includes bothlocaleandtfromuseI18n(), and all template interpolations are consistently updated.Also applies to: 249-250, 259-259, 262-262, 273-273, 276-276, 293-293, 307-307, 310-310, 331-331, 342-342, 345-345, 369-369, 372-372, 383-383, 386-386, 398-398, 401-401, 413-413, 416-416, 428-428, 431-431, 447-447, 450-450, 462-462, 467-468, 484-485, 498-498, 501-501, 508-508, 522-522, 529-529, 543-543, 550-550, 564-564, 571-571, 585-585, 592-592, 612-612, 623-623, 626-626, 642-642, 645-645, 656-656, 673-673, 690-690, 707-707, 726-726, 729-729, 739-739, 742-742, 758-758, 779-779
src/features/groups/components/DeleteConfirmModal.vue (1)
135-135: LGTM: Clean i18n refactoring in modal componentThe refactoring consistently replaces
$twith the locally importedtfunction throughout the delete confirmation modal. All dialog text, warnings, and button labels are properly updated, including parameterized translations.Also applies to: 44-44, 48-51, 66-66, 69-69, 81-81, 93-93
src/features/groups/components/GroupDetailsModal.vue (1)
366-366: LGTM: Comprehensive i18n refactoring in details modalThe refactoring thoroughly replaces
$twith the locally importedtfunction throughout the group details modal. All conditional translations based on group type are maintained, and UI text, labels, and button text are consistently updated.Also applies to: 72-72, 77-78, 89-89, 106-107, 128-128, 144-144, 162-162, 171-171, 178-178, 187-187, 201-202, 216-216, 235-236, 244-244, 306-306
2 participants
Summary by CodeRabbit
Style
Refactor
$tsyntax with the locally scopedtfunction from the internationalization library.