feat(client): read decks/cards/study from IndexedDB first

Switch deckAtom, cardsByDeckAtomFamily, noteTypesAtom, and studyDataAtom
to a stale-while-revalidate pattern: read from IndexedDB synchronously,
trigger sync in the background, and refetch on sync_complete. When local
is empty, await a single bootstrap pull before deciding there's no data.

Add study-builder to assemble StudyCards from LocalCard + Note + NoteType
+ field values, replacing the server /study endpoint dependency. The
study session can now run end-to-end offline.

Disable submit on all write modals when offline since writes still
require the server. Add a "Showing cached data" hint to the sync status
indicator. Drop cacheStudyCards (cards arrive via regular sync pull now)
and update page tests to reflect that lists no longer refresh by hitting
the GET API.

1 files changed, 109 insertions, 15 deletions

diff --git a/src/client/atoms/decks.ts b/src/client/atoms/decks.ts
index 0d20586..d62227c 100644
--- a/src/client/atoms/decks.ts
+++ b/src/client/atoms/decks.ts
@@ -1,6 +1,9 @@
 import { atomFamily } from "jotai-family";
 import { atomWithSuspenseQuery } from "jotai-tanstack-query";
-import { apiClient } from "../api/client";
+import { getEndOfStudyDayBoundary } from "../../shared/date";
+import { CardState, db, type LocalDeck } from "../db";
+import { localDeckRepository } from "../db/repositories";
+import { ensureBootstrap } from "./sync";
 
 export interface Deck {
 	id: string;
@@ -15,34 +18,125 @@ export interface Deck {
 	updatedAt: string;
 }
 
+async function loadCurrentUserId(): Promise<string | null> {
+	const stored = localStorage.getItem("kioku_user");
+	if (!stored) return null;
+	try {
+		const user = JSON.parse(stored) as { id?: string } | null;
+		return user?.id ?? null;
+	} catch {
+		return null;
+	}
+}
+
+interface DeckCardCounts {
+	dueCardCount: number;
+	newCardCount: number;
+	totalCardCount: number;
+	reviewCardCount: number;
+}
+
+async function computeDeckCounts(
+	deckId: string,
+	dueBoundary: Date,
+): Promise<DeckCardCounts> {
+	const cards = await db.cards.where("deckId").equals(deckId).toArray();
+	let due = 0;
+	let news = 0;
+	let total = 0;
+	let review = 0;
+	for (const card of cards) {
+		if (card.deletedAt !== null) continue;
+		total++;
+		if (card.due < dueBoundary) due++;
+		if (card.state === CardState.New) news++;
+		if (card.state === CardState.Review) review++;
+	}
+	return {
+		dueCardCount: due,
+		newCardCount: news,
+		totalCardCount: total,
+		reviewCardCount: review,
+	};
+}
+
+function localDeckToView(deck: LocalDeck, counts: DeckCardCounts): Deck {
+	return {
+		id: deck.id,
+		name: deck.name,
+		description: deck.description,
+		defaultNoteTypeId: deck.defaultNoteTypeId,
+		dueCardCount: counts.dueCardCount,
+		newCardCount: counts.newCardCount,
+		totalCardCount: counts.totalCardCount,
+		reviewCardCount: counts.reviewCardCount,
+		createdAt: deck.createdAt.toISOString(),
+		updatedAt: deck.updatedAt.toISOString(),
+	};
+}
+
+async function loadDecksFromIndexedDb(): Promise<Deck[]> {
+	const userId = await loadCurrentUserId();
+	if (!userId) return [];
+	const decks = await localDeckRepository.findByUserId(userId);
+	const boundary = getEndOfStudyDayBoundary(new Date());
+	decks.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
+	return Promise.all(
+		decks.map(async (deck) => {
+			const counts = await computeDeckCounts(deck.id, boundary);
+			return localDeckToView(deck, counts);
+		}),
+	);
+}
+
 // =====================
-// Decks List - Suspense-compatible
+// Decks List - Suspense-compatible, IndexedDB-first
 // =====================
 
 export const decksAtom = atomWithSuspenseQuery(() => ({
 	queryKey: ["decks"],
-	queryFn: async () => {
-		const res = await apiClient.rpc.api.decks.$get(undefined, {
-			headers: apiClient.getAuthHeader(),
-		});
-		const data = await apiClient.handleResponse<{ decks: Deck[] }>(res);
-		return data.decks;
+	queryFn: async (): Promise<Deck[]> => {
+		const decks = await loadDecksFromIndexedDb();
+		if (decks.length > 0) {
+			// Stale-while-revalidate: kick a background pull so the next
+			// invalidation reflects upstream changes.
+			ensureBootstrap();
+			return decks;
+		}
+		// IndexedDB is empty — wait for the initial pull to populate it
+		// before deciding there really are no decks.
+		await ensureBootstrap();
+		return loadDecksFromIndexedDb();
 	},
 }));
 
 // =====================
-// Single Deck by ID - Suspense-compatible
+// Single Deck by ID - Suspense-compatible, IndexedDB-first
 // =====================
 
+async function loadDeckById(deckId: string): Promise<Deck | null> {
+	const deck = await localDeckRepository.findById(deckId);
+	if (!deck || deck.deletedAt !== null) return null;
+	const boundary = getEndOfStudyDayBoundary(new Date());
+	const counts = await computeDeckCounts(deck.id, boundary);
+	return localDeckToView(deck, counts);
+}
+
 export const deckByIdAtomFamily = atomFamily((deckId: string) =>
 	atomWithSuspenseQuery(() => ({
 		queryKey: ["decks", deckId],
-		queryFn: async () => {
-			const res = await apiClient.rpc.api.decks[":id"].$get({
-				param: { id: deckId },
-			});
-			const data = await apiClient.handleResponse<{ deck: Deck }>(res);
-			return data.deck;
+		queryFn: async (): Promise<Deck> => {
+			let deck = await loadDeckById(deckId);
+			if (deck) {
+				ensureBootstrap();
+				return deck;
+			}
+			await ensureBootstrap();
+			deck = await loadDeckById(deckId);
+			if (!deck) {
+				throw new Error(`Deck not found: ${deckId}`);
+			}
+			return deck;
 		},
 	})),
 );