hanna/fabrica

feat(web): pagination for commits and issue/PR lists

c79323e · hanna committed on 2026-07-25

Add a reusable Pagination (from ?page=&per_page=, default 10, clamped) and a
pagination_nav that renders prev/next plus a page-size selector, preserving
other query params (e.g. the issues state filter). Wire it into the commits
view and the issue/PR list (list_issues gains LIMIT/OFFSET), fetching one extra
row to detect a next page. A data-autosubmit select changes page size without a
button; a noscript Apply keeps it working without JS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +32 −0

assets/fabrica.js +9 −0

crates/store/src/issues.rs +15 −11

crates/web/src/issues.rs +11 −2

crates/web/src/repo.rs +121 −2

crates/web/src/tests.rs +46 −0

   flex: none;
+}
+/* Pagination controls for long lists. */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+.pagination .btn.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.pagination .per-page {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.pagination .per-page label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  font-weight: 400;
+  color: var(--fb-fg-muted);
+}
+.pagination .per-page select {
+  width: auto;
+}
+.pagination-page {
+  margin-left: auto;
+}
 /* Settings: a left tab rail and the active tab's content. */
 .settings-layout {
   display: flex;

     });
   });
+  // ---- Auto-submitting selects ----
+  // A <select data-autosubmit> submits its form on change; without JS a noscript
+  // Apply button does the same.
+  document.querySelectorAll("select[data-autosubmit]").forEach(function (sel) {
+    sel.addEventListener("change", function () {
+      if (sel.form) sel.form.submit();
+    });
+  });
   // ---- Progressive link fields ----
   // Show the filled links plus one empty slot; reveal more (up to the max) via
   // the Add link button. Without JS every slot is visible.

         Ok(row.as_ref().map(|r| self.map_issue(r)).transpose()?)
+    }
-    /// List a repo's issues or PRs, optionally filtered by state, newest first.
+    /// List a repo's issues or PRs, optionally filtered by state, newest first,
+    /// bounded to `limit` rows starting at `offset`.
     ///
     /// # Errors
     ///
         repo_id: &str,
         is_pull: bool,
         state: Option<IssueState>,
+        limit: i64,
+        offset: i64,
     ) -> Result<Vec<Issue>, StoreError> {
-        let base = format!(
+        // Placeholders after the fixed ones depend on whether a state filter is set.
-            "SELECT {ISSUE_COLUMNS} FROM issues WHERE repo_id = $1 AND is_pull = $2{} \
+        let (state_clause, limit_ph, offset_ph) = if state.is_some() {
-             ORDER BY number DESC",
+            (" AND state = $3", "$4", "$5")
-            if state.is_some() {
+        } else {
-                " AND state = $3"
+            ("", "$3", "$4")
-            } else {
+        };
-                ""
+        let sql = format!(
-            }
+            "SELECT {ISSUE_COLUMNS} FROM issues WHERE repo_id = $1 AND is_pull = $2{state_clause} \
+             ORDER BY number DESC LIMIT {limit_ph} OFFSET {offset_ph}"
         );
-        let mut query = sqlx::query(AssertSqlSafe(base)).bind(repo_id).bind(is_pull);
+        let mut query = sqlx::query(AssertSqlSafe(sql)).bind(repo_id).bind(is_pull);
         if let Some(s) = state {
             query = query.bind(s.as_str());
+        }
-        let rows = query.fetch_all(&self.pool).await?;
+        let rows = query.bind(limit).bind(offset).fetch_all(&self.pool).await?;
         rows.iter()
             .map(|r| self.map_issue(r))
             .collect::<Result<_, _>>()

     } else {
         IssueState::Open
     };
-    let items = state
+    // Paginate: fetch one extra row to detect a next page.
+    let paging = crate::repo::Pagination::from_query(uri.query());
+    let limit = i64::try_from(paging.per_page + 1).unwrap_or(i64::MAX);
+    let offset = i64::try_from(paging.offset()).unwrap_or(0);
+    let mut items = state
         .store
-        .list_issues(&ctx.repo.id, kind.is_pull, Some(filter))
+        .list_issues(&ctx.repo.id, kind.is_pull, Some(filter), limit, offset)
         .await?;
+    let has_next = items.len() > paging.per_page;
+    items.truncate(paging.per_page);
     let counts = state.store.issue_counts(&ctx.repo.id, kind.is_pull).await?;
     // Resolve author usernames and each item's labels.
+                    }
+                }
+            }
+            @if has_next || paging.page > 1 {
+                (crate::repo::pagination_nav(uri.path(), uri.query(), paging, has_next))
+            }
+        }
     };
     let (jar, chrome) = build_chrome(state, jar, viewer, uri.path().to_string());

     pub q: Option<String>,
+}
+/// Paging state parsed from `?page=&per_page=`, for long lists (commits, …).
+#[derive(Debug, Clone, Copy)]
+pub(crate) struct Pagination {
+    /// 1-based page number.
+    pub page: usize,
+    /// Items per page.
+    pub per_page: usize,
+}
+impl Pagination {
+    /// The default page size.
+    pub(crate) const DEFAULT_PER_PAGE: usize = 10;
+    /// The offered page sizes.
+    const CHOICES: [usize; 4] = [10, 25, 50, 100];
+    /// Parse from a raw query string, clamping to sane bounds.
+    pub(crate) fn from_query(query: Option<&str>) -> Self {
+        let (mut page, mut per_page) = (1, Self::DEFAULT_PER_PAGE);
+        if let Some(q) = query {
+            for (k, v) in url::form_urlencoded::parse(q.as_bytes()) {
+                match k.as_ref() {
+                    "page" => page = v.parse::<usize>().unwrap_or(1).max(1),
+                    "per_page" => {
+                        per_page = v
+                            .parse::<usize>()
+                            .unwrap_or(Self::DEFAULT_PER_PAGE)
+                            .clamp(1, 100);
+                    }
+                    _ => {}
+                }
+            }
+        }
+        Self { page, per_page }
+    }
+    /// The zero-based offset of the current page.
+    pub(crate) fn offset(self) -> usize {
+        (self.page - 1) * self.per_page
+    }
+}
+/// Render prev/next controls and a page-size selector for a paginated list.
+///
+/// `path` is the list URL and `query` its current query string; every query
+/// parameter other than `page`/`per_page` is preserved (e.g. the issues `state`),
+/// so the filter survives paging. `has_next` is computed by fetching one extra row.
+pub(crate) fn pagination_nav(
+    path: &str,
+    query: Option<&str>,
+    p: Pagination,
+    has_next: bool,
+) -> Markup {
+    // The non-paging query parameters, carried through on every link.
+    let kept: Vec<(String, String)> = query
+        .map(|q| {
+            url::form_urlencoded::parse(q.as_bytes())
+                .filter(|(k, _)| k != "page" && k != "per_page")
+                .map(|(k, v)| (k.into_owned(), v.into_owned()))
+                .collect()
+        })
+        .unwrap_or_default();
+    let with = |extra: &[(&str, String)]| -> String {
+        let mut s = url::form_urlencoded::Serializer::new(String::new());
+        for (k, v) in &kept {
+            s.append_pair(k, v);
+        }
+        for (k, v) in extra {
+            s.append_pair(k, v);
+        }
+        format!("{path}?{}", s.finish())
+    };
+    let link = |page: usize| {
+        with(&[
+            ("page", page.to_string()),
+            ("per_page", p.per_page.to_string()),
+        ])
+    };
+    html! {
+        nav class="pagination" aria-label="Pagination" {
+            @if p.page > 1 {
+                a class="btn" href=(link(p.page - 1)) { "← Previous" }
+            } @else {
+                span class="btn disabled" aria-disabled="true" { "← Previous" }
+            }
+            // Changing the page size returns to page 1 (the form omits `page`).
+            form class="per-page" method="get" action=(path) {
+                @for (k, v) in &kept {
+                    input type="hidden" name=(k) value=(v);
+                }
+                label { "Per page "
+                    select name="per_page" data-autosubmit {
+                        @for n in Pagination::CHOICES {
+                            option value=(n) selected[n == p.per_page] { (n) }
+                        }
+                    }
+                }
+                noscript { button class="btn" type="submit" { "Apply" } }
+            }
+            span class="muted pagination-page" { "Page " (p.page) }
+            @if has_next {
+                a class="btn" href=(link(p.page + 1)) { "Next →" }
+            } @else {
+                span class="btn disabled" aria-disabled="true" { "Next →" }
+            }
+        }
+    }
+}
 /// `GET /{owner}` — the user's profile: an info sidebar on the left, their groups
 /// and repositories (filterable) on the right.
 pub async fn user_page(
         move |repo| repo.resolve_ref(&rev_name)
     })
     .await?;
-    let commits = git_read(state, &ctx.repo.id, {
+    // Paginate: fetch one extra row to detect whether a next page exists.
+    let paging = Pagination::from_query(uri.query());
+    let mut commits = git_read(state, &ctx.repo.id, {
         let rev = rev.clone();
-        move |repo| repo.commits(&rev, None, git::Page::first(50))
+        let page = git::Page {
+            offset: paging.offset(),
+            limit: paging.per_page + 1,
+        };
+        move |repo| repo.commits(&rev, None, page)
     })
     .await?;
+    let has_next = commits.len() > paging.per_page;
+    commits.truncate(paging.per_page);
     // Verify signatures against all registered keys (bounded to this page's rows),
     // reusing the TTL'd signature cache.
+                }
+            }
+        }
+        @if has_next || paging.page > 1 {
+            (pagination_nav(uri.path(), uri.query(), paging, has_next))
+        }
     };
     let (jar, chrome) = build_chrome(state, jar, viewer, uri.path().to_string());
     let title = format!("{}/{}: commits", ctx.owner.username, ctx.repo.path);

+}
 #[tokio::test]
+async fn issue_list_paginates() {
+    let (state, app) = app().await;
+    let ada = state.store.user_by_username("ada").await.unwrap().unwrap();
+    let repo = state
+        .store
+        .create_repo(NewRepo {
+            owner_id: ada.id.clone(),
+            group_id: None,
+            name: "proj".to_string(),
+            path: "proj".to_string(),
+            description: None,
+            visibility: model::Visibility::Public,
+            default_branch: "main".to_string(),
+        })
+        .await
+        .unwrap();
+    // Three open issues.
+    for i in 0..3 {
+        state
+            .store
+            .create_issue(&repo.id, &ada.id, &format!("bug {i}"), "", false)
+            .await
+            .unwrap();
+    }
+    // First page of two shows a Next control.
+    let res = app
+        .clone()
+        .oneshot(get("/ada/proj/-/issues?per_page=2"))
+        .await
+        .unwrap();
+    let html = body_string(res).await;
+    assert!(html.contains("class=\"pagination\""), "pagination shown");
+    assert!(html.contains("page=2"), "next link present");
+    assert_eq!(html.matches("entry-row-title").count(), 2, "two per page");
+    // Second page holds the remaining one.
+    let res = app
+        .oneshot(get("/ada/proj/-/issues?per_page=2&page=2"))
+        .await
+        .unwrap();
+    let html = body_string(res).await;
+    assert_eq!(html.matches("entry-row-title").count(), 1, "one on page 2");
+}
+#[tokio::test]
 async fn issues_404_when_disabled() {
     let (state, app) = app().await;
     let ada = state.store.user_by_username("ada").await.unwrap().unwrap();