feat(leaderboard): finalize components and fix lint errors (#259)

Author: AlinaRyabova

frontend/components/dashboard/QuizSavedBanner.tsx

@@ -19,17 +19,18 @@ export function QuizSavedBanner() {
 
   useEffect(() => {
     const saved = sessionStorage.getItem('quiz_just_saved');
-    if (saved) {
-      try {
-        setInfo(JSON.parse(saved));
-        sessionStorage.removeItem('quiz_just_saved');
-      } catch (error) {
-        console.error(
-          'Failed to parse quiz_just_saved from sessionStorage:',
-          error
-        );
+    if (!saved) return;
+
+    try {
+      const parsed = JSON.parse(saved) as SavedQuizInfo;
+      const timer = setTimeout(() => {
+        setInfo(parsed);
         sessionStorage.removeItem('quiz_just_saved');
-      }
+      }, 0);
+      return () => clearTimeout(timer);
+    } catch (error) {
+      console.error('Failed to parse quiz info:', error);
+      sessionStorage.removeItem('quiz_just_saved');
     }
   }, []);
 

frontend/components/leaderboard/LeaderboardClient.tsx

@@ -7,7 +7,7 @@ import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground
 
 import { LeaderboardPodium } from './LeaderboardPodium';
 import { LeaderboardTable } from './LeaderboardTable';
-import { CurrentUser,User } from './types';
+import { CurrentUser, User } from './types';
 
 interface LeaderboardClientProps {
   initialUsers: User[];

frontend/components/leaderboard/LeaderboardTable.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { Medal,TrendingUp, Trophy } from 'lucide-react';
+import { Medal, TrendingUp, Trophy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
 import { cn } from '@/lib/utils';
 
-import { CurrentUser,User } from './types';
+import { CurrentUser, User } from './types';
 
 interface LeaderboardTableProps {
   users: User[];

frontend/components/shared/CookieBanner.tsx

@@ -2,45 +2,37 @@
 
 import { X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Link } from '@/i18n/routing';
 
 export function CookieBanner() {
   const t = useTranslations('CookieBanner');
-  const [isVisible, setIsVisible] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState<boolean | null>(null);
 
   useEffect(() => {
-    setIsMounted(true);
     const consent = localStorage.getItem('cookie-consent');
     if (!consent) {
       const timer = setTimeout(() => setIsVisible(true), 500);
       return () => clearTimeout(timer);
+    } else {
+      const timer = setTimeout(() => setIsVisible(false), 0);
+      return () => clearTimeout(timer);
     }
   }, []);
 
-  const handleAccept = () => {
-    try {
-      localStorage.setItem('cookie-consent', 'accepted');
-    } catch (error) {
-      console.error('Failed to save cookie consent:', error);
-    }
-    setIsVisible(false);
-  };
+  if (isVisible === null || !isVisible) return null;
 
-  const handleDecline = () => {
+  const handleAction = (type: 'accepted' | 'declined') => {
     try {
-      localStorage.setItem('cookie-consent', 'declined');
+      localStorage.setItem('cookie-consent', type);
     } catch (error) {
       console.error('Failed to save cookie consent:', error);
     }
     setIsVisible(false);
   };
 
-  if (!isMounted || !isVisible) return null;
-
   return (
     <div className="animate-in slide-in-from-bottom-full fade-in fixed right-0 bottom-0 left-0 z-[100] p-4 duration-700 md:p-6">
       <div className="mx-auto max-w-4xl rounded-2xl border border-gray-200 bg-white/90 p-5 shadow-2xl backdrop-blur-md md:flex md:items-center md:justify-between md:gap-6 dark:border-gray-800 dark:bg-gray-900/90">
@@ -64,23 +56,23 @@ export function CookieBanner() {
           <Button
             variant="outline"
             size="sm"
-            onClick={handleDecline}
+            onClick={() => handleAction('declined')}
             className="w-full sm:w-auto"
           >
             {t('decline')}
           </Button>
           <Button
             variant="primary"
             size="sm"
-            onClick={handleAccept}
+            onClick={() => handleAction('accepted')}
             className="w-full shadow-lg shadow-blue-500/20 sm:w-auto"
           >
             {t('accept')}
           </Button>
         </div>
 
         <button
-          onClick={handleDecline}
+          onClick={() => handleAction('declined')}
           className="absolute top-2 right-2 rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 md:hidden dark:hover:bg-gray-800 dark:hover:text-gray-300"
           aria-label={t('decline')}
         >