From b51d4efaa1e5e0417d4306c02797f424938766cb Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Wed, 31 Dec 2025 02:38:05 +0900
Subject: feat(client): add NoteTypesPage for note type management
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement Phase 6 of the roadmap - NoteType list page with CRUD modals:
- NoteTypesPage displays all user's note types with templates and reversible badge
- CreateNoteTypeModal for creating new note types with templates
- EditNoteTypeModal for updating existing note types
- DeleteNoteTypeModal with constraint warning
- Navigation link from HomePage header
- Comprehensive tests for all components (65 new tests)

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

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

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

diff --git a/src/client/pages/NoteTypesPage.tsx b/src/client/pages/NoteTypesPage.tsx
new file mode 100644
index 0000000..0a34f5b
--- /dev/null
+++ b/src/client/pages/NoteTypesPage.tsx
@@ -0,0 +1,272 @@
+import {
+	faArrowLeft,
+	faBoxOpen,
+	faLayerGroup,
+	faPen,
+	faPlus,
+	faSpinner,
+	faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useCallback, useEffect, useState } from "react";
+import { Link } from "wouter";
+import { ApiClientError, apiClient } from "../api";
+import { CreateNoteTypeModal } from "../components/CreateNoteTypeModal";
+import { DeleteNoteTypeModal } from "../components/DeleteNoteTypeModal";
+import { EditNoteTypeModal } from "../components/EditNoteTypeModal";
+
+interface NoteType {
+	id: string;
+	name: string;
+	frontTemplate: string;
+	backTemplate: string;
+	isReversible: boolean;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export function NoteTypesPage() {
+	const [noteTypes, setNoteTypes] = useState<NoteType[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [editingNoteType, setEditingNoteType] = useState<NoteType | null>(null);
+	const [deletingNoteType, setDeletingNoteType] = useState<NoteType | null>(
+		null,
+	);
+
+	const fetchNoteTypes = useCallback(async () => {
+		setIsLoading(true);
+		setError(null);
+
+		try {
+			const authHeader = apiClient.getAuthHeader();
+			if (!authHeader) {
+				throw new ApiClientError("Not authenticated", 401);
+			}
+
+			const res = await fetch("/api/note-types", {
+				headers: authHeader,
+			});
+
+			if (!res.ok) {
+				const errorBody = await res.json().catch(() => ({}));
+				throw new ApiClientError(
+					(errorBody as { error?: string }).error ||
+						`Request failed with status ${res.status}`,
+					res.status,
+				);
+			}
+
+			const data = await res.json();
+			setNoteTypes(data.noteTypes);
+		} catch (err) {
+			if (err instanceof ApiClientError) {
+				setError(err.message);
+			} else {
+				setError("Failed to load note types. Please try again.");
+			}
+		} finally {
+			setIsLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchNoteTypes();
+	}, [fetchNoteTypes]);
+
+	return (
+		<div className="min-h-screen bg-cream">
+			{/* Header */}
+			<header className="bg-white border-b border-border/50 sticky top-0 z-10">
+				<div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+					<div className="flex items-center gap-3">
+						<Link
+							href="/"
+							className="p-2 -ml-2 text-muted hover:text-slate hover:bg-ivory rounded-lg transition-colors"
+						>
+							<FontAwesomeIcon
+								icon={faArrowLeft}
+								className="w-4 h-4"
+								aria-hidden="true"
+							/>
+							<span className="sr-only">Back to Home</span>
+						</Link>
+						<h1 className="font-display text-2xl font-semibold text-ink">
+							Note Types
+						</h1>
+					</div>
+				</div>
+			</header>
+
+			{/* Main Content */}
+			<main className="max-w-4xl mx-auto px-4 py-8">
+				{/* Section Header */}
+				<div className="flex items-center justify-between mb-6">
+					<p className="text-muted text-sm">
+						Note types define how your cards are structured
+					</p>
+					<button
+						type="button"
+						onClick={() => setIsCreateModalOpen(true)}
+						className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 active:scale-[0.98] shadow-sm hover:shadow-md"
+					>
+						<FontAwesomeIcon
+							icon={faPlus}
+							className="w-5 h-5"
+							aria-hidden="true"
+						/>
+						New Note Type
+					</button>
+				</div>
+
+				{/* Loading State */}
+				{isLoading && (
+					<div className="flex items-center justify-center py-12">
+						<FontAwesomeIcon
+							icon={faSpinner}
+							className="h-8 w-8 text-primary animate-spin"
+							aria-hidden="true"
+						/>
+					</div>
+				)}
+
+				{/* Error State */}
+				{error && (
+					<div
+						role="alert"
+						className="bg-error/5 border border-error/20 rounded-xl p-4 flex items-center justify-between"
+					>
+						<span className="text-error">{error}</span>
+						<button
+							type="button"
+							onClick={fetchNoteTypes}
+							className="text-error hover:text-error/80 font-medium text-sm"
+						>
+							Retry
+						</button>
+					</div>
+				)}
+
+				{/* Empty State */}
+				{!isLoading && !error && noteTypes.length === 0 && (
+					<div className="text-center py-16 animate-fade-in">
+						<div className="w-16 h-16 mx-auto mb-4 bg-ivory rounded-2xl flex items-center justify-center">
+							<FontAwesomeIcon
+								icon={faBoxOpen}
+								className="w-8 h-8 text-muted"
+								aria-hidden="true"
+							/>
+						</div>
+						<h3 className="font-display text-lg font-medium text-slate mb-2">
+							No note types yet
+						</h3>
+						<p className="text-muted text-sm mb-6">
+							Create a note type to define how your cards are structured
+						</p>
+						<button
+							type="button"
+							onClick={() => setIsCreateModalOpen(true)}
+							className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-200"
+						>
+							<FontAwesomeIcon
+								icon={faPlus}
+								className="w-5 h-5"
+								aria-hidden="true"
+							/>
+							Create Your First Note Type
+						</button>
+					</div>
+				)}
+
+				{/* Note Type List */}
+				{!isLoading && !error && noteTypes.length > 0 && (
+					<div className="space-y-3 animate-fade-in">
+						{noteTypes.map((noteType, index) => (
+							<div
+								key={noteType.id}
+								className="bg-white rounded-xl border border-border/50 p-5 shadow-card hover:shadow-md transition-all duration-200 group"
+								style={{ animationDelay: `${index * 50}ms` }}
+							>
+								<div className="flex items-start justify-between gap-4">
+									<div className="flex-1 min-w-0">
+										<div className="flex items-center gap-2 mb-1">
+											<FontAwesomeIcon
+												icon={faLayerGroup}
+												className="w-4 h-4 text-muted"
+												aria-hidden="true"
+											/>
+											<h3 className="font-display text-lg font-medium text-slate truncate">
+												{noteType.name}
+											</h3>
+										</div>
+										<div className="flex flex-wrap gap-2 mt-2">
+											<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-ivory text-muted">
+												Front: {noteType.frontTemplate}
+											</span>
+											<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-ivory text-muted">
+												Back: {noteType.backTemplate}
+											</span>
+											{noteType.isReversible && (
+												<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary">
+													Reversible
+												</span>
+											)}
+										</div>
+									</div>
+									<div className="flex items-center gap-2 shrink-0">
+										<button
+											type="button"
+											onClick={() => setEditingNoteType(noteType)}
+											className="p-2 text-muted hover:text-slate hover:bg-ivory rounded-lg transition-colors"
+											title="Edit note type"
+										>
+											<FontAwesomeIcon
+												icon={faPen}
+												className="w-4 h-4"
+												aria-hidden="true"
+											/>
+										</button>
+										<button
+											type="button"
+											onClick={() => setDeletingNoteType(noteType)}
+											className="p-2 text-muted hover:text-error hover:bg-error/5 rounded-lg transition-colors"
+											title="Delete note type"
+										>
+											<FontAwesomeIcon
+												icon={faTrash}
+												className="w-4 h-4"
+												aria-hidden="true"
+											/>
+										</button>
+									</div>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+			</main>
+
+			{/* Modals */}
+			<CreateNoteTypeModal
+				isOpen={isCreateModalOpen}
+				onClose={() => setIsCreateModalOpen(false)}
+				onNoteTypeCreated={fetchNoteTypes}
+			/>
+
+			<EditNoteTypeModal
+				isOpen={editingNoteType !== null}
+				noteType={editingNoteType}
+				onClose={() => setEditingNoteType(null)}
+				onNoteTypeUpdated={fetchNoteTypes}
+			/>
+
+			<DeleteNoteTypeModal
+				isOpen={deletingNoteType !== null}
+				noteType={deletingNoteType}
+				onClose={() => setDeletingNoteType(null)}
+				onNoteTypeDeleted={fetchNoteTypes}
+			/>
+		</div>
+	);
+}
-- 
cgit v1.2.3-70-g09d2