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, 9 insertions, 6 deletions

diff --git a/src/client/atoms/noteTypes.ts b/src/client/atoms/noteTypes.ts
index adc9d44..fb99b14 100644
--- a/src/client/atoms/noteTypes.ts
+++ b/src/client/atoms/noteTypes.ts
@@ -1,5 +1,5 @@
+import { atomWithSuspenseQuery } from "jotai-tanstack-query";
 import { apiClient } from "../api/client";
-import { createReloadableAtom } from "./utils";
 
 export interface NoteType {
 	id: string;
@@ -15,8 +15,11 @@ export interface NoteType {
 // NoteTypes List - Suspense-compatible
 // =====================
 
-export const noteTypesAtom = createReloadableAtom(async () => {
-	const res = await apiClient.rpc.api["note-types"].$get();
-	const data = await apiClient.handleResponse<{ noteTypes: NoteType[] }>(res);
-	return data.noteTypes;
-});
+export const noteTypesAtom = atomWithSuspenseQuery(() => ({
+	queryKey: ["noteTypes"],
+	queryFn: async () => {
+		const res = await apiClient.rpc.api["note-types"].$get();
+		const data = await apiClient.handleResponse<{ noteTypes: NoteType[] }>(res);
+		return data.noteTypes;
+	},
+}));