Header UX polish, quiz highlight fix, Blog button styling, shop i18n product descriptions

[TiZorii]

Summary by CodeRabbit

• New Features

  • Added blog navigation links to mobile and desktop menus.
  • Introduced multi-language product descriptions with improved formatting.

• Improvements

  • Enhanced product description rendering with support for multiple sources and translations.
  • Updated leaderboard table column widths for consistent layout.
  • Improved quiz route active state detection.

• Updates

  • Added product descriptions for merchandise items in English, Polish, and Ukrainian.
  • Updated Ukrainian feature section copy.
  • Adjusted navigation ordering and spacing throughout header components.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ready	Preview, Comment	Feb 13, 2026 8:35pm

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	684883c
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/698f8b13128eb3000839e5b0
😎 Deploy Preview	https://deploy-preview-322--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

This PR introduces localized product descriptions to the shop, adds blog navigation across header components, reorganizes locale ordering, and refines leaderboard and header styling. Product descriptions are now fetched via getMessages and rendered as multi-paragraph text. A blog button with BookOpen icon is integrated into mobile and desktop navigation. Locale configuration shifts to English-first ordering, and translation files expand with product description mappings across multiple languages.

Changes

Cohort / File(s)	Summary
Product Description Localization frontend/app/[locale]/shop/products/[slug]/page.tsx	Replaces single-line product description with multi-source fetching via getMessages. Descriptions now derive from localized shop.productDescriptions with fallback to product.description, and render as multi-paragraph blocks split on newline characters.
Header Navigation Blog Integration frontend/components/header/AppMobileMenu.tsx, frontend/components/header/DesktopNav.tsx, frontend/components/header/DesktopActions.tsx, frontend/components/header/MobileActions.tsx, frontend/components/header/NavLink.tsx	Adds blog button with BookOpen icon across mobile and desktop header variants, reorders navigation elements to exclude /blog from filtered link lists, updates active-state logic for /quizzes routes, and adjusts element ordering in action bars.
Locale Configuration & Routing frontend/i18n/config.ts, frontend/components/header/MobileMenuContext.tsx	Reorders locales constant from ['uk', 'en', 'pl'] to ['en', 'uk', 'pl'], updating locale precedence. Adjusts router import from next/navigation to local i18n alias and updates locale-stripping regex to match new order.
Header UI Refinements frontend/components/shared/LanguageSwitcher.tsx	Reorders localeLabels mapping (uk moved after en) and changes dropdown z-index from arbitrary z-[70] to predefined z-70.
Leaderboard Layout Adjustments frontend/components/leaderboard/LeaderboardClient.tsx, frontend/components/leaderboard/LeaderboardTable.tsx	Reduces container bottom margin from mb-24 to mb-10. Adds colgroup with consistent column widths (15%, auto, 25%) to header and current-user tables.
Translation Data Expansion frontend/messages/en.json, frontend/messages/uk.json, frontend/messages/pl.json	Introduces productDescriptions object mapping product identifiers to localized description strings across all three supported languages. Ukrainian file also updates feature copy in about.features section.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• (SP 1) [Shop] Canonicalize legacy filters + fix cart CTA/badge UX #274 — Modifies the same product page file (frontend/app/[locale]/shop/products/[slug]/page.tsx) to alter product data rendering and badge handling.
• feat(i18n): add translations for blog categories, and UI components #253 — Adds blog-related links and labels to the same header components and translation files for blog integration.
• fix(leaderboard): fix layout centering #215 — Modifies frontend/components/leaderboard/LeaderboardTable.tsx for overlapping table layout and column-width adjustments.

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 A blog button hops through the header with glee,
While products don each language for all eyes to see,
The leaderboard tables align column by column,
Locales reordered, navigation more summon—
Header and home now dance in harmony! 🌟

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title mentions multiple distinct changes (header UX, quiz highlight, blog button, product descriptions) but doesn't clearly prioritize the main change, making it feel like a list of features rather than a cohesive summary.	Consider focusing the title on the primary objective (e.g., 'Add blog button and i18n product descriptions' or 'Header navigation refactoring with product i18n'). If multiple items are equally important, clarify which is the main focus.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop

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

✨ 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/translation-leaderboard

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

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

260-276: Consider adding isActive to the blog and shop buttons for visual consistency.

In the shop variant (Line 186) and blog variant (Line 217), the respective HeaderButton components include isActive={pathname === '...'}. The platform variant omits isActive for both buttons. If a user navigates to /blog or /shop and returns, the button won't reflect the active state. This may be intentional (since they leave the platform context), but worth confirming it's deliberate.

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

17-17: Hardcoded locale list in regex — consider deriving from config.

Both this file and MobileMenuContext.tsx (line 76) hardcode (uk|en|pl) in the locale-stripping regex. If a locale is added or reordered, these must be updated manually. Consider building the regex from the locales array in @/i18n/config.

♻️ Example

+'use client';
+
+import { usePathname } from 'next/navigation';
+import { locales } from '@/i18n/config';
+import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
+
+const localePattern = new RegExp(`^\\/(${locales.join('|')})(?=\\/|$)`);
+
 // then in component:
-    const cleanPathname = pathname.replace(/^\/(uk|en|pl)(?=\/|$)/, '') || '/';
+    const cleanPathname = pathname.replace(localePattern, '') || '/';

frontend/app/[locale]/shop/products/[slug]/page.tsx (2)

57-59: Type safety: (messages as any) bypasses type checking.

The as any cast is consistent with other casts in this file but hides potential issues if the message structure changes. Consider using next-intl's typed message access or at least adding a brief comment noting the expected shape.

---

137-148: Extract IIFE into a variable for readability.

The immediately-invoked function expression in JSX is harder to scan. Extracting the description resolution above the return statement would simplify the template.

♻️ Suggested refactor

+  const description =
+    (productDescriptions[slug] as string) || product.description;
+
   return (
     <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       ...
-          {(() => {
-            const desc =
-              (productDescriptions[slug] as string) || product.description;
-            if (!desc) return null;
-            return (
-              <div className="text-muted-foreground mt-6 space-y-2">
-                {desc.split('\n').map((line: string, i: number) => (
-                  <p key={i}>{line}</p>
-                ))}
-              </div>
-            );
-          })()}
+          {description && (
+            <div className="text-muted-foreground mt-6 space-y-2">
+              {description.split('\n').map((line: string, i: number) => (
+                <p key={i}>{line}</p>
+              ))}
+            </div>
+          )}

---

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