feat(i18n): localize quiz anti-cheat, header and blog filters

[TiZorii]

• Add quiz anti-cheat toast messages translations (ua/en/pl)
• Translate header navigation buttons
• Localize blog filter buttons (All/Tech/Career/Insights/News)
• Add blog search placeholder translations
• Ensure all user-facing messages are localized

Summary by CodeRabbit

• New Features
  • Added site-wide internationalization: English, Polish, and Ukrainian translations for navigation, header, mobile menu, and language switcher.
  • Localized blog experience: translated category labels, "All" filter, search placeholder, and "No matches" messaging.
  • Translated quiz anti-cheat warnings and several accessibility labels (aria) for improved UX and clarity.

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

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	84fbe38
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69705653645efa000806c3d7
😎 Deploy Preview	https://deploy-preview-175--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds i18n support: replaces hardcoded UI strings with next-intl translations across blog, header, navigation, language switcher, and an anti-cheat hook; updates SITE_LINKS to use translation keys and extends locale message files (en, pl, uk).

Changes

Cohort / File(s)	Summary
Blog components frontend/components/blog/BlogCategoryLinks.tsx, frontend/components/blog/BlogFilters.tsx, frontend/components/blog/BlogHeaderSearch.tsx	Added useTranslations and helper getCategoryLabel; replaced hardcoded labels ("Home", "All", search placeholder, "No matches", category titles) with translated keys and fallbacks.
Header / Mobile menu frontend/components/header/UnifiedHeader.tsx, frontend/components/header/AppMobileMenu.tsx	Integrated useTranslations('navigation'); replaced hardcoded nav labels and dynamic link labels with t(...) lookups (supports labelKey when present).
Navigation data & locale UI frontend/lib/navigation.ts, frontend/components/shared/LanguageSwitcher.tsx	Switched SITE_LINKS entries from label to labelKey; added localeLabels mapping and adjusted displayed locale labels and button classes.
Anti-cheat hook frontend/hooks/useAntiCheat.ts	Introduced useTranslations('quiz.antiCheat'), refactored addViolation into useCallback, and replaced hardcoded warning texts with translated messages.
Locale messages frontend/messages/en.json, frontend/messages/pl.json, frontend/messages/uk.json	Added aria keys, navigation.shop, quiz.exitModal.antiCheat messages, and new blog keys (all, noMatches, searchPlaceholder, categories.*).

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Sanity #79 — touches frontend/components/blog/BlogFilters.tsx, similar blog component edits.
• Feature/multilingual about #95 — related i18n work touching blog components and translation keys.
• fix(i18n): preserve locale across navigation and language switching #65 — modifies frontend/components/shared/LanguageSwitcher.tsx and locale handling.

Suggested labels

UI, refactor

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 I hopped through strings and keys today,
Swapped hardcoded words for paths that say,
"hello" in many tongues—hip hop hooray!
Tiny paws, a patch, and off I play. 🌱✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 accurately summarizes the main changes: adding internationalization (i18n) support for quiz anti-cheat messages, header navigation, and blog filters across the codebase.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/hooks/useAntiCheat.ts (1)

91-91: Missing dependency in useEffect: addViolation.

The addViolation function is called inside the effect but isn't listed in the dependency array. Since addViolation closes over t (which could change on locale switch), this could lead to stale translations being shown.

Suggested fix

Wrap addViolation with useCallback and include it in the dependency array:

+import { useCallback, useEffect, useRef, useState } from 'react';
-import { useEffect, useRef, useState } from 'react';
 // ...

-  const addViolation = (type: AntiCheatViolation['type']) => {
+  const addViolation = useCallback((type: AntiCheatViolation['type']) => {
     if (!isActive) return;
     // ... implementation
-  };
+  }, [isActive, t]);

   useEffect(() => {
     // ...
-  }, [isActive]);
+  }, [isActive, addViolation]);

🤖 Fix all issues with AI agents

In `@frontend/components/blog/BlogFilters.tsx`:
- Around line 137-144: The getCategoryLabel helper currently uses typeof
translated === 'string' after calling t.raw(), which always returns a string
(the id when missing); change the logic to first check t.has(translationKey) and
only call t.raw(translationKey) when t.has(...) is true, otherwise return the
original categoryName; apply the same fix in the BlogCategoryLinks component
where the same t.raw(...) fallback pattern is used so both getCategoryLabel and
the category link label logic use t.has(...) to determine translation existence
before reading t.raw(...).

🧹 Nitpick comments (5)

frontend/messages/uk.json (1)

184-190: career and growth categories share the same Ukrainian translation.

