feat: Centralize i18n keys and migrate usages by panteLx · Pull Request #42 · panteLx/BetterShift

panteLx · 2025-12-07T04:03:53Z

Consolidates translation strings into centralized namespaces (common, validation, form) and migrates UI code to use these parameterized keys to eliminate duplication and improve consistency.

Updates locale files to include the new keys and adjusts German tone to use informal "du". Benefits: unified success/error messages with an {item} parameter, centralized validation messages, reusable form labels/placeholders, and simpler translation maintenance.

Summary by CodeRabbit

Refactor
- Consolidated and centralized message and label translations across all components for consistent user-facing messaging
- Standardized form field labels, placeholders, and validation error messages
- Unified success and error toast messages for CRUD operations (create, update, delete)
Documentation
- Added comprehensive translation structure guidelines for i18n conventions and best practices

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Consolidates translation strings into centralized namespaces (common, validation, form) and migrates UI code to use these parameterized keys to eliminate duplication and improve consistency. Updates locale files to include the new keys and adjusts German tone to use informal "du". Benefits: unified success/error messages with an {item} parameter, centralized validation messages, reusable form labels/placeholders, and simpler translation maintenance.

coderabbitai · 2025-12-07T04:04:03Z

Walkthrough

This PR centralizes translation keys across the application by introducing standardized categories (validation, form, common) and updating components to use these reusable keys instead of component-specific ones. The localization files are reorganized to consolidate CRUD operations, form fields, and validation messages. Functionality remains unchanged—only translation key structure and references are modified.

Changes

Cohort / File(s)	Summary
Documentation `.github/copilot-instructions.md`	Added centralized Translation Structure (Optimized) documentation for i18n conventions, including German informal style, parametrized keys, validation keys, and form field keys.
Form & Validation Key Updates `app/page.tsx`, `components/calendar-dialog.tsx`, `components/delete-calendar-dialog.tsx`, `components/manage-password-dialog.tsx`, `components/password-dialog.tsx`, `components/preset-edit-dialog.tsx`, `components/shift-form-fields.tsx`	Replaced form labels, placeholders, and validation error messages with centralized keys: `password.password` → `form.passwordLabel`, `password.passwordPlaceholder` → `form.passwordPlaceholder`, `password.error` → `validation.`, `shift.color` → `form.colorLabel`, `shift.notes` → `form.notes`.
Common CRUD & Message Consolidation `components/external-sync-manage-dialog.tsx`, `components/preset-selector.tsx`, `components/sync-notification-dialog.tsx`, `hooks/useCalendars.ts`, `hooks/useNotes.ts`, `hooks/useShifts.ts`	Consolidated item-specific toast messages (created, updated, deleted, createError, updateError, deleteError) to generic `common.` keys with item interpolation; replaced component-specific validation keys with `validation.` equivalents.
Localization Files `messages/en.json`, `messages/de.json`	Added new top-level groups: `common` (with CRUD operations and lifecycle messages), `validation` (passwordMatch, passwordIncorrect, passwordRequired, fileRequired, fileTooLarge, urlRequired, urlInvalid, urlAlreadyExists), and `form` (namePlaceholder, nameLabel, colorLabel, notesLabel, notesPlaceholder, passwordLabel, passwordPlaceholder, urlLabel, urlPlaceholder). Removed scattered component-specific keys (calendar.namePlaceholder, password.password, shift.color, preset.namePlaceholder, externalSync.*, note.created/updated/deleted, etc.).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Areas requiring extra attention:

Verify all removed translation keys from en.json and de.json are no longer referenced anywhere in the codebase (especially in external-sync and syncNotifications sections).
Confirm all new common.*, validation.*, and form.* keys are properly populated in both language files with accurate translations.
Check that parametrized keys (e.g., item in common.created, maxSize in validation.fileTooLarge) are correctly interpolated in all component usages.
Validate consistency across hooks (useCalendars, useNotes, useShifts, useShifts) for item label references (e.g., calendar.title, note.label, shift.title).

Possibly related PRs

