Add pagination to issues list (25 per page) #768

Copilot · 2026-01-12T02:46:12Z

Pagination Implementation - Complete ✅

Overview

Implemented pagination on the issues list page to handle large datasets (197+ issues). Users can now navigate through issues 25 at a time with full filter preservation and URL state management.

Key Features Delivered

Page Size: 25 issues per page (configurable via PAGE_SIZE constant)
Navigation Controls: Previous/Next buttons + page number links
URL State: Page number in query params (e.g., /issues?page=2)
Total Count Display: "Showing 1-25 of 197 issues"
Filter Preservation: All filters maintained when paginating
Smart Reset: Changing filters automatically resets to page 1
Progressive Enhancement: Works without JavaScript (all links)
Merge Conflicts Resolved: Integrated reporter display changes from main

Files Changed (6 files)

src/app/(app)/issues/page.tsx - Server-side pagination logic + reporter fields
src/components/issues/IssuesPagination.tsx - Pagination controls (client component)
src/components/ui/pagination.tsx - Base UI component (shadcn/ui style)
src/components/issues/IssueFilters.tsx - Reset page on filter change
src/app/(app)/issues/pagination.test.ts - 18 unit tests (all passing)
CHANGELOG.md - Feature documentation

Merge Resolution

Successfully merged changes from main branch (8e3481a) which added:

reporterName and reporterEmail columns to issues query
invitedReporter relation
resolveIssueReporter() helper function usage in IssueRow

Both pagination logic and reporter display enhancements now work together seamlessly.

Implementation Highlights

Minimal Changes: Only touched necessary files, no over-engineering
Server-First: Parallel queries for count + data, no client state
Type Safe: Strict TypeScript, no unsafe escapes
Well Tested: 18 tests covering edge cases and core logic
Code Reviewed: All feedback addressed
Conflicts Resolved: Clean merge with main branch

Architecture Alignment

✅ Server Components with direct Drizzle queries
✅ URL-based state (no Redux/Zustand needed)
✅ Progressive enhancement (links work without JS)
✅ Single-tenant design (no org scoping)
✅ Follows project patterns from docs/PATTERNS.md

Ready for merge!

Original prompt

This section details on the original issue you should resolve

<issue_title>Add pagination to issues list</issue_title>
<issue_description>## Feature Request

The issues list currently displays all issues on a single page, which becomes unwieldy as the number of issues grows.

Problem

With 197 issues in the production dataset, scrolling through the entire list is cumbersome and affects performance. Users need a way to navigate through issues more efficiently.

Proposed Solution

Implement pagination on the issues list page with the following features:

Page Size: Default to 25 or 50 issues per page

Page Controls: Previous/Next buttons and/or page number links

URL State: Preserve page number in URL query params (e.g., /issues?page=2) for bookmarking and sharing

Total Count: Display total issue count (e.g., "Showing 1-25 of 197 issues")

Optional Enhancements

Allow users to change page size (25/50/100 items per page)

Add "Jump to page" input for quick navigation

Consider infinite scroll as an alternative UX pattern

Implementation Notes

Likely affects the issues list page/component

May need server-side pagination support in the issues query/service layer

Consider preserving filter/sort state when paginating

Labels: enhancement, ux
Priority: Medium</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Add pagination to issues list #752

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

vercel · 2026-01-12T02:46:15Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
pin-point	Ready	Preview, Comment	Jan 12, 2026 3:53am

Co-authored-by: timothyfroehlich <[email protected]>

timothyfroehlich · 2026-01-12T03:45:42Z

@copilot merge conflicts

# Conflicts: # src/app/(app)/issues/page.tsx

Copilot · 2026-01-12T03:50:38Z

@copilot merge conflicts

Merge conflicts resolved in commit 2f8eb2b.

The conflicts were in src/app/(app)/issues/page.tsx where both branches modified the issues query:

My pagination branch added: whereCondition variable, parallel count query, limit/offset
Main branch added: reporterName, reporterEmail columns, invitedReporter relation

Both changes are now integrated. The pagination query includes all the new reporter fields and the IssueRow component was auto-merged successfully with the resolveIssueReporter() helper.

Copilot

Pull request overview

This PR adds server-side pagination to the issues list page to address performance and UX concerns with 197+ issues in production. The implementation follows a server-first architecture with progressive enhancement.

Changes:

Server-side pagination logic with parallel queries for count and data using LIMIT/OFFSET
Client-side pagination UI component with Previous/Next buttons and smart page number display
Filter integration that resets to page 1 when filters change and preserves filters during pagination navigation

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`src/components/ui/pagination.tsx`	New shadcn/ui-style base pagination primitives with progressive enhancement using `<a>` links
`src/components/issues/IssuesPagination.tsx`	Client component implementing smart pagination controls with ellipsis logic and filter-aware URL building
`src/components/issues/IssueFilters.tsx`	Updated to reset to page 1 when any filter changes
`src/app/(app)/issues/page.tsx`	Server component with parallel queries for total count and paginated data, page parameter parsing and validation
`src/app/(app)/issues/pagination.test.ts`	Unit tests covering page parsing, offset calculation, and range display logic
`CHANGELOG.md`	Documents the new pagination feature for users

Comments suppressed due to low confidence (2)

src/app/(app)/issues/page.tsx:179

The pagination component is only shown when issuesList.length > 0, but this means that if a user navigates to page 2 and applies filters that result in no matches, they won't see any pagination controls to navigate back. Consider always rendering the pagination component (or at least a simple message) when totalCount > 0, even if the current page has no results due to filtering. This would happen if, for example, a user is on page 8 and then applies a filter that only returns 5 results total.

          </p>
        </div>
      </div>

      <div className="space-y-6">
        {/* Filters */}
        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">

