v2.2: Fix 15 bugs, add staged difficulty, consistent UI across all pages

Nav: UserMenu + ThemeToggle on landing page, responsive chat input
Dark mode: StreakBadge theme-aware gradient, Sun/Moon toggle on feed
Bubble Pop: fixed spawn race condition (useRef for nextId, single interval)
Tracing: 65% accuracy threshold + Try Again on fail
Color & Sound: Try Again on wrong answer (max 2 attempts per round)
Alphabet Pattern: 3-stage difficulty (1 blank → 2 blanks → word completion)
Sequence Memory: enhanced glow animation + Watch counter during playback
Speech: 3-stage progression (word → phrase → sentence)
Video capture: debug status bar, startingRef reset on camera failure
Progress: de-duplicate display entries within 2s window
Feed: anonymous/named post toggle with checkbox
All 25 pages: consistent Sun/Moon ThemeToggle icons (no text toggles)

Author: Partha-dev01

app/components/StreakBadge.tsx

@@ -22,7 +22,7 @@ export default function StreakBadge({ currentStreak, longestStreak }: StreakBadg
         padding: "16px 22px",
         borderRadius: "var(--r-lg)",
         background: currentStreak > 0
-          ? "linear-gradient(135deg, #fff7ed, #fef3c7)"
+          ? "linear-gradient(135deg, var(--feature-peach), var(--feature-green))"
           : "var(--bg-secondary)",
         border: "1px solid var(--border)",
       }}

app/dashboard/child/[id]/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useState, useEffect, useCallback, use } from "react";
 import NavLogo from "../../../components/NavLogo";
+import ThemeToggle from "../../../components/ThemeToggle";
 import { getProfile } from "../../../lib/db/childProfile.repository";
 import { listSessions } from "../../../lib/db/session.repository";
 import { aggregateBiomarkers } from "../../../lib/db/biomarker.repository";
@@ -126,14 +127,7 @@ export default function ChildDetailPage({
       <nav className="nav">
         <NavLogo />
         <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <button
-            onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
-            className="btn btn-outline"
-            style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem", gap: 6 }}
-            aria-label="Toggle theme"
-          >
-            {theme === "light" ? "Dark" : "Light"}
-          </button>
+          <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === "light" ? "dark" : "light"))} />
         </div>
       </nav>
 

app/feed/page.tsx

@@ -7,6 +7,8 @@ import { getCurrentUserId } from "../lib/identity/identity";
 import { useAuthGuard } from "../hooks/useAuthGuard";
 import type { FeedPost } from "../types/feedPost";
 import NavLogo from "../components/NavLogo";
+import ThemeToggle from "../components/ThemeToggle";
+import UserMenu from "../components/UserMenu";
 import { Plus, X, Send, Trash2 } from "lucide-react";
 
 type Category = "all" | FeedPost["category"];
@@ -43,6 +45,7 @@ export default function FeedPage() {
   const [loading, setLoading] = useState(true);
   const [userId, setUserId] = useState("");
   const [showCompose, setShowCompose] = useState(false);
+  const [anonymous, setAnonymous] = useState(true);
   const [userReactions, setUserReactions] = useState<Set<string>>(new Set());
 
   useEffect(() => {
@@ -87,7 +90,7 @@ export default function FeedPage() {
     if (!content.trim() || posting) return;
     setPosting(true);
     try {
-      await createPost(content.trim(), category, true);
+      await createPost(content.trim(), category, anonymous);
       setContent("");
       setShowCompose(false);
       await loadPosts();
@@ -143,22 +146,16 @@ export default function FeedPage() {
       {/* Nav */}
       <nav className="nav">
         <NavLogo />
-        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <button
-            onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
-            className="btn btn-outline"
-            style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem" }}
-            aria-label="Toggle theme"
-          >
-            {theme === "light" ? "Dark" : "Light"}
-          </button>
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === "light" ? "dark" : "light"))} />
           <Link
             href="/kid-dashboard"
             className="btn btn-outline"
             style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem" }}
           >
             Dashboard
           </Link>
+          <UserMenu />
         </div>
       </nav>
 
@@ -252,22 +249,37 @@ export default function FeedPage() {
               ))}
             </div>
 
-            <button
-              onClick={handlePost}
-              disabled={!content.trim() || posting}
-              className="btn btn-primary"
-              style={{
-                minHeight: 44,
-                padding: "10px 24px",
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                fontSize: "0.88rem",
-              }}
-            >
-              <Send size={16} />
-              {posting ? "Posting..." : "Post Anonymously"}
-            </button>
+            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
+              <label style={{
+                display: "flex", alignItems: "center", gap: 8, cursor: "pointer",
+                fontSize: "0.85rem", fontWeight: 600, color: "var(--text-secondary)",
+              }}>
+                <input
+                  type="checkbox"
+                  checked={anonymous}
+                  onChange={(e) => setAnonymous(e.target.checked)}
+                  style={{ width: 18, height: 18, accentColor: "var(--sage-500)" }}
+                />
+                Post Anonymously
+              </label>
+
+              <button
+                onClick={handlePost}
+                disabled={!content.trim() || posting}
+                className="btn btn-primary"
+                style={{
+                  minHeight: 44,
+                  padding: "10px 24px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  fontSize: "0.88rem",
+                }}
+              >
+                <Send size={16} />
+                {posting ? "Posting..." : anonymous ? "Post Anonymously" : "Post as Me"}
+              </button>
+            </div>
           </div>
         )}
 
