feat: improve dashboard, stats, and header UI

Author: yevheniidatsenko

frontend/actions/notifications.ts

@@ -0,0 +1,96 @@
+'use server';
+
+import { desc, eq, and } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+
+import { db } from '@/db';
+import { notifications } from '@/db/schema/notifications';
+
+import { getCurrentUser } from '@/lib/auth';
+
+export async function getNotifications() {
+  const session = await getCurrentUser();
+  if (!session) return [];
+  
+  try {
+    const data = await db.query.notifications.findMany({
+      where: eq(notifications.userId, session.id),
+      orderBy: [desc(notifications.createdAt)],
+      limit: 20,
+    });
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch notifications:', error);
+    return [];
+  }
+}
+
+export async function markAsRead(notificationId: string) {
+  const session = await getCurrentUser();
+  if (!session || !notificationId) return { success: false };
+
+  try {
+    await db
+      .update(notifications)
+      .set({ isRead: true })
+      .where(
+        and(
+          eq(notifications.id, notificationId),
+          eq(notifications.userId, session.id)
+        )
+      );
+
+    revalidatePath('/', 'layout');
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to mark notification as read:', error);
+    return { success: false };
+  }
+}
+
+export async function markAllAsRead() {
+  const session = await getCurrentUser();
+  if (!session) return { success: false };
+
+  try {
+    await db
+      .update(notifications)
+      .set({ isRead: true })
+      .where(and(eq(notifications.userId, session.id), eq(notifications.isRead, false)));
+
+    revalidatePath('/', 'layout');
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to mark all notifications as read:', error);
+    return { success: false };
+  }
+}
+
+export async function createNotification(data: {
+  userId: string;
+  type: string;
+  title: string;
+  message: string;
+  metadata?: any;
+}) {
+  if (!data.userId) return null;
+
+  try {
+    const [result] = await db
+      .insert(notifications)
+      .values({
+        userId: data.userId,
+        type: data.type,
+        title: data.title,
+        message: data.message,
+        metadata: data.metadata || null,
+      })
+      .returning();
+
+    revalidatePath('/', 'layout');
+    return result;
+  } catch (error) {
+    console.error('Failed to create notification:', error);
+    return null;
+  }
+}

frontend/actions/quiz.ts

@@ -11,6 +11,9 @@ import {
   quizQuestions,
 } from '@/db/schema/quiz';
 import { getCurrentUser } from '@/lib/auth';