src/app/(app)/issues/page.tsx:179

The pagination feature lacks E2E test coverage. Given that pagination is a critical user journey for navigating through 197+ issues in production, consider adding an E2E test in e2e/full/ that verifies: (1) pagination controls appear when there are multiple pages, (2) clicking Next/Previous navigation works correctly, (3) page numbers are correctly displayed and functional, and (4) filters are preserved when navigating between pages. Follow the patterns established in e2e/full/dashboard.spec.ts using semantic selectors.

          </p>
        </div>
      </div>

      <div className="space-y-6">
        {/* Filters */}
        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">

Copilot · 2026-01-12T03:51:22Z

src/app/(app)/issues/pagination.test.ts

+import { describe, it, expect } from "vitest";
+
+/**
+ * Tests for pagination logic used in issues list
+ */
+describe("Issues Pagination Logic", () => {


The pagination test file is placed in src/app/(app)/issues/pagination.test.ts, but according to the repository's testing structure (seen in src/test/unit/), unit tests should be located in the src/test/unit/ directory, not co-located with the application code. Consider moving this test to src/test/unit/issues/pagination.test.ts to maintain consistency with the project's testing conventions.

Copilot · 2026-01-12T03:51:22Z

src/components/issues/IssuesPagination.tsx

+              <PaginationPrevious
+                href="#"
+                className="pointer-events-none opacity-50"
+                aria-disabled="true"
+              />
+            )}
+          </PaginationItem>
+
+          {/* Page numbers */}
+          {getPageNumbers().map((page, index) => (
+            <PaginationItem
+              key={page === "ellipsis" ? `ellipsis-${index}` : `page-${page}`}
+            >
+              {page === "ellipsis" ? (
+                <PaginationEllipsis />
+              ) : (
+                <PaginationLink
+                  href={buildPageUrl(page)}
+                  isActive={page === currentPage}
+                >
+                  {page}
+                </PaginationLink>
+              )}
+            </PaginationItem>
+          ))}
+
+          {/* Next button */}
+          <PaginationItem>
+            {currentPage < totalPages ? (
+              <PaginationNext href={buildPageUrl(currentPage + 1)} />
+            ) : (
+              <PaginationNext
+                href="#"
+                className="pointer-events-none opacity-50"
+                aria-disabled="true"
+              />


The disabled Previous/Next buttons use href="#" with pointer-events-none and aria-disabled="true". However, aria-disabled is not a valid attribute for anchor elements (<a>). For proper accessibility, consider using aria-hidden="true" on the disabled links, or better yet, render them as <span> elements styled to look like buttons when disabled, rather than as links with href="#".

Copilot AI self-assigned this Jan 12, 2026

Initial plan

68a55a6

Copilot AI assigned timothyfroehlich Jan 12, 2026

Copilot started work on behalf of timothyfroehlich January 12, 2026 02:46 View session

Copilot AI and others added 4 commits January 12, 2026 02:49

Initial plan for pagination implementation

73a1fed

Co-authored-by: timothyfroehlich <[email protected]>

Add pagination to issues list

eb5148f

Co-authored-by: timothyfroehlich <[email protected]>

Add pagination tests

f1cd36b

Co-authored-by: timothyfroehlich <[email protected]>

Update CHANGELOG for pagination feature

ffcf740

Co-authored-by: timothyfroehlich <[email protected]>

vercel bot deployed to Preview January 12, 2026 03:00 View deployment

Address code review feedback for pagination

59dd41d

Co-authored-by: timothyfroehlich <[email protected]>

Copilot AI changed the title ~~[WIP] Add pagination to issues list~~ Add pagination to issues list (25 per page) Jan 12, 2026

Copilot AI requested a review from timothyfroehlich January 12, 2026 03:03

Copilot finished work on behalf of timothyfroehlich January 12, 2026 03:03

vercel bot deployed to Preview January 12, 2026 03:05 View deployment

timothyfroehlich marked this pull request as ready for review January 12, 2026 03:45

Copilot AI review requested due to automatic review settings January 12, 2026 03:45

Copilot started reviewing on behalf of timothyfroehlich January 12, 2026 03:45 View session

Copilot started work on behalf of timothyfroehlich January 12, 2026 03:46 View session

Merge commit '8e3481a' into copilot/add-pagination-to-issues-list

2f8eb2b

# Conflicts: # src/app/(app)/issues/page.tsx

Copilot finished work on behalf of timothyfroehlich January 12, 2026 03:51

Copilot AI reviewed Jan 12, 2026

View reviewed changes

vercel bot deployed to Preview January 12, 2026 03:53 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add pagination to issues list (25 per page) #768

Add pagination to issues list (25 per page) #768

Copilot AI commented Jan 12, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

timothyfroehlich commented Jan 12, 2026

Uh oh!

Copilot AI commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add pagination to issues list (25 per page) #768

Are you sure you want to change the base?

Add pagination to issues list (25 per page) #768

Conversation

Copilot AI commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pagination Implementation - Complete ✅

Overview

Key Features Delivered

Files Changed (6 files)

Merge Resolution

Implementation Highlights

Architecture Alignment

Problem

Proposed Solution

Optional Enhancements

Implementation Notes

Comments on the Issue (you are @copilot in this section)

Uh oh!

vercel bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timothyfroehlich commented Jan 12, 2026

Uh oh!

Copilot AI commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jan 12, 2026 •

edited

Loading

vercel bot commented Jan 12, 2026 •

edited

Loading