@@ -369,7 +381,7 @@ export default function FeedPage() {
                           color: "var(--text-primary)",
                         }}
                       >
-                        {post.anonymous ? "Anonymous" : "User"}
+                        {post.anonymous ? "Anonymous" : "Community Member"}
                       </span>
                       <span
                         style={{

app/games/breathing/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { saveDifficulty } from "../../lib/games/difficultyEngine";
 import NavLogo from "../../components/NavLogo";
+import ThemeToggle from "../../components/ThemeToggle";
 
 type Screen = "start" | "play" | "result";
 type BreathPhase = "inhale" | "hold" | "exhale" | "rest";
@@ -135,14 +136,7 @@ export default function BreathingGamePage() {
     <div className="page">
       <nav className="nav">
         <NavLogo />
-        <button
-          onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
-          className="btn btn-outline"
-          style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem" }}
-          aria-label="Toggle theme"
-        >
-          {theme === "light" ? "Dark" : "Light"}
-        </button>
+        <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === "light" ? "dark" : "light"))} />
       </nav>
 
       <div className="main fade fade-1" style={{ maxWidth: 500, padding: "40px 28px 80px" }}>

app/games/color-sound/page.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect, useCallback } from "react";
 import { getDifficulty, saveDifficulty } from "../../lib/games/difficultyEngine";
 import { speakText } from "../../lib/audio/ttsHelper";
 import NavLogo from "../../components/NavLogo";
+import ThemeToggle from "../../components/ThemeToggle";
 
 type Screen = "start" | "play" | "result";
 
