From 0bba787f9dfa2cb64d02420db82df5dd9b8c75de Mon Sep 17 00:00:00 2001
From: Lawrence Tong <lawrencetong1030@gmail.com>
Date: Sat, 11 Jul 2026 11:41:00 -0500
Subject: [PATCH] feat: paginate starred questions pages

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 client/scripts/utilities/pagination.js | 59 ++++++++++++++++++++++++++
 client/user/stars/bonuses.html         |  1 +
 client/user/stars/bonuses.js           | 54 +++++++++++++++++------
 client/user/stars/tossups.html         |  1 +
 client/user/stars/tossups.js           | 52 +++++++++++++++++------
 5 files changed, 140 insertions(+), 27 deletions(-)
 create mode 100644 client/scripts/utilities/pagination.js

diff --git a/client/scripts/utilities/pagination.js b/client/scripts/utilities/pagination.js
new file mode 100644
index 000000000..cbe679402
--- /dev/null
+++ b/client/scripts/utilities/pagination.js
@@ -0,0 +1,59 @@
+/**
+ * Renders a Bootstrap pagination control into `container` and wires up click handlers.
+ *
+ * @param {HTMLElement} container - Element to render the pagination nav into.
+ * @param {number} currentPage - The currently active page (1-indexed).
+ * @param {number} totalPages - Total number of pages.
+ * @param {(page: number) => void} onPageChange - Called with the new page number when the user navigates.
+ */
+export default function renderPagination (container, currentPage, totalPages, onPageChange) {
+  if (totalPages <= 1) {
+    container.innerHTML = '';
+    return;
+  }
+
+  const shiftLength = window.screen.width > 992 ? 10 : 5;
+  const shift = shiftLength * Math.floor((currentPage - 1) / shiftLength);
+  const rangeStart = shift;
+  const rangeEnd = Math.min(shift + shiftLength, totalPages);
+
+  const pageLinks = Array(rangeEnd - rangeStart).fill().map((_, idx) => {
+    const page = rangeStart + idx + 1;
+    const isActive = page === currentPage;
+    return `
+      <li class="page-item">
+        <a class="page-link ${isActive ? 'active' : ''}" href="#" data-page="${page}">${page}</a>
+      </li>
+    `;
+  }).join('');
+
+  container.innerHTML = `
+    <nav aria-label="pagination">
+      <ul class="pagination justify-content-center">
+        <li class="page-item">
+          <a class="page-link" href="#" aria-label="First" data-page="1">&laquo;</a>
+        </li>
+        <li class="page-item">
+          <a class="page-link" href="#" aria-label="Previous" data-page="${Math.max(1, currentPage - 1)}">&lsaquo;</a>
+        </li>
+        ${pageLinks}
+        <li class="page-item">
+          <a class="page-link" href="#" aria-label="Next" data-page="${Math.min(totalPages, currentPage + 1)}">&rsaquo;</a>
+        </li>
+        <li class="page-item">
+          <a class="page-link" href="#" aria-label="Last" data-page="${totalPages}">&raquo;</a>
+        </li>
+      </ul>
+    </nav>
+  `;
+
+  for (const link of container.querySelectorAll('a.page-link')) {
+    link.addEventListener('click', function (event) {
+      event.preventDefault();
+      const page = Number(this.dataset.page);
+      if (page !== currentPage) {
+        onPageChange(page);
+      }
+    });
+  }
+}
diff --git a/client/user/stars/bonuses.html b/client/user/stars/bonuses.html
index 9e671ebcd..bb40f2175 100644
--- a/client/user/stars/bonuses.html
+++ b/client/user/stars/bonuses.html
@@ -20,6 +20,7 @@
             </div>
         </div>
         <div id="bonus-list"></div>
+        <div id="bonus-pagination" class="mt-3"></div>
     </div>
 
     <div class="modal" id="clear-starred-modal" tabindex="-1">
diff --git a/client/user/stars/bonuses.js b/client/user/stars/bonuses.js
index a5babf7d7..91cb7d060 100644
--- a/client/user/stars/bonuses.js
+++ b/client/user/stars/bonuses.js
@@ -1,12 +1,31 @@
 import { downloadQuestionsAsText, downloadBonusesAsCSV, downloadQuestionsAsJSON } from '../../scripts/download.js';
 import star from '../../scripts/auth/star.js';
 import getBonusPartLabel from '../../scripts/utilities/get-bonus-part-label.js';
+import renderPagination from '../../scripts/utilities/pagination.js';
+
+const PAGE_SIZE = 20;
 
 const bonuses = await star.getStarredBonuses();
 const bonusList = document.getElementById('bonus-list');
+const paginationContainer = document.getElementById('bonus-pagination');
 document.getElementById('starred-number').innerText = bonuses.length;
 
-for (const bonus of bonuses) {
+const totalPages = Math.max(1, Math.ceil(bonuses.length / PAGE_SIZE));
+
+function attachStarListener (bonus) {
+  document.getElementById(`star-bonus-${bonus._id}`).addEventListener('click', async function () {
+    if (this.classList.contains('selected')) {
+      this.innerHTML = star.unstarredSvg;
+      star.unstarBonus(bonus._id);
+      this.classList.toggle('selected');
+    } else if (await star.starBonus(bonus._id)) {
+      this.innerHTML = star.starredSvg;
+      this.classList.toggle('selected');
+    }
+  });
+}
+
+function renderBonusCard (bonus) {
   let cardBody = '';
   for (let i = 0; i < bonus.parts.length; i++) {
     cardBody += `
@@ -16,7 +35,7 @@ for (const bonus of bonuses) {
     `;
   }
 
-  bonusList.innerHTML += `
+  return `
         <div class="card my-2">
             <div class="card-header d-flex justify-content-between">
                 <b class="clickable" data-bs-toggle="collapse" data-bs-target="#question-${bonus._id}" aria-expanded="true">
@@ -42,19 +61,28 @@ for (const bonus of bonuses) {
     `;
 }
 
-for (const bonus of bonuses) {
-  document.getElementById(`star-bonus-${bonus._id}`).addEventListener('click', async function () {
-    if (this.classList.contains('selected')) {
-      this.innerHTML = star.unstarredSvg;
-      star.unstarBonus(bonus._id);
-      this.classList.toggle('selected');
-    } else if (await star.starBonus(bonus._id)) {
-      this.innerHTML = star.starredSvg;
-      this.classList.toggle('selected');
-    }
-  });
+function renderPage (page) {
+  const start = (page - 1) * PAGE_SIZE;
+  const pageBonuses = bonuses.slice(start, start + PAGE_SIZE);
+
+  bonusList.innerHTML = pageBonuses.length > 0
+    ? pageBonuses.map(renderBonusCard).join('')
+    : '<p class="text-muted">You have no starred bonuses.</p>';
+
+  for (const bonus of pageBonuses) {
+    attachStarListener(bonus);
+  }
+
+  renderPagination(paginationContainer, page, totalPages, goToPage);
 }
 
+function goToPage (page) {
+  renderPage(page);
+  bonusList.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+renderPage(1);
+
 document.getElementById('confirm').addEventListener('click', async function () {
   await star.clearStarredBonuses();
   window.location.reload();
diff --git a/client/user/stars/tossups.html b/client/user/stars/tossups.html
index 1ac582afb..2191f35fd 100644
--- a/client/user/stars/tossups.html
+++ b/client/user/stars/tossups.html
@@ -20,6 +20,7 @@
             </div>
         </div>
         <div id="tossup-list"></div>
+        <div id="tossup-pagination" class="mt-3"></div>
     </div>
 
     <div class="modal" id="clear-starred-modal" tabindex="-1">
diff --git a/client/user/stars/tossups.js b/client/user/stars/tossups.js
index 44d6078a8..d03145015 100644
--- a/client/user/stars/tossups.js
+++ b/client/user/stars/tossups.js
@@ -1,12 +1,35 @@
 import { downloadQuestionsAsText, downloadTossupsAsCSV, downloadQuestionsAsJSON } from '../../scripts/download.js';
 import star from '../../scripts/auth/star.js';
+import renderPagination from '../../scripts/utilities/pagination.js';
+
+const PAGE_SIZE = 20;
 
 const tossups = await star.getStarredTossups();
 const tossupList = document.getElementById('tossup-list');
+const paginationContainer = document.getElementById('tossup-pagination');
 document.getElementById('starred-number').innerText = tossups.length;
 
-for (const tossup of tossups) {
-  tossupList.innerHTML += `
+const totalPages = Math.max(1, Math.ceil(tossups.length / PAGE_SIZE));
+
+function attachStarListener (tossup) {
+  document.getElementById(`star-tossup-${tossup._id}`).addEventListener('click', async function () {
+    if (this.classList.contains('selected')) {
+      this.innerHTML = star.unstarredSvg;
+      star.unstarTossup(tossup._id);
+      this.classList.toggle('selected');
+    } else if (await star.starTossup(tossup._id)) {
+      this.innerHTML = star.starredSvg;
+      this.classList.toggle('selected');
+    }
+  });
+}
+
+function renderPage (page) {
+  const start = (page - 1) * PAGE_SIZE;
+  const pageTossups = tossups.slice(start, start + PAGE_SIZE);
+
+  tossupList.innerHTML = pageTossups.length > 0
+    ? pageTossups.map(tossup => `
         <div class="card mb-2">
             <div class="card-header d-flex justify-content-between">
                 <b class="clickable" data-bs-toggle="collapse" data-bs-target="#question-${tossup._id}" aria-expanded="true">
@@ -30,22 +53,23 @@ for (const tossup of tossups) {
                 </div>
             </div>
         </div>
-    `;
+    `).join('')
+    : '<p class="text-muted">You have no starred tossups.</p>';
+
+  for (const tossup of pageTossups) {
+    attachStarListener(tossup);
+  }
+
+  renderPagination(paginationContainer, page, totalPages, goToPage);
 }
 
-for (const tossup of tossups) {
-  document.getElementById(`star-tossup-${tossup._id}`).addEventListener('click', async function () {
-    if (this.classList.contains('selected')) {
-      this.innerHTML = star.unstarredSvg;
-      star.unstarTossup(tossup._id);
-      this.classList.toggle('selected');
-    } else if (await star.starTossup(tossup._id)) {
-      this.innerHTML = star.starredSvg;
-      this.classList.toggle('selected');
-    }
-  });
+function goToPage (page) {
+  renderPage(page);
+  tossupList.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 
+renderPage(1);
+
 document.getElementById('confirm').addEventListener('click', async function () {
   await star.clearStarredTossups();
   window.location.reload();