Sessions 5-7a: 955 tests, deployment ready

2026-06-08 18:35:13 -04:00
parent 06b82624a2
commit 1fa04dc776
371 changed files with 49366 additions and 955 deletions
@@ -0,0 +1,79 @@
+'use client';
+
+import { useExplainMode } from '@/contexts/ExplainModeContext';
+
+interface ExplainModeToggleProps {
+  variant?: 'compact' | 'full';
+}
+
+function EyeIcon({ open }: { open: boolean }) {
+  if (open) {
+    return (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    );
+  }
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M17.94 17.94A10.06 10.06 0 0 1 12 19c-6.5 0-10-7-10-7a17.81 17.81 0 0 1 4.06-5.06" />
+      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a17.81 17.81 0 0 1-3.06 3.94" />
+      <line x1="2" y1="2" x2="22" y2="22" />
+    </svg>
+  );
+}
+
+export default function ExplainModeToggle({ variant = 'compact' }: ExplainModeToggleProps) {
+  const { explainMode, toggleExplainMode } = useExplainMode();
+
+  if (variant === 'full') {
+    return (
+      <label
+        className="flex cursor-pointer items-center justify-between gap-3 rounded border p-3"
+        style={{
+          background: 'var(--bg-surface)',
+          borderColor: 'var(--border-light)',
+          color: 'var(--text-primary)',
+        }}
+      >
+        <span className="flex-1">
+          <span className="block text-sm font-semibold">Explain Like I&apos;m New</span>
+          <span className="block text-xs" style={{ color: 'var(--text-secondary)' }}>
+            Adds plain-English notes under each number, grade, and signal.
+          </span>
+        </span>
+        <input
+          type="checkbox"
+          checked={explainMode}
+          onChange={toggleExplainMode}
+          aria-label="Toggle Explain Like I'm New"
+          className="h-5 w-9 cursor-pointer appearance-none rounded-full transition-colors"
+          style={{
+            background: explainMode ? 'var(--grade-a)' : 'var(--bg-elevated)',
+          }}
+        />
+      </label>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleExplainMode}
+      aria-pressed={explainMode}
+      aria-label={explainMode ? 'Disable explanations' : 'Enable explanations'}
+      title={explainMode ? 'Explanations on' : 'Explanations off'}
+      className="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-semibold"
+      style={{
+        color: explainMode ? 'var(--grade-a)' : 'var(--text-tertiary)',
+        background: explainMode ? 'rgba(0,212,160,0.10)' : 'transparent',
+        border: '1px solid',
+        borderColor: explainMode ? 'rgba(0,212,160,0.30)' : 'var(--border-light)',
+      }}
+    >
+      <EyeIcon open={explainMode} />
+      {explainMode && <span>Beginner</span>}
+    </button>
+  );
+}