fix: resolve bugs and improve frontend performance

- Fix register not resetting isLoading on success (causing login page to hang) - Fix leaderboard streaks 400 error by forcing all_time timeframe - Reorder routes so static paths match before dynamic practice/:sheetId - Lazy-load QuestMap + Three.js (saves ~350KB gzip on initial load) - Move KaTeX CSS to lazy import (only loads on math pages) - Remove 28 duplicate Google Font @import lines from component CSS - Add font preconnect + single stylesheet link in index.html - Replace 8 unsafe JSON.parse(localStorage) calls with Zustand selectors - Add global ErrorBoundary to prevent full-app crashes - Extract arcTheme utilities to break static import cycle with QuestMap - Merge Three.js + Troika into single chunk to fix circular dependency Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Merge pull request 'feat(practice-sheet): add practice sheet page' (#9 ) from web into main
2026-03-13 08:41:13 +06:00 · 2026-03-12 19:25:32 +00:00 · 2026-03-13 01:24:13 +06:00 · 2026-03-12 13:51:29 +00:00 · 2026-03-12 19:50:52 +06:00 · 2026-03-12 13:36:26 +00:00
38 changed files with 2860 additions and 422 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,19 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&family=Sorts+Mill+Goudy:ital@0;1&display=swap"
      rel="stylesheet"
    />
    <script src="https://www.geogebra.org/apps/deployggb.js"></script>
    <script
      defer
      src="https://alt.omukk.dev/script.js"
      data-website-id="e4aa7582-260a-4861-b363-eb1815d8b232"
    ></script>
    <title>Edbridge Scholars</title>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@ -35,6 +35,8 @@
    "tailwind-merge": "^3.4.0",
    "tailwindcss": "^4.1.18",
    "three": "^0.183.2",
    "troika-three-text": "^0.52.4",
    "troika-worker-utils": "^0.52.0",
    "vaul": "^1.1.2",
    "zustand": "^5.0.9"
  },
@ -43,6 +45,7 @@
    "@types/node": "^24.10.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@types/three": "^0.183.1",
    "@vitejs/plugin-react": "^5.1.1",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,5 +1,4 @@
-import "katex/dist/katex.min.css";
+import { Suspense, lazy } from "react";
 import { Home } from "./pages/student/Home";
 import {
  createBrowserRouter,
@ -19,8 +18,12 @@ import { StudentLayout } from "./pages/student/StudentLayout";
 import { TargetedPractice } from "./pages/student/targeted-practice/page";
 import { Drills } from "./pages/student/drills/page";
 import { HardTestModules } from "./pages/student/hard-test-modules/page";
 import { QuestMap } from "./pages/student/QuestMap";
 import { Register } from "./pages/auth/Register";
 import { PracticeSheetList } from "./pages/student/practice-sheet/page";
 const QuestMap = lazy(() =>
  import("./pages/student/QuestMap").then((m) => ({ default: m.QuestMap })),
 );
 function App() {
  const router = createBrowserRouter([
@ -62,11 +65,11 @@ function App() {
            },
            {
              path: "quests",
-              element: <QuestMap />,
+              element: (
-            },
+                <Suspense fallback={<div style={{ minHeight: "100vh" }} />}>
-            {
+                  <QuestMap />
-              path: "practice/:sheetId",
+                </Suspense>
-              element: <Pretest />,
+              ),
            },
            {
              path: "practice/targeted-practice",
@ -80,6 +83,14 @@ function App() {
              path: "practice/hard-test-modules",
              element: <HardTestModules />,
            },
            {
              path: "practice/practice-sheet",
              element: <PracticeSheetList />,
            },
            {
              path: "practice/:sheetId",
              element: <Pretest />,
            },
          ],
        },
        {
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@ -19,6 +19,7 @@ import {
  Trophy,
  Map,
  SquareLibrary,
  ListIcon,
 } from "lucide-react";
 import { useState } from "react";
@ -362,6 +363,7 @@ export function AppSidebar() {
                        />
                        <span>Targeted Practice</span>
                      </NavLink>
                      <NavLink
                        to="/student/practice/drills"
                        className={({ isActive }) =>
@ -396,6 +398,23 @@ export function AppSidebar() {
                        />
                        <span>Hard Test Modules</span>
                      </NavLink>
                      <NavLink
                        to="/student/practice/practice-sheet"
                        className={({ isActive }) =>
                          `flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
                            isActive
                              ? "bg-white text-slate-900"
                              : "text-slate-500 hover:bg-white hover:text-slate-900"
                          }`
                        }
                      >
                        <ListIcon
                          size={18}
                          strokeWidth={3}
                          className="text-slate-400"
                        />
                        <span>Practice Sheet</span>
                      </NavLink>
                    </SidebarMenuSub>
                  )}
                </SidebarMenuItem>
--- a/src/components/ChestOpenModal.tsx
+++ b/src/components/ChestOpenModal.tsx
@ -3,7 +3,6 @@ import type { QuestNode, ClaimedRewardResponse } from "../types/quest";
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const S = `
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Nunito:wght@800;900&display=swap');
  /* ══ FULL SCREEN OVERLAY ══ */
  .com-overlay {
--- a/src/components/ChoiceCard.tsx
+++ b/src/components/ChoiceCard.tsx
@ -1,5 +1,4 @@
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@600;700&display=swap');
  .cc-btn {
    width: 100%;
--- a/src/components/CircularLevelProgress.tsx
+++ b/src/components/CircularLevelProgress.tsx
@ -12,7 +12,6 @@ type Props = {
 };
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
  .clp-wrap {
    width: 100%;
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@ -0,0 +1,83 @@
 import { Component } from "react";
 import type { ErrorInfo, ReactNode } from "react";
 interface Props {
  children: ReactNode;
 }
 interface State {
  hasError: boolean;
 }
 export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(): State {
    return { hasError: true };
  }
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("Uncaught error:", error, info.componentStack);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div
          style={{
            minHeight: "100vh",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            fontFamily: "'Nunito', sans-serif",
            background: "#fffbf4",
            padding: "2rem",
            textAlign: "center",
          }}
        >
          <h1
            style={{
              fontSize: "1.5rem",
              fontWeight: 900,
              color: "#1e1b4b",
              marginBottom: "0.5rem",
            }}
          >
            Something went wrong
          </h1>
          <p
            style={{
              fontSize: "0.9rem",
              color: "#6b7280",
              marginBottom: "1.5rem",
            }}
          >
            An unexpected error occurred. Please try refreshing the page.
          </p>
          <button
            onClick={() => window.location.reload()}
            style={{
              padding: "0.7rem 1.4rem",
              borderRadius: "100px",
              border: "none",
              background: "linear-gradient(135deg, #7c3aed, #a855f7)",
              color: "white",
              fontFamily: "'Nunito', sans-serif",
              fontSize: "0.88rem",
              fontWeight: 800,
              cursor: "pointer",
            }}
          >
            Reload page
          </button>
        </div>
      );
    }
    return this.props.children;
  }
 }
--- a/src/components/InfoHeader.tsx
+++ b/src/components/InfoHeader.tsx
@ -17,7 +17,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Drawer, DrawerContent, DrawerTrigger } from "./ui/drawer";
 import { PredictedScoreCard } from "./PredictedScoreCard";
 import { ChestOpenModal } from "./ChestOpenModal";
-import { generateArcTheme } from "../pages/student/QuestMap";
+import { generateArcTheme } from "../utils/arcTheme";
 import { InventoryButton } from "./InventoryButton";
 // ─── Requirement helpers ──────────────────────────────────────────────────────
@ -43,7 +43,6 @@ const REQ_LABEL: Record<string, string> = {
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&family=Cinzel:wght@700;900&display=swap');
  /* ════ SHARED ANIMATION ════ */
  @keyframes hcIn {
--- a/src/components/InventoryButton.tsx
+++ b/src/components/InventoryButton.tsx
@ -8,7 +8,6 @@ import { InventoryModal } from "./InventoryModal";
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const BTN_STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&family=Cinzel:wght@700&display=swap');
  /* ── Inventory trigger button ── */
  .inv-btn {
--- a/src/components/InventoryModal.tsx
+++ b/src/components/InventoryModal.tsx
@ -12,7 +12,6 @@ import { api } from "../utils/api";
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  /* ══ OVERLAY ══ */
  .inv-overlay {
--- a/src/components/LessonModal.tsx
+++ b/src/components/LessonModal.tsx
@ -24,7 +24,6 @@ const UUID_REGEX =
 const isVideoLesson = (id: string) => UUID_REGEX.test(id);
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  .lm-content {
    font-family: 'Nunito', sans-serif;
@ -156,6 +155,7 @@ export const LessonModal = ({
  onOpenChange,
 }: LessonModalProps) => {
  const user = useAuthStore((state) => state.user);
  const token = useAuthStore((state) => state.token);
  const [loading, setLoading] = useState(false);
  const [lesson, setLesson] = useState<LessonDetails | null>(null);
@ -196,12 +196,6 @@ export const LessonModal = ({
      setLoading(true);
      try {
        const authStorage = localStorage.getItem("auth-storage");
        if (!authStorage) throw new Error("No auth storage");
        const {
          // @ts-ignore
          state: { token },
        } = JSON.parse(authStorage) as { state?: { token?: string } };
        if (!token) throw new Error("No token");
        // @ts-ignore
--- a/src/components/PredictedScoreCard.tsx
+++ b/src/components/PredictedScoreCard.tsx
@ -83,7 +83,6 @@ const useCountUp = (target: number, duration = 900) => {
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  .psc-card {
    background: white;
--- a/src/components/QuestNodeModal.tsx
+++ b/src/components/QuestNodeModal.tsx
@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { X, Lock } from "lucide-react";
 import type { QuestNode, QuestArc } from "../types/quest";
 // Re-use the same theme generator as QuestMap so island colours are consistent
-import { generateArcTheme } from "../pages/student/QuestMap";
+import { generateArcTheme } from "../utils/arcTheme";
 // ─── Requirement helpers (mirrors QuestMap / InfoHeader) ──────────────────────
 const REQ_LABEL: Record<string, string> = {
@ -28,7 +28,6 @@ const reqIcon = (type: string): string =>
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Sorts+Mill+Goudy:ital@0;1&family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  /* ══ OVERLAY ══ */
  .qnm-overlay {
--- a/src/components/RenderQuestionText.tsx
+++ b/src/components/RenderQuestionText.tsx
@ -1,3 +1,4 @@
 import "katex/dist/katex.min.css";
 import { Component, type ReactNode } from "react";
 // @ts-ignore
 import { BlockMath, InlineMath } from "react-katex";
--- a/src/components/SearchOverlay.tsx
+++ b/src/components/SearchOverlay.tsx
@ -188,7 +188,6 @@ const highlightText = (text: string, query: string) => {
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  .so-overlay {
    position: fixed; inset: 0; z-index: 50;
--- a/src/main.tsx
+++ b/src/main.tsx
@ -2,9 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 import { ErrorBoundary } from "./components/ErrorBoundary.tsx";
 createRoot(document.getElementById("root")!).render(
  <StrictMode>
-    <App />
+    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </StrictMode>,
 );
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@ -9,7 +9,6 @@ interface LocationState {
 }
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@ -313,6 +312,13 @@ const STYLES = `
    display:flex;align-items:center;gap:0.5rem;
  }
  .lg-success {
    background:#f0fdf4;border:2px solid #bbf7d0;border-radius:14px;padding:0.8rem 1rem;
    font-family:'Nunito Sans',sans-serif;font-size:0.82rem;font-weight:700;color:#15803d;
    display:flex;align-items:center;gap:0.5rem;
    animation: formPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  .lg-btn {
    width:100%;padding:1rem;background:#f97316;color:white;border:none;border-radius:100px;cursor:pointer;
    font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900;
@ -365,8 +371,14 @@ export const Login = () => {
  const navigate = useNavigate();
  const location = useLocation();
-  const { login, isAuthenticated, isLoading, error, clearError } =
+  const {
-    useAuthStore();
+    login,
    isAuthenticated,
    isLoading,
    error,
    clearError,
    registrationMessage,
  } = useAuthStore();
  const from =
    (location.state as LocationState)?.from?.pathname || "/student/home";
@ -673,6 +685,12 @@ export const Login = () => {
              </label>
            </div>
            {registrationMessage && (
              <div className="lg-success">
                <span>✅</span> {registrationMessage}
              </div>
            )}
            {error && (
              <div className="lg-error">
                <span>⚠️</span> {error}
--- a/src/pages/auth/Register.tsx
+++ b/src/pages/auth/Register.tsx
@ -1,20 +1,23 @@
-import { useState } from "react";
+import { useState, useRef, useCallback } from "react";
-import type { FormEvent } from "react";
+import type { FormEvent, DragEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthStore } from "../../stores/authStore";
 import {
  Loader2,
  Mail,
  Lock,
  ImageIcon,
  BookOpen,
  Star,
  Zap,
  Trophy,
  Upload,
  X,
  Camera,
 } from "lucide-react";
 import { api } from "../../utils/api";
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@ -40,7 +43,6 @@ const STYLES = `
    flex-shrink: 0;
  }
  /* Blobs inside left panel */
  .rg-panel-blob {
    position: absolute; pointer-events: none; border-radius: 50%;
    opacity: 0.18;
@ -73,7 +75,6 @@ const STYLES = `
    50%      { transform: translate(-20px, -28px) scale(1.06); }
  }
  /* Floating decorative shapes */
  .rg-shape {
    position: absolute; pointer-events: none;
    animation: floatShape 8s ease-in-out infinite;
@ -83,7 +84,6 @@ const STYLES = `
    50%      { transform: translateY(-16px) rotate(12deg); }
  }
  /* Stars scattered */
  .rg-star {
    position: absolute; pointer-events: none;
    color: #fde68a; opacity: 0.55;
@ -94,7 +94,6 @@ const STYLES = `
    50%      { opacity: 0.9; transform: scale(1.3); }
  }
  /* Left panel content */
  .rg-panel-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
@ -133,7 +132,6 @@ const STYLES = `
    font-size: 1rem; font-weight: 600; color: #c4b5fd; line-height: 1.6;
  }
  /* Feature pills */
  .rg-features { display: flex; flex-direction: column; gap: 0.85rem; }
  .rg-feature {
    display: flex; align-items: center; gap: 0.85rem;
@ -163,7 +161,6 @@ const STYLES = `
    font-size: 0.75rem; font-weight: 600; color: #a5b4fc;
  }
  /* Social proof */
  .rg-social-proof {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.1rem 0;
@ -183,7 +180,7 @@ const STYLES = `
  }
  .rg-social-proof p strong { color: #fde68a; }
-  /* ─── RIGHT PANEL (form) ─── */
+  /* ─── RIGHT PANEL ─── */
  .rg-right {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
@ -191,7 +188,6 @@ const STYLES = `
    position: relative; overflow: hidden;
  }
  /* Subtle bg dots on right */
  .rg-bg-dot {
    position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.10;
    animation: bgDotFloat 9s ease-in-out infinite;
@ -212,7 +208,6 @@ const STYLES = `
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* Form header */
  .rg-form-header { display: flex; flex-direction: column; gap: 0.4rem; }
  .rg-form-header h1 {
    font-size: 2rem; font-weight: 900; color: #1e1b4b;
@ -223,41 +218,152 @@ const STYLES = `
    font-size: 0.88rem; font-weight: 600; color: #9ca3af;
  }
-  /* Avatar row */
+  /* ─── AVATAR UPLOAD ─── */
-  .rg-avatar-row {
+  .av-upload-wrap {
-    display: flex; align-items: center; gap: 1.1rem;
+    display: flex;
-    background: #f9fafb; border: 2.5px solid #f3f4f6;
+    align-items: center;
-    border-radius: 18px; padding: 0.9rem 1.1rem;
+    gap: 1.25rem;
    transition: border-color 0.2s;
  }
  .rg-avatar-row:focus-within { border-color: #c4b5fd; background: white; }
  .rg-avatar-ring {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2.5px dashed #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: white; flex-shrink: 0;
    transition: border-color 0.25s, border-style 0.25s;
  }
  .rg-avatar-ring.filled { border-style: solid; border-color: #a855f7; }
  .rg-avatar-ring img { width: 100%; height: 100%; object-fit: cover; }
  .rg-avatar-input-col { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
  .rg-avatar-label {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: #6b7280;
  }
  .rg-avatar-input {
    background: transparent; border: none; outline: none;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem; font-weight: 600; color: #1e1b4b;
    width: 100%;
  }
  .rg-avatar-input::placeholder { color: #d1d5db; }
  .rg-avatar-hint {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.7rem; font-weight: 600; color: #c4b5fd;
  }
-  /* Fields grid */
+  /* The circular avatar preview */
  .av-circle {
    position: relative;
    width: 72px; height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
  }
  .av-circle-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #ede9fe, #faf5ff);
    border: 2.5px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.25s, box-shadow 0.25s;
    position: relative;
  }
  .av-circle:hover .av-circle-inner {
    border-color: #a855f7;
    box-shadow: 0 0 0 4px rgba(168,85,247,0.12);
  }
  .av-circle-inner img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .av-circle-inner.has-image {
    border-color: #a855f7;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
  }
  /* Camera overlay on hover */
  .av-circle-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(109,40,217,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
  }
  .av-circle:hover .av-circle-overlay { opacity: 1; }
  /* Remove button */
  .av-remove-btn {
    position: absolute;
    top: -3px; right: -3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    z-index: 2;
  }
  .av-remove-btn:hover { background: #dc2626; transform: scale(1.15); }
  /* Drop zone (right side) */
  .av-dropzone {
    flex: 1;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 0.9rem 1.1rem;
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 0.35rem;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
  }
  .av-dropzone:hover, .av-dropzone.dragover {
    border-color: #a855f7;
    background: #fdf4ff;
    transform: scale(1.01);
  }
  .av-dropzone.dragover {
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(168,85,247,0.1);
  }
  .av-dropzone-title {
    font-size: 0.82rem; font-weight: 800; color: #1e1b4b;
    display: flex; align-items: center; gap: 0.4rem;
  }
  .av-dropzone-sub {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.7rem; font-weight: 600; color: #9ca3af;
  }
  .av-dropzone-types {
    display: flex; gap: 0.3rem; margin-top: 0.1rem;
  }
  .av-type-badge {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.62rem; font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: #ede9fe; color: #7c3aed;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  /* Shimmer drag-over effect */
  .av-dropzone.dragover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(168,85,247,0.07) 50%, transparent 70%);
    animation: shimmer 1s linear infinite;
  }
  @keyframes shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
  }
  /* Upload progress bar */
  .av-progress-wrap {
    width: 100%;
    height: 4px; border-radius: 999px;
    background: #f3f4f6; overflow: hidden;
    margin-top: 0.4rem;
  }
  .av-progress-bar {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #a855f7, #6d28d9);
    transition: width 0.2s ease;
  }
  .av-uploading-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.7rem; font-weight: 700; color: #a855f7;
    display: flex; align-items: center; gap: 0.3rem;
    margin-top: 0.2rem;
  }
  .av-upload-spinner {
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* Upload error */
  .av-upload-error {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.7rem; font-weight: 700; color: #e11d48;
    margin-top: 0.2rem;
  }
  /* Fields */
  .rg-fields { display: flex; flex-direction: column; gap: 1rem; }
  .rg-row { display: flex; gap: 1rem; }
  .rg-row .rg-field { flex: 1; }
@ -307,7 +413,6 @@ const STYLES = `
  .rg-strength-hint.medium { color: #eab308; }
  .rg-strength-hint.strong { color: #22c55e; }
  /* Error */
  .rg-error {
    background: #fff1f2; border: 2px solid #fecdd3;
    border-radius: 14px; padding: 0.8rem 1rem;
@ -316,7 +421,6 @@ const STYLES = `
    display: flex; align-items: center; gap: 0.5rem;
  }
  /* Submit */
  .rg-btn {
    width: 100%; padding: 1rem;
    background: #a855f7; color: white; border: none;
@ -336,7 +440,6 @@ const STYLES = `
  .rg-btn:disabled:hover { transform: none; box-shadow: 0 4px 0 #d1d5db; }
  .rg-spinner { animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .rg-form-footer {
    text-align: center;
@ -348,7 +451,6 @@ const STYLES = `
  }
  .rg-link:hover { color: #7c3aed; }
  /* Responsive */
  @media (max-width: 860px) {
    .rg-left { display: none; }
    .rg-right { padding: 2rem 1.5rem; }
@ -450,13 +552,195 @@ const BG_DOTS = [
 ];
 const INITIALS = ["JD", "AS", "MK", "RP", "LL"];
 const ACCEPTED = ["image/jpeg", "image/png", "image/webp", "image/gif"];
 // ─── Avatar Upload Component ───────────────────────────────────────────────
 interface AvatarUploadProps {
  avatarUrl: string;
  onAvatarChange: (url: string) => void;
  disabled?: boolean;
 }
 function AvatarUpload({
  avatarUrl,
  onAvatarChange,
  disabled,
 }: AvatarUploadProps) {
  const [isDragOver, setIsDragOver] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadError, setUploadError] = useState("");
  const [previewUrl, setPreviewUrl] = useState("");
  const fileInputRef = useRef<HTMLInputElement>(null);
  const processFile = useCallback(
    async (file: File) => {
      if (!ACCEPTED.includes(file.type)) {
        setUploadError("Please upload a JPG, PNG, WebP, or GIF image.");
        return;
      }
      if (file.size > 5 * 1024 * 1024) {
        setUploadError("Image must be under 5 MB.");
        return;
      }
      setUploadError("");
      // Show local preview immediately
      const local = URL.createObjectURL(file);
      setPreviewUrl(local);
      setIsUploading(true);
      setUploadProgress(0);
      // Fake progress ticks while uploading
      const ticker = setInterval(() => {
        setUploadProgress((p) => Math.min(p + 12, 85));
      }, 120);
      try {
        const uploadedUrl = await api.uploadAvatar(file);
        clearInterval(ticker);
        setUploadProgress(100);
        onAvatarChange(uploadedUrl);
        setTimeout(() => {
          setIsUploading(false);
          setUploadProgress(0);
        }, 600);
      } catch {
        clearInterval(ticker);
        setIsUploading(false);
        setUploadProgress(0);
        setPreviewUrl("");
        setUploadError("Upload failed. Please try again.");
      }
    },
    [onAvatarChange],
  );
  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragOver(false);
    const file = e.dataTransfer.files[0];
    if (file) processFile(file);
  };
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) processFile(file);
    e.target.value = "";
  };
  const handleRemove = (ev: React.MouseEvent) => {
    ev.stopPropagation();
    setPreviewUrl("");
    onAvatarChange("");
    setUploadError("");
  };
  const displayUrl = previewUrl || avatarUrl;
  return (
    <div className="av-upload-wrap">
      {/* Hidden file input */}
      <input
        ref={fileInputRef}
        type="file"
        accept={ACCEPTED.join(",")}
        style={{ display: "none" }}
        onChange={handleFileChange}
        disabled={disabled || isUploading}
      />
      {/* Avatar circle */}
      <div
        className="av-circle"
        onClick={() =>
          !disabled && !isUploading && fileInputRef.current?.click()
        }
        title="Click to change photo"
      >
        <div className={`av-circle-inner ${displayUrl ? "has-image" : ""}`}>
          {displayUrl ? (
            <img src={displayUrl} alt="Avatar preview" />
          ) : (
            <Camera size={24} color="#c4b5fd" />
          )}
          <div className="av-circle-overlay">
            <Camera size={18} color="white" />
          </div>
        </div>
        {displayUrl && !isUploading && (
          <div
            className="av-remove-btn"
            onClick={handleRemove}
            title="Remove photo"
          >
            <X size={10} color="white" strokeWidth={3} />
          </div>
        )}
      </div>
      {/* Drop zone */}
      <div
        className={`av-dropzone ${isDragOver ? "dragover" : ""}`}
        onClick={() =>
          !disabled && !isUploading && fileInputRef.current?.click()
        }
        onDragOver={(e) => {
          e.preventDefault();
          setIsDragOver(true);
        }}
        onDragLeave={() => setIsDragOver(false)}
        onDrop={handleDrop}
      >
        {isUploading ? (
          <>
            <div className="av-uploading-label">
              <Loader2 size={12} className="av-upload-spinner" />
              Uploading photo…
            </div>
            <div className="av-progress-wrap">
              <div
                className="av-progress-bar"
                style={{ width: `${uploadProgress}%` }}
              />
            </div>
          </>
        ) : (
          <>
            <div className="av-dropzone-title">
              <Upload size={13} color="#a855f7" />
              {displayUrl ? "Change photo" : "Upload a photo"}
            </div>
            <div className="av-dropzone-sub">
              {isDragOver ? "Drop it here!" : "Click or drag & drop"}
            </div>
            <div className="av-dropzone-types">
              {["PNG", "JPG", "WebP"].map((t) => (
                <span key={t} className="av-type-badge">
                  {t}
                </span>
              ))}
              <span
                className="av-type-badge"
                style={{ background: "#fef3c7", color: "#b45309" }}
              >
                Max 5 MB
              </span>
            </div>
          </>
        )}
        {uploadError && <div className="av-upload-error">⚠️ {uploadError}</div>}
      </div>
    </div>
  );
 }
 // ─── Main Register Page ───────────────────────────────────────────────────
 export const Register = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [avatarUrl, setAvatarUrl] = useState("");
  const [password, setPassword] = useState("");
  const [avatarError, setAvatarError] = useState(false);
  const navigate = useNavigate();
  const { register, isLoading, error, clearError } = useAuthStore();
@ -473,7 +757,7 @@ export const Register = () => {
      avatar_url: avatarUrl,
      password,
    });
-    if (success) navigate("/student/home", { replace: true });
+    if (success) navigate("/login", { replace: true });
  };
  return (
@ -486,7 +770,6 @@ export const Register = () => {
        <div className="rg-panel-blob rg-panel-blob-2" />
        <div className="rg-panel-blob rg-panel-blob-3" />
        {/* Decorative floating dots */}
        {PANEL_DOTS.map((d, i) => (
          <div
            key={i}
@ -507,7 +790,6 @@ export const Register = () => {
          />
        ))}
        {/* Stars */}
        {[
          { top: "14%", left: "20%", size: 14, delay: "0s" },
          { top: "28%", left: "78%", size: 10, delay: "0.7s" },
@ -530,7 +812,6 @@ export const Register = () => {
          />
        ))}
        {/* Decorative ring shapes */}
        {[
          { size: 90, top: "72%", left: "5%", delay: "0.2s", dur: "10s" },
          { size: 60, top: "8%", left: "55%", delay: "1.1s", dur: "13s" },
@ -554,13 +835,10 @@ export const Register = () => {
        ))}
        <div className="rg-panel-content">
          {/* Logo */}
          <div className="rg-panel-logo">
            <div className="rg-panel-logo-badge">📚</div>
            <span className="rg-panel-logo-text">EdBridge</span>
          </div>
          {/* Headline */}
          <div className="rg-panel-headline">
            <h2>
              Ace the SAT.
@ -573,8 +851,6 @@ export const Register = () => {
              SAT scores with personalized practice.
            </p>
          </div>
          {/* Feature pills */}
          <div className="rg-features">
            {FEATURES.map((f, i) => (
              <div className="rg-feature" key={i}>
@ -588,8 +864,6 @@ export const Register = () => {
              </div>
            ))}
          </div>
          {/* Social proof */}
          <div className="rg-social-proof">
            <div className="rg-avatars">
              {INITIALS.map((s, i) => (
@ -628,62 +902,20 @@ export const Register = () => {
        ))}
        <div className="rg-form-wrap">
          {/* Header */}
          <div className="rg-form-header">
            <h1>Create your account ✨</h1>
            <p>Fill in the details below to get started</p>
          </div>
-          {/* Avatar URL row */}
+          {/* ── Avatar Upload ── */}
-          <div className="rg-avatar-row">
+          <AvatarUpload
-            <div
+            avatarUrl={avatarUrl}
-              className={`rg-avatar-ring ${avatarUrl && !avatarError ? "filled" : ""}`}
+            onAvatarChange={setAvatarUrl}
-            >
+            disabled={isLoading}
-              {avatarUrl && !avatarError ? (
+          />
                <img
                  src={avatarUrl}
                  alt="Avatar"
                  onError={() => setAvatarError(true)}
                />
              ) : (
                <ImageIcon size={20} color="#d1d5db" />
              )}
            </div>
            <div className="rg-avatar-input-col">
              <span className="rg-avatar-label">
                Avatar URL{" "}
                <span
                  style={{
                    fontWeight: 600,
                    textTransform: "none",
                    letterSpacing: 0,
                    color: "#c4b5fd",
                    fontSize: "0.68rem",
                  }}
                >
                  (optional)
                </span>
              </span>
              <input
                className="rg-avatar-input"
                type="url"
                placeholder="https://example.com/photo.jpg"
                value={avatarUrl}
                onChange={(e) => {
                  setAvatarUrl(e.target.value);
                  setAvatarError(false);
                }}
                disabled={isLoading}
              />
              <span className="rg-avatar-hint">
                Paste any image URL to set your profile photo
              </span>
            </div>
          </div>
          {/* Fields */}
          <div className="rg-fields">
            {/* Name + Email row */}
            <div className="rg-row">
              <div className="rg-field">
                <label className="rg-label" htmlFor="name">
@ -704,7 +936,6 @@ export const Register = () => {
              </div>
            </div>
            {/* Email */}
            <div className="rg-field">
              <label className="rg-label" htmlFor="email">
                Email
@ -723,7 +954,6 @@ export const Register = () => {
              </div>
            </div>
            {/* Password */}
            <div className="rg-field">
              <label className="rg-label" htmlFor="password">
                Password
@ -757,14 +987,12 @@ export const Register = () => {
              )}
            </div>
            {/* Error */}
            {error && (
              <div className="rg-error">
                <span>⚠️</span> {error}
              </div>
            )}
            {/* Submit */}
            <button
              className="rg-btn"
              onClick={handleSubmit}
@ -772,8 +1000,7 @@ export const Register = () => {
            >
              {isLoading ? (
                <>
-                  <Loader2 size={18} className="rg-spinner" /> Creating
+                  <Loader2 size={18} className="rg-spinner" /> Creating account…
                  account...
                </>
              ) : (
                "Create Account →"
--- a/src/pages/student/Home.tsx
+++ b/src/pages/student/Home.tsx
@ -19,7 +19,6 @@ const DOTS = [
 ];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
@ -312,6 +311,7 @@ const PAGE_SIZE = 6;
 export const Home = () => {
  const user = useAuthStore((state) => state.user);
  const token = useAuthStore((state) => state.token);
  const navigate = useNavigate();
  const [practiceSheets, setPracticeSheets] = useState<PracticeSheet[]>([]);
@ -337,14 +337,8 @@ export const Home = () => {
    };
    const fetch = async () => {
-      if (!user) return;
+      if (!user || !token) return;
      try {
        const authStorage = localStorage.getItem("auth-storage");
        if (!authStorage) return;
        const {
          state: { token },
        } = JSON.parse(authStorage);
        if (!token) return;
        const sheets = await api.getPracticeSheets(token, 1, 10);
        setPracticeSheets(sheets.data);
        sort(sheets.data);
--- a/src/pages/student/Lessons.tsx
+++ b/src/pages/student/Lessons.tsx
@ -31,7 +31,6 @@ const DOTS = [
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
@ -465,6 +464,7 @@ const VideoCard = ({ lesson, index, searchQuery, onClick }: VideoCardProps) => (
 // ─── Component ────────────────────────────────────────────────────────────────
 export const Lessons = () => {
  const user = useAuthStore((s) => s.user);
  const token = useAuthStore((s) => s.token);
  // Video lessons from API — typed as Lesson[]
  const [allVideos, setAllVideos] = useState<Lesson[]>([]);
@ -486,17 +486,9 @@ export const Lessons = () => {
  useEffect(() => {
    const fetchVideos = async () => {
-      if (!user) return;
+      if (!user || !token) return;
      try {
        setLessonLoading(true);
        const authStorage = localStorage.getItem("auth-storage");
        if (!authStorage) return;
        const {
          // @ts-ignore
          state: { token },
        } = JSON.parse(authStorage) as { state?: { token?: string } };
        if (!token) return;
        const response = await api.fetchLessonVideos(token);
        // response matches LessonsResponse: { data: Lesson[], pagination: ... }
        setAllVideos(response.data);
--- a/src/pages/student/Practice.tsx
+++ b/src/pages/student/Practice.tsx
@ -1,12 +1,4 @@
-import {
+import { DraftingCompass, FileText, Target, Trophy, Zap } from "lucide-react";
  BookOpen,
  Clock,
  DraftingCompass,
  Loader2,
  Target,
  Trophy,
  Zap,
 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { InfoHeader } from "../../components/InfoHeader";
@ -20,19 +12,18 @@ const DOTS = [
 ];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
  .pr-screen {
    min-height: 100vh;
    padding-bottom: 40px;
    background: #fffbf4;
    font-family: 'Nunito', sans-serif;
    position: relative;
    overflow-x: hidden;
  }
  /* On desktop, account for sidebar */
  @media (min-width: 768px) {
    .pr-screen {
      padding-left: calc(17rem + 1.25rem);
@ -70,10 +61,9 @@ const STYLES = `
    display: flex; flex-direction: column; gap: 1.5rem;
  }
  /* Desktop / wide layout */
  @media (min-width: 900px) {
    .pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
-    .pr-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+    .pr-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
    .pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
    .pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
@ -95,29 +85,6 @@ const STYLES = `
  .pr-anim-3 { animation-delay: 0.15s; }
  .pr-anim-4 { animation-delay: 0.2s; }
  /* ── Header ── */
  .pr-header {
    display: flex; align-items: center; justify-content: space-between;
    animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  .pr-logo-btn {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 0 #5b21b644;
  }
  .pr-xp-chip {
    display: flex; align-items: center; gap: 0.5rem;
    background: white; border: 2.5px solid #e9d5ff;
    border-radius: 100px; padding: 0.45rem 1rem;
    font-size: 0.85rem; font-weight: 800; color: #7c3aed;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  }
  .pr-xp-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
  }
  /* ── Hero banner ── */
  .pr-hero {
    border-radius: 24px;
@ -175,15 +142,15 @@ const STYLES = `
  /* ── Mode card ── */
  .pr-mode-card {
    background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
-    padding: 1.1rem 1.25rem;
+    padding: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
-    cursor: pointer; display: flex; flex-direction: column; gap: 0.85rem;
+    cursor: pointer; display: flex; flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative; overflow: hidden;
  }
  .pr-mode-card:hover  {
-    transform: translateY(-3px);
+    transform: translateY(-4px);
-    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
+    box-shadow: 0 14px 32px rgba(0,0,0,0.1);
  }
  .pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
@ -193,71 +160,455 @@ const STYLES = `
  .pr-mode-card.cyan:hover   { border-color: #67e8f9; }
  .pr-mode-card.lime   { border-color: #d9f99d; }
  .pr-mode-card.lime:hover   { border-color: #bef264; }
  .pr-mode-card.amber  { border-color: #fde68a; }
  .pr-mode-card.amber:hover  { border-color: #fcd34d; }
  /* Illustration strip at top of card */
  .pr-card-illo {
    width: 100%;
    height: 110px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .pr-card-illo svg {
    width: 100%;
    height: 100%;
  }
  /* Card body below illustration */
  .pr-card-body {
    padding: 1rem 1.1rem 1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
    flex: 1;
  }
  .pr-mode-top {
-    display: flex; align-items: flex-start; justify-content: space-between;
+    display: flex; align-items: center; gap: 0.6rem;
  }
  .pr-mode-icon {
-    width: 44px; height: 44px; border-radius: 14px;
+    width: 36px; height: 36px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
-  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 4px 0 #b91c1c44; }
+  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 3px 0 #b91c1c44; }
-  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 4px 0 #0e7490aa; }
+  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 3px 0 #0e7490aa; }
-  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 4px 0 #4d7c0f44; }
+  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 3px 0 #4d7c0f44; }
-
+  .pr-mode-icon.amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 0 #92400e44; }
  .pr-mode-badge {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .pr-mode-badge.red  { background: #fff5f5; }
  .pr-mode-badge.cyan { background: #ecfeff; }
  .pr-mode-badge.lime { background: #f7ffe4; }
  .pr-mode-title {
-    font-size: 1rem; font-weight: 900; color: #1e1b4b;
+    font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
  }
  .pr-mode-desc {
    font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.78rem; font-weight: 600; color: #9ca3af;
+    font-size: 0.76rem; font-weight: 600; color: #9ca3af;
    line-height: 1.4;
  }
  .pr-mode-arrow {
    font-size: 0.75rem; font-weight: 800; margin-top: auto;
    display: flex; align-items: center; gap: 0.25rem;
    transition: gap 0.2s ease;
    padding-top: 0.25rem;
  }
  .pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
  .pr-mode-arrow.red  { color: #ef4444; }
  .pr-mode-arrow.cyan { color: #06b6d4; }
  .pr-mode-arrow.lime { color: #84cc16; }
  .pr-mode-arrow.amber{ color: #f59e0b; }
  /* Wiggle on hover for illustration elements */
  .pr-mode-card:hover .illo-wiggle {
    animation: illoWiggle 0.5s ease;
  }
  @keyframes illoWiggle {
    0%,100%{transform:rotate(0deg);}
    25%{transform:rotate(-5deg);}
    75%{transform:rotate(5deg);}
  }
 `;
 /* ── SVG Illustrations for each card ── */
 const IlloTargeted = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#fff5f5" />
    {/* soft bg circles */}
    <circle cx="200" cy="55" r="70" fill="#fee2e2" opacity="0.6" />
    <circle cx="220" cy="30" r="30" fill="#fecaca" opacity="0.4" />
    {/* Target rings */}
    <circle
      cx="195"
      cy="58"
      r="44"
      stroke="#fca5a5"
      strokeWidth="2.5"
      fill="none"
    />
    <circle
      cx="195"
      cy="58"
      r="30"
      stroke="#f87171"
      strokeWidth="2.5"
      fill="none"
    />
    <circle cx="195" cy="58" r="16" fill="#ef4444" opacity="0.9" />
    <circle cx="195" cy="58" r="6" fill="white" />
    {/* Arrow hitting bullseye */}
    <line
      x1="130"
      y1="20"
      x2="187"
      y2="56"
      stroke="#dc2626"
      strokeWidth="3"
      strokeLinecap="round"
    />
    <polygon points="187,56 178,46 192,49" fill="#dc2626" />
    {/* Arrow fletching */}
    <line
      x1="130"
      y1="20"
      x2="120"
      y2="12"
      stroke="#dc2626"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="130"
      y1="20"
      x2="122"
      y2="25"
      stroke="#dc2626"
      strokeWidth="2"
      strokeLinecap="round"
    />
    {/* Sparkles */}
    <circle cx="60" cy="35" r="4" fill="#fbbf24" opacity="0.7" />
    <circle cx="80" cy="70" r="3" fill="#f87171" opacity="0.5" />
    <circle cx="45" cy="75" r="5" fill="#fca5a5" opacity="0.4" />
    <path d="M50 30 l3 -8 l3 8 l-6 0Z" fill="#ef4444" opacity="0.4" />
    <path d="M100 80 l2 -6 l2 6 l-4 0Z" fill="#fca5a5" opacity="0.5" />
  </svg>
 );
 const IlloDrills = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#ecfeff" />
    <circle cx="50" cy="55" r="65" fill="#cffafe" opacity="0.5" />
    <circle cx="25" cy="25" r="28" fill="#a5f3fc" opacity="0.35" />
    {/* Stopwatch body */}
    <circle
      cx="70"
      cy="62"
      r="36"
      fill="white"
      stroke="#22d3ee"
      strokeWidth="3"
    />
    <circle
      cx="70"
      cy="62"
      r="28"
      fill="#ecfeff"
      stroke="#67e8f9"
      strokeWidth="1.5"
    />
    {/* Clock hands */}
    <line
      x1="70"
      y1="62"
      x2="70"
      y2="40"
      stroke="#06b6d4"
      strokeWidth="3"
      strokeLinecap="round"
    />
    <line
      x1="70"
      y1="62"
      x2="88"
      y2="70"
      stroke="#0891b2"
      strokeWidth="2.5"
      strokeLinecap="round"
    />
    <circle cx="70" cy="62" r="3.5" fill="#0891b2" />
    {/* Crown / button */}
    <rect x="64" y="22" width="12" height="6" rx="3" fill="#22d3ee" />
    <rect x="56" y="18" width="8" height="5" rx="2.5" fill="#06b6d4" />
    {/* Lightning bolts (speed) */}
    <path
      d="M148 20 l-10 22 h10 l-10 22"
      stroke="#f59e0b"
      strokeWidth="3"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />
    <path
      d="M170 30 l-8 18 h8 l-8 18"
      stroke="#fbbf24"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
      opacity="0.7"
    />
    <path
      d="M192 38 l-6 14 h6 l-6 14"
      stroke="#fcd34d"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
      opacity="0.5"
    />
    {/* Speed lines */}
    <line
      x1="115"
      y1="52"
      x2="140"
      y2="52"
      stroke="#22d3ee"
      strokeWidth="2"
      strokeLinecap="round"
      opacity="0.5"
    />
    <line
      x1="120"
      y1="62"
      x2="138"
      y2="62"
      stroke="#22d3ee"
      strokeWidth="1.5"
      strokeLinecap="round"
      opacity="0.35"
    />
    <line
      x1="118"
      y1="72"
      x2="136"
      y2="72"
      stroke="#22d3ee"
      strokeWidth="1"
      strokeLinecap="round"
      opacity="0.25"
    />
    {/* dots */}
    <circle cx="220" cy="28" r="5" fill="#22d3ee" opacity="0.4" />
    <circle cx="240" cy="75" r="4" fill="#06b6d4" opacity="0.3" />
    <circle cx="210" cy="88" r="3" fill="#67e8f9" opacity="0.4" />
  </svg>
 );
 const IlloHard = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#f7ffe4" />
    <circle cx="210" cy="55" r="70" fill="#d9f99d" opacity="0.5" />
    <circle cx="230" cy="20" r="30" fill="#bef264" opacity="0.3" />
    {/* Trophy */}
    <rect x="168" y="78" width="44" height="8" rx="4" fill="#84cc16" />
    <rect x="182" y="68" width="16" height="12" rx="2" fill="#a3e635" />
    <path
      d="M163 28 h54 v28 a27 27 0 0 1 -54 0 Z"
      fill="white"
      stroke="#84cc16"
      strokeWidth="2.5"
    />
    <path
      d="M163 38 Q148 38 148 52 Q148 63 163 63"
      stroke="#a3e635"
      strokeWidth="2.5"
      fill="none"
      strokeLinecap="round"
    />
    <path
      d="M217 38 Q232 38 232 52 Q232 63 217 63"
      stroke="#a3e635"
      strokeWidth="2.5"
      fill="none"
      strokeLinecap="round"
    />
    {/* Star inside trophy */}
    <path
      d="M190 38 l3 9 h9 l-7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 h9 Z"
      fill="#fbbf24"
    />
    {/* Mountain / difficulty hills */}
    <path d="M20 90 L55 35 L90 90Z" fill="#86efac" opacity="0.7" />
    <path d="M60 90 L95 50 L130 90Z" fill="#4ade80" opacity="0.5" />
    <path d="M85 90 L120 40 L155 90Z" fill="#22c55e" opacity="0.35" />
    {/* flag on tallest */}
    <line
      x1="120"
      y1="40"
      x2="120"
      y2="22"
      stroke="#16a34a"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <path d="M120 22 l12 5 l-12 5 Z" fill="#16a34a" />
    {/* sparkles */}
    <path
      d="M30 28 l2 -5 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 Z"
      fill="#fbbf24"
      opacity="0.6"
    />
    <path
      d="M240 88 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
      fill="#a3e635"
      opacity="0.5"
    />
  </svg>
 );
 const IlloSheet = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#fffbeb" />
    <circle cx="55" cy="55" r="65" fill="#fef3c7" opacity="0.6" />
    <circle cx="30" cy="80" r="30" fill="#fde68a" opacity="0.35" />
    {/* Paper sheet */}
    <rect
      x="30"
      y="18"
      width="72"
      height="82"
      rx="8"
      fill="white"
      stroke="#fcd34d"
      strokeWidth="2.5"
    />
    {/* Folded corner */}
    <path d="M82 18 L102 38 L82 38 Z" fill="#fde68a" />
    <path d="M82 18 L102 38" stroke="#fcd34d" strokeWidth="2" />
    {/* Lines on paper */}
    <line
      x1="42"
      y1="50"
      x2="84"
      y2="50"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="42"
      y1="60"
      x2="90"
      y2="60"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="42"
      y1="70"
      x2="78"
      y2="70"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="42"
      y1="80"
      x2="86"
      y2="80"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    {/* Checkmark on first line */}
    <path
      d="M42 42 l5 5 l9 -9"
      stroke="#22c55e"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />
    {/* Pencil */}
    <g transform="rotate(-35 155 55)">
      <rect x="138" y="28" width="14" height="52" rx="3" fill="#fbbf24" />
      <path d="M138 76 L145 90 L152 76 Z" fill="#f97316" />
      <rect x="138" y="28" width="14" height="10" rx="3" fill="#9ca3af" />
      <rect x="140" y="30" width="10" height="6" rx="2" fill="#d1d5db" />
    </g>
    {/* Stars / highlights */}
    <path
      d="M200 22 l2 -6 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 Z"
      fill="#f59e0b"
      opacity="0.7"
    />
    <path
      d="M230 65 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
      fill="#fbbf24"
      opacity="0.5"
    />
    <circle cx="215" cy="88" r="4" fill="#fcd34d" opacity="0.4" />
    <circle cx="240" cy="35" r="3" fill="#fbbf24" opacity="0.35" />
  </svg>
 );
 const MODE_CARDS = [
  {
    color: "red",
-    icon: <Target size={20} color="white" />,
+    icon: <Target size={18} color="white" />,
    badge: <Loader2 size={22} color="#ef4444" />,
    title: "Targeted Practice",
    desc: "Focus on your weak spots and improve fast",
    route: "/student/practice/targeted-practice",
    arrow: "Practice →",
    Illo: IlloTargeted,
  },
  {
    color: "cyan",
-    icon: <Zap size={20} color="white" />,
+    icon: <Zap size={18} color="white" />,
    badge: <Clock size={22} color="#06b6d4" />,
    title: "Drills",
    desc: "Train speed and accuracy under pressure",
    route: "/student/practice/drills",
    arrow: "Drill →",
    Illo: IlloDrills,
  },
  {
    color: "lime",
-    icon: <Trophy size={20} color="white" />,
+    icon: <Trophy size={18} color="white" />,
    badge: <BookOpen size={22} color="#84cc16" />,
    title: "Hard Modules",
    desc: "Push yourself with the toughest questions",
    route: "/student/practice/hard-test-modules",
    arrow: "Challenge →",
    Illo: IlloHard,
  },
  {
    color: "amber",
    icon: <FileText size={18} color="white" />,
    title: "Practice Sheet",
    desc: "Work through curated question sets at your own pace",
    route: "/student/practice/practice-sheet",
    arrow: "Start Sheet →",
    Illo: IlloSheet,
  },
 ] as const;
@ -297,6 +648,7 @@ export const Practice = () => {
      <div className="pr-inner">
        {/* ── Header ── */}
        <InfoHeader mode="LEVEL" />
        {/* ── Hero banner ── */}
        <div className="pr-hero pr-anim pr-anim-1">
          <div className="pr-hero-icon-bg">
@ -307,7 +659,12 @@ export const Practice = () => {
          <p className="pr-hero-sub">
            Take a full adaptive test and benchmark your SAT readiness.
          </p>
-          <button className="pr-hero-btn">Take a practice test →</button>
+          <button
            onClick={() => navigate("/student/practice/practice-sheet")}
            className="pr-hero-btn"
          >
            Take a practice test →
          </button>
        </div>
        {/* ── Practice modes ── */}
@ -322,19 +679,22 @@ export const Practice = () => {
                className={`pr-mode-card ${card.color}`}
                onClick={() => navigate(card.route)}
              >
-                <div className="pr-mode-top">
+                {/* Illustration */}
-                  <div className={`pr-mode-icon ${card.color}`}>
+                <div className="pr-card-illo">
-                    {card.icon}
+                  <card.Illo />
                  </div>
                  <div className={`pr-mode-badge ${card.color}`}>
                    {card.badge}
                  </div>
                </div>
-                <div>
+
-                  <p className="pr-mode-title">{card.title}</p>
+                {/* Body */}
                <div className="pr-card-body">
                  <div className="pr-mode-top">
                    <div className={`pr-mode-icon ${card.color}`}>
                      {card.icon}
                    </div>
                    <p className="pr-mode-title">{card.title}</p>
                  </div>
                  <p className="pr-mode-desc">{card.desc}</p>
                  <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
                </div>
                <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
              </div>
            ))}
          </div>
--- a/src/pages/student/Profile.tsx
+++ b/src/pages/student/Profile.tsx
@ -17,7 +17,6 @@ const DOTS = [
 ];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
--- a/src/pages/student/QuestMap.tsx
+++ b/src/pages/student/QuestMap.tsx
@ -7,12 +7,13 @@ import type {
 import { useQuestStore } from "../../stores/useQuestStore";
 import { useAuthStore } from "../../stores/authStore";
 import { api } from "../../utils/api";
 import { generateArcTheme, mkRng, strToSeed, type ArcTheme } from "../../utils/arcTheme";
 import { QuestNodeModal } from "../../components/QuestNodeModal";
 import { ChestOpenModal } from "../../components/ChestOpenModal";
 import { InfoHeader } from "../../components/InfoHeader";
 import { Canvas, useThree, useFrame } from "@react-three/fiber";
 import { Island3D } from "../../components/Island3D";
-import { Billboard, OrbitControls, Stars, Text } from "@react-three/drei";
+import { OrbitControls, Stars } from "@react-three/drei";
 import * as THREE from "three";
 // ─── Map geometry ─────────────────────────────────────────────────────────────
@ -21,22 +22,7 @@ const TOP_PAD = 80;
 const ROW_H = 520; // vertical step per island (increased for more separation)
 // ─── Seeded RNG ───────────────────────────────────────────────────────────────
-const mkRng = (seed: number) => {
+// mkRng, strToSeed imported from ../../utils/arcTheme
  let s = seed >>> 0;
  return () => {
    s += 0x6d2b79f5;
    let t = Math.imul(s ^ (s >>> 15), 1 | s);
    t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
 };
 const strToSeed = (str: string) => {
  let h = 5381;
  for (let i = 0; i < str.length; i++)
    h = (Math.imul(h, 33) ^ str.charCodeAt(i)) >>> 0;
  return h;
 };
 // ─── Random island positions ──────────────────────────────────────────────────
 // Generates organic-feeling positions that zigzag downward with random offsets.
@ -102,8 +88,7 @@ const generateIslandPositions = (
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&family=Cinzel:wght@700;900&display=swap');
+
  @import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');
  * { box-sizing: border-box; }
@ -601,92 +586,7 @@ const ERROR_STYLES = `
 `;
 // ─── Arc theme ────────────────────────────────────────────────────────────────
-export interface ArcTheme {
+// ArcTheme, generateArcTheme imported from ../../utils/arcTheme
  accent: string;
  accentDark: string;
  bgFrom: string;
  bgTo: string;
  emoji: string;
  terrain: { l: string; m: string; d: string; s: string };
  decos: [string, string, string];
 }
 const DECO_SETS: [string, string, string][] = [
  ["🌴", "🌿", "🌴"],
  ["🌵", "🏺", "🌵"],
  ["☁️", "✨", "☁️"],
  ["🪨", "🌾", "🪨"],
  ["🍄", "🌸", "🍄"],
  ["🔥", "💀", "🔥"],
  ["❄️", "🌨️", "❄️"],
  ["🌺", "🦜", "🌺"],
 ];
 const hslToHex = (h: number, s: number, l: number) => {
  const a = s * Math.min(l, 1 - l);
  const f = (n: number) => {
    const k = (n + h * 12) % 12;
    const c = l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
    return Math.round(255 * c)
      .toString(16)
      .padStart(2, "0");
  };
  return `#${f(0)}${f(8)}${f(4)}`;
 };
 export const generateArcTheme = (arc: QuestArc): ArcTheme => {
  const rng = mkRng(strToSeed(arc.id));
  const anchors = [150, 165, 180, 200, 230, 260];
  const baseHue =
    anchors[Math.floor(rng() * anchors.length)] + (rng() - 0.5) * 8;
  const satBase = 0.48 + rng() * 0.18;
  const satTerrain = Math.min(0.8, satBase + 0.12);
  const accentLightL = 0.48 + rng() * 0.12;
  const accentDarkL = 0.22 + rng() * 0.06;
  const bgFromL = 0.04 + rng() * 0.06;
  const bgToL = 0.1 + rng() * 0.06;
  const accent = hslToHex(baseHue, satBase, accentLightL);
  const accentDark = hslToHex(
    baseHue + (rng() * 6 - 3),
    Math.max(0.35, satBase - 0.08),
    accentDarkL,
  );
  const bgFrom = hslToHex(
    baseHue + (rng() * 10 - 5),
    0.1 + rng() * 0.06,
    bgFromL,
  );
  const bgTo = hslToHex(baseHue + (6 + rng() * 12), 0.08 + rng() * 0.06, bgToL);
  const tL = hslToHex(
    baseHue + 10 + rng() * 6,
    Math.min(0.85, satTerrain),
    0.36 + rng() * 0.08,
  );
  const tM = hslToHex(
    baseHue + (rng() * 6 - 3),
    Math.min(0.72, satTerrain - 0.06),
    0.24 + rng() * 0.06,
  );
  const tD = hslToHex(
    baseHue + (rng() * 8 - 4),
    Math.max(0.38, satBase - 0.18),
    0.1 + rng() * 0.04,
  );
  const sd = parseInt(tD.slice(1, 3), 16);
  const sg = parseInt(tD.slice(3, 5), 16);
  const sb = parseInt(tD.slice(5, 7), 16);
  const emojis = ["🌿", "🌲", "🌳", "🌺", "🪨", "🍄", "🌵"];
  const emoji = emojis[Math.floor(rng() * emojis.length)];
  return {
    accent,
    accentDark,
    bgFrom,
    bgTo,
    emoji,
    terrain: { l: tL, m: tM, d: tD, s: `rgba(${sd},${sg},${sb},0.6)` },
    decos: DECO_SETS[Math.floor(rng() * DECO_SETS.length)],
  };
 };
 const themeCache = new Map<string, ArcTheme>();
 const getArcTheme = (arc: QuestArc): ArcTheme => {
@ -860,11 +760,6 @@ const RouteSegment = ({
      {/* Travelling ship on the active leg */}
      {isActive && !isDone && (
        <group ref={shipRef}>
          <Billboard>
            <Text fontSize={0.3} anchorX="center" anchorY="middle">
              ⛵
            </Text>
          </Billboard>
          {/* Gold wake glow disk */}
          <mesh rotation-x={-Math.PI / 2} position-y={0.04}>
            <circleGeometry args={[0.19, 16]} />
--- a/src/pages/student/Rewards.tsx
+++ b/src/pages/student/Rewards.tsx
@ -31,7 +31,6 @@ const DOTS = [
 ];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
@ -415,6 +414,7 @@ const EmptyState = () => (
 export const Rewards = () => {
  const user = useAuthStore((state) => state.user);
  const token = useAuthStore((state) => state.token);
  const [time, setTime] = useState("today");
  const [activeTab, setActiveTab] = useState<TabId>("xp");
  const [leaderboard, setLeaderboard] = useState<Leaderboard | undefined>();
@ -431,20 +431,15 @@ export const Rewards = () => {
  useEffect(() => {
    const fetchData = async () => {
-      if (!user) return;
+      if (!user || !token) return;
      const authStorage = localStorage.getItem("auth-storage");
      if (!authStorage) return;
      const parsed = JSON.parse(authStorage) as {
        state?: { token?: string };
      } | null;
      const token = parsed?.state?.token;
      if (!token) return;
      try {
        setLoading(true);
        const timeframe =
          activeTab === "streaks" ? "all_time" : (TIME_MAP[time] ?? "daily");
        const response = await api.fetchLeaderboard(
          token,
          activeTab,
-          TIME_MAP[time] ?? "daily",
+          timeframe,
        );
        setLeaderboard(response);
        // ✅ FIX 1: Guard against null user_rank before accessing its properties
@ -563,9 +558,13 @@ export const Rewards = () => {
            </div>
            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
+              <DropdownMenuTrigger asChild disabled={activeTab === "streaks"}>
-                <button className="rw-filter-btn">
+                <button
-                  {formatTimeLabel(time)} <ChevronDown size={13} />
+                  className="rw-filter-btn"
                  style={activeTab === "streaks" ? { opacity: 0.5, cursor: "not-allowed" } : undefined}
                >
                  {activeTab === "streaks" ? "All Time" : formatTimeLabel(time)}{" "}
                  <ChevronDown size={13} />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent
--- a/src/pages/student/StudentLayout.tsx
+++ b/src/pages/student/StudentLayout.tsx
@ -57,8 +57,7 @@ const QUEST_NAV_ITEMS = NAV_ITEMS.map((item) =>
 );
 const STYLES = `
-  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Cinzel:wght@700&display=swap');
+
  @import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');
  /* ══ DEFAULT dock (cream frosted glass) ══ */
  .sl-dock-wrap {
--- a/src/pages/student/drills/page.tsx
+++ b/src/pages/student/drills/page.tsx
@ -22,7 +22,6 @@ const DOTS = [
 ];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
@ -281,6 +280,7 @@ const STYLES = `
 export const Drills = () => {
  const user = useAuthStore((state) => state.user);
  const token = useAuthStore((state) => state.token);
  const navigate = useNavigate();
  const [direction, setDirection] = useState<1 | -1>(1);
@ -319,16 +319,9 @@ export const Drills = () => {
  useEffect(() => {
    const fetchAllTopics = async () => {
-      if (!user) return;
+      if (!user || !token) return;
      try {
        setLoading(true);
        const authStorage = localStorage.getItem("auth-storage");
        if (!authStorage) return;
        const parsed = JSON.parse(authStorage) as {
          state?: { token?: string };
        } | null;
        const token = parsed?.state?.token;
        if (!token) return;
        const response = await api.fetchAllTopics(token);
        setTopics(response);
      } catch (e) {
--- a/src/pages/student/hard-test-modules/page.tsx
+++ b/src/pages/student/hard-test-modules/page.tsx
@ -24,7 +24,6 @@ const DOTS = [
 ];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
--- a/src/pages/student/practice-sheet/page.tsx
+++ b/src/pages/student/practice-sheet/page.tsx
--- a/src/pages/student/practice/Pretest.tsx
+++ b/src/pages/student/practice/Pretest.tsx
@ -23,7 +23,6 @@ const DOTS = [
 ];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
@ -227,6 +226,7 @@ export const Pretest = () => {
  const { setSheetId, setMode, storeDuration, setQuestionCount } =
    useExamConfigStore();
  const user = useAuthStore((state) => state.user);
  const token = useAuthStore((state) => state.token);
  const { sheetId } = useParams<{ sheetId: string }>();
  const navigate = useNavigate();
@ -246,15 +246,9 @@ export const Pretest = () => {
  }
  useEffect(() => {
-    if (!user) return;
+    if (!user || !token) return;
    async function fetchSheet(id: string) {
-      const authStorage = localStorage.getItem("auth-storage");
+      const data = await api.getPracticeSheetById(token!, id);
      if (!authStorage) return;
      const {
        state: { token },
      } = JSON.parse(authStorage);
      if (!token) return;
      const data = await api.getPracticeSheetById(token, id);
      setPracticeSheet(data);
    }
    fetchSheet(sheetId!);
--- a/src/pages/student/practice/Results.tsx
+++ b/src/pages/student/practice/Results.tsx
@ -8,7 +8,6 @@ import { useAuthStore } from "../../../stores/authStore";
 // ─── Shared styles injected once ─────────────────────────────────────────────
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
  :root { --content-max: 1100px; }
--- a/src/pages/student/practice/Test.tsx
+++ b/src/pages/student/practice/Test.tsx
@ -91,7 +91,6 @@ const DOTS = [
 // ─── Global Styles ────────────────────────────────────────────────────────────
 const GLOBAL_STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
@ -1170,6 +1169,7 @@ export const Test = () => {
  const handleQuitExam = () => {
    useExamConfigStore.getState().clearPayload();
    quitExam();
    navigate("/student/home", { replace: true });
  };
  const toggleEliminate = (questionId: string, optionId: string) => {
@ -1703,16 +1703,15 @@ export const Test = () => {
                          </p>
                        </div>
                      )}
-                      {currentQuestion?.context_image_url &&
+                      {currentQuestion?.context_image_url && (
-                        currentQuestion.context_image_url !== "NULL" && (
+                        <div className="t-card p-6">
-                          <div className="t-card p-6">
+                          <img
-                            <img
+                            src={currentQuestion.context_image_url}
-                              src="https://placehold.co/600x400"
+                            alt="Question context"
-                              alt="Question context"
+                            className="w-full h-auto rounded-xl"
-                              className="w-full h-auto rounded-xl"
+                          />
-                            />
+                        </div>
-                          </div>
+                      )}
                        )}
                      <div className="t-card t-card-purple p-6">
                        <p className="font-bold text-lg text-[#1e1b4b] leading-relaxed">
                          {currentQuestion?.text &&
@ -1755,26 +1754,24 @@ export const Test = () => {
                      </div>
                    ) : (
                      <>
-                        {currentQuestion?.context_image_url &&
+                        {currentQuestion?.context_image_url && (
-                          currentQuestion.context_image_url !== "NULL" && (
+                          <div className="t-card p-6">
-                            <div className="t-card p-6">
+                            <img
-                              <img
+                              src={currentQuestion.context_image_url}
-                                src="https://placehold.co/600x400"
+                              alt="Question context"
-                                alt="Question context"
+                              className="w-full h-auto rounded-xl"
-                                className="w-full h-auto rounded-xl"
+                            />
-                              />
+                          </div>
-                            </div>
+                        )}
-                          )}
+                        {currentQuestion?.context && (
-                        {currentQuestion?.context &&
+                          <div className="t-card p-6">
-                          currentQuestion.context !== "NULL" && (
+                            <HighlightableRichText
-                            <div className="t-card p-6">
+                              fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
-                              <HighlightableRichText
+                              text={currentQuestion.context}
-                                fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
+                              className="font-semibold text-gray-700 leading-relaxed"
-                                text={currentQuestion.context}
+                            />
-                                className="font-semibold text-gray-700 leading-relaxed"
+                          </div>
-                              />
+                        )}
                            </div>
                          )}
                      </>
                    )}
                  </div>
--- a/src/pages/student/targeted-practice/page.tsx
+++ b/src/pages/student/targeted-practice/page.tsx
@ -66,7 +66,6 @@ const getSectionMeta = (section?: string) =>
  SECTION_META[section ?? ""] ?? SECTION_META["default"];
 const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
  :root { --content-max: 1100px; }
@ -508,16 +507,9 @@ export const TargetedPractice = () => {
  useEffect(() => {
    const fetchAllTopics = async () => {
-      if (!user) return;
+      if (!user || !token) return;
      try {
        setLoading(true);
        const authStorage = localStorage.getItem("auth-storage");
        if (!authStorage) return;
        const parsed = JSON.parse(authStorage) as {
          state?: { token?: string };
        } | null;
        const token = parsed?.state?.token;
        if (!token) return;
        const response = await api.fetchAllTopics(token);
        setTopics(response);
      } catch (error) {
--- a/src/stores/authStore.ts
+++ b/src/stores/authStore.ts
@ -68,6 +68,7 @@ export const useAuthStore = create<AuthState>()(
          set({
            registrationMessage: response.message,
            isLoading: false,
          });
          return true;
@ -119,3 +120,8 @@ export const useAuthStore = create<AuthState>()(
    },
  ),
 );
 /** Safe non-hook token accessor for use outside React components or in callbacks */
 export function getAuthToken(): string | null {
  return useAuthStore.getState().token;
 }
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@ -284,5 +284,38 @@ class ApiClient {
      body: JSON.stringify(titleData),
    });
  }
  /*------------UPLOADS-------------- */
  // token is optional — the /uploads/ endpoint appears to be public
  // (no Authorization header in the curl example). Pass a token if needed.
  async uploadAvatar(file: File, token?: string): Promise<string> {
    const formData = new FormData();
    formData.append("file", file);
    const headers: HeadersInit = { accept: "application/json" };
    if (token) headers["Authorization"] = `Bearer ${token}`;
    // Note: Do NOT set Content-Type manually — fetch sets it automatically
    // with the correct multipart/form-data boundary when the body is FormData.
    const url = `${this.baseURL}/uploads/`;
    const response = await fetch(url, {
      method: "POST",
      headers,
      body: formData,
    });
    if (!response.ok) {
      const error: ApiError = await response.json().catch(() => ({
        message: "Upload failed",
      }));
      throw new Error(error.detail || error.message || "Upload failed");
    }
    const data = await response.json();
    // Adjust the field name below to match your API's response shape,
    // e.g. data.url, data.file_url, data.avatar_url, etc.
    return data.url as string;
  }
 }
 export const api = new ApiClient(API_URL);
--- a/src/utils/arcTheme.ts
+++ b/src/utils/arcTheme.ts
@ -0,0 +1,105 @@
 import type { QuestArc } from "../types/quest";
 export interface ArcTheme {
  accent: string;
  accentDark: string;
  bgFrom: string;
  bgTo: string;
  emoji: string;
  terrain: { l: string; m: string; d: string; s: string };
  decos: [string, string, string];
 }
 export const mkRng = (seed: number) => {
  let s = seed >>> 0;
  return () => {
    s += 0x6d2b79f5;
    let t = Math.imul(s ^ (s >>> 15), 1 | s);
    t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
 };
 export const strToSeed = (str: string) => {
  let h = 5381;
  for (let i = 0; i < str.length; i++)
    h = (Math.imul(h, 33) ^ str.charCodeAt(i)) >>> 0;
  return h;
 };
 const hslToHex = (h: number, s: number, l: number) => {
  const a = s * Math.min(l, 1 - l);
  const f = (n: number) => {
    const k = (n + h * 12) % 12;
    const c = l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
    return Math.round(255 * c)
      .toString(16)
      .padStart(2, "0");
  };
  return `#${f(0)}${f(8)}${f(4)}`;
 };
 const DECO_SETS: [string, string, string][] = [
  ["\u{1F334}", "\u{1F33F}", "\u{1F334}"],
  ["\u{1F335}", "\u{1F3FA}", "\u{1F335}"],
  ["\u2601\uFE0F", "\u2728", "\u2601\uFE0F"],
  ["\u{1FAA8}", "\u{1F33E}", "\u{1FAA8}"],
  ["\u{1F344}", "\u{1F338}", "\u{1F344}"],
  ["\u{1F525}", "\u{1F480}", "\u{1F525}"],
  ["\u2744\uFE0F", "\u{1F328}\uFE0F", "\u2744\uFE0F"],
  ["\u{1F33A}", "\u{1F99C}", "\u{1F33A}"],
 ];
 export const generateArcTheme = (arc: QuestArc): ArcTheme => {
  const rng = mkRng(strToSeed(arc.id));
  const anchors = [150, 165, 180, 200, 230, 260];
  const baseHue =
    anchors[Math.floor(rng() * anchors.length)] + (rng() - 0.5) * 8;
  const satBase = 0.48 + rng() * 0.18;
  const satTerrain = Math.min(0.8, satBase + 0.12);
  const accentLightL = 0.48 + rng() * 0.12;
  const accentDarkL = 0.22 + rng() * 0.06;
  const bgFromL = 0.04 + rng() * 0.06;
  const bgToL = 0.1 + rng() * 0.06;
  const accent = hslToHex(baseHue, satBase, accentLightL);
  const accentDark = hslToHex(
    baseHue + (rng() * 6 - 3),
    Math.max(0.35, satBase - 0.08),
    accentDarkL,
  );
  const bgFrom = hslToHex(
    baseHue + (rng() * 10 - 5),
    0.1 + rng() * 0.06,
    bgFromL,
  );
  const bgTo = hslToHex(baseHue + (6 + rng() * 12), 0.08 + rng() * 0.06, bgToL);
  const tL = hslToHex(
    baseHue + 10 + rng() * 6,
    Math.min(0.85, satTerrain),
    0.36 + rng() * 0.08,
  );
  const tM = hslToHex(
    baseHue + (rng() * 6 - 3),
    Math.min(0.72, satTerrain - 0.06),
    0.24 + rng() * 0.06,
  );
  const tD = hslToHex(
    baseHue + (rng() * 8 - 4),
    Math.max(0.38, satBase - 0.18),
    0.1 + rng() * 0.04,
  );
  const sd = parseInt(tD.slice(1, 3), 16);
  const sg = parseInt(tD.slice(3, 5), 16);
  const sb = parseInt(tD.slice(5, 7), 16);
  const emojis = ["\u{1F33F}", "\u{1F332}", "\u{1F333}", "\u{1F33A}", "\u{1FAA8}", "\u{1F344}", "\u{1F335}"];
  const emoji = emojis[Math.floor(rng() * emojis.length)];
  return {
    accent,
    accentDark,
    bgFrom,
    bgTo,
    emoji,
    terrain: { l: tL, m: tM, d: tD, s: `rgba(${sd},${sg},${sb},0.6)` },
    decos: DECO_SETS[Math.floor(rng() * DECO_SETS.length)],
  };
 };
--- a/vite.config.ts
+++ b/vite.config.ts
@ -11,4 +11,19 @@ export default defineConfig({
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          three: [
            "three",
            "@react-three/fiber",
            "@react-three/drei",
            "troika-three-text",
            "troika-worker-utils",
          ],
        },
      },
    },
  },
 });
Author	SHA1	Message	Date
pptx704	e4c86d473c	fix: resolve bugs and improve frontend performance - Fix register not resetting isLoading on success (causing login page to hang) - Fix leaderboard streaks 400 error by forcing all_time timeframe - Reorder routes so static paths match before dynamic practice/:sheetId - Lazy-load QuestMap + Three.js (saves ~350KB gzip on initial load) - Move KaTeX CSS to lazy import (only loads on math pages) - Remove 28 duplicate Google Font @import lines from component CSS - Add font preconnect + single stylesheet link in index.html - Replace 8 unsafe JSON.parse(localStorage) calls with Zustand selectors - Add global ErrorBoundary to prevent full-app crashes - Extract arcTheme utilities to break static import cycle with QuestMap - Merge Three.js + Troika into single chunk to fix circular dependency Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 08:41:13 +06:00
Shafin Rahman	ebbad9bc9e	Merge pull request 'feat(practice-sheet): add practice sheet page' (#9 ) from web into main Reviewed-on: #9	2026-03-12 19:25:32 +00:00
shafin-r	b435b656e9	feat(practice-sheet): add practice sheet page	2026-03-13 01:24:13 +06:00
Shafin Rahman	da408dcb5d	Merge pull request 'fix(test): fix quit test logic' (#8 ) from web into main Reviewed-on: #8	2026-03-12 13:51:29 +00:00
shafin-r	d7fb618e6f	fix(test): fix quit test logic	2026-03-12 19:50:52 +06:00
Shafin Rahman	d2edafdf77	Merge pull request 'chore(troika): install troika utils' (#7 ) from web into main Reviewed-on: #7	2026-03-12 13:36:26 +00:00
shafin-r	25cfd2383b	chore(troika): install troika utils	2026-03-12 19:35:58 +06:00
Shafin Rahman	eed168b1e5	Merge pull request 'fix(test): fix context image url path' (#6 ) from web into main Reviewed-on: #6	2026-03-12 12:01:20 +00:00
shafin-r	d24ab8f9cf	fix(test): fix context image url path	2026-03-12 18:00:57 +06:00
Shafin Rahman	c5f7f250bc	Merge pull request 'fix(build): fix build errors' (#5 ) from web into main Reviewed-on: #5	2026-03-12 11:47:58 +00:00
shafin-r	c4d3988f8c	fix(build): fix build errors	2026-03-12 17:47:04 +06:00
Shafin Rahman	5397a601c6	Merge pull request 'feat(auth): add registration message for successful registration' (#4 ) from web into main Reviewed-on: #4	2026-03-12 07:53:00 +00:00
shafin-r	4c83fcf7b4	feat(auth): add registration message for successful registration	2026-03-12 13:51:20 +06:00
Shafin Rahman	35cc0f9a47	Merge pull request 'feat(avatar): add user avatar upload at registration' (#3 ) from web into main Reviewed-on: #3	2026-03-11 22:06:32 +00:00
shafin-r	8d86da05b5	feat(avatar): add user avatar upload at registration	2026-03-12 04:05:32 +06:00
Shafin Rahman	d80111a9b7	Merge pull request 'web' (#2 ) from web into main Reviewed-on: #2	2026-03-11 21:11:38 +00:00
shafin-r	c8f2259154	chore(types): add three js types	2026-03-12 03:10:31 +06:00
Shafin Rahman	b3cf462228	Update index.html	2026-03-11 21:02:34 +00:00
shafin-r	a429b1c0b1	chore(html): add analytics script to index.html	2026-03-12 03:01:41 +06:00