Merge pull request #360 from DevLoversTeam/feat/header-translation

feat: header translations, dashboard UX polish & hydration fix

Author: ViktorSvertoka

frontend/actions/notifications.ts

@@ -1,11 +1,10 @@
 'use server';
 
-import { desc, eq, and } from 'drizzle-orm';
+import { and,desc, eq } 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() {

frontend/actions/quiz.ts

@@ -231,14 +231,15 @@ export async function submitQuizAttempt(
       const earnedAfter = computeAchievements(statsAfter).filter(a => a.earned);
       const newlyEarned = earnedAfter.filter(a => !earnedBefore.has(a.id));
 
-      // Trigger notifications for any newly earned achievements
+      // Trigger notifications for any newly earned achievements.
+      // title/message are stable English fallbacks; NotificationBell renders
+      // them dynamically in the viewer's locale using metadata.badgeId.
       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!`,
+          message: achievement.id,
           metadata: { badgeId: achievement.id, icon: achievement.icon },
         });
       }

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

@@ -17,8 +17,8 @@ import {
 } from '@/db/queries/quizzes/quiz';
 import { getUserGlobalRank, getUserProfile } from '@/db/queries/users';
 import { redirect } from '@/i18n/routing';
-import { getCurrentUser } from '@/lib/auth';
 import { computeAchievements } from '@/lib/achievements';
+import { getCurrentUser } from '@/lib/auth';
 import { getUserStatsForAchievements } from '@/lib/user-stats';
 
 export async function generateMetadata({
@@ -216,7 +216,7 @@ export default async function DashboardPage({
               totalAttempts={totalAttempts}
               globalRank={globalRank}
             />
-            <div className="grid gap-8 lg:grid-cols-2">
+            <div id="stats" className="grid gap-8 scroll-mt-8 lg:grid-cols-2">
               <StatsCard stats={stats} attempts={lastAttempts} />
               <ActivityHeatmapCard attempts={attempts} locale={locale} currentStreak={currentStreak} />
             </div>

frontend/app/[locale]/layout.tsx

@@ -10,6 +10,7 @@ import { AppChrome } from '@/components/header/AppChrome';
 import { MainSwitcher } from '@/components/header/MainSwitcher';
 import { CookieBanner } from '@/components/shared/CookieBanner';
 import Footer from '@/components/shared/Footer';
+import { ScrollWatcher } from '@/components/shared/ScrollWatcher';
 import { ThemeProvider } from '@/components/theme/ThemeProvider';
 import { locales } from '@/i18n/config';
 import { getCurrentUser } from '@/lib/auth';
@@ -78,6 +79,7 @@ export default async function LocaleLayout({
         <Footer />
         <Toaster position="top-right" richColors expand />
         <CookieBanner />
+        <ScrollWatcher />
       </ThemeProvider>
     </NextIntlClientProvider>
   );

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

@@ -70,10 +70,16 @@ export default async function LeaderboardPage() {
     // ── Inject star_gazer if user has starred the repo ─────────────────
     // Match by GitHub login (username) or by avatar URL base
     const avatarBase = user.avatar?.split('?')[0] ?? '';
+    const isGitHubAvatar = (() => {
+      try {
+        return new URL(avatarBase).hostname === 'avatars.githubusercontent.com';
+      } catch {
+        return false;
+      }
+    })();
     const hasStarred =
       stargazerLogins.has(nameLower) ||
-      (avatarBase.includes('avatars.githubusercontent.com') &&
-        stargazerAvatars.has(avatarBase));
+      (isGitHubAvatar && stargazerAvatars.has(avatarBase));
 
     if (hasStarred && !achievements.some(a => a.id === 'star_gazer')) {
       const def = ACHIEVEMENTS.find(a => a.id === 'star_gazer');

frontend/app/globals.css

@@ -116,8 +116,17 @@
   --sponsor-hover: #bf3989;
 }
 
+@property --scroll-thumb-alpha {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
 html {
   overflow-x: hidden;
+  --scroll-thumb-alpha: 0;
+
+  transition: --scroll-thumb-alpha 0.3s ease;
 }
 
 *::-webkit-scrollbar {
@@ -130,22 +139,37 @@ html {
 }
 
 *::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, var(--scroll-thumb-alpha));
   border-radius: 3px;
 }
 
-:is(.dark) *::-webkit-scrollbar-thumb,
-.dark::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
+html:is(.dark) *::-webkit-scrollbar-thumb,
+html .dark *::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, var(--scroll-thumb-alpha));
+}
+
+html.is-scrolling {
+  --scroll-thumb-alpha: 0.25;
+}
+
+html.is-scrolling:is(.dark),
+html.is-scrolling .dark {
+  --scroll-thumb-alpha: 0.2;
 }
 
 @supports (-moz-appearance: none) {
   * {
     scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.3s ease;
+  }
+
+  html.is-scrolling * {
     scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
   }
 
-  :is(.dark) * {
+  html.is-scrolling:is(.dark) *,
+  html.is-scrolling .dark * {
     scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
   }
 }
@@ -207,12 +231,10 @@ html {
 .qa-accordion-item {
   position: relative;
   overflow: hidden;
-  background-image: linear-gradient(
-    90deg,
-    transparent 0%,
-    transparent 54%,
-    var(--qa-accent-soft, rgba(161, 161, 170, 0.22)) 100%
-  );
+  background-image: linear-gradient(90deg,
+      transparent 0%,
+      transparent 54%,
+      var(--qa-accent-soft, rgba(161, 161, 170, 0.22)) 100%);
 }
 
 .qa-accordion-item:hover,
@@ -276,33 +298,30 @@ html {
 }
 
 @keyframes wave-clip {
+
   0%,
   100% {
-    clip-path: polygon(
-      0% 50%,
-      15% 48%,
-      32% 52%,
-      54% 60%,
-      70% 62%,
-      84% 60%,
-      100% 55%,
-      100% 100%,
-      0% 100%
-    );
+    clip-path: polygon(0% 50%,
+        15% 48%,
+        32% 52%,
+        54% 60%,
+        70% 62%,
+        84% 60%,
+        100% 55%,
+        100% 100%,
+        0% 100%);
   }
 
   50% {
-    clip-path: polygon(
-      0% 65%,
-      16% 70%,
-      34% 72%,
-      51% 68%,
-      67% 58%,
-      84% 52%,
-      100% 48%,
-      100% 100%,
-      0% 100%
-    );
+    clip-path: polygon(0% 65%,
+        16% 70%,
+        34% 72%,
+        51% 68%,
+        67% 58%,
+        84% 52%,
+        100% 48%,
+        100% 100%,
+        0% 100%);
   }
 }
 
@@ -322,8 +341,7 @@ html {
   }
 
   50% {
-    transform: translate(var(--card-x, 0), var(--card-y, 0)) scale(1.05)
-      rotate(calc(var(--card-rotate, 0deg) + var(--card-rotate-offset, 0deg)));
+    transform: translate(var(--card-x, 0), var(--card-y, 0)) scale(1.05) rotate(calc(var(--card-rotate, 0deg) + var(--card-rotate-offset, 0deg)));
   }
 
   100% {
@@ -390,6 +408,10 @@ html {
     perspective: 1000px;
   }
 
+  .perspective-midrange {
+    perspective: 800px;
+  }
+
   .preserve-3d {
     transform-style: preserve-3d;
   }
@@ -400,6 +422,7 @@ html {
 }
 
 @keyframes float {
+
   0%,
   100% {
     transform: translateY(0);
@@ -468,16 +491,12 @@ html {
     0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(0, 0, 0, 0.1),
     0 22px 60px rgba(0, 0, 0, 0.28);
 
-  --shop-hero-btn-success-bg: color-mix(
-    in oklab,
-    var(--shop-hero-btn-bg) 88%,
-    white
-  );
-  --shop-hero-btn-success-bg-hover: color-mix(
-    in oklab,
-    var(--shop-hero-btn-bg) 80%,
-    white
-  );
+  --shop-hero-btn-success-bg: color-mix(in oklab,
+      var(--shop-hero-btn-bg) 88%,
+      white);
+  --shop-hero-btn-success-bg-hover: color-mix(in oklab,
+      var(--shop-hero-btn-bg) 80%,
+      white);
   --shop-hero-btn-success-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
   --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.32);
 }
@@ -530,16 +549,12 @@ html {
     0 0 0 2px rgba(255, 45, 85, 0.7), 0 0 0 7px rgba(255, 45, 85, 0.22),
     0 22px 70px rgba(255, 45, 85, 0.38);
 
-  --shop-hero-btn-success-bg: color-mix(
-    in oklab,
-    var(--accent-primary) 82%,
-    black
-  );
-  --shop-hero-btn-success-bg-hover: color-mix(
-    in oklab,
-    var(--accent-primary) 72%,
-    black
-  );
+  --shop-hero-btn-success-bg: color-mix(in oklab,
+      var(--accent-primary) 82%,
+      black);
+  --shop-hero-btn-success-bg-hover: color-mix(in oklab,
+      var(--accent-primary) 72%,
+      black);
   --shop-hero-btn-success-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
   --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
 }
@@ -599,10 +614,11 @@ html {
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   .animate-float,
   .animate-spin-slow,
   .animate-spin-slower,
   .animate-dash-flow {
     animation: none !important;
   }
-}
+}