From 83789dd12efe82b645445fbb46d98bcb2a003b57 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 7 Dec 2025 18:03:04 +0900
Subject: feat(client): add delete deck modal with confirmation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add DeleteDeckModal component that prompts users for confirmation
before deleting a deck. Includes warning about permanent deletion
and all associated cards.

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

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

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

diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx
index 08eccaa..a51dfc1 100644
--- a/src/client/pages/HomePage.tsx
+++ b/src/client/pages/HomePage.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { ApiClientError, apiClient } from "../api";
 import { CreateDeckModal } from "../components/CreateDeckModal";
+import { DeleteDeckModal } from "../components/DeleteDeckModal";
 import { EditDeckModal } from "../components/EditDeckModal";
 import { useAuth } from "../stores";
 
@@ -20,6 +21,7 @@ export function HomePage() {
 	const [error, setError] = useState<string | null>(null);
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 	const [editingDeck, setEditingDeck] = useState<Deck | null>(null);
+	const [deletingDeck, setDeletingDeck] = useState<Deck | null>(null);
 
 	const fetchDecks = useCallback(async () => {
 		setIsLoading(true);
@@ -136,13 +138,25 @@ export function HomePage() {
 											</p>
 										)}
 									</div>
-									<button
-										type="button"
-										onClick={() => setEditingDeck(deck)}
-										style={{ marginLeft: "1rem" }}
-									>
-										Edit
-									</button>
+									<div style={{ display: "flex", gap: "0.5rem" }}>
+										<button type="button" onClick={() => setEditingDeck(deck)}>
+											Edit
+										</button>
+										<button
+											type="button"
+											onClick={() => setDeletingDeck(deck)}
+											style={{
+												backgroundColor: "#dc3545",
+												color: "white",
+												border: "none",
+												padding: "0.25rem 0.5rem",
+												borderRadius: "4px",
+												cursor: "pointer",
+											}}
+										>
+											Delete
+										</button>
+									</div>
 								</div>
 							</li>
 						))}
@@ -162,6 +176,13 @@ export function HomePage() {
 				onClose={() => setEditingDeck(null)}
 				onDeckUpdated={fetchDecks}
 			/>
+
+			<DeleteDeckModal
+				isOpen={deletingDeck !== null}
+				deck={deletingDeck}
+				onClose={() => setDeletingDeck(null)}
+				onDeckDeleted={fetchDecks}
+			/>
 		</div>
 	);
 }
-- 
cgit v1.2.3-70-g09d2