refactor(frontend): migrate state management to jotai and jotai-tanstack-query

Replace React Context + manual useEffect data fetching with jotai atoms
for state management and jotai-tanstack-query for server state caching.

- Add jotai, jotai-tanstack-query, @tanstack/query-core dependencies
- Create atoms for auth (primitive + action), feeds (suspense query),
  and articles (infinite query with cursor-based pagination)
- Wire up Provider, HydrateQueryClient, and StoreInitializer in main.tsx
- Migrate all components from useAuth() context to jotai atoms
- Replace manual fetch logic in FeedSidebar/FeedList with feedsAtom
- Replace usePaginatedArticles hook with articlesInfiniteAtom
- Add queryClient.invalidateQueries() after mutations for automatic
  cache refresh
- Add ErrorBoundary and LoadingSpinner components for Suspense support
- Remove callback prop chains (onFeedAdded, onFeedChanged, etc.)
  in favor of query invalidation

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

1 files changed, 96 insertions, 34 deletions

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1dfe685..13f97b9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,9 @@
 				"@fortawesome/free-solid-svg-icons": "^6.7.2",
 				"@fortawesome/react-fontawesome": "^0.2.6",
 				"@tailwindcss/vite": "^4.1.17",
+				"@tanstack/query-core": "^5.90.20",
+				"jotai": "^2.17.1",
+				"jotai-tanstack-query": "^0.11.0",
 				"openapi-fetch": "^0.17.0",
 				"react": "^19.2.1",
 				"react-dom": "^19.2.1",
@@ -52,7 +55,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
 			"integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-validator-identifier": "^7.27.1",
@@ -67,7 +70,7 @@
 			"version": "7.28.5",
 			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
 			"integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -77,7 +80,7 @@
 			"version": "7.28.5",
 			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
 			"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/code-frame": "^7.27.1",
@@ -108,7 +111,7 @@
 			"version": "7.28.5",
 			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
 			"integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.28.5",
@@ -138,7 +141,7 @@
 			"version": "7.27.2",
 			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
 			"integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/compat-data": "^7.27.2",
@@ -212,7 +215,7 @@
 			"version": "7.28.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
 			"integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -236,7 +239,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
 			"integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/traverse": "^7.27.1",
@@ -250,7 +253,7 @@
 			"version": "7.28.3",
 			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
 			"integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-module-imports": "^7.27.1",
@@ -341,7 +344,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
 			"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -351,7 +354,7 @@
 			"version": "7.28.5",
 			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
 			"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -361,7 +364,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
 			"integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -386,7 +389,7 @@
 			"version": "7.28.4",
 			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
 			"integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/template": "^7.27.2",
@@ -400,7 +403,7 @@
 			"version": "7.28.5",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
 			"integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/types": "^7.28.5"
@@ -1560,7 +1563,7 @@
 			"version": "7.27.2",
 			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
 			"integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/code-frame": "^7.27.1",
@@ -1575,7 +1578,7 @@
 			"version": "7.28.5",
 			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
 			"integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/code-frame": "^7.27.1",
@@ -1594,7 +1597,7 @@
 			"version": "7.28.5",
 			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
 			"integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-string-parser": "^7.27.1",
@@ -3143,6 +3146,16 @@
 				"vite": "^5.2.0 || ^6 || ^7"
 			}
 		},
+		"node_modules/@tanstack/query-core": {
+			"version": "5.90.20",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+			"integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
 		"node_modules/@types/babel__core": {
 			"version": "7.20.5",
 			"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -3209,7 +3222,7 @@
 			"version": "19.2.7",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
 			"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"csstype": "^3.2.2"
@@ -3478,7 +3491,7 @@
 			"version": "2.9.4",
 			"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.4.tgz",
 			"integrity": "sha512-ZCQ9GEWl73BVm8bu5Fts8nt7MHdbt5vY9bP6WGnUh+r3l8M7CgfyTlwsgCbMC66BNxPr6Xoce3j66Ms5YUQTNA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"baseline-browser-mapping": "dist/cli.js"
@@ -3498,7 +3511,7 @@
 			"version": "4.28.1",
 			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
 			"integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3589,7 +3602,7 @@
 			"version": "1.0.30001759",
 			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz",
 			"integrity": "sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3647,7 +3660,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
 			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/core-js-compat": {
@@ -3693,7 +3706,7 @@
 			"version": "3.2.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
 			"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/data-view-buffer": {
@@ -3754,7 +3767,7 @@
 			"version": "4.4.3",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
 			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"ms": "^2.1.3"
@@ -3865,7 +3878,7 @@
 			"version": "1.5.266",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.266.tgz",
 			"integrity": "sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC"
 		},
 		"node_modules/emoji-regex": {
@@ -4069,7 +4082,7 @@
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
 			"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -4277,7 +4290,7 @@
 			"version": "1.0.0-beta.2",
 			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
 			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -5037,6 +5050,55 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/jotai": {
+			"version": "2.17.1",
+			"resolved": "https://registry.npmjs.org/jotai/-/jotai-2.17.1.tgz",
+			"integrity": "sha512-TFNZZDa/0ewCLQyRC/Sq9crtixNj/Xdf/wmj9631xxMuKToVJZDbqcHIYN0OboH+7kh6P6tpIK7uKWClj86PKw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			},
+			"peerDependencies": {
+				"@babel/core": ">=7.0.0",
+				"@babel/template": ">=7.0.0",
+				"@types/react": ">=17.0.0",
+				"react": ">=17.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
+				},
+				"@babel/template": {
+					"optional": true
+				},
+				"@types/react": {
+					"optional": true
+				},
+				"react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jotai-tanstack-query": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/jotai-tanstack-query/-/jotai-tanstack-query-0.11.0.tgz",
+			"integrity": "sha512-Ys0u0IuuS6/okUJOulFTdCVfVaeKbm1+lKVSN9zHhIxtrAXl9FM4yu7fNvxM6fSz/NCE9tZOKR0MQ3hvplaH8A==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@tanstack/query-core": "*",
+				"@tanstack/react-query": "*",
+				"jotai": ">=2.0.0",
+				"react": "^18.0.0 || ^19.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@tanstack/react-query": {
+					"optional": true
+				},
+				"react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/js-levenshtein": {
 			"version": "1.1.6",
 			"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -5070,7 +5132,7 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
 			"integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"bin": {
 				"jsesc": "bin/jsesc"
@@ -5097,7 +5159,7 @@
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
 			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"bin": {
 				"json5": "lib/cli.js"
@@ -5425,7 +5487,7 @@
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
 			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"yallist": "^3.0.2"
@@ -5470,7 +5532,7 @@
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
@@ -5495,7 +5557,7 @@
 			"version": "2.0.27",
 			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
 			"integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/object-assign": {
@@ -6124,7 +6186,7 @@
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
 			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
@@ -6906,7 +6968,7 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
 			"integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -7534,7 +7596,7 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
 			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC"
 		},
 		"node_modules/yaml": {