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>

3 files changed, 90 insertions, 39 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] ?? {};
diff --git a/frontend/src/graphql/generated/graphql.ts b/frontend/src/graphql/generated/graphql.ts
index 8ef7034..9d7c168 100644
--- a/frontend/src/graphql/generated/graphql.ts
+++ b/frontend/src/graphql/generated/graphql.ts
@@ -35,6 +35,14 @@ export type Article = {
   url: Scalars['String']['output'];
 };
 
+/** A paginated list of articles */
+export type ArticleConnection = {
+  /** The list of articles */
+  articles: Array<Article>;
+  /** Pagination information */
+  pageInfo: PageInfo;
+};
+
 /** Authentication payload returned from login mutation */
 export type AuthPayload = {
   /** The authenticated user */
@@ -53,6 +61,8 @@ export type Feed = {
   isSubscribed: Scalars['Boolean']['output'];
   /** Title of the feed (extracted from feed metadata) */
   title: Scalars['String']['output'];
+  /** Number of unread articles in this feed */
+  unreadCount: Scalars['Int']['output'];
   /** URL of the RSS/Atom feed */
   url: Scalars['String']['output'];
 };
@@ -120,6 +130,14 @@ export type MutationUnsubscribeFeedArgs = {
   id: Scalars['ID']['input'];
 };
 
+/** Pagination information for cursor-based pagination */
+export type PageInfo = {
+  /** Cursor of the last item in this page */
+  endCursor?: Maybe<Scalars['ID']['output']>;
+  /** Whether there are more items after the last item in this page */
+  hasNextPage: Scalars['Boolean']['output'];
+};
+
 /** Root query type for reading data */
 export type Query = {
   /** Get a specific article by ID */
@@ -130,10 +148,10 @@ export type Query = {
   feed?: Maybe<Feed>;
   /** Get all feeds with their metadata */
   feeds: Array<Feed>;
-  /** Get all read articles across all feeds */
-  readArticles: Array<Article>;
-  /** Get all unread articles across all feeds */
-  unreadArticles: Array<Article>;
+  /** Get read articles with optional feed filter and cursor-based pagination */
+  readArticles: ArticleConnection;
+  /** Get unread articles with optional feed filter and cursor-based pagination */
+  unreadArticles: ArticleConnection;
 };
 
 
@@ -148,6 +166,22 @@ export type QueryFeedArgs = {
   id: Scalars['ID']['input'];
 };
 
+
+/** Root query type for reading data */
+export type QueryReadArticlesArgs = {
+  after?: InputMaybe<Scalars['ID']['input']>;
+  feedId?: InputMaybe<Scalars['ID']['input']>;
+  first?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
+/** Root query type for reading data */
+export type QueryUnreadArticlesArgs = {
+  after?: InputMaybe<Scalars['ID']['input']>;
+  feedId?: InputMaybe<Scalars['ID']['input']>;
+  first?: InputMaybe<Scalars['Int']['input']>;
+};
+
 /** Represents a user in the system */
 export type User = {
   /** Unique identifier for the user */
@@ -214,17 +248,25 @@ export type LogoutMutation = { logout: boolean };
 export type GetFeedsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetFeedsQuery = { feeds: Array<{ id: string, url: string, title: string, fetchedAt: string, isSubscribed: boolean, articles: Array<{ id: string, isRead: boolean }> }> };
+export type GetFeedsQuery = { feeds: Array<{ id: string, url: string, title: string, fetchedAt: string, isSubscribed: boolean, unreadCount: number }> };
 
-export type GetUnreadArticlesQueryVariables = Exact<{ [key: string]: never; }>;
+export type GetUnreadArticlesQueryVariables = Exact<{
+  feedId?: InputMaybe<Scalars['ID']['input']>;
+  after?: InputMaybe<Scalars['ID']['input']>;
+  first?: InputMaybe<Scalars['Int']['input']>;
+}>;
 
 
-export type GetUnreadArticlesQuery = { unreadArticles: Array<{ id: string, feedId: string, guid: string, title: string, url: string, isRead: boolean, feed: { id: string, title: string, isSubscribed: boolean } }> };
+export type GetUnreadArticlesQuery = { unreadArticles: { articles: Array<{ id: string, feedId: string, guid: string, title: string, url: string, isRead: boolean, feed: { id: string, title: string, isSubscribed: boolean } }>, pageInfo: { hasNextPage: boolean, endCursor?: string | null } } };
 
-export type GetReadArticlesQueryVariables = Exact<{ [key: string]: never; }>;
+export type GetReadArticlesQueryVariables = Exact<{
+  feedId?: InputMaybe<Scalars['ID']['input']>;
+  after?: InputMaybe<Scalars['ID']['input']>;
+  first?: InputMaybe<Scalars['Int']['input']>;
+}>;
 
 
-export type GetReadArticlesQuery = { readArticles: Array<{ id: string, feedId: string, guid: string, title: string, url: string, isRead: boolean, feed: { id: string, title: string, isSubscribed: boolean } }> };
+export type GetReadArticlesQuery = { readArticles: { articles: Array<{ id: string, feedId: string, guid: string, title: string, url: string, isRead: boolean, feed: { id: string, title: string, isSubscribed: boolean } }>, pageInfo: { hasNextPage: boolean, endCursor?: string | null } } };
 
 export type GetFeedQueryVariables = Exact<{
   id: Scalars['ID']['input'];
@@ -254,9 +296,9 @@ export const MarkFeedReadDocument = {"kind":"Document","definitions":[{"kind":"O
 export const MarkFeedUnreadDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"MarkFeedUnread"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"markFeedUnread"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"fetchedAt"}}]}}]}}]} as unknown as DocumentNode<MarkFeedUnreadMutation, MarkFeedUnreadMutationVariables>;
 export const LoginDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"Login"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"username"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"password"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"login"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"username"},"value":{"kind":"Variable","name":{"kind":"Name","value":"username"}}},{"kind":"Argument","name":{"kind":"Name","value":"password"},"value":{"kind":"Variable","name":{"kind":"Name","value":"password"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}}]}}]}}]} as unknown as DocumentNode<LoginMutation, LoginMutationVariables>;
 export const LogoutDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"Logout"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"logout"}}]}}]} as unknown as DocumentNode<LogoutMutation, LogoutMutationVariables>;