feat: Add ICS upload and custom external calendar support #32: Modifies external-sync components and localization keys (messages/en.json, messages/de.json, external-sync-manage-dialog.tsx)—directly overlapping with this PR's refactor.
feat: two-tier calendar password protection #40: Updates localization and password-related UI strings (adds unlockRequired/unlockCalendar) and components—related via i18n/UI text level changes.
feat: Add sync notifications & fix: auto-sync #38: Modifies the same localization JSONs and UI components (sync-notification-dialog.tsx, external-sync-manage-dialog.tsx)—overlaps in translation file and component updates.

Poem

🐰 Keys once scattered far and wide,
Now neatly tucked in one place to reside,
form., common., validation. shine,
Translation structure? chef's kiss — divine! ✨
Refactored hops through every file,
Makes this bunny smile!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: Centralize i18n keys and migrate usages' accurately captures the main objective of the PR, which consolidates translation strings into centralized namespaces and migrates UI code to use these new keys.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/centralized-i18n

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

components/preset-selector.tsx (1)
89-89: Consider using a more appropriate item label for CRUD messages.

All toast messages use t("preset.create") as the item parameter, which translates to "New Preset" in English. This works for creation, but reads awkwardly for updates and deletions:

✓ "New Preset created successfully"

✗ "New Preset updated successfully"

✗ "New Preset deleted successfully"

Consider using a more generic label like a new key preset.title (translating to "Preset") for consistency across all operations.

Example fix:
-toast.success(t("common.created", { item: t("preset.create") }));
+toast.success(t("common.created", { item: t("preset.title") }));
Apply similar changes for update and delete operations. You would need to add "title": "Preset" to the preset section in both en.json and de.json.

Also applies to: 93-93, 107-107, 111-111, 126-126, 151-151, 161-161, 164-164
components/external-sync-manage-dialog.tsx (1)
274-276: Consider using a more generic item label for CRUD messages.

All CRUD toast messages use t("externalSync.syncTypeCustom") as the item parameter, which translates to "Custom Calendar". While this is more appropriate than some alternatives, it may still be confusing since these operations apply to all external sync types (iCloud, Google, Custom):

"Custom Calendar updated successfully" (even when updating an iCloud sync)

Consider adding a new generic key like externalSync.title (translating to "External Calendar") for consistency across all sync types.

Example:
-toast.success(t("common.created", { item: t("externalSync.syncTypeCustom") }));
+toast.success(t("common.created", { item: t("externalSync.title") }));
Add to both locale files:
"externalSync": {
  "title": "External Calendar",  // or "External Sync"
  ...
}
Also applies to: 281-284, 288-290, 325-327, 330-333, 337-339, 400-402, 405-408, 412-414, 486-488, 491-494, 506-508, 570-572, 576-581, 586-588

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 54e0319 and 9ef7b00.

📒 Files selected for processing (16)

.github/copilot-instructions.md (1 hunks)
app/page.tsx (2 hunks)
components/calendar-dialog.tsx (3 hunks)
components/delete-calendar-dialog.tsx (1 hunks)
components/external-sync-manage-dialog.tsx (14 hunks)
components/manage-password-dialog.tsx (4 hunks)
components/password-dialog.tsx (4 hunks)
components/preset-edit-dialog.tsx (3 hunks)
components/preset-selector.tsx (5 hunks)
components/shift-form-fields.tsx (2 hunks)
components/sync-notification-dialog.tsx (2 hunks)
hooks/useCalendars.ts (4 hunks)
hooks/useNotes.ts (3 hunks)
hooks/useShifts.ts (3 hunks)
messages/de.json (7 hunks)
messages/en.json (6 hunks)

🧰 Additional context used

📓 Path-based instructions (8)

