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, 8 insertions, 0 deletions

diff --git a/frontend/src/components/ArticleItem.tsx b/frontend/src/components/ArticleItem.tsx
index 37664a9..e109455 100644
--- a/frontend/src/components/ArticleItem.tsx
+++ b/frontend/src/components/ArticleItem.tsx
@@ -1,6 +1,7 @@
 import { faCheck, faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { components } from "../api/generated";
+import { queryClient } from "../queryClient";
 import { api } from "../services/api-client";
 
 type Article = components["schemas"]["Article"];
@@ -11,6 +12,11 @@ interface Props {
 }
 
 export function ArticleItem({ article, onReadChange }: Props) {
+	const invalidate = () => {
+		queryClient.invalidateQueries({ queryKey: ["feeds"] });
+		queryClient.invalidateQueries({ queryKey: ["articles"] });
+	};
+
 	const handleToggleRead = async (
 		articleId: string,
 		isCurrentlyRead: boolean,
@@ -27,6 +33,7 @@ export function ArticleItem({ article, onReadChange }: Props) {
 				params: { path: { articleId } },
 			});
 		}
+		invalidate();
 	};
 
 	const handleArticleClick = async (article: Article) => {
@@ -36,6 +43,7 @@ export function ArticleItem({ article, onReadChange }: Props) {
 			await api.POST("/api/articles/{articleId}/read", {
 				params: { path: { articleId: article.id } },
 			});
+			invalidate();
 		}
 	};