Initial working commit

src/app/(protected)/[classSlug]/flashcards/[deckId]/page.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { FlashcardViewer } from "@/components/flashcards/FlashcardViewer";
+import { CardManager } from "@/components/flashcards/CardManager";
+import { ShareMenu } from "@/components/ui/ShareMenu";
+
+
+interface Card {
+  id: string;
+  front: string;
+  back: string;
+  sortOrder: number;
+}
+
+interface DeckData {
+  id: string;
+  name: string;
+  description: string | null;
+  cards: Card[];
+  class: { slug: string; name: string };
+  progress: Array<{
+    mode: "SEQUENTIAL" | "SHUFFLED";
+    currentIndex: number;
+    orderJson: string;
+    cardResultsJson: string | null;
+    updatedAt: string;
+  }>;
+}
+
+export default function DeckStudyPage() {
+  const params = useParams();
+  const router = useRouter();
+  const classSlug = params.classSlug as string;
+  const deckId = params.deckId as string;
+  const [deck, setDeck] = useState<DeckData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [view, setView] = useState<"study" | "manage">("study");
+  const [restartKey, setRestartKey] = useState(0);
+
+  async function handleRestart() {
+    if (!deck) return;
+    
+    // Clear progress in database for both modes
+    await Promise.all([
+      fetch("/api/progress", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SEQUENTIAL" })
+      }).catch(() => {}),
+      fetch("/api/progress", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SHUFFLED" })
+      }).catch(() => {})
+    ]);
+    
+    // Clear locally and force remount
+    setDeck({ ...deck, progress: [] });
+    setRestartKey(k => k + 1);
+  }
+
+  const fetchDeck = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/decks/${deckId}`);
+      if (!res.ok) throw new Error("Not found");
+      const data = await res.json();
+      setDeck(data);
+    } catch {
+      router.push(`/${classSlug}/flashcards`);
+    } finally {
+      setLoading(false);
+    }
+  }, [deckId, classSlug, router]);
+
+  useEffect(() => {
+    fetchDeck();
+  }, [fetchDeck]);
+
+  if (loading || !deck) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="animate-subtle-pulse">
+          <div className="h-8 bg-bg-surface-alt rounded w-1/3 mb-4" />
+          <div className="h-64 bg-bg-surface rounded-xl border border-border-light" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto w-full py-2 md:py-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <button
+            onClick={() => router.push(`/${classSlug}/flashcards`)}
+            className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-heading mb-2 transition-colors cursor-pointer"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to decks
+          </button>
+          <h1 className="text-xl font-bold text-text-heading">{deck.name}</h1>
+          {deck.description && (
+            <p className="text-sm text-text-secondary mt-1">{deck.description}</p>
+          )}
+        </div>
+
+        {/* View toggle & Share */}
+        <div className="flex items-center gap-2 md:gap-4">
+          {view === "study" && (
+            <button
+              onClick={handleRestart}
+              className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
+              title="Restart Session"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+          )}
+          <ShareMenu targetType="DECK" contentId={deck.id} classSlug={classSlug} />
+          
+          <div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
+            <button
+              onClick={() => setView("study")}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                view === "study"
+                  ? "bg-bg-surface text-text-heading shadow-sm"
+                  : "text-text-muted hover:text-text-heading"
+              }`}
+            >
+              Study
+            </button>
+            <button
+              onClick={() => setView("manage")}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                view === "manage"
+                  ? "bg-bg-surface text-text-heading shadow-sm"
+                  : "text-text-muted hover:text-text-heading"
+              }`}
+            >
+              Manage
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      {view === "study" ? (
+        <FlashcardViewer 
+          key={restartKey}
+          cards={deck.cards} 
+          deckId={deck.id} 
+          initialProgress={
+            deck.progress?.length 
+              ? deck.progress.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())[0] 
+              : null
+          }
+        />
+      ) : (
+        <CardManager
+          cards={deck.cards}
+          deckId={deck.id}
+          onCardsChanged={fetchDeck}
+        />
+      )}
+    </div>
+  );
+}