{app/**/*.tsx,components/**/*.tsx,hooks/*.ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

{app/**/*.tsx,components/**/*.tsx,hooks/*.ts}: Use lib/password-cache.ts utilities: getCachedPassword(calendarId), verifyAndCachePassword(calendarId, password), setCachedPassword(calendarId, password), and removeCachedPassword(calendarId) for password management
Password verification is asynchronous - always await verifyAndCachePassword(calendarId, password) before executing mutations

Files:

components/delete-calendar-dialog.tsx
components/preset-edit-dialog.tsx
hooks/useShifts.ts
components/sync-notification-dialog.tsx
components/preset-selector.tsx
components/password-dialog.tsx
components/calendar-dialog.tsx
components/manage-password-dialog.tsx
hooks/useNotes.ts
hooks/useCalendars.ts
components/external-sync-manage-dialog.tsx
app/page.tsx
components/shift-form-fields.tsx

components/**/*.tsx

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

components/**/*.tsx: Use formatDateToLocal() for converting dates to YYYY-MM-DD format in UI components
Use PRESET_COLORS array with hex format (#3b82f6) for color selection, and apply 20% opacity for backgrounds using format ${color}20

Files:

components/delete-calendar-dialog.tsx
components/preset-edit-dialog.tsx
components/sync-notification-dialog.tsx
components/preset-selector.tsx
components/password-dialog.tsx
components/calendar-dialog.tsx
components/manage-password-dialog.tsx
components/external-sync-manage-dialog.tsx
components/shift-form-fields.tsx

{app/**/*.tsx,components/**/*.tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

{app/**/*.tsx,components/**/*.tsx}: Use useTranslations() from next-intl for all user-facing text in components
Use de locale from date-fns when locale === "de", otherwise use enUS
All components must support real-time updates via Server-Sent Events (SSE) by listening to relevant SSE events (shift, preset, note, sync-log updates)
Use silent refresh pattern fetchData(false) in SSE event handlers to update component data without showing loading states
Use counter-based refresh trigger props (e.g., syncLogRefreshTrigger) to manage component re-fetches without causing UI flashing or blinking
Never require password input twice - the integrated 'Currently Locked' form is sufficient for locked calendars

Files:

components/delete-calendar-dialog.tsx
components/preset-edit-dialog.tsx
components/sync-notification-dialog.tsx
components/preset-selector.tsx
components/password-dialog.tsx
components/calendar-dialog.tsx
components/manage-password-dialog.tsx
components/external-sync-manage-dialog.tsx
app/page.tsx
components/shift-form-fields.tsx

components/*[Cc]alendar*.tsx

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

components/*[Cc]alendar*.tsx: Left-click on calendar cell toggles shift with selected preset; right-click opens note dialog and prevents default context menu; toggle logic: delete if exists, create if not
Use <StickyNote> icon indicator for calendar days with notes

Files:

components/delete-calendar-dialog.tsx
components/calendar-dialog.tsx

hooks/use*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

hooks/use*.ts: All data-fetching hooks (useShifts, usePresets, useNotes) must automatically call getCachedPassword(calendarId) before each fetch and append password as query parameter if present
All data-fetching hooks must return empty arrays on 401 responses for graceful degradation without crashing the UI

Files:

hooks/useShifts.ts
hooks/useNotes.ts
hooks/useCalendars.ts

{app/api/**/*.ts,hooks/*.ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Log all API errors with console.error() for debugging

Files:

hooks/useShifts.ts
hooks/useNotes.ts
hooks/useCalendars.ts

messages/*.json

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

All translation keys in messages/{de,en}.json must be actively used in components; remove unused keys to keep translation files clean

Files:

messages/en.json
messages/de.json

app/page.tsx

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

app/page.tsx: Use useState for shifts, presets, notes, and calendars state; useEffect for data fetching on calendar/date changes; useRouter().replace() for URL state sync
Use statsRefreshTrigger counter for tracking mutations and triggering re-fetches of statistics
Use separate mobile calendar selector with showMobileCalendarDialog for mobile UI
After successful password entry in locked calendar, call handlePasswordSuccess(password) which triggers refetchShifts(), refetchPresets(), refetchNotes(), fetchExternalSyncs(), fetchSyncErrorStatus(), and increment setStatsRefreshTrigger

Files:

app/page.tsx

🧠 Learnings (19)

📓 Common learnings

Learnt from: CR
Repo: panteLx/BetterShift PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-07T02:40:45.432Z
Learning: Applies to messages/*.json : All translation keys in `messages/{de,en}.json` must be actively used in components; remove unused keys to keep translation files clean