Fix mobile UI issues: UserMenu overlap, emotion quiz, streak, chat mic, feed redesign

- Add backdrop overlay to UserMenu dropdown for mobile visual separation
- Replace card-flip Emotion Match with scenario-based Emotion Quiz (20 scenarios, adaptive difficulty, saves activity + streak)
- Fix childId mismatch causing streak to not update (fallback "" → "default")
- Fix SpeechRecognition cleanup/reuse in chat, reorder input bar (mic primary)
- Add viewport meta to prevent mobile zoom on input focus
- Redesign community feed: posts first, collapsible compose form, per-user reaction tracking (toggle on/off), floating action button
- Add feedReactions IndexedDB table (schema v5) for spam prevention

Author: Partha-dev01

SETUP_GUIDE.md

@@ -204,6 +204,41 @@ APP_ACCESS_KEY_ID, APP_SECRET_ACCESS_KEY, APP_REGION
 
 ## Changelog
 
+### 2026-03-06 — Mobile UI Fixes, Emotion Quiz, Feed Redesign
+
+**Issues fixed (8 items from mobile testing):**
+
+1. **UserMenu dropdown overlap** — Added semi-transparent backdrop overlay behind dropdown for visual separation on mobile. Clicking backdrop closes menu.
+   - `app/components/UserMenu.tsx`
+
+2. **Emotion Match → Emotion Quiz** — Replaced card-flip matching game (identical to Memory game) with scenario-based Emotion Quiz. 20 scenarios, 5 emotion choices, adaptive difficulty, sound feedback. Now correctly saves game activity + updates streak.
+   - `app/games/emotion-match/page.tsx` (full rewrite)
+   - `app/kid-dashboard/games/page.tsx` (updated description)
+   - `app/kid-dashboard/page.tsx` (updated card emoji/title)
+
+3. **Streak not updating** — Fixed childId mismatch: dashboard used `""` fallback but games used `"default"`. Changed dashboard fallback to `"default"`.
+   - `app/kid-dashboard/page.tsx`
+
+4. **Chat mic + viewport + input reorder**:
+   - Added `viewport` export in layout.tsx to prevent mobile zoom on input focus
+   - Fixed SpeechRecognition: cleanup old instance before new one, 120ms delay for mic release, nullify ref on callbacks, cleanup on unmount
+   - Reordered input bar: mic button first (64px, primary green), text input secondary
+   - `app/kid-dashboard/chat/page.tsx`, `app/layout.tsx`
+
+5. **Progress page** — Verified childId already uses `"default"` fallback; no change needed.
+
+6. **BottomNav/navbar overlap** — Resolved by Fix 1 (backdrop overlay).
+
+7. **Community Feed redesign**:
+   - Posts displayed first, compose form behind "New Post" button + floating action button
+   - Per-user reaction tracking via new `feedReactions` IndexedDB table (schema v5)
+   - Reactions toggle on/off per user (filled/unfilled state)
+   - Delete own posts with reaction cleanup
+   - Cleaner card layout, category pills, empty state
+   - `app/feed/page.tsx` (full rewrite), `app/lib/db/feed.repository.ts`, `app/lib/db/schema.ts`, `app/types/feedPost.ts`
+
+**Files modified:** 10 files across components, games, pages, DB layer, and types.
+
 ### 2026-03-06 — Fix Google sign-in loop
 
 **Root causes found:**

app/components/UserMenu.tsx

@@ -72,75 +72,81 @@ export default function UserMenu() {
       </button>
 
       {open && (
-        <div
-          style={{
-            position: "absolute",
-            top: "calc(100% + 6px)",
-            right: 0,
-            minWidth: 180,
-            background: "var(--card)",
-            border: "1px solid var(--border)",
-            borderRadius: "var(--r-lg, 16px)",
-            boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
-            zIndex: 200,
-            overflow: "hidden",
-          }}
-        >
-          <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
-            <div
+        <>
+          <div
+            onClick={() => setOpen(false)}
+            style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.18)", zIndex: 199 }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              top: "calc(100% + 6px)",
+              right: 0,
+              minWidth: 180,
+              background: "var(--card)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-lg, 16px)",
+              boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+              zIndex: 200,
+              overflow: "hidden",
+            }}
+          >
+            <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
+              <div
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.88rem",
+                  color: "var(--text-primary)",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {user.name}
+              </div>
+              <div
+                style={{
+                  fontSize: "0.75rem",
+                  color: "var(--text-muted)",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {user.email}
+              </div>
+            </div>
+            <button
+              onClick={() => {
+                setOpen(false);
+                logout();
+              }}
               style={{
-                fontWeight: 600,
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                padding: "12px 16px",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
                 fontSize: "0.88rem",
-                color: "var(--text-primary)",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                fontWeight: 600,
+                color: "#e74c3c",
+                fontFamily: "inherit",
+                textAlign: "left",
               }}
-            >
-              {user.name}
-            </div>
-            <div
-              style={{
-                fontSize: "0.75rem",
-                color: "var(--text-muted)",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLElement).style.background = "var(--sage-50, #f5f5f5)";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLElement).style.background = "transparent";
               }}
             >
-              {user.email}
-            </div>
+              Sign Out
+            </button>
           </div>
-          <button
-            onClick={() => {
-              setOpen(false);
-              logout();
-            }}
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              width: "100%",
-              padding: "12px 16px",
-              border: "none",
-              background: "transparent",
-              cursor: "pointer",
-              fontSize: "0.88rem",
-              fontWeight: 600,
-              color: "#e74c3c",
-              fontFamily: "inherit",
-              textAlign: "left",
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLElement).style.background = "var(--sage-50, #f5f5f5)";
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLElement).style.background = "transparent";
-            }}
-          >
-            Sign Out
-          </button>
-        </div>
+        </>
       )}
     </div>
   );