evaluationcount context, spinner based on font size

Author: monneyboi

poliloom-gui/src/app/layout.tsx

@@ -6,6 +6,7 @@ import { SessionProvider } from '@/components/SessionProvider'
 import { UserPreferencesProvider } from '@/contexts/UserPreferencesContext'
 import { EvaluationSessionProvider } from '@/contexts/EvaluationSessionContext'
 import { UserProgressProvider } from '@/contexts/UserProgressContext'
+import { EvaluationCountProvider } from '@/contexts/EvaluationCountContext'
 import { FetchInterceptor } from '@/components/FetchInterceptor'
 import { MobileGuard } from '@/components/layout/MobileGuard'
 import { Header } from '@/components/layout/Header'
@@ -42,8 +43,12 @@ export default async function RootLayout({
           <UserPreferencesProvider>
             <EvaluationSessionProvider>
               <UserProgressProvider>
-                <Header />
-                <MobileGuard>{children}</MobileGuard>
+                <EvaluationCountProvider>
+                  <MobileGuard>
+                    <Header />
+                    {children}
+                  </MobileGuard>
+                </EvaluationCountProvider>
               </UserProgressProvider>
             </EvaluationSessionProvider>
           </UserPreferencesProvider>

poliloom-gui/src/app/stats/page.test.tsx

@@ -106,7 +106,7 @@ describe('Stats Page', () => {
 
       await waitFor(() => {
         expect(screen.getByText('Evaluations Over Time')).toBeInTheDocument()
-        expect(screen.getByText('Evaluation Coverage by Country')).toBeInTheDocument()
+        expect(screen.getByText('Coverage by Country')).toBeInTheDocument()
       })
     })
 

poliloom-gui/src/components/layout/Header.tsx

@@ -1,37 +1,17 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { useSession, signOut, signIn } from 'next-auth/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Button } from '@/components/ui/Button'
 import { SpinningCounter } from '@/components/ui/SpinningCounter'
+import { useEvaluationCount } from '@/contexts/EvaluationCountContext'
 
 export function Header() {
   const { status } = useSession()
   const [menuOpen, setMenuOpen] = useState(false)
-  const [evaluationCount, setEvaluationCount] = useState<number | null>(null)
-
-  useEffect(() => {
-    if (status !== 'authenticated') return
-
-    const fetchEvaluationCount = async () => {
-      try {
-        const response = await fetch('/api/stats/count')
-        if (response.ok) {
-          const data = await response.json()
-
-          setEvaluationCount(data.total)
-        }
-      } catch {
-        // Silently fail - counter just won't show
-      }
-    }
-
-    fetchEvaluationCount()
-    const interval = setInterval(fetchEvaluationCount, 2000)
-    return () => clearInterval(interval)
-  }, [status])
+  const { evaluationCount } = useEvaluationCount()
 
   useEffect(() => {
     if (!menuOpen) return

poliloom-gui/src/components/ui/SpinningCounter.tsx

@@ -7,25 +7,26 @@ interface SpinningCounterProps {
   title?: string
 }
 
-const DIGIT_HEIGHT = 22
+// Height in em units - scales with font size
+const DIGIT_HEIGHT_EM = 1.8
 
 function DigitWheel({ digit }: { digit: number }) {
   return (
     <div
-      className="relative w-4 overflow-hidden bg-gray-50 border-x border-gray-100 first:border-l-0 first:rounded-l last:border-r-0 last:rounded-r"
-      style={{ height: DIGIT_HEIGHT }}
+      className="relative overflow-hidden bg-gray-50 border-x border-gray-100 first:border-l-0 first:rounded-l last:border-r-0 last:rounded-r"
+      style={{ height: `${DIGIT_HEIGHT_EM}em`, width: '1.1em' }}
     >
       <div
         className="absolute w-full transition-transform duration-500 ease-out"
         style={{
-          transform: `translateY(-${digit * DIGIT_HEIGHT}px)`,
+          transform: `translateY(-${digit * DIGIT_HEIGHT_EM}em)`,
         }}
       >
         {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
           <div
             key={n}
-            className="flex items-center justify-center text-gray-700 font-semibold text-sm leading-none tabular-nums"
-            style={{ height: DIGIT_HEIGHT }}
+            className="flex items-center justify-center text-gray-700 font-semibold leading-none tabular-nums"
+            style={{ height: `${DIGIT_HEIGHT_EM}em` }}
           >
             {n}
           </div>

poliloom-gui/src/contexts/EvaluationCountContext.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import React, { createContext, useContext, useState, useEffect } from 'react'
+import { useSession } from 'next-auth/react'
+
+interface EvaluationCountContextType {
+  evaluationCount: number | null
+}
+
+const EvaluationCountContext = createContext<EvaluationCountContextType | undefined>(undefined)
+
+export function EvaluationCountProvider({ children }: { children: React.ReactNode }) {
+  const { status } = useSession()
+  const [evaluationCount, setEvaluationCount] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (status !== 'authenticated') return
+
+    const fetchEvaluationCount = async () => {
+      try {
+        const response = await fetch('/api/stats/count')
+        if (response.ok) {
+          const data = await response.json()
+          setEvaluationCount(data.total)
+        }
+      } catch {
+        // Silently fail
+      }
+    }
+
+    fetchEvaluationCount()
+    const interval = setInterval(fetchEvaluationCount, 2000)
+    return () => clearInterval(interval)
+  }, [status])
+
+  return (
+    <EvaluationCountContext.Provider value={{ evaluationCount }}>
+      {children}
+    </EvaluationCountContext.Provider>
+  )
+}
+
+export function useEvaluationCount() {
+  const context = useContext(EvaluationCountContext)
+  if (context === undefined) {
+    throw new Error('useEvaluationCount must be used within an EvaluationCountProvider')
+  }
+  return context
+}