Sessions 5-7a: 955 tests, deployment ready

web/src/contexts/ExplainModeContext.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+// "Explain Like I'm New" toggle. When on, every annotated UI element renders
+// a small tooltip explaining what the number/grade/line actually means. The
+// preference is per-browser, stored in localStorage.
+
+interface ExplainModeContextValue {
+  explainMode: boolean;
+  toggleExplainMode: () => void;
+  setExplainMode: (next: boolean) => void;
+}
+
+const STORAGE_KEY = 'vyndr_explain_mode';
+const ExplainModeContext = createContext<ExplainModeContextValue | null>(null);
+
+export default function ExplainModeProvider({ children }: { children: React.ReactNode }) {
+  const [explainMode, setExplainModeState] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (stored === '1') setExplainModeState(true);
+  }, []);
+
+  const setExplainMode = useCallback((next: boolean) => {
+    setExplainModeState(next);
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, next ? '1' : '0');
+    }
+  }, []);
+
+  const toggleExplainMode = useCallback(() => {
+    setExplainMode(!explainMode);
+  }, [explainMode, setExplainMode]);
+
+  const value = useMemo(
+    () => ({ explainMode, toggleExplainMode, setExplainMode }),
+    [explainMode, toggleExplainMode, setExplainMode]
+  );
+
+  return <ExplainModeContext.Provider value={value}>{children}</ExplainModeContext.Provider>;
+}
+
+export function useExplainMode(): ExplainModeContextValue {
+  const ctx = useContext(ExplainModeContext);
+  if (!ctx) {
+    // SSR / outside-provider fallback. Treating off as the safe default.
+    return {
+      explainMode: false,
+      toggleExplainMode: () => {},
+      setExplainMode: () => {},
+    };
+  }
+  return ctx;
+}