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

@@ @@ -595,6 +595,38 @@ body.drawer-open .drawer-backdrop { @@
   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;

@@ @@ -56,6 +56,15 @@ @@
     });
   });
   // ---- 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.

@@ @@ -125,7 +125,8 @@ impl Store { @@
         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
     ///
@@ @@ -135,21 +136,24 @@ impl Store { @@
         repo_id: &str,
         is_pull: bool,
         state: Option<IssueState>,
         limit: i64,
         offset: i64,
     ) -> Result<Vec<Issue>, StoreError> {
         let base = format!(
             "SELECT {ISSUE_COLUMNS} FROM issues WHERE repo_id = $1 AND is_pull = $2{} \
              ORDER BY number DESC",
             if state.is_some() {
                 " AND state = $3"
             } else {
                 ""
+            }
         // Placeholders after the fixed ones depend on whether a state filter is set.
         let (state_clause, limit_ph, offset_ph) = if state.is_some() {
             (" AND state = $3", "$4", "$5")
         } else {
             ("", "$3", "$4")
         };
         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<_, _>>()

@@ @@ -79,10 +79,16 @@ pub(crate) async fn list( @@
     } 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.
@@ @@ -138,6 +144,9 @@ pub(crate) async fn list( @@
+                    }
+                }
+            }
             @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());

@@ @@ -159,6 +159,114 @@ pub struct ListQuery { @@
     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(
@@ @@ -1353,11 +1461,19 @@ async fn commits_view( @@
         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.
@@ @@ -1417,6 +1533,9 @@ async fn commits_view( @@
+                }
+            }
+        }
         @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);

@@ @@ -679,6 +679,52 @@ async fn issues_open_create_and_view() { @@
+}
 #[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();