feat: add feed sidebar and cursor-based pagination

Add a feed sidebar to /unread and /read pages for filtering articles by
feed, and replace the fixed 100-article limit with cursor-based
pagination using a "Load more" button.

Backend:
- Add PageInfo, ArticleConnection types and pagination args to GraphQL
- Replace GetUnreadArticles/GetReadArticles with parameterized queries
- Add GetFeedUnreadCounts query and composite index
- Add shared pagination helper in resolver

Frontend:
- Add FeedSidebar component with unread count badges
- Add usePaginatedArticles hook for cursor-based fetching
- Update ArticleList with Load more button and single-feed mode
- Use ?feed=<id> query parameter for feed filtering

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

1 files changed, 3 insertions, 3 deletions

diff --git a/frontend/src/graphql/generated/gql.ts b/frontend/src/graphql/generated/gql.ts
index d844c60..40e292f 100644
--- a/frontend/src/graphql/generated/gql.ts
+++ b/frontend/src/graphql/generated/gql.ts
@@ -15,11 +15,11 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  */
 type Documents = {
     "mutation AddFeed($url: String!) {\n  addFeed(url: $url) {\n    id\n    url\n    title\n    fetchedAt\n  }\n}\n\nmutation UnsubscribeFeed($id: ID!) {\n  unsubscribeFeed(id: $id)\n}\n\nmutation MarkArticleRead($id: ID!) {\n  markArticleRead(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n  }\n}\n\nmutation MarkArticleUnread($id: ID!) {\n  markArticleUnread(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n  }\n}\n\nmutation MarkFeedRead($id: ID!) {\n  markFeedRead(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n  }\n}\n\nmutation MarkFeedUnread($id: ID!) {\n  markFeedUnread(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n  }\n}\n\nmutation Login($username: String!, $password: String!) {\n  login(username: $username, password: $password) {\n    user {\n      id\n      username\n    }\n  }\n}\n\nmutation Logout {\n  logout\n}": typeof types.AddFeedDocument,
-    "query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      isRead\n    }\n  }\n}\n\nquery GetUnreadArticles {\n  unreadArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetReadArticles {\n  readArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}": typeof types.GetFeedsDocument,
+    "query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    unreadCount\n  }\n}\n\nquery GetUnreadArticles($feedId: ID, $after: ID, $first: Int) {\n  unreadArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetReadArticles($feedId: ID, $after: ID, $first: Int) {\n  readArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}": typeof types.GetFeedsDocument,
 };
 const documents: Documents = {
     "mutation AddFeed($url: String!) {\n  addFeed(url: $url) {\n    id\n    url\n    title\n    fetchedAt\n  }\n}\n\nmutation UnsubscribeFeed($id: ID!) {\n  unsubscribeFeed(id: $id)\n}\n\nmutation MarkArticleRead($id: ID!) {\n  markArticleRead(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n  }\n}\n\nmutation MarkArticleUnread($id: ID!) {\n  markArticleUnread(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n  }\n}\n\nmutation MarkFeedRead($id: ID!) {\n  markFeedRead(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n  }\n}\n\nmutation MarkFeedUnread($id: ID!) {\n  markFeedUnread(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n  }\n}\n\nmutation Login($username: String!, $password: String!) {\n  login(username: $username, password: $password) {\n    user {\n      id\n      username\n    }\n  }\n}\n\nmutation Logout {\n  logout\n}": types.AddFeedDocument,
-    "query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      isRead\n    }\n  }\n}\n\nquery GetUnreadArticles {\n  unreadArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetReadArticles {\n  readArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}": types.GetFeedsDocument,
+    "query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    unreadCount\n  }\n}\n\nquery GetUnreadArticles($feedId: ID, $after: ID, $first: Int) {\n  unreadArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetReadArticles($feedId: ID, $after: ID, $first: Int) {\n  readArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}": types.GetFeedsDocument,
 };
 
 /**
@@ -43,7 +43,7 @@ export function graphql(source: "mutation AddFeed($url: String!) {\n  addFeed(ur
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      isRead\n    }\n  }\n}\n\nquery GetUnreadArticles {\n  unreadArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetReadArticles {\n  readArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}"): (typeof documents)["query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      isRead\n    }\n  }\n}\n\nquery GetUnreadArticles {\n  unreadArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetReadArticles {\n  readArticles {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}"];
+export function graphql(source: "query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    unreadCount\n  }\n}\n\nquery GetUnreadArticles($feedId: ID, $after: ID, $first: Int) {\n  unreadArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetReadArticles($feedId: ID, $after: ID, $first: Int) {\n  readArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}"): (typeof documents)["query GetFeeds {\n  feeds {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    unreadCount\n  }\n}\n\nquery GetUnreadArticles($feedId: ID, $after: ID, $first: Int) {\n  unreadArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetReadArticles($feedId: ID, $after: ID, $first: Int) {\n  readArticles(feedId: $feedId, after: $after, first: $first) {\n    articles {\n      id\n      feedId\n      guid\n      title\n      url\n      isRead\n      feed {\n        id\n        title\n        isSubscribed\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n\nquery GetFeed($id: ID!) {\n  feed(id: $id) {\n    id\n    url\n    title\n    fetchedAt\n    isSubscribed\n    articles {\n      id\n      guid\n      title\n      url\n      isRead\n    }\n  }\n}\n\nquery GetArticle($id: ID!) {\n  article(id: $id) {\n    id\n    feedId\n    guid\n    title\n    url\n    isRead\n    feed {\n      id\n      title\n      isSubscribed\n    }\n  }\n}\n\nquery GetCurrentUser {\n  currentUser {\n    id\n    username\n  }\n}"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};