@@ -75,6 +76,7 @@ export default function ColorSoundPage() {
   const [elapsed, setElapsed] = useState(0);
   const [hintText, setHintText] = useState("");
   const [isPlaying, setIsPlaying] = useState(false);
+  const [attemptsThisRound, setAttemptsThisRound] = useState(0);
 
   useEffect(() => {
     const saved =
@@ -99,6 +101,7 @@ export default function ColorSoundPage() {
       setTargetColor(target);
       setSelectedIndex(null);
       setFeedback(null);
+      setAttemptsThisRound(0);
       setHintText(`Tap the ${target.name} color`);
 
       // Play tone + voice cue after a short delay
@@ -131,29 +134,48 @@ export default function ColorSoundPage() {
     return () => clearInterval(iv);
   }, [screen, startTime]);
 
+  const advanceRound = useCallback((wasCorrect: boolean) => {
+    const nextRound = round + 1;
+    if (nextRound > maxRounds) {
+      const score = Math.round(((correct + (wasCorrect ? 1 : 0)) / maxRounds) * 100);
+      saveDifficulty("color-sound", "default", score);
+      setScreen("result");
+    } else {
+      setRound(nextRound);
+      const config = getDifficulty("color-sound", "default");
+      generateRound(config.level);
+    }
+  }, [round, maxRounds, correct, generateRound]);
+
   const handleSelect = (index: number) => {
     if (feedback !== null || !targetColor) return;
 
     setSelectedIndex(index);
     const isCorrect = displayColors[index].name === targetColor.name;
-    setFeedback(isCorrect ? "correct" : "wrong");
-    if (isCorrect) setCorrect((c) => c + 1);
+    const attempt = attemptsThisRound + 1;
+    setAttemptsThisRound(attempt);
 
     // Play the selected color's tone
     playTone(displayColors[index].frequency, 300, setIsPlaying);
 
-    setTimeout(() => {
-      const nextRound = round + 1;
-      if (nextRound > maxRounds) {
-        const score = Math.round(((correct + (isCorrect ? 1 : 0)) / maxRounds) * 100);
-        saveDifficulty("color-sound", "default", score);
-        setScreen("result");
-      } else {
-        setRound(nextRound);
-        const config = getDifficulty("color-sound", "default");
-        generateRound(config.level);
+    if (isCorrect) {
+      setCorrect((c) => c + 1);
+      setFeedback("correct");
+      setTimeout(() => advanceRound(true), 800);
+    } else {
+      setFeedback("wrong");
+      if (attempt >= 2) {
+        // Second wrong — show answer and auto-advance
+        setTimeout(() => advanceRound(false), 1200);
       }
-    }, 800);
+      // First wrong — wait for user to click "Try Again" (no auto-advance)
+    }
+  };
+
+  const handleRetry = () => {
+    setFeedback(null);
+    setSelectedIndex(null);
+    replaySound();
   };
 
   const replaySound = () => {
@@ -172,14 +194,7 @@ export default function ColorSoundPage() {
     <div className="page">
       <nav className="nav">
         <NavLogo />
-        <button
-          onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
-          className="btn btn-outline"
-          style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem" }}
-          aria-label="Toggle theme"
-        >
-          {theme === "light" ? "Dark" : "Light"}
-        </button>
+        <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === "light" ? "dark" : "light"))} />
       </nav>
 
       <div className="main fade fade-1" style={{ maxWidth: 500, padding: "40px 28px 80px" }}>
@@ -324,15 +339,28 @@ export default function ColorSoundPage() {
             </div>
 
             {feedback && (
-              <div
-                style={{
-                  marginTop: 20,
-                  fontSize: "1rem",
-                  fontWeight: 700,
-                  color: feedback === "correct" ? "var(--sage-500)" : "var(--peach-300)",
-                }}
-              >
-                {feedback === "correct" ? "Correct!" : `That was ${displayColors[selectedIndex!]?.name}. The answer was ${targetColor?.name}.`}
+              <div style={{ marginTop: 20, textAlign: "center" }}>
+                <div
+                  style={{
+                    fontSize: "1rem",
+                    fontWeight: 700,
+                    color: feedback === "correct" ? "var(--sage-500)" : "var(--peach-300)",
+                    marginBottom: 8,
+                  }}
+                >
+                  {feedback === "correct"
+                    ? "Correct!"
+                    : `That was ${displayColors[selectedIndex!]?.name}. The answer was ${targetColor?.name}.`}
+                </div>
+                {feedback === "wrong" && attemptsThisRound < 2 && (
+                  <button
+                    onClick={handleRetry}
+                    className="btn btn-primary"
+                    style={{ minHeight: 44, padding: "8px 24px", fontSize: "0.95rem" }}
+                  >
+                    Try Again
+                  </button>
+                )}
               </div>
             )}
           </div>

app/games/emotion-match/page.tsx

@@ -6,6 +6,7 @@ import { getDifficulty, saveDifficulty } from "../../lib/games/difficultyEngine"
 import { addGameActivity } from "../../lib/db/gameActivity.repository";
 import { updateStreak } from "../../lib/db/streak.repository";
 import NavLogo from "../../components/NavLogo";
+import ThemeToggle from "../../components/ThemeToggle";
 
 const fredoka = "'Fredoka',sans-serif";
 
@@ -188,14 +189,7 @@ export default function EmotionQuizPage() {
     <div className="page">
       <nav className="nav">
         <NavLogo />
-        <button
-          onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
-          className="btn btn-outline"
-          style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem" }}
-          aria-label="Toggle theme"
-        >
-          {theme === "light" ? "Dark" : "Light"}
-        </button>
+        <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === "light" ? "dark" : "light"))} />
       </nav>
 
       <div className="main fade fade-1" style={{ maxWidth: 600, padding: "40px 28px 80px" }}>

app/games/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useState, useEffect } from "react";
 import { useAuthGuard } from "../hooks/useAuthGuard";
 import NavLogo from "../components/NavLogo";
+import ThemeToggle from "../components/ThemeToggle";
 
 const games = [
   {
@@ -86,14 +87,7 @@ export default function GamesHubPage() {
       <nav className="nav">
         <NavLogo />
         <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <button
-            onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
-            className="btn btn-outline"
-            style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem", gap: 6 }}
-            aria-label="Toggle theme"
-          >
-            {theme === "light" ? "Dark" : "Light"}
-          </button>
+          <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === "light" ? "dark" : "light"))} />
           <Link
             href="/kid-dashboard"
             className="btn btn-outline"

app/games/pattern-match/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { getDifficulty, saveDifficulty } from "../../lib/games/difficultyEngine";
 import NavLogo from "../../components/NavLogo";
+import ThemeToggle from "../../components/ThemeToggle";
 
 type Screen = "start" | "play" | "result";
 
@@ -179,14 +180,7 @@ export default function PatternMatchPage() {
     <div className="page">
       <nav className="nav">
         <NavLogo />
-        <button
-          onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
-          className="btn btn-outline"
-          style={{ minHeight: 40, padding: "8px 16px", fontSize: "0.9rem" }}
-          aria-label="Toggle theme"
-        >
-          {theme === "light" ? "Dark" : "Light"}
-        </button>
+        <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === "light" ? "dark" : "light"))} />
       </nav>
 
       <div className="main fade fade-1" style={{ maxWidth: 500, padding: "40px 28px 80px" }}>