Viewer: page-size selector (25/50/100/500)

web/app.css

@@ -117,3 +117,11 @@ tr.hidden-row td.act { opacity: 1; }
 }
 .pager button:disabled { opacity: 0.4; cursor: default; }
 .pager button:disabled:hover { border-color: var(--border); color: var(--fg); }
+.toggle select {
+  font: inherit;
+  color: var(--fg);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.25rem 0.4rem;
+}

web/app.js

@@ -3,19 +3,31 @@
 // Sender strings come from arbitrary From: headers and are attacker-controlled.
 // This page only ever renders them via textContent — never innerHTML.
 
-const PAGE_SIZE = 50;
+const PAGE_SIZES = [25, 50, 100, 500];
+const DEFAULT_PAGE_SIZE = 50;
 const HIDDEN_KEY = "gmail-stats.hiddenSenders";
+const PAGE_SIZE_KEY = "gmail-stats.pageSize";
 
 const views = ["loading", "setup", "error", "stats"];
 
 const state = {
   data: null,
   query: "",
   page: 1,
+  pageSize: loadPageSize(),
   showHidden: false,
   hidden: loadHidden(),
 };
 
+function loadPageSize() {
+  try {
+    const stored = Number(localStorage.getItem(PAGE_SIZE_KEY));
+    return PAGE_SIZES.includes(stored) ? stored : DEFAULT_PAGE_SIZE;
+  } catch (err) {
+    return DEFAULT_PAGE_SIZE;
+  }
+}
+
 function loadHidden() {
   try {
     const raw = localStorage.getItem(HIDDEN_KEY);
@@ -107,10 +119,10 @@ function update() {
     listed = listed.filter(row => String(row.sender).toLowerCase().includes(query));
   }
 
-  const pages = Math.max(1, Math.ceil(listed.length / PAGE_SIZE));
+  const pages = Math.max(1, Math.ceil(listed.length / state.pageSize));
   state.page = Math.min(Math.max(1, state.page), pages);
-  const start = (state.page - 1) * PAGE_SIZE;
-  const pageRows = listed.slice(start, start + PAGE_SIZE);
+  const start = (state.page - 1) * state.pageSize;
+  const pageRows = listed.slice(start, start + state.pageSize);
 
   const tbody = document.getElementById("sender-rows");
   tbody.replaceChildren();
@@ -169,6 +181,18 @@ document.getElementById("search").addEventListener("input", event => {
   state.page = 1;
   update();
 });
+document.getElementById("page-size").value = String(state.pageSize);
+document.getElementById("page-size").addEventListener("change", event => {
+  const size = Number(event.target.value);
+  state.pageSize = PAGE_SIZES.includes(size) ? size : DEFAULT_PAGE_SIZE;
+  try {
+    localStorage.setItem(PAGE_SIZE_KEY, String(state.pageSize));
+  } catch (err) {
+    // Storage unavailable — selection just won't survive reload.
+  }
+  state.page = 1;
+  update();
+});
 document.getElementById("show-hidden").addEventListener("change", event => {
   state.showHidden = event.target.checked;
   state.page = 1;

web/index.html

@@ -55,6 +55,14 @@ <h2>Something went wrong</h2>
     </div>
     <div class="controls">
       <input id="search" type="search" placeholder="Filter senders&hellip;" autocomplete="off">
+      <label class="toggle">Rows
+        <select id="page-size">
+          <option value="25">25</option>
+          <option value="50" selected>50</option>
+          <option value="100">100</option>
+          <option value="500">500</option>
+        </select>
+      </label>
       <label class="toggle"><input id="show-hidden" type="checkbox"> Show hidden</label>
     </div>
     <table>