+import { ACHIEVEMENTS, computeAchievements } from '@/lib/achievements';
+import { getUserStatsForAchievements } from '@/lib/user-stats';
+import { createNotification } from './notifications';
 
 export interface UserAnswer {
   questionId: string;
@@ -88,6 +91,16 @@ export async function submitQuizAttempt(
       return { success: false, error: 'User mismatch' };
     }
 
+    // Capture user achievements state BEFORE saving this attempt
+    const statsBefore = await getUserStatsForAchievements(session.id);
+    const earnedBefore = new Set(
+      statsBefore
+        ? computeAchievements(statsBefore)
+            .filter(a => a.earned)
+            .map(a => a.id)
+        : []
+    );
+
     if (!quizId || !Array.isArray(answers) || answers.length === 0) {
       return {
         success: false,
@@ -213,6 +226,25 @@ export async function submitQuizAttempt(
       integrityScore,
     });
 
+    // Capture user achievements state AFTER saving this attempt
+    const statsAfter = await getUserStatsForAchievements(session.id);
+    if (statsAfter) {
+      const earnedAfter = computeAchievements(statsAfter).filter(a => a.earned);
+      const newlyEarned = earnedAfter.filter(a => !earnedBefore.has(a.id));
+
+      // Trigger notifications for any newly earned achievements
+      for (const achievement of newlyEarned) {
+        // Find full object to get the fancy translated string (if needed) or just generic name
+        await createNotification({
+          userId: session.id,
+          type: 'ACHIEVEMENT',
+          title: 'Achievement Unlocked!',
+          message: `You just earned the ${achievement.id} badge!`,
+          metadata: { badgeId: achievement.id, icon: achievement.icon },
+        });
+      }
+    }
+
     return {
       success: true,
       attemptId: attempt.id,

frontend/app/[locale]/dashboard/page.tsx

@@ -14,10 +14,9 @@ import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground
 import { getUserLastAttemptPerQuiz, getUserQuizStats } from '@/db/queries/quizzes/quiz';
 import { getUserProfile, getUserGlobalRank } from '@/db/queries/users';
 import { redirect } from '@/i18n/routing';
-import { getSponsors, getAllSponsors } from '@/lib/about/github-sponsors';
 import { getCurrentUser } from '@/lib/auth';
 import { computeAchievements } from '@/lib/achievements';
-import { checkHasStarredRepo, resolveGitHubLogin } from '@/lib/github-stars';
+import { getUserStatsForAchievements } from '@/lib/user-stats';
 
 export async function generateMetadata({
   params,
@@ -53,59 +52,16 @@ export default async function DashboardPage({
 
   const t = await getTranslations('dashboard');
 
-  // Active sponsors — used for the sponsor badge / button display in the UI
-  const sponsors = await getSponsors();
-  // All-time sponsors (active + past) — used for the Supporter achievement check
-  const allSponsors = await getAllSponsors();
-
-  const userEmail = user.email.toLowerCase();
-  const userName = (user.name ?? '').toLowerCase();
-  const userImage = user.image ?? '';
-
-  function findSponsor(list: typeof sponsors) {
-    return list.find(s => {
-      if (s.email && s.email.toLowerCase() === userEmail) return true;
-      if (userName && s.login && s.login.toLowerCase() === userName) return true;
-      if (userName && s.name && s.name.toLowerCase() === userName) return true;
-      if (
-        userImage &&
-        s.avatarUrl &&
-        s.avatarUrl.trim().length > 0 &&
-        userImage.includes(s.avatarUrl.split('?')[0])
-      ) return true;
-      return false;
-    });
-  }
-
-  const matchedSponsor    = findSponsor(sponsors);   // active — for UI display
-  const everSponsor       = findSponsor(allSponsors); // all-time — for achievements
-
-  // Determine the GitHub login to check against the stargazers list.
-  // Priority:
-  //   1. Matched sponsor login (most reliable — org PAT already resolved it)
-  //   2. For GitHub-OAuth users: resolve login from numeric providerId
-  //   3. user.name as last resort (may be a display name, not a login!)
-  let githubLogin = matchedSponsor?.login || '';
-  if (!githubLogin && user.provider === 'github' && user.providerId) {
-    githubLogin = (await resolveGitHubLogin(user.providerId)) ?? user.name ?? '';
-  } else if (!githubLogin) {
-    githubLogin = user.name ?? '';
-  }
-
-  const hasStarredRepo = githubLogin
-    ? await checkHasStarredRepo(githubLogin)
-    : false;
-
   const attempts = await getUserQuizStats(session.id);
   const lastAttempts = await getUserLastAttemptPerQuiz(session.id, locale);
 
   const totalAttempts = attempts.length;
 
   const averageScore =
-    totalAttempts > 0
+    lastAttempts.length > 0
       ? Math.round(
-          attempts.reduce((acc, curr) => acc + Number(curr.percentage), 0) /
-            totalAttempts
+          lastAttempts.reduce((acc, curr) => acc + Number(curr.percentage), 0) /
+            lastAttempts.length
         )
       : 0;
 
@@ -184,33 +140,16 @@ export default async function DashboardPage({
     trendPercentage,
   };
 
-  const perfectScores = attempts.filter((a) => Number(a.percentage) === 100).length;
-  const highScores = attempts.filter((a) => Number(a.percentage) >= 90).length;
-  const uniqueQuizzes = lastAttempts.length;
-
-  // Night Owl: any attempt completed between 00:00 and 05:00 local time
-  const hasNightOwl = attempts.some((a) => {
-    if (!a.completedAt) return false;
-    const hour = new Date(a.completedAt).getHours();
-    return hour >= 0 && hour < 5;
-  });
+  const userStats = await getUserStatsForAchievements(session.id);
+  const achievements = userStats ? computeAchievements(userStats) : [];
 
-  const achievements = computeAchievements({
-    totalAttempts,
-    averageScore,
-    perfectScores,
-    highScores,
-    isSponsor: !!everSponsor,
-    uniqueQuizzes,
-    totalPoints: user.points,
-    topLeaderboard: false,
-    hasStarredRepo,
-    sponsorCount: matchedSponsor ? 1 : 0, // TODO: wire to actual sponsorship history count
-    hasNightOwl,
-  });
+  const isMatchedSponsor = userStats ? userStats.sponsorCount > 0 : false;
 
   const outlineBtnStyles =
-    'inline-flex items-center justify-center rounded-full border border-gray-200 dark:border-white/10 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm px-6 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 transition-colors hover:bg-white hover:text-(--accent-primary) dark:hover:bg-neutral-800 dark:hover:text-(--accent-primary)';
+    'inline-flex items-center justify-center rounded-full border border-gray-200/50 bg-white/10 px-6 py-2.5 text-sm font-semibold tracking-wide text-gray-700 backdrop-blur-md transition-all hover:-translate-y-0.5 hover:bg-white/20 hover:shadow-md hover:border-gray-300 dark:border-white/10 dark:bg-neutral-900/40 dark:text-gray-200 dark:hover:bg-neutral-800/80 dark:hover:border-white/20';
+
+  const sponsorBtnStyles = 
+    'group relative inline-flex items-center justify-center gap-2 rounded-full border border-(--accent-primary)/30 bg-(--accent-primary)/10 px-6 py-2.5 text-sm font-semibold tracking-wide text-(--accent-primary) backdrop-blur-md transition-all hover:-translate-y-0.5 hover:bg-(--accent-primary)/20 hover:shadow-[0_4px_12px_rgba(var(--accent-primary-rgb),0.2)] hover:border-(--accent-primary)/50 dark:border-(--accent-primary)/20 dark:bg-(--accent-primary)/5 dark:hover:bg-(--accent-primary)/20 dark:hover:border-(--accent-primary)/40 dark:hover:shadow-[0_4px_15px_rgba(var(--accent-primary-rgb),0.3)] overflow-hidden';
 
   return (
     <div className="min-h-screen">
@@ -234,17 +173,22 @@ export default async function DashboardPage({
                 href="#feedback"
                 className={`group flex items-center gap-2 ${outlineBtnStyles}`}
               >
-                <MessageSquare className="h-4 w-4 transition-transform group-hover:-translate-y-0.5" />
+                <MessageSquare className="h-4 w-4 transition-transform group-hover:-translate-y-0.5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white" />
                 {t('supportLink')}
               </a>
               <a
                 href="https://github.com/sponsors/DevLoversTeam"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group inline-flex items-center justify-center gap-2 rounded-full border border-(--accent-primary) bg-(--accent-primary)/10 px-6 py-2 text-sm font-medium text-(--accent-primary) transition-colors hover:bg-(--accent-primary) hover:text-white dark:border-(--accent-primary)/50 dark:bg-(--accent-primary)/10 dark:text-(--accent-primary) dark:hover:bg-(--accent-primary) dark:hover:text-white"
+                className={sponsorBtnStyles}
               >
-                <Heart className="h-4 w-4 transition-transform group-hover:scale-110" />
-                {!!matchedSponsor ? t('profile.supportAgain') : t('profile.becomeSponsor')}
+                {/* Subtle gradient glow background effect */}
+                <div className="absolute inset-0 z-0 bg-linear-to-r from-transparent via-(--accent-primary)/10 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                
+                <span className="relative z-10 flex items-center gap-2">
+                  <Heart className="h-4 w-4 transition-transform group-hover:scale-110 group-hover:fill-(--accent-primary)/20" />
+                  {isMatchedSponsor ? t('profile.supportAgain') : t('profile.becomeSponsor')}
+                </span>
               </a>
             </div>
           </header>
@@ -253,12 +197,12 @@ export default async function DashboardPage({
             <ProfileCard
               user={userForDisplay}
               locale={locale}
-              isSponsor={!!matchedSponsor}
+              isSponsor={isMatchedSponsor}
               totalAttempts={totalAttempts}
               globalRank={globalRank}
             />
             <div className="grid gap-8 lg:grid-cols-2">
-              <StatsCard stats={stats} attempts={attempts} />
+              <StatsCard stats={stats} attempts={lastAttempts} />
               <ActivityHeatmapCard attempts={attempts} locale={locale} currentStreak={currentStreak} />
             </div>
           </div>

frontend/components/auth/logoutButton.tsx

@@ -37,31 +37,12 @@ export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
     <button
       type="button"
       onClick={handleLogout}
-      className="group bg-secondary text-secondary-foreground relative inline-flex w-fit items-center gap-2 overflow-hidden rounded-lg px-4 py-2 text-sm font-medium transition-all duration-500 hover:text-white active:text-white"
+      className="group flex w-full items-center justify-between rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:bg-(--accent-primary)/10 hover:text-(--accent-primary) active:bg-(--accent-primary)/20"
     >
-      <span
-        className="absolute inset-0 opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100 group-active:opacity-100"
-        style={{
-          background:
-            'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
-        }}
-        aria-hidden="true"
-      />
-
-      <span
-        className="absolute inset-0 translate-x-[-100%] transition-transform duration-1000 ease-in-out group-hover:translate-x-[100%] group-active:translate-x-[100%]"
-        style={{
-          background:
-            'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)',
-          transform: 'skewX(-20deg)',
-        }}
-        aria-hidden="true"
-      />
-
-      <span className="relative z-10 flex items-center gap-2">
-        <LogOut className="h-4 w-4 transition-transform duration-300 group-hover:scale-110 group-active:scale-110" />
-        {t('logout')}
-      </span>
+      <div className="flex items-center gap-2">
+        <LogOut className="h-4 w-4" />
+        <span>{t('logout')}</span>
+      </div>
     </button>
   );
 }

frontend/components/dashboard/AchievementBadge.tsx

@@ -20,6 +20,12 @@ import {
   Moon,
   Shield,
   Waves,
+  Meteor,
+  Sparkle,
+  GraduationCap,
+  Atom,
+  Sun,
+  Anchor,
 } from '@phosphor-icons/react';
 import { useTranslations } from 'next-intl';
 import { useState, useEffect } from 'react';
@@ -45,6 +51,12 @@ const ICON_MAP: Record<AchievementIconName, React.ElementType> = {
   Moon,
   Shield,
   Waves,
+  Meteor,
+  Sparkle,
+  GraduationCap,
+  Atom,
+  Sun,
+  Anchor,
 };
 
 interface AchievementBadgeProps {

frontend/components/dashboard/ActivityHeatmapCard.tsx

@@ -376,7 +376,7 @@ export function ActivityHeatmapCard({ attempts, locale, currentStreak }: Activit
             <div className="w-full min-w-max pb-1">
               <svg width={svgWidth} height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`} className="block">
             <defs>
-              <filter id="neonGlow" x="-50%" y="-50%" width="200%" height="200%">
+              <filter id="neonGlow" x="-200%" y="-200%" width="500%" height="500%">
                 <feGaussianBlur stdDeviation="3" result="blur" />
                 <feMerge>
                   <feMergeNode in="blur" />

frontend/components/dashboard/FeedbackForm.tsx

@@ -67,12 +67,13 @@ export function FeedbackForm({ userName, userEmail }: FeedbackFormProps) {
   `;
 
   const inputStyles =
-    'w-full rounded-xl border border-gray-200 dark:border-white/10 bg-white/50 dark:bg-neutral-800/50 px-4 py-3 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 outline-none transition-colors focus:border-(--accent-primary) focus:ring-1 focus:ring-(--accent-primary)';
+    'w-full rounded-xl border border-gray-200/50 bg-white/20 dark:border-white/10 dark:bg-neutral-800/40 px-4 py-3 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 outline-none backdrop-blur-md transition-all hover:bg-white/40 dark:hover:bg-neutral-800/60 focus:border-(--accent-primary)/50 focus:bg-white/60 dark:focus:bg-neutral-800/80 focus:ring-1 focus:ring-(--accent-primary)';
 
   const primaryBtnStyles = `
     group relative inline-flex items-center justify-center gap-2 rounded-full
     px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white
-    bg-(--accent-primary) hover:bg-(--accent-hover)
+    bg-(--accent-primary) hover:bg-(--accent-hover) hover:shadow-[0_4px_12px_rgba(var(--accent-primary-rgb),0.3)]
+    transition-all hover:-translate-y-0.5
     disabled:opacity-75
   `;