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, 18 insertions, 4 deletions

diff --git a/src/client/main.tsx b/src/client/main.tsx
index a1d296a..b9296f4 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -1,9 +1,19 @@
-import { StrictMode } from "react";
+import { Provider, useStore } from "jotai/react";
+import { useHydrateAtoms } from "jotai/react/utils";
+import { queryClientAtom } from "jotai-tanstack-query";
+import { type ReactNode, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 import { StoreInitializer } from "./components/StoreInitializer";
+import { queryClient } from "./queryClient";
 import "./styles.css";
 
+function HydrateQueryClient({ children }: { children: ReactNode }) {
+	const store = useStore();
+	useHydrateAtoms([[queryClientAtom, queryClient]], { store });
+	return <>{children}</>;
+}
+
 const rootElement = document.getElementById("root");
 if (!rootElement) {
 	throw new Error("Root element not found");
@@ -11,8 +21,12 @@ if (!rootElement) {
 
 createRoot(rootElement).render(
 	<StrictMode>
-		<StoreInitializer>
-			<App />
-		</StoreInitializer>
+		<Provider>
+			<HydrateQueryClient>
+				<StoreInitializer>
+					<App />
+				</StoreInitializer>
+			</HydrateQueryClient>
+		</Provider>
 	</StrictMode>,
 );