Add page number input to chat log pagination

[Copilot]

Users need direct page navigation on chat log pages rather than clicking through sequentially.

Changes

JavaScript (chatlog-index.js)

• Added addPageJump() function that injects page number input before pagination controls
• Input validates on Enter key and blur, resets to current page if invalid/out-of-range
• Listens to draw.dt event to update max pages and current value dynamically
• Uses parseInt(value, 10) and isNaN() check for reliable validation

CSS (_chatlog.scss)

• Added .datatable-page-jump styles using existing design tokens
• Responsive: inline flex on desktop, full-width centered on mobile

Behavior

// Input shows "Go to page: [5] of 42"
// Enter number → navigates to that page
// Invalid input → resets to current page
// Filters change total pages → updates max attribute and "of X" text

Applies to global, game-specific, and server-specific chat log pages.

Original prompt

We have a feature request from a user. The request is that on the chat log page (global and game specific) that they can provide the page number that they want to go to rather than having to click 'next' a bunch

---

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

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[Copilot]

Pull request overview

Adds a direct “go to page” control to the Chat Log DataTables pagination UI to let users jump to a specific page number (global/game/server chat log pages), alongside responsive styling.

Changes:

• Injects a page-number input UI before the DataTables pagination controls and wires it to DataTables paging (addPageJump()).
• Keeps the input’s current page / total pages in sync via the draw.dt event.
• Adds SCSS styles for the new page-jump control, including mobile-friendly layout.

Reviewed changes

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

File	Description
src/XtremeIdiots.Portal.Web/wwwroot/js/chatlog-index.js	Adds addPageJump() and hooks it into DataTables init/redraw to enable direct page navigation.
src/XtremeIdiots.Portal.Web/Styles/features/_chatlog.scss	Styles the new .datatable-page-jump control and makes it responsive.

[Copilot]

keypress is deprecated and can behave inconsistently across browsers for non-printing keys like Enter. Prefer keydown/keyup (and optionally e.preventDefault() on Enter) for more reliable handling.

Suggested change

	pageInput.addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	pageInput.addEventListener('keydown', function(e) {
	if (e.key === 'Enter') {
	e.preventDefault();

[Copilot]

In the draw.dt handler, document.querySelector('.page-jump-total') searches the whole document. It would be more robust to scope this lookup to the page-jump container (or otherwise keep a reference) to avoid accidentally updating the wrong element if another .page-jump-total exists on the page.

Suggested change

	const totalSpan = document.querySelector('.page-jump-total');
	const totalSpan = jumpContainer.querySelector('.page-jump-total');

[Copilot]

The page-jump input doesn’t have an associated label (a isn’t announced as a label by many screen readers). Consider using a … or adding an aria-label/aria-labelledby/aria-describedby so the control is accessible.

Suggested change

	<span class="page-jump-label">Go to page:</span>
	<input type="number" id="pageJumpInput" class="page-jump-input" min="1" max="${totalPages}" value="${pageInfo.page + 1}" />
	<span class="page-jump-total">of ${totalPages}</span>
	<label for="pageJumpInput" class="page-jump-label">Go to page:</label>
	<input type="number" id="pageJumpInput" class="page-jump-input" min="1" max="${totalPages}" value="${pageInfo.page + 1}" aria-describedby="pageJumpTotal" />
	<span id="pageJumpTotal" class="page-jump-total">of ${totalPages}</span>

[github-actions]

🏗️ Terraform Plan

🌍 Environment: dev

✅ Validate — Passed

✅ Plan

✅ No changes. Your infrastructure matches the configuration.

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud