fix(types): use CardStateType instead of number for card state fields

Card and StudyCard interfaces used generic number for state, causing
type errors when indexing Record<CardStateType, ...> maps. Also adds
missing FSRS fields to client Card interface to match API response.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

4 files changed, 22 insertions, 17 deletions

diff --git a/src/client/pages/DeckCardsPage.test.tsx b/src/client/pages/DeckCardsPage.test.tsx
index 91b0b28..48cc0e3 100644
--- a/src/client/pages/DeckCardsPage.test.tsx
+++ b/src/client/pages/DeckCardsPage.test.tsx
@@ -10,6 +10,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Route, Router } from "wouter";
 import { memoryLocation } from "wouter/memory-location";
 import { authLoadingAtom, type Card, type Deck } from "../atoms";
+import { CardState } from "../db";
 import { DeckCardsPage } from "./DeckCardsPage";
 
 const mockDeckGet = vi.fn();
@@ -87,7 +88,7 @@ const mockBasicCards = [
 		isReversed: false,
 		front: "Hello",
 		back: "こんにちは",
-		state: 0,
+		state: CardState.New,
 		due: "2024-01-01T00:00:00Z",
 		stability: 0,
 		difficulty: 0,
@@ -108,7 +109,7 @@ const mockBasicCards = [
 		isReversed: false,
 		front: "Goodbye",
 		back: "さようなら",
-		state: 2,
+		state: CardState.Review,
 		due: "2024-01-02T00:00:00Z",
 		stability: 5.5,
 		difficulty: 5.0,
@@ -133,7 +134,7 @@ const mockNoteBasedCards = [
 		isReversed: false,
 		front: "Apple",
 		back: "りんご",
-		state: 0,
+		state: CardState.New,
 		due: "2024-01-01T00:00:00Z",
 		stability: 0,
 		difficulty: 0,
@@ -154,7 +155,7 @@ const mockNoteBasedCards = [
 		isReversed: true,
 		front: "りんご",
 		back: "Apple",
-		state: 0,
+		state: CardState.New,
 		due: "2024-01-01T00:00:00Z",
 		stability: 0,
 		difficulty: 0,
diff --git a/src/client/pages/DeckCardsPage.tsx b/src/client/pages/DeckCardsPage.tsx
index b7bf7e4..2b2ca88 100644
--- a/src/client/pages/DeckCardsPage.tsx
+++ b/src/client/pages/DeckCardsPage.tsx
@@ -30,6 +30,7 @@ import { EditCardModal } from "../components/EditCardModal";
 import { EditNoteModal } from "../components/EditNoteModal";
 import { ErrorBoundary } from "../components/ErrorBoundary";
 import { ImportNotesModal } from "../components/ImportNotesModal";
+import type { CardStateType } from "../db";
 import { queryClient } from "../queryClient";
 
 /** Combined type for display: note group */
@@ -37,14 +38,14 @@ type CardDisplayItem = { type: "note"; noteId: string; cards: Card[] };
 
 const CARDS_PER_PAGE = 50;
 
-const CardStateLabels: Record<number, string> = {
+const CardStateLabels: Record<CardStateType, string> = {
 	0: "New",
 	1: "Learning",
 	2: "Review",
 	3: "Relearning",
 };
 
-const CardStateColors: Record<number, string> = {
+const CardStateColors: Record<CardStateType, string> = {
 	0: "bg-info/10 text-info",
 	1: "bg-warning/10 text-warning",
 	2: "bg-success/10 text-success",
diff --git a/src/client/pages/DeckDetailPage.test.tsx b/src/client/pages/DeckDetailPage.test.tsx
index 0b9216b..b2fa7f0 100644
--- a/src/client/pages/DeckDetailPage.test.tsx
+++ b/src/client/pages/DeckDetailPage.test.tsx
@@ -9,6 +9,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Route, Router } from "wouter";
 import { memoryLocation } from "wouter/memory-location";
 import { authLoadingAtom, type Card, type Deck } from "../atoms";
+import { CardState } from "../db";
 import { DeckDetailPage } from "./DeckDetailPage";
 
 const mockDeckGet = vi.fn();
@@ -73,7 +74,7 @@ const mockCards = [
 		isReversed: false,
 		front: "Hello",
 		back: "こんにちは",
-		state: 0,
+		state: CardState.New,
 		due: "2099-01-01T00:00:00Z", // Not due yet (future date)
 		stability: 0,
 		difficulty: 0,
@@ -94,7 +95,7 @@ const mockCards = [
 		isReversed: false,
 		front: "Goodbye",
 		back: "さようなら",
-		state: 2,
+		state: CardState.Review,
 		due: new Date().toISOString(), // Due now
 		stability: 5.5,
 		difficulty: 5.0,
diff --git a/src/client/pages/StudyPage.tsx b/src/client/pages/StudyPage.tsx
index 2649069..9127e39 100644
--- a/src/client/pages/StudyPage.tsx
+++ b/src/client/pages/StudyPage.tsx
@@ -20,6 +20,7 @@ import { ApiClientError, apiClient } from "../api";
 import { studyDataAtomFamily } from "../atoms";
 import { EditNoteModal } from "../components/EditNoteModal";
 import { ErrorBoundary } from "../components/ErrorBoundary";
+import type { CardStateType } from "../db";
 import { queryClient } from "../queryClient";
 import { renderCard } from "../utils/templateRenderer";
 
@@ -40,7 +41,10 @@ const RatingStyles: Record<Rating, string> = {
 	4: "bg-easy hover:bg-easy/90 focus:ring-easy/30",
 };
 
-const CardStateBadge: Record<number, { label: string; className: string }> = {
+const CardStateBadge: Record<
+	CardStateType,
+	{ label: string; className: string }
+> = {
 	0: { label: "New", className: "bg-info/10 text-info" },
 	1: { label: "Learning", className: "bg-warning/10 text-warning" },
 	2: { label: "Review", className: "bg-success/10 text-success" },
@@ -448,14 +452,12 @@ function StudySession({
 							/>
 						</span>
 						{/* Card state badge */}
-						{CardStateBadge[currentCard.state] && (
-							<span
-								data-testid="card-state-badge"
-								className={`absolute top-3 left-3 text-xs font-medium px-2 py-0.5 rounded-full ${CardStateBadge[currentCard.state].className}`}
-							>
-								{CardStateBadge[currentCard.state].label}
-							</span>
-						)}
+						<span
+							data-testid="card-state-badge"
+							className={`absolute top-3 left-3 text-xs font-medium px-2 py-0.5 rounded-full ${CardStateBadge[currentCard.state].className}`}
+						>
+							{CardStateBadge[currentCard.state].label}
+						</span>
 						{!isFlipped ? (
 							<>
 								<p