refactor(atoms): migrate to jotai-tanstack-query from custom reloadable atoms

Replace custom createReloadableAtom/createReloadableAtomFamily with
atomWithSuspenseQuery from jotai-tanstack-query, leveraging TanStack
Query's built-in caching, invalidation, and Suspense support.

- Add @tanstack/query-core and jotai-tanstack-query dependencies
- Create shared QueryClient instance (src/client/queryClient.ts)
- Migrate all data atoms (decks, cards, study, noteTypes) to atomWithSuspenseQuery
- Update page components to use .data destructuring and queryClient.invalidateQueries()
- Update all test files to use QueryClient for data hydration
- Remove src/client/atoms/utils.ts (no longer needed)

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

1 files changed, 4 insertions, 7 deletions

diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx
index ad6ece4..d04ca08 100644
--- a/src/client/pages/HomePage.tsx
+++ b/src/client/pages/HomePage.tsx
@@ -7,7 +7,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAtomValue, useSetAtom } from "jotai";
-import { Suspense, useState, useTransition } from "react";
+import { Suspense, useState } from "react";
 import { Link } from "wouter";
 import { type Deck, decksAtom, logoutAtom } from "../atoms";
 import { CreateDeckModal } from "../components/CreateDeckModal";
@@ -17,6 +17,7 @@ import { ErrorBoundary } from "../components/ErrorBoundary";
 import { LoadingSpinner } from "../components/LoadingSpinner";
 import { SyncButton } from "../components/SyncButton";
 import { SyncStatusIndicator } from "../components/SyncStatusIndicator";
+import { queryClient } from "../queryClient";
 
 function DeckList({
 	onEditDeck,
@@ -25,7 +26,7 @@ function DeckList({
 	onEditDeck: (deck: Deck) => void;
 	onDeleteDeck: (deck: Deck) => void;
 }) {
-	const decks = useAtomValue(decksAtom);
+	const { data: decks } = useAtomValue(decksAtom);
 
 	if (decks.length === 0) {
 		return (
@@ -113,17 +114,13 @@ function DeckList({
 
 export function HomePage() {
 	const logout = useSetAtom(logoutAtom);
-	const reloadDecks = useSetAtom(decksAtom);
-	const [, startTransition] = useTransition();
 
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 	const [editingDeck, setEditingDeck] = useState<Deck | null>(null);
 	const [deletingDeck, setDeletingDeck] = useState<Deck | null>(null);
 
 	const handleDeckMutation = () => {
-		startTransition(() => {
-			reloadDecks();
-		});
+		queryClient.invalidateQueries({ queryKey: ["decks"] });
 	};
 
 	return (