refactor(leaderboard): redesign UI, remove tabs & implement i18n

Author: AlinaRyabova

frontend/components/leaderboard/LeaderboardClient.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { useState } from 'react';
-import { LeaderboardTabs } from './LeaderboardTabs';
+import { useTranslations } from 'next-intl';
 import { LeaderboardPodium } from './LeaderboardPodium';
 import { LeaderboardTable } from './LeaderboardTable';
 import { User } from './types';
@@ -13,7 +12,7 @@ interface LeaderboardClientProps {
 export default function LeaderboardClient({
   initialUsers,
 }: LeaderboardClientProps) {
-  const [activeTab, setActiveTab] = useState('Overall');
+  const t = useTranslations('leaderboard');
 
   const usersWithPoints = initialUsers.filter(user => user.points > 0);
   const hasResults = usersWithPoints.length > 0;
@@ -37,7 +36,7 @@ export default function LeaderboardClient({
       </div>
 
       <div className="relative max-w-4xl mx-auto px-4 py-12 flex flex-col items-center z-10">
-        <header className="text-center mb-12 animate-in fade-in slide-in-from-top-4 duration-700">
+        <header className="text-center mb-10 animate-in fade-in slide-in-from-top-4 duration-700">
           <div className="inline-flex items-center justify-center p-3 mb-6 rounded-full bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm shadow-sm ring-1 ring-slate-200/50 dark:ring-slate-700/50">
             <span className="text-2xl mr-2" role="img" aria-label="Trophy">
               🏆
@@ -46,40 +45,35 @@ export default function LeaderboardClient({
               Champions Arena
             </span>
           </div>
-          <h1 className="text-4xl md:text-6xl font-extrabold mb-4 tracking-tight text-slate-900 dark:text-white drop-shadow-sm">
-            Community{' '}
+
+          <h1 className="text-5xl md:text-7xl font-black mb-6 tracking-tighter drop-shadow-sm">
             <span className="bg-gradient-to-r from-sky-500 via-indigo-500 to-pink-500 bg-clip-text text-transparent">
-              Leaderboard
+              {t('title')}
             </span>
           </h1>
-          <p className="text-slate-600 dark:text-slate-400 font-medium text-lg">
-            Top performers of the community.
+
+          <p className="text-slate-600 dark:text-slate-400 font-medium text-lg max-w-md mx-auto leading-relaxed">
+            {t('subtitle')}
           </p>
         </header>
 
-        <div className="mb-10 w-full flex justify-center">
-          <LeaderboardTabs activeTab={activeTab} onTabChange={setActiveTab} />
-        </div>
-
-        <section
-          className="w-full flex flex-col items-center"
-          role="tabpanel"
-          id="leaderboard-panel"
-          aria-label={`Results for ${activeTab}`}
-        >
-          <div className="w-full mb-12">
+        <div className="w-full flex flex-col items-center">
+          <div className="w-full mb-16">
             {hasResults ? (
               <LeaderboardPodium topThree={topThree} />
             ) : (
               <div className="text-center py-16" role="status">
-                <p className="text-6xl mb-4" aria-hidden="true">
+                <p
+                  className="text-6xl mb-4 grayscale opacity-50"
+                  aria-hidden="true"
+                >
                   🏆
                 </p>
                 <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2">
-                  No results yet
+                  {t('noResults')}
                 </h2>
                 <p className="text-slate-600 dark:text-slate-400">
-                  Be the first to complete a quiz and claim the top spot!
+                  {t('beFirst')}
                 </p>
               </div>
             )}
@@ -88,7 +82,7 @@ export default function LeaderboardClient({
           <div className="w-full animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
             {hasResults && <LeaderboardTable users={otherUsers} />}
           </div>
-        </section>
+        </div>
       </div>
     </div>
   );

frontend/components/leaderboard/LeaderboardPodium.tsx

@@ -8,7 +8,7 @@ import { User } from './types';
 export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
   return (
     <ol
-      className="flex items-end justify-center gap-4 md:gap-8 pb-4 pt-8 min-h-[350px] list-none m-0 p-0"
+      className="flex items-end justify-center gap-2 md:gap-8 pb-4 pt-16 min-h-[340px] list-none m-0 p-0"
       aria-label="Top 3 Leaders"
     >
       {topThree.map(user => {
@@ -21,35 +21,32 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
           <li
             key={user.id}
             className={cn(
-              'flex flex-col items-center transition-all duration-500 relative',
-              isFirst ? 'order-2 z-10 -mt-8' : 'z-0',
+              'flex flex-col items-center transition-all duration-500 relative z-0',
+              isFirst ? 'order-2 z-10 -mt-8 md:-mt-12' : '',
               isSecond ? 'order-1' : '',
               isThird ? 'order-3' : ''
             )}
           >
-            <div className="flex flex-col items-center">
-              <div className="relative mb-4 group cursor-pointer">
+            <div className="flex flex-col items-center group">
+              <div className="relative mb-3 md:mb-5 transition-transform duration-300 group-hover:scale-105">
                 {isFirst && (
                   <Crown
-                    className="absolute -top-12 left-1/2 -translate-x-1/2 w-10 h-10 text-yellow-400 animate-bounce drop-shadow-lg"
+                    className="absolute -top-10 md:-top-12 left-1/2 -translate-x-1/2 w-10 h-10 md:w-12 md:h-12 text-yellow-400 animate-bounce drop-shadow-[0_0_15px_rgba(250,204,21,0.5)]"
                     aria-hidden="true"
                   />
                 )}
+
                 <div
                   className={cn(
-                    'relative rounded-full p-1 transition-transform duration-300 group-hover:scale-105',
+                    'relative rounded-full p-[3px] shadow-2xl',
                     isFirst
-                      ? 'bg-gradient-to-tr from-yellow-300 via-yellow-100 to-yellow-500 shadow-yellow-500/50 shadow-lg'
-                      : '',
-                    isSecond
-                      ? 'bg-gradient-to-tr from-slate-300 via-slate-100 to-slate-400 shadow-slate-400/50 shadow-md'
-                      : '',
-                    isThird
-                      ? 'bg-gradient-to-tr from-orange-300 via-orange-100 to-orange-400 shadow-orange-400/50 shadow-md'
-                      : ''
+                      ? 'bg-gradient-to-tr from-yellow-300 via-yellow-100 to-yellow-500'
+                      : isSecond
+                        ? 'bg-gradient-to-tr from-slate-300 via-slate-100 to-slate-400'
+                        : 'bg-gradient-to-tr from-orange-300 via-orange-100 to-orange-400'
                   )}
                 >
-                  <div className="relative w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden border-2 border-white dark:border-slate-800 bg-slate-200 dark:bg-slate-800">
+                  <div className="relative w-16 h-16 md:w-24 md:h-24 rounded-full overflow-hidden border-4 border-white dark:border-slate-900 bg-slate-200">
                     <Image
                       src={user.avatar}
                       alt={`${user.username}'s avatar`}
@@ -61,7 +58,7 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
 
                 <div
                   className={cn(
-                    'absolute -bottom-3 left-1/2 -translate-x-1/2 flex items-center justify-center w-8 h-8 rounded-full font-bold border-2 border-white dark:border-slate-900 shadow-md',
+                    'absolute -bottom-3 left-1/2 -translate-x-1/2 flex items-center justify-center w-7 h-7 md:w-9 md:h-9 rounded-full font-bold text-xs md:text-sm border-[3px] border-white dark:border-slate-900 shadow-lg',
                     isFirst
                       ? 'bg-yellow-500 text-white'
                       : isSecond
@@ -73,32 +70,28 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
                 </div>
               </div>
 
-              <div className="text-center mb-3">
-                <div className="font-bold text-slate-800 dark:text-slate-100 text-base mb-1 truncate max-w-[120px]">
+              <div className="text-center mb-3 md:mb-5">
+                <div className="font-bold text-slate-800 dark:text-slate-100 text-xs md:text-lg mb-1 truncate max-w-[85px] md:max-w-[140px]">
                   {user.username}
                 </div>
-                <div className="font-mono font-bold text-xl text-slate-900 dark:text-white tracking-tight">
-                  {user.points}{' '}
-                  <span className="text-xs font-normal text-slate-500">
-                    pts
-                  </span>
+                <div className="inline-block px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
+                  <div className="font-mono font-bold text-xs md:text-sm text-slate-700 dark:text-slate-300">
+                    {user.points} <span className="text-slate-400">pts</span>
+                  </div>
                 </div>
               </div>
 
               <div
                 aria-hidden="true"
                 className={cn(
-                  'w-24 md:w-36 rounded-t-2xl border-x border-t shadow-lg backdrop-blur-sm',
-                  'bg-gradient-to-b from-white/80 via-white/40 to-transparent dark:from-slate-800/80 dark:via-slate-800/40',
+                  'w-20 md:w-40 rounded-t-2xl backdrop-blur-xl transition-all duration-300',
+                  'border-t-2 border-x-2 border-white/60 dark:border-white/10',
+
                   isFirst
-                    ? 'h-40 border-yellow-400/30 dark:border-yellow-500/30'
-                    : '',
-                  isSecond
-                    ? 'h-24 border-slate-300/30 dark:border-slate-500/30'
-                    : '',
-                  isThird
-                    ? 'h-20 border-orange-300/30 dark:border-orange-500/30'
-                    : ''
+                    ? 'h-40 md:h-56 bg-gradient-to-b from-yellow-200/30 to-yellow-500/5 dark:from-yellow-400/20 dark:to-transparent shadow-[0_0_50px_-10px_rgba(234,179,8,0.4)]'
+                    : isSecond
+                      ? 'h-28 md:h-40 bg-gradient-to-b from-slate-200/30 to-slate-500/5 dark:from-slate-400/20 dark:to-transparent shadow-[0_0_40px_-10px_rgba(148,163,184,0.3)]'
+                      : 'h-20 md:h-28 bg-gradient-to-b from-orange-200/30 to-orange-500/5 dark:from-orange-400/20 dark:to-transparent shadow-[0_0_40px_-10px_rgba(251,146,60,0.3)]'
                 )}
               />
             </div>

frontend/components/leaderboard/LeaderboardTable.tsx

@@ -1,11 +1,14 @@
 'use client';
 
 import { TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { User } from './types';
 
 export function LeaderboardTable({ users }: { users: User[] }) {
+  const t = useTranslations('leaderboard');
+
   return (
-    <div className="w-full bg-white/70 dark:bg-slate-900/60 backdrop-blur-md rounded-2xl shadow-xl border border-slate-200/60 dark:border-slate-700/60 overflow-hidden">
+    <div className="w-full bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/50 dark:border-slate-700/50 overflow-hidden">
       <table className="w-full text-left border-collapse">
         <caption className="sr-only">
           Leaderboard ranking for other participants
@@ -15,57 +18,60 @@ export function LeaderboardTable({ users }: { users: User[] }) {
           <tr>
             <th
               scope="col"
-              className="px-6 py-4 text-center text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-[16%]"
+              className="px-6 py-5 text-center text-xs font-extrabold text-slate-400 dark:text-slate-500 uppercase tracking-widest w-[15%]"
             >
-              Rank
+              {t('rank')}
             </th>
             <th
               scope="col"
-              className="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-[58%]"
+              className="px-6 py-5 text-xs font-extrabold text-slate-400 dark:text-slate-500 uppercase tracking-widest w-[60%]"
             >
-              UserName
+              {t('user')}
             </th>
             <th
               scope="col"
-              className="px-6 py-4 text-right text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-[25%]"
+              className="px-6 py-5 text-right text-xs font-extrabold text-slate-400 dark:text-slate-500 uppercase tracking-widest w-[25%]"
             >
-              Points
+              {t('score')}
             </th>
           </tr>
         </thead>
 
-        <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+        <tbody className="divide-y divide-slate-100 dark:divide-slate-800/50">
           {users.map(user => (
             <tr
               key={user.id}
-              className="hover:bg-slate-50/80 dark:hover:bg-slate-800/60 transition-colors group"
+              className="group transition-colors hover:bg-white/80 dark:hover:bg-slate-800/80"
             >
-              <td className="px-6 py-4 text-center font-mono font-semibold text-slate-400 dark:text-slate-500 group-hover:text-slate-900 dark:group-hover:text-slate-200">
-                {user.rank}
+              <td className="px-6 py-4 text-center font-bold text-slate-500 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">
+                #{user.rank}
               </td>
 
               <td className="px-6 py-4">
                 <div className="flex items-center gap-4">
                   <div
-                    className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-sm font-bold text-slate-600 dark:text-slate-300 ring-2 ring-transparent group-hover:ring-slate-200 dark:group-hover:ring-slate-600 transition-all"
+                    className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 flex items-center justify-center text-sm font-bold text-slate-600 dark:text-slate-300 shadow-inner group-hover:scale-110 transition-transform duration-300"
                     aria-hidden="true"
                   >
-                    <span>{user.username.slice(0, 1).toUpperCase()}</span>
+                    {user.username.slice(0, 1).toUpperCase()}
                   </div>
+
                   <div className="flex flex-col">
-                    <span className="font-bold text-slate-700 dark:text-slate-200 text-sm group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                    <span className="font-bold text-slate-700 dark:text-slate-200 text-sm group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
                       {user.username}
                     </span>
-                    <span className="flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
+                    <span className="flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400 font-bold uppercase tracking-wide opacity-0 group-hover:opacity-100 transition-opacity">
                       <TrendingUp className="w-3 h-3" aria-hidden="true" />
-                      Rising
+                      {t('rising')}
                     </span>
                   </div>
                 </div>
               </td>
 
-              <td className="px-6 py-4 text-right font-mono font-bold text-slate-800 dark:text-slate-100">
-                {user.points.toLocaleString()}
+              <td className="px-6 py-4 text-right">
+                <span className="font-mono font-bold text-slate-800 dark:text-slate-100 group-hover:scale-105 inline-block transition-transform">
+                  {user.points}
+                </span>
               </td>
             </tr>
           ))}

frontend/components/leaderboard/LeaderboardTabs.tsx

@@ -280,5 +280,15 @@
     "policyLink": "Privacy Policy",
     "accept": "Accept Cookies",
     "decline": "Decline"
+  },
+  "leaderboard": {
+    "title": "Leaderboard",
+    "subtitle": "Top performers of all time. Compete, learn, and rise to the top!",
+    "noResults": "No results yet",
+    "beFirst": "Be the first to complete a quiz and claim the top spot!",
+    "rank": "Rank",
+    "user": "User",
+    "score": "Score",
+    "rising": "Rising"
   }
 }

frontend/messages/en.json

@@ -157,5 +157,15 @@
     "policyLink": "Politykę Prywatności",
     "accept": "Zaakceptuj",
     "decline": "Odrzuć"
+  },
+  "leaderboard": {
+    "title": "Ranking",
+    "subtitle": "Najlepsi uczestnicy wszech czasów. Rywalizuj, ucz się i zwyciężaj!",
+    "noResults": "Brak wyników",
+    "beFirst": "Bądź pierwszy, który ukończy quiz i zajmie pierwsze miejsce!",
+    "rank": "Miejsce",
+    "user": "Użytkownik",
+    "score": "Wynik",
+    "rising": "Wzrost"
   }
 }

frontend/messages/pl.json

@@ -280,5 +280,15 @@
     "policyLink": "Політику конфіденційності",
     "accept": "Прийняти",
     "decline": "Відхилити"
+  },
+  "leaderboard": {
+    "title": "Рейтинг",
+    "subtitle": "Найкращі учасники за весь час. Змагайся, навчайся та перемагай!",
+    "noResults": "Поки що немає результатів",
+    "beFirst": "Стань першим, хто пройде квіз і займе топ-позицію!",
+    "rank": "Місце",
+    "user": "Користувач",
+    "score": "Бали",
+    "rising": "Зростання"
   }
 }