Both blog.categories.career and blog.categories.growth translate to "Кар'єра". This appears intentional based on the BlogFilters.tsx code that maps "Growth" → "Career", but having two keys with identical values may cause confusion during maintenance.

Consider removing the growth key if it's no longer needed, or add a comment in the codebase explaining the intentional duplication.

frontend/messages/en.json (1)

184-190: Same career/growth duplication as in other locale files.

Both keys translate to "Career". Consistent with other locales, but consider consolidating if growth is being phased out.

frontend/components/blog/BlogHeaderSearch.tsx (1)

128-135: Consider translating the aria-label for accessibility.

The aria-label="Search blog" remains hardcoded while other user-facing strings are localized. Screen reader users in different locales will hear the English label.

Suggested fix

       <button
         type="button"
         onClick={() => setOpen(prev => !prev)}
         className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-        aria-label="Search blog"
+        aria-label={t('searchAriaLabel')}
       >

frontend/components/header/AppMobileMenu.tsx (1)

108-116: Remaining hardcoded strings: "New product" and "Admin".

These user-facing labels are still hardcoded while other menu items are now translated. Consider localizing them for consistency.

Suggested fix

               <Link
                 href="/shop/admin/products/new"
                 onClick={close}
                 className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
               >
-                New product
+                {t('newProduct')}
               </Link>

                   <Link
                     href="/shop/admin"
                     aria-label="Shop admin"
                     title="Shop admin"
                     className="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                   >
-                    Admin
+                    {t('admin')}
                   </Link>

Also applies to: 130-139

frontend/hooks/useAntiCheat.ts (1)

30-39: Consider hoisting the static messageKey map.

The messageKey object is recreated on every call to addViolation. Since it's static, moving it outside the function avoids unnecessary allocations.

Suggested refactor

+const MESSAGE_KEY: Record<AntiCheatViolation['type'], string> = {
+  copy: 'copy',
+  paste: 'paste',
+  'context-menu': 'contextMenu',
+  'tab-switch': 'tabSwitch',
+};
+
 export function useAntiCheat(isActive: boolean = true) {
   const t = useTranslations('quiz.antiCheat');
   // ...
   
   const addViolation = (type: AntiCheatViolation['type']) => {
     if (!isActive) return;
     // ...
-    const messageKey: Record<AntiCheatViolation['type'], string> = {
-      copy: 'copy',
-      paste: 'paste',
-      'context-menu': 'contextMenu',
-      'tab-switch': 'tabSwitch',
-    };
-
-    toast.warning(t(messageKey[type]), {
+    toast.warning(t(MESSAGE_KEY[type]), {
       duration: 3000,
     });

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

next-intl t.raw() method missing keys error handling behavior

💡 Result:

Short answer: when t.raw(...) (or any t(...) call) can't find a message next-intl logs an i18n error and returns the message id (namespace.key) so the app keeps running. You can customize this via getMessageFallback and onError (e.g., return a different fallback string or change logging/throwing). [1][2]

Relevant docs:

• Default missing-message behavior and configurable onError/getMessageFallback. [1]
• next-intl general usage (t and t.raw for raw objects). [2]

If you want the runtime to behave differently for t.raw specifically (e.g., throw or return null), implement getMessageFallback/onError in your request/provider config to handle IntlErrorCode.MISSING_MESSAGE. [1][3]

---

🌐 Web query:

next-intl t.has() method documentation and usage

💡 Result:

Short answer

• next-intl exposes t.has(key) to check whether a translation key exists for the current locale; it returns a boolean. Use it to conditionally render optional/incomplete translations. [1][2]

Example

• In a React component:
  const t = useTranslations('About');
  if (t.has('title')) {
  return

  {t('title')}

  ;
  } else {
  return

  Fallback

  ;
  }
• t.has accepts the same key strings you pass to t (including nested/namespace keys like 'CompanyStats.yearsOfService.title'). [1]

Notes

• t.has only checks the current locale’s messages (you can still provide fallback messages via your locale setup). [1]
• The feature was discussed as the recommended way to handle optional translations in the project’s issue tracker. [2]

Sources
[1] next-intl docs — "Optional messages" / translations usage.
[2] amannn/next-intl GitHub — issue discussing optional translations and t.has.

---

🏁 Script executed:

# Find next-intl configuration and setup
fd -t f "(next-intl|i18n|translation)" --full-path | head -20

Repository: DevLoversTeam/devlovers.net

Length of output: 144

---

🏁 Script executed:

# Check package.json for next-intl version
cat package.json | grep -A 2 -B 2 "next-intl"

Repository: DevLoversTeam/devlovers.net

Length of output: 115

---

🏁 Script executed:

# Search for other t.raw() usage in codebase
rg "t\.raw\(" --type ts --type tsx -A 2 -B 2

Repository: DevLoversTeam/devlovers.net

Length of output: 98

---

🏁 Script executed:

# Search for t.has() usage in codebase
rg "t\.has\(" --type ts --type tsx -A 2 -B 2

Repository: DevLoversTeam/devlovers.net

Length of output: 98

---

🏁 Script executed:

# Look for translation function patterns
rg "\.has\(|t\(" frontend/ --type ts --type tsx | head -30

Repository: DevLoversTeam/devlovers.net

Length of output: 98

---

🏁 Script executed:

# Check the i18n config files
cat -n frontend/i18n/config.ts

Repository: DevLoversTeam/devlovers.net

Length of output: 393

---

🏁 Script executed:

# Check the i18n request file
cat -n frontend/i18n/request.ts

Repository: DevLoversTeam/devlovers.net

Length of output: 566

---

🏁 Script executed:

# Search for all translation usage patterns
rg "t\(" frontend/ -A 1 -B 1 | head -60

Repository: DevLoversTeam/devlovers.net

Length of output: 3426

---

🏁 Script executed:

# Look for how categories are used and if translations are failing
rg "categories\." --max-count 20

Repository: DevLoversTeam/devlovers.net

Length of output: 4597

---

🏁 Script executed:

# Find where package.json is and check next-intl version
find . -name "package.json" -type f 2>/dev/null | head -5

Repository: DevLoversTeam/devlovers.net

Length of output: 116

---

🏁 Script executed:

# Check next-intl version in frontend package.json
cat frontend/package.json | grep -A 5 -B 5 "next-intl"

Repository: DevLoversTeam/devlovers.net

Length of output: 382

---

🏁 Script executed:

# Check the BlogFilters.tsx file to see the full context
cat -n frontend/components/blog/BlogFilters.tsx | sed -n '130,160p'

Repository: DevLoversTeam/devlovers.net

Length of output: 1281

---

🏁 Script executed:

# Look at message files to see what translations exist for categories
ls -la frontend/messages/

Repository: DevLoversTeam/devlovers.net

Length of output: 363

---

🏁 Script executed:

# Check if categories translations exist
rg "categories\." frontend/messages/ --max-count 30

Repository: DevLoversTeam/devlovers.net

Length of output: 53

---

🏁 Script executed:

# Check the message files for categories translations
python3 << 'EOF'
import json

for locale in ['en', 'pl', 'uk']:
    with open(f'frontend/messages/{locale}.json', 'r') as f:
        data = json.load(f)
    
    # Look for categories keys
    if 'categories' in data:
        print(f"\n{locale}.json - categories translations:")
        categories = data['categories']
        if isinstance(categories, dict):
            for key in list(categories.keys())[:10]:
                print(f"  {key}: {categories[key]}")
        else:
            print(f"  (not a dict: {type(categories)})")
    else:
        print(f"\n{locale}.json - NO 'categories' key found")
EOF

Repository: DevLoversTeam/devlovers.net

Length of output: 157

---

🏁 Script executed:

# Check BlogCategoryLinks.tsx to see if it also uses getCategoryLabel
cat -n frontend/components/blog/BlogCategoryLinks.tsx | grep -A 10 -B 5 "translationKey"

Repository: DevLoversTeam/devlovers.net

Length of output: 909

---

The fallback logic in getCategoryLabel doesn't work as intended; use t.has() to properly check translation existence.

The typeof translated === 'string' check will always pass because t.raw() returns a string regardless—either the translation value or the message id (e.g., "categories.career") when the key is missing. This means missing translations return the message id instead of falling back to the original category name.

Use t.has() to check if the translation exists before accessing it:

♻️ Suggested fix

  const getCategoryLabel = (categoryName: string): string => {
    const key = categoryName.toLowerCase();
    const translationKey = `categories.${key}`;
-   // Try to get translation, fallback to original name
-   const translated = t.raw(translationKey);
-   return typeof translated === 'string' ? translated : categoryName;
+   return t.has(translationKey) ? t(translationKey) : categoryName;
  };

This same pattern appears in BlogCategoryLinks.tsx (lines 30–35) and should be updated there as well.

🤖 Prompt for AI Agents

In `@frontend/components/blog/BlogFilters.tsx` around lines 137 - 144, The
getCategoryLabel helper currently uses typeof translated === 'string' after
calling t.raw(), which always returns a string (the id when missing); change the
logic to first check t.has(translationKey) and only call t.raw(translationKey)
when t.has(...) is true, otherwise return the original categoryName; apply the
same fix in the BlogCategoryLinks component where the same t.raw(...) fallback
pattern is used so both getCategoryLabel and the category link label logic use
t.has(...) to determine translation existence before reading t.raw(...).