-export const GetFeedsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetFeeds"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"feeds"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"fetchedAt"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}},{"kind":"Field","name":{"kind":"Name","value":"articles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"isRead"}}]}}]}}]}}]} as unknown as DocumentNode<GetFeedsQuery, GetFeedsQueryVariables>;
-export const GetUnreadArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetUnreadArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unreadArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"feedId"}},{"kind":"Field","name":{"kind":"Name","value":"guid"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"isRead"}},{"kind":"Field","name":{"kind":"Name","value":"feed"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}}]}}]}}]}}]} as unknown as DocumentNode<GetUnreadArticlesQuery, GetUnreadArticlesQueryVariables>;
-export const GetReadArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetReadArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readArticles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"feedId"}},{"kind":"Field","name":{"kind":"Name","value":"guid"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"isRead"}},{"kind":"Field","name":{"kind":"Name","value":"feed"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}}]}}]}}]}}]} as unknown as DocumentNode<GetReadArticlesQuery, GetReadArticlesQueryVariables>;
+export const GetFeedsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetFeeds"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"feeds"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"fetchedAt"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}},{"kind":"Field","name":{"kind":"Name","value":"unreadCount"}}]}}]}}]} as unknown as DocumentNode<GetFeedsQuery, GetFeedsQueryVariables>;
+export const GetUnreadArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetUnreadArticles"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"feedId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"after"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unreadArticles"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"feedId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"feedId"}}},{"kind":"Argument","name":{"kind":"Name","value":"after"},"value":{"kind":"Variable","name":{"kind":"Name","value":"after"}}},{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"articles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"feedId"}},{"kind":"Field","name":{"kind":"Name","value":"guid"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"isRead"}},{"kind":"Field","name":{"kind":"Name","value":"feed"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}}]}}]}}]} as unknown as DocumentNode<GetUnreadArticlesQuery, GetUnreadArticlesQueryVariables>;
+export const GetReadArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetReadArticles"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"feedId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"after"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readArticles"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"feedId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"feedId"}}},{"kind":"Argument","name":{"kind":"Name","value":"after"},"value":{"kind":"Variable","name":{"kind":"Name","value":"after"}}},{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"articles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"feedId"}},{"kind":"Field","name":{"kind":"Name","value":"guid"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"isRead"}},{"kind":"Field","name":{"kind":"Name","value":"feed"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}}]}}]}}]} as unknown as DocumentNode<GetReadArticlesQuery, GetReadArticlesQueryVariables>;
 export const GetFeedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetFeed"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"feed"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"fetchedAt"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}},{"kind":"Field","name":{"kind":"Name","value":"articles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"guid"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"isRead"}}]}}]}}]}}]} as unknown as DocumentNode<GetFeedQuery, GetFeedQueryVariables>;
 export const GetArticleDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetArticle"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"article"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"feedId"}},{"kind":"Field","name":{"kind":"Name","value":"guid"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"isRead"}},{"kind":"Field","name":{"kind":"Name","value":"feed"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"isSubscribed"}}]}}]}}]}}]} as unknown as DocumentNode<GetArticleQuery, GetArticleQueryVariables>;
 export const GetCurrentUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCurrentUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currentUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}}]}}]} as unknown as DocumentNode<GetCurrentUserQuery, GetCurrentUserQueryVariables>;
\ No newline at end of file
diff --git a/frontend/src/graphql/queries.graphql b/frontend/src/graphql/queries.graphql
index d08140b..0b0e25c 100644
--- a/frontend/src/graphql/queries.graphql
+++ b/frontend/src/graphql/queries.graphql
@@ -5,41 +5,50 @@ query GetFeeds {
 		title
 		fetchedAt
 		isSubscribed
-		articles {
-			id
-			isRead
-		}
+		unreadCount
 	}
 }
 
-query GetUnreadArticles {
-	unreadArticles {
-		id
-		feedId
-		guid
-		title
-		url
-		isRead
-		feed {
+query GetUnreadArticles($feedId: ID, $after: ID, $first: Int) {
+	unreadArticles(feedId: $feedId, after: $after, first: $first) {
+		articles {
 			id
+			feedId
+			guid
 			title
-			isSubscribed
+			url
+			isRead
+			feed {
+				id
+				title
+				isSubscribed
+			}
+		}
+		pageInfo {
+			hasNextPage
+			endCursor
 		}
 	}
 }
 
-query GetReadArticles {
-	readArticles {
-		id
-		feedId
-		guid
-		title
-		url
-		isRead
-		feed {
+query GetReadArticles($feedId: ID, $after: ID, $first: Int) {
+	readArticles(feedId: $feedId, after: $after, first: $first) {
+		articles {
 			id
+			feedId
+			guid
 			title
-			isSubscribed
+			url
+			isRead
+			feed {
+				id
+				title
+				isSubscribed
+			}
+		}
+		pageInfo {
+			hasNextPage
+			endCursor
 		}
 	}
 }