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

TiZorii · web-flow · commit aa5654b82362 · 2026-01-21T07:55:07.000+02:00
diff --git a/frontend/components/blog/BlogCategoryLinks.tsx b/frontend/components/blog/BlogCategoryLinks.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { Link, usePathname } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
 
@@ -21,7 +22,22 @@ export function BlogCategoryLinks({
   linkClassName,
   onNavigate,
 }: BlogCategoryLinksProps) {
+  const t = useTranslations('blog');
+  const tNav = useTranslations('navigation');
   const pathname = usePathname();
+
+  // Helper function to get translated category label
+  const getCategoryLabel = (categoryName: string): string => {
+    const key = categoryName.toLowerCase() as 'tech' | 'career' | 'insights' | 'news' | 'growth';
+    const categoryTranslations: Record<string, string> = {
+      tech: t('categories.tech'),
+      career: t('categories.career'),
+      insights: t('categories.insights'),
+      news: t('categories.news'),
+      growth: t('categories.growth'),
+    };
+    return categoryTranslations[key] || categoryName;
+  };
   const baseLink =
     linkClassName ||
     'rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
@@ -53,7 +69,7 @@ export function BlogCategoryLinks({
               isActive ? 'bg-muted text-foreground' : 'text-muted-foreground'
             )}
           >
-            {category.displayTitle}
+            {getCategoryLabel(category.displayTitle)}
           </Link>
         );
       })}
@@ -66,7 +82,7 @@ export function BlogCategoryLinks({
           pathname === '/' ? 'bg-muted text-foreground' : 'text-muted-foreground'
         )}
       >
-        Home
+        {tNav('home')}
       </Link>
     </nav>
   );
diff --git a/frontend/components/blog/BlogFilters.tsx b/frontend/components/blog/BlogFilters.tsx
@@ -133,6 +133,20 @@ export default function BlogFilters({
     setSelectedAuthor(null);
     setSelectedCategory(null);
   };
+
+  // Helper function to get translated category label
+  const getCategoryLabel = (categoryName: string): string => {
+    const key = categoryName.toLowerCase() as 'tech' | 'career' | 'insights' | 'news' | 'growth';
+    const categoryTranslations: Record<string, string> = {
+      tech: t('categories.tech'),
+      career: t('categories.career'),
+      insights: t('categories.insights'),
+      news: t('categories.news'),
+      growth: t('categories.growth'),
+    };
+    return categoryTranslations[key] || categoryName;
+  };
+
   const allCategories = useMemo(() => {
     if (categories.length) {
       return categories
@@ -343,7 +357,7 @@ export default function BlogFilters({
                   : 'rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800'
               }
             >
-              All
+              {t('all')}
             </button>
             {allCategories.map(category => (
               <button
@@ -362,7 +376,7 @@ export default function BlogFilters({
                     : 'rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800'
                 }
               >
-                {category.name}
+                {getCategoryLabel(category.name)}
               </button>
             ))}
           </div>
diff --git a/frontend/components/blog/BlogHeaderSearch.tsx b/frontend/components/blog/BlogHeaderSearch.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useRouter } from '@/i18n/routing';
 
 type PostSearchItem = {
@@ -36,6 +37,7 @@ function extractSnippet(body: PostSearchItem['body'], query: string) {
 const SEARCH_ENDPOINT = '/api/blog-search';
 
 export function BlogHeaderSearch() {
+  const t = useTranslations('blog');
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
   const [items, setItems] = useState<PostSearchItem[]>([]);
@@ -156,7 +158,7 @@ export function BlogHeaderSearch() {
                 onKeyDown={event => {
                   if (event.key === 'Escape') setOpen(false);
                 }}
-              placeholder="What're we looking for ?"
+              placeholder={t('searchPlaceholder')}
               className="w-full bg-transparent text-sm text-foreground outline-none"
               style={{ fontFamily: 'Lato, system-ui, -apple-system, sans-serif' }}
             />
@@ -200,7 +202,7 @@ export function BlogHeaderSearch() {
           )}
           {value && !results.length && !isLoading && (
             <div className="border-t border-border px-3 py-2 text-xs text-muted-foreground">
-              No matches
+              {t('noMatches')}
             </div>
           )}
         </div>
diff --git a/frontend/components/header/AppMobileMenu.tsx b/frontend/components/header/AppMobileMenu.tsx
@@ -2,6 +2,7 @@
 
 import { Menu, X } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 
 import { SITE_LINKS } from '@/lib/navigation';
@@ -24,6 +25,7 @@ export function AppMobileMenu({
   showAdminLink = false,
   blogCategories = [],
 }: Props) {
+  const t = useTranslations('navigation');
   const [open, setOpen] = useState(false);
 
   const close = () => setOpen(false);
@@ -79,7 +81,7 @@ export function AppMobileMenu({
                   onClick={close}
                   className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                 >
-                  Home
+                  {t('home')}
                 </Link>
               ) : null}
 
@@ -98,7 +100,7 @@ export function AppMobileMenu({
                     onClick={close}
                     className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                   >
-                    {link.label}
+                    {'labelKey' in link ? t(link.labelKey) : link.label}
                   </Link>
                 ))
               )}
@@ -122,7 +124,7 @@ export function AppMobileMenu({
                     onClick={close}
                     className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                   >
-                    Dashboard
+                    {t('dashboard')}
                   </Link>
 
                   {showAdminLink ? (
@@ -147,7 +149,7 @@ export function AppMobileMenu({
                   onClick={close}
                   className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                 >
-                  Log in
+                  {t('login')}
                 </Link>
               )}
             </div>
diff --git a/frontend/components/header/UnifiedHeader.tsx b/frontend/components/header/UnifiedHeader.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { LogIn, Settings, User } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import { SITE_LINKS } from '@/lib/navigation';
 
@@ -28,10 +29,11 @@ export function UnifiedHeader({
   showAdminLink = false,
   blogCategories = [],
 }: UnifiedHeaderProps) {
+  const t = useTranslations('navigation');
   const isShop = variant === 'shop';
   const isBlog = variant === 'blog';
   const brandHref = isShop ? '/shop' : isBlog ? '/blog' : '/';
-  const brandBadge = isShop ? 'Shop' : isBlog ? 'Blog' : '';
+  const brandBadge = isShop ? t('shop') : isBlog ? t('blog') : '';
 
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -69,7 +71,7 @@ export function UnifiedHeader({
                   href={link.href}
                   className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                 >
-                  {link.label}
+                  {t(link.labelKey)}
                 </Link>
               ))}
             </div>
@@ -109,7 +111,7 @@ export function UnifiedHeader({
                 className="inline-flex items-center gap-2 rounded-md bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:opacity-90"
               >
                 <LogIn className="h-4 w-4" />
-                Log in
+                {t('login')}
               </Link>
             ) : (
               <LogoutButton />
diff --git a/frontend/components/shared/LanguageSwitcher.tsx b/frontend/components/shared/LanguageSwitcher.tsx
@@ -5,6 +5,12 @@ import { useParams, usePathname,useSearchParams } from 'next/navigation';
 import { locales, type Locale } from '@/i18n/config';
 import { Link } from '@/i18n/routing';
 
+const localeLabels: Record<Locale, string> = {
+  uk: 'UA',
+  en: 'EN',
+  pl: 'PL',
+};
+
 export default function LanguageSwitcher() {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -37,9 +43,9 @@ export default function LanguageSwitcher() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-1 text-gray-700 dark:text-gray-300 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition uppercase"
+        className="flex items-center gap-1 text-gray-700 dark:text-gray-300 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition"
       >
-        {currentLocale}
+        {localeLabels[currentLocale]}
         <svg
           className={`h-4 w-4 transition-transform ${
             isOpen ? 'rotate-180' : ''
@@ -70,13 +76,13 @@ export default function LanguageSwitcher() {
                 }
                 setIsOpen(false);
               }}
-              className={`block px-4 py-2 text-sm uppercase transition ${
+              className={`block px-4 py-2 text-sm transition ${
                 currentLocale === locale
                   ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium'
                   : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-neutral-800'
               }`}
             >
-              {locale}
+              {localeLabels[locale]}
             </Link>
           ))}
         </div>
diff --git a/frontend/hooks/useAntiCheat.ts b/frontend/hooks/useAntiCheat.ts
@@ -1,48 +1,53 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 
 export type AntiCheatViolation = {
   type: 'copy' | 'context-menu' | 'tab-switch' | 'paste';
   timestamp: Date;
 };
 
+const messageKey: 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 [violations, setViolations] = useState<AntiCheatViolation[]>([]);
   const [isTabActive, setIsTabActive] = useState(true);
   const [showWarning, setShowWarning] = useState(false);
   const warningTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const addViolation = (type: AntiCheatViolation['type']) => {
-    if (!isActive) return;
-
-    const violation: AntiCheatViolation = {
-      type,
-      timestamp: new Date(),
-    };
+  const addViolation = useCallback(
+    (type: AntiCheatViolation['type']) => {
+      if (!isActive) return;
 
-    setViolations(prev => [...prev, violation]);
-    setShowWarning(true);
+      const violation: AntiCheatViolation = {
+        type,
+        timestamp: new Date(),
+      };
 
-    const messages = {
-      copy: '⚠️ Копіювання заборонено під час квізу',
-      paste: '⚠️ Вставка заборонена під час квізу',
-      'context-menu': '⚠️ Контекстне меню заборонено під час квізу',
-      'tab-switch': '⚠️ Перехід на іншу вкладку зафіксовано',
-    };
+      setViolations(prev => [...prev, violation]);
+      setShowWarning(true);
 
-    toast.warning(messages[type], {
-      duration: 3000,
-    });
+      toast.warning(t(messageKey[type]), {
+        duration: 3000,
+      });
 
-    if (warningTimeoutRef.current) {
-      clearTimeout(warningTimeoutRef.current);
-    }
-    warningTimeoutRef.current = setTimeout(() => {
-      setShowWarning(false);
-    }, 3000);
-  };
+      if (warningTimeoutRef.current) {
+        clearTimeout(warningTimeoutRef.current);
+      }
+      warningTimeoutRef.current = setTimeout(() => {
+        setShowWarning(false);
+      }, 3000);
+    },
+    [isActive, t]
+  );
 
   useEffect(() => {
     if (!isActive) return;
@@ -86,7 +91,7 @@ export function useAntiCheat(isActive: boolean = true) {
         clearTimeout(warningTimeoutRef.current);
       }
     };
-  }, [isActive]);
+  }, [isActive, addViolation]);
 
   const resetViolations = () => {
     setViolations([]);
diff --git a/frontend/lib/navigation.ts b/frontend/lib/navigation.ts
@@ -1,9 +1,9 @@
 export const SITE_LINKS = [
-  { href: '/q&a', label: 'Q&A' },
-  { href: '/quizzes', label: 'Quizzes' },
-  { href: '/leaderboard', label: 'Leaderboard' },
-  { href: '/blog', label: 'Blog' },
-  { href: '/about', label: 'About' },
-  { href: '/contacts', label: 'Contacts' },
-  { href: '/shop', label: 'Shop' },
+  { href: '/q&a', labelKey: 'qa' },
+  { href: '/quizzes', labelKey: 'quizzes' },
+  { href: '/leaderboard', labelKey: 'leaderboard' },
+  { href: '/blog', labelKey: 'blog' },
+  { href: '/about', labelKey: 'about' },
+  { href: '/contacts', labelKey: 'contacts' },
+  { href: '/shop', labelKey: 'shop' },
 ] as const;
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
