From deef992b8cc7e57b880c1c38f994d38825240ca1 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 7 Dec 2025 18:25:40 +0900
Subject: feat(client): add create card modal with form validation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add CreateCardModal component to allow users to create new flashcards
with front and back text fields. Integrate the modal into DeckDetailPage
with an "Add Card" button. Include comprehensive unit tests.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/client/pages/DeckDetailPage.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'src/client/pages')

diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx
index c713ab0..9fce7b7 100644
--- a/src/client/pages/DeckDetailPage.tsx
+++ b/src/client/pages/DeckDetailPage.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { Link, useParams } from "wouter";
 import { ApiClientError, apiClient } from "../api";
+import { CreateCardModal } from "../components/CreateCardModal";
 
 interface Card {
 	id: string;
@@ -34,6 +35,7 @@ export function DeckDetailPage() {
 	const [cards, setCards] = useState<Card[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
 	const fetchDeck = useCallback(async () => {
 		if (!deckId) return;
@@ -158,6 +160,9 @@ export function DeckDetailPage() {
 						}}
 					>
 						<h2 style={{ margin: 0 }}>Cards ({cards.length})</h2>
+						<button type="button" onClick={() => setIsCreateModalOpen(true)}>
+							Add Card
+						</button>
 					</div>
 
 					{cards.length === 0 && (
@@ -241,6 +246,15 @@ export function DeckDetailPage() {
 					)}
 				</main>
 			)}
+
+			{deckId && (
+				<CreateCardModal
+					isOpen={isCreateModalOpen}
+					deckId={deckId}
+					onClose={() => setIsCreateModalOpen(false)}
+					onCardCreated={fetchCards}
+				/>
+			)}
 		</div>
 	);
 }
-- 
cgit v1.2.3-70-g09d2