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

Add CreateDeckModal component that allows users to create new decks
with name and optional description fields. Integrates with HomePage
via a "Create Deck" button that opens the modal, and refreshes the
deck list after successful creation.

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

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

(limited to 'src/client/pages/HomePage.tsx')

diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx
index c9d0843..d753aa1 100644
--- a/src/client/pages/HomePage.tsx
+++ b/src/client/pages/HomePage.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { ApiClientError, apiClient } from "../api";
+import { CreateDeckModal } from "../components/CreateDeckModal";
 import { useAuth } from "../stores";
 
 interface Deck {
@@ -16,6 +17,7 @@ export function HomePage() {
 	const [decks, setDecks] = useState<Deck[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
 	const fetchDecks = useCallback(async () => {
 		setIsLoading(true);
@@ -69,7 +71,19 @@ export function HomePage() {
 			</header>
 
 			<main>
-				<h2>Your Decks</h2>
+				<div
+					style={{
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						marginBottom: "1rem",
+					}}
+				>
+					<h2 style={{ margin: 0 }}>Your Decks</h2>
+					<button type="button" onClick={() => setIsCreateModalOpen(true)}>
+						Create Deck
+					</button>
+				</div>
 
 				{isLoading && <p>Loading decks...</p>}
 
@@ -116,6 +130,12 @@ export function HomePage() {
 					</ul>
 				)}
 			</main>
+
+			<CreateDeckModal
+				isOpen={isCreateModalOpen}
+				onClose={() => setIsCreateModalOpen(false)}
+				onDeckCreated={fetchDecks}
+			/>
 		</div>
 	);
 }
-- 
cgit v1.2.3-70-g09d2