(SP: 2) [Frontend] Quiz UX improvements: violations counter, breadcrumbs, status badges (#320)

* feat(quiz): add guest warning before start and bot protection

Guest warning: show login/signup/continue buttons for unauthenticated
users on quiz rules screen before starting.

Bot protection: multi-attempt verification via Redis - each question
can only be verified once per user per attempt. Keys use dynamic TTL
matching quiz time limit and are cleared on retake.

Additional fixes:
- Footer flash on quiz navigation (added loading.tsx, eliminated redirect)
- Renamed QaLoader to Loader for reuse across pages
- React compiler purity errors (crypto.getRandomValues in handlers)
- Start button disabled after retake (isStarting not reset)

* refactor(quiz): PR review feedback

- Extract shared resolveRequestIdentifier() helper to eliminate
  duplicated auth/IP resolution logic in route.ts and actions/quiz.ts
- Return null instead of 'unknown' when identifier unresolvable,
  skip verification tracking for unidentifiable users
- Cap Redis TTL with MAX_TTL (3600s) to prevent client-supplied
  timeLimitSeconds from persisting keys indefinitely
- Add locale prefix to returnTo paths in guest warning links
- Replace nested Button inside Link with styled Link to fix
  invalid HTML (interactive element nesting)

* fix(quiz): fall through to IP when auth cookie is expired/invalid

* feat(quiz): add quiz results dashboard and review page

- Add quiz history section to dashboard with last attempt per quiz
- Add review page showing incorrect questions with explanations
- Add collapsible cards with expand/collapse all toggle
- Add "Review Mistakes" button on quiz result screen
- Add category icons to quiz page and review page headers
- Add BookOpen icon to explanation block in QuizQuestion
- Update guest message to mention error review benefit
- Add i18n translations (en/uk/pl) for all new features

* fix(quiz): scroll to next button on answer reveal, scope review cache by userId

* fix(quiz): restore type imports and userId cache key after merge conflict

* fix: restore type imports, sync @swc/helpers, fix indentation after merge

* feat(quiz): add violations counter UI, fix disqualification threshold

- Add ViolationsCounter component with color escalation (green/yellow/red)
- Sticky top bar keeps counter visible on scroll (mobile/tablet)
- Add i18n counter keys for en/uk/pl with ICU plural forms
- Fix threshold bug: violations warning now triggers at 4+ (was 3+)
  to match actual integrity score calculation (100 - violations * 10 < 70)

* fix(quiz): fix points mismatch between leaderboard and dashboard

Dashboard showed raw pointsEarned from last quiz_attempt, while
leaderboard summed improvement deltas from point_transactions.
Additionally, orphaned transactions from re-seeded quizzes inflated
leaderboard totals (12 rows, 83 ghost points cleaned up in DB).

- Dashboard query now joins point_transactions to show actual awarded
  points per quiz instead of raw attempt score
- Leaderboard query filters out orphaned transactions where the
  source attempt no longer exists in quiz_attempts

* OBfix(quiz): fix points mismatch, consistent status badges, mobile UX

Dashboard showed raw pointsEarned from last attempt while leaderboard
summed improvement deltas from point_transactions. Orphaned transactions
from re-seeded quizzes inflated leaderboard totals (cleaned up in DB).

- Dashboard query joins point_transactions for actual awarded points
- Leaderboard query filters orphaned transactions (source_id not in quiz_attempts)
- Quiz cards use 3-level badges (Mastered/Review/Study) matching dashboard
- Mobile quiz results show dash for zero points, added chevron indicator

* fix(quiz): add breadcrumbs to review page, fix recommendation tautology

Author: LesiaUKR

frontend/app/[locale]/dashboard/quiz-review/[attemptId]/page.tsx

@@ -1,15 +1,14 @@
-import Image from 'next/image';
-import { categoryTabStyles } from '@/data/categoryStyles';
-
 import { ArrowLeft, CheckCircle, RotateCcw, SearchX } from 'lucide-react';
+import Image from 'next/image';
 import { getTranslations } from 'next-intl/server';
-import { cn } from '@/lib/utils';
 
 import { QuizReviewList } from '@/components/dashboard/QuizReviewList';
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
+import { categoryTabStyles } from '@/data/categoryStyles';
 import { getAttemptReviewDetails } from '@/db/queries/quiz';
 import { Link, redirect } from '@/i18n/routing';
 import { getCurrentUser } from '@/lib/auth';
+import { cn } from '@/lib/utils';
 
 export async function generateMetadata({
   params,
@@ -38,6 +37,7 @@ export default async function QuizReviewPage({
   }
 
   const t = await getTranslations('dashboard.quizReview');
+  const tNav = await getTranslations('navigation');
   const review = await getAttemptReviewDetails(attemptId, session.id, locale);
 
   const cardStyles =
@@ -109,6 +109,21 @@ export default async function QuizReviewPage({
   return (
     <DynamicGridBackground className="min-h-screen bg-gray-50 py-10 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-4xl px-4 sm:px-6">
+        <nav className="mb-4" aria-label="Breadcrumb">
+          <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <li className="flex items-center gap-2">
+              <Link href="/dashboard" className="underline-offset-4 transition hover:text-[var(--accent-primary)] hover:underline">
+                {tNav('dashboard')}
+              </Link>
+              <span>&gt;</span>
+            </li>
+            <li>
+              <span className="text-[var(--accent-primary)]" aria-current="page">
+                {review.quizTitle ?? review.quizSlug}
+              </span>
+            </li>
+          </ol>
+        </nav>
         <header className="mb-8">
           <div className="flex items-center gap-3">
           {categoryStyle && (

frontend/components/dashboard/QuizResultRow.tsx

@@ -2,11 +2,11 @@
 
 import { ChevronRight, Shield } from 'lucide-react';
 import Image from 'next/image';
-import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 
 import { Badge, type BadgeProps } from '@/components/ui/badge';
-import { categoryTabStyles, type CategoryTabStyle } from '@/data/categoryStyles';
+import { type CategoryTabStyle,categoryTabStyles } from '@/data/categoryStyles';
 import type { UserLastAttempt } from '@/types/quiz';
 
 interface QuizResultRowProps {
@@ -96,7 +96,7 @@ export function QuizResultRow({ attempt, locale }: QuizResultRowProps) {
       onKeyDown={isMastered ? undefined : (e) => { if (e.key === 'Enter') handleClick(); }}
     >
       {/* Mobile layout: left content + right badge */}
-      <div className="flex items-center gap-3 md:hidden">
+      <div className="flex items-center gap-3 sm:grid sm:grid-cols-[minmax(0,2fr)_1fr_auto_20px] md:hidden">
         <div className="min-w-0 flex-1 space-y-1.5">
           <div className="flex items-center gap-2.5">
             {catStyle && (
@@ -120,33 +120,36 @@ export function QuizResultRow({ attempt, locale }: QuizResultRowProps) {
             <span className="sm:hidden tabular-nums">{attempt.score}/{attempt.totalQuestions}</span>
             <span className="sm:hidden text-gray-200 dark:text-gray-700">&middot;</span>
             <span className="sm:hidden tabular-nums">{Math.round(pct)}%</span>
-            {attempt.pointsEarned > 0 && (
-              <>
-                <span className="sm:hidden text-gray-200 dark:text-gray-700">&middot;</span>
-                <span className="sm:hidden font-medium text-emerald-600 dark:text-emerald-400">
-                  +{attempt.pointsEarned}
-                </span>
-              </>
+            <span className="sm:hidden text-gray-200 dark:text-gray-700">&middot;</span>
+            {attempt.pointsEarned > 0 ? (
+              <span className="sm:hidden font-medium text-emerald-600 dark:text-emerald-400">
+                +{attempt.pointsEarned}
+              </span>
+            ) : (
+              <span className="sm:hidden text-gray-300 dark:text-gray-600">&mdash;</span>
             )}
           </div>
         </div>
         <div className="hidden flex-1 items-center justify-center gap-2 text-xs text-gray-400 sm:flex md:hidden">
           <span className="tabular-nums">{attempt.score}/{attempt.totalQuestions}</span>
           <span className="text-gray-200 dark:text-gray-700">&middot;</span>
           <span className="tabular-nums">{Math.round(pct)}%</span>
-          {attempt.pointsEarned > 0 && (
-            <>
-              <span className="text-gray-200 dark:text-gray-700">&middot;</span>
-              <span className="font-medium text-emerald-600 dark:text-emerald-400">
-                +{attempt.pointsEarned}
-              </span>
-            </>
+          <span className="text-gray-200 dark:text-gray-700">&middot;</span>
+          {attempt.pointsEarned > 0 ? (
+            <span className="font-medium text-emerald-600 dark:text-emerald-400">
+              +{attempt.pointsEarned}
+            </span>
+          ) : (
+            <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
           )}
         </div>
         <Badge variant={status.variant} className="shrink-0 gap-1.5 rounded-full">
           <span className={`h-1.5 w-1.5 rounded-full ${status.dotColor}`} />
           {t(status.label)}
         </Badge>
+                {!isMastered && (
+          <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:text-[var(--accent-primary)] dark:text-gray-600" />
+        )}
       </div>
 
       {/* Desktop layout — CSS Grid */}

frontend/components/quiz/QuizCard.tsx

@@ -44,6 +44,18 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
       ? Math.round((userProgress.bestScore / userProgress.totalQuestions) * 100)
       : 0;
 
+  const getStatusBadge = () => {
+    if (!userProgress) return null;
+    if (percentage === 100)
+      return { variant: 'success' as const, label: t('mastered'), dot: 'bg-emerald-500' };
+    if (percentage >= 70)
+      return { variant: 'warning' as const, label: t('needsReview'), dot: 'bg-amber-500' };
+    return { variant: 'danger' as const, label: t('study'), dot: 'bg-red-500' };
+  };
+
+  const statusBadge = getStatusBadge();
+
+
     const handleStart = () => {
     const seed = makeSeed(); // runs on click, not render
     router.push(`/quiz/${quiz.slug}?seed=${seed}`);
@@ -69,7 +81,12 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
           >
             {quiz.categoryName ?? t('uncategorized')}
           </Badge>
-          {userProgress && <Badge variant="success">{t('completed')}</Badge>}
+          {statusBadge && (
+          <Badge variant={statusBadge.variant} className="gap-1.5 rounded-full">
+            <span className={`h-1.5 w-1.5 rounded-full ${statusBadge.dot}`} />
+            {statusBadge.label}
+          </Badge>
+        )}
         </div>
         <h2 className="mb-2 text-xl font-semibold">
           {quiz.title ?? quiz.slug}

frontend/components/quiz/QuizContainer.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { ViolationsCounter } from '@/components/quiz/ViolationsCounter';
 import { Ban, FileText, TriangleAlert, UserRound } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
@@ -543,7 +544,8 @@ export function QuizContainer({
 
   return (
     <div className="no-select space-y-8">
-      <div className="flex justify-end">
+      <div className="sticky top-0 z-10 flex items-center justify-between bg-white/80 py-2 backdrop-blur-sm dark:bg-gray-950/80">
+        <ViolationsCounter count={violationsCount} />
         <Button
           variant="outline"
           size="sm"

frontend/components/quiz/QuizResult.tsx

@@ -129,7 +129,7 @@ export function QuizResult({
         </h3>
         <p className="text-gray-600 dark:text-gray-400">{motivation.message}</p>
       </div>
-      {violationsCount >= 3 && (
+      {violationsCount >= 4 && (
         <div className="rounded-xl border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-900/20">
           <p className="text-center font-medium text-orange-800 dark:text-orange-200">
             <TriangleAlert className="inline h-4 w-4" aria-hidden="true" />{' '}
@@ -154,7 +154,7 @@ export function QuizResult({
           >
             {pointsAwarded > 0
               ? t('pointsAwarded', { points: pointsAwarded })
-              : violationsCount >= 3
+              : violationsCount >= 4
                 ? t('disqualified')
                 : t('noPointsAwarded')}
           </p>

frontend/components/quiz/ViolationsCounter.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { ShieldAlert } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+import { cn } from '@/lib/utils';
+
+interface ViolationsCounterProps {
+  count: number;
+}
+
+export function ViolationsCounter({ count }: ViolationsCounterProps) {
+  const t = useTranslations('quiz.antiCheat');
+
+  const getColorClasses = () => {
+    if (count >= 4) {
+      return 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800';
+    }
+    if (count >= 1) {
+      return 'text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800';
+    }
+    return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800';
+  };
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-sm font-medium transition-colors',
+        getColorClasses(),
+        count >= 4 && 'animate-pulse'
+      )}
+    >
+      <ShieldAlert className="h-4 w-4" aria-hidden="true" />
+      <span className="sm:hidden">{count}</span>
+      <span className="hidden sm:inline">
+        {t('counter', { count })}
+      </span>
+    </div>
+  );
+}

frontend/db/queries/leaderboard.ts

@@ -1,11 +1,10 @@
-import { desc, eq, sql } from 'drizzle-orm';
+import { desc, sql } from 'drizzle-orm';
 import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { User } from '@/components/leaderboard/types';
 
 import { db } from '../index';
-import { pointTransactions } from '../schema/points';
 import { users } from '../schema/users';
 
 const getLeaderboardDataCached = unstable_cache(
@@ -15,12 +14,20 @@ const getLeaderboardDataCached = unstable_cache(
         id: users.id,
         username: users.name,
         avatar: users.image,
-        points: sql<number>`COALESCE(SUM(${pointTransactions.points}), 0)`,
+        points: sql<number>`COALESCE(pt_valid.total, 0)`,
       })
       .from(users)
-      .leftJoin(pointTransactions, eq(pointTransactions.userId, users.id))
-      .groupBy(users.id, users.name, users.image)
-      .orderBy(desc(sql`COALESCE(SUM(${pointTransactions.points}), 0)`))
+      .leftJoin(
+        sql`(
+          SELECT pt.user_id, SUM(pt.points)::int AS total
+          FROM point_transactions pt
+          WHERE pt.source = 'quiz'
+            AND (pt.source_id IS NULL OR pt.source_id IN (SELECT id FROM quiz_attempts))
+          GROUP BY pt.user_id
+        ) pt_valid`,
+        sql`pt_valid.user_id = ${users.id}`
+      )
+      .orderBy(desc(sql`COALESCE(pt_valid.total, 0)`))
       .limit(50);
 
     return dbUsers.map((u, index) => {

frontend/db/queries/quiz.ts

@@ -462,14 +462,20 @@ export async function getUserLastAttemptPerQuiz(
       qa.score,
       qa.total_questions AS "totalQuestions",
       qa.percentage,
-      qa.points_earned AS "pointsEarned",
+      COALESCE(pt_sum.total, 0)::int AS "pointsEarned",
       qa.integrity_score AS "integrityScore",
       qa.completed_at AS "completedAt"
     FROM quiz_attempts qa
     JOIN quizzes q ON q.id = qa.quiz_id
     LEFT JOIN quiz_translations qt ON qt.quiz_id = q.id AND qt.locale = ${locale}
     LEFT JOIN categories c ON c.id = q.category_id
     LEFT JOIN category_translations ct ON ct.category_id = c.id AND ct.locale = ${locale}
+    LEFT JOIN (
+      SELECT (metadata->>'quizId')::uuid AS quiz_id, SUM(points) AS total
+      FROM point_transactions
+      WHERE user_id = ${userId} AND source = 'quiz'
+      GROUP BY (metadata->>'quizId')::uuid
+    ) pt_sum ON pt_sum.quiz_id = qa.quiz_id
     WHERE qa.user_id = ${userId}
     ORDER BY qa.quiz_id, qa.completed_at DESC
   `);

frontend/messages/en.json

@@ -184,7 +184,7 @@
       "incorrect": "Incorrect",
       "explanationLabel": "Explanation:",
       "recommendation": {
-        "title": "Recommendation",
+        "title": "Tip",
         "description": "We recommend reviewing this topic after completing the quiz"
       },
       "loading": "Loading...",
@@ -239,7 +239,9 @@
     },
     "card": {
       "uncategorized": "Uncategorized",
-      "completed": "✓ Completed",
+      "mastered": "Mastered",
+      "needsReview": "Review",
+      "study": "Study",
       "questions": "questions",
       "min": "min",
       "best": "Best:",
@@ -262,7 +264,8 @@
       "copy": "Copying is not allowed during the quiz",
       "paste": "Pasting is not allowed during the quiz",
       "contextMenu": "Context menu is not allowed during the quiz",
-      "tabSwitch": "Tab switch detected"
+      "tabSwitch": "Tab switch detected",
+      "counter": "{count} {count, plural, one {violation} other {violations}}"
     }
   },
   "blog": {

frontend/messages/pl.json

@@ -184,7 +184,7 @@
       "incorrect": "Niepoprawnie",
       "explanationLabel": "Wyjaśnienie:",
       "recommendation": {
-        "title": "Rekomendacja",
+        "title": "Wskazówka",
         "description": "Zalecamy przejrzenie tego tematu po zakończeniu quizu"
       },
       "loading": "Ładowanie...",
@@ -239,7 +239,9 @@
     },
     "card": {
       "uncategorized": "Nieskategoryzowane",
-      "completed": "✓ Ukończono",
+      "mastered": "Opanowane",
+      "needsReview": "Powtórka",
+      "study": "Nauka",
       "questions": "pytań",
       "min": "min",
       "best": "Najlepszy:",
@@ -262,7 +264,8 @@
       "copy": "Kopiowanie jest zabronione podczas quizu",
       "paste": "Wklejanie jest zabronione podczas quizu",
       "contextMenu": "Menu kontekstowe jest zabronione podczas quizu",
-      "tabSwitch": "Wykryto przełączenie karty"
+      "tabSwitch": "Wykryto przełączenie karty",
+      "counter": "{count} {count, plural, one {naruszenie} few {naruszenia} other {naruszeń}}"
     }
   },
   "blog": {