From 291943f1d70f7b125f03dc1b7fdda8f93bde1f46 Mon Sep 17 00:00:00 2001
From: Sakibul Islam <sakibulislam25800@gmail.com>
Date: Sat, 1 Nov 2025 10:07:51 +0000
Subject: [PATCH 1/6] Add rollup UI flow

---
 templates/queue.html | 157 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 144 insertions(+), 13 deletions(-)

diff --git a/templates/queue.html b/templates/queue.html
index a6dc753f..bf14c3a6 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -26,6 +26,35 @@
     table td {
         padding: 0.5rem;
     }
+
+    th.select-checkbox,
+    td.select-checkbox {
+        width: 2.5rem;
+    }
+
+    #rollupModal {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.5);
+    }
+
+    #rollupModalContent {
+        background-color: white;
+        margin: 15% auto;
+        padding: 1rem;
+        border: 1px solid black;
+        max-width: 500px;
+    }
+
+    #rollupModalClose {
+        float: right;
+        cursor: pointer;
+    }
 </style>
 {% endblock %}
 
@@ -53,17 +82,19 @@ <h1>
     <label for="groupBy">Group by: </label>
     <select id="groupBy">
       <option value="">None</option>
-      <option value="1">Status</option>
-      <option value="2">Mergeable</option>
-      <option value="4">Author</option>
-      <option value="7">Priority</option>
+      <option value="2">Status</option>
+      <option value="3">Mergeable</option>
+      <option value="5">Author</option>
+      <option value="8">Priority</option>
     </select>
+    <button id="showRollupSelection" style="margin-left: 1rem;">Create rollup</button>
   </div>
 
   <div class="table-wrapper">
     <table id="table">
         <thead>
             <tr>
+                <th class="select-checkbox"></th>
                 <th>#</th>
                 <th>Status</th>
                 <th>Mergeable</th>
@@ -79,6 +110,7 @@ <h1>
         <tbody>
             {% for pr in prs %}
             <tr>
+                <td class="select-checkbox"></td>
                 <td>
                     <a href="{{ repo_url }}/pull/{{ pr.number }}">{{ pr.number.0 }}</a>
                 </td>
@@ -121,14 +153,24 @@ <h1>
   <div style="text-align: center; margin-top: 1em;">
     <a href="https://github.com/rust-lang/bors">Contribute on GitHub</a>
   </div>
+
+  <div id="rollupModal">
+    <div id="rollupModalContent">
+      <span id="rollupModalClose">&times;</span>
+      <p id="rollupModalMessage"></p>
+      <button id="rollupModalContinue" style="display: none;">Continue</button>
+    </div>
+  </div>
 </main>
 
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
 <script src="https://cdn.datatables.net/rowgroup/1.5.1/js/dataTables.rowGroup.min.js"></script>
+<script src="https://cdn.datatables.net/select/2.0.3/js/dataTables.select.min.js"></script>
 
 <script>
     const getDataStatusFromCell = (cell) => cell?.dataset?.status || '';
+    const interactiveSelector = 'a, button, input, label, select, textarea';
 
     function initializeTable(colIndex) {
         let config = {
@@ -136,7 +178,13 @@ <h1>
             info: false,
             columnDefs: [
                 {
-                    targets: 1,     // Column 1 (Status column)
+                    targets: 0,
+                    orderable: false,
+                    className: 'select-checkbox',
+                    render: DataTable.render.select()
+                },
+                {
+                    targets: 2,     // Column 2 (Status column)
                     render: function(data, type, row, meta) {
                         if (type === 'display') {
                             return data;
@@ -154,20 +202,25 @@ <h1>
                     }
                 }
             ],
-            order: []
+            order: [],
+            select: {
+                style: 'multi',
+                selector: 'td.select-checkbox',
+                headerCheckbox: true
+            }
         };
 
         if (colIndex !== null) {
             config.order = [[colIndex, "asc"]];
             config.rowGroup = {
-                dataSrc: colIndex === 1
+                dataSrc: colIndex === 2
                     ? ([_, html]) => {
-                        let table = document.getElementById('table');
-                        if (table && table.tBodies[0]) {
-                            let rows = Array.from(table.tBodies[0].rows);
+                        let tableElement = document.getElementById('table');
+                        if (tableElement && tableElement.tBodies[0]) {
+                            let rows = Array.from(tableElement.tBodies[0].rows);
                             for (let row of rows) {
-                                if (row.cells[1] && row.cells[1].innerHTML === html) {
-                                    return getDataStatusFromCell(row.cells[1]);
+                                if (row.cells[2] && row.cells[2].innerHTML === html) {
+                                    return getDataStatusFromCell(row.cells[2]);
                                 }
                             }
                         }
@@ -180,13 +233,91 @@ <h1>
         return new DataTable("#table", config);
     }
 
+    function bindRowClick(tableInstance) {
+        const tbody = document.querySelector('#table tbody');
+        if (!tbody) {
+            return () => {};
+        }
+
+        const handler = (event) => {
+            // Ignore clicks on checkbox - let checkbox handle it
+            if (event.target.closest('td.select-checkbox')) {
+                return;
+            }
+
+            // Ignore clicks on interactive elements
+            if (event.target.closest(interactiveSelector)) {
+                return;
+            }
+
+            const rowElement = event.target.closest('tr');
+            if (!rowElement) {
+                return;
+            }
+
+            const rowApi = tableInstance.row(rowElement);
+            if (!rowApi.any()) {
+                return;
+            }
+
+            if (rowApi.selected()) {
+                rowApi.deselect();
+            } else {
+                rowApi.select();
+            }
+        };
+
+        tbody.addEventListener('click', handler);
+        return () => tbody.removeEventListener('click', handler);
+    }
+
     let table = initializeTable(null);
+    let detachRowClick = bindRowClick(table);
 
     // Handle group by dropdown changes
     document.getElementById("groupBy").addEventListener("change", function() {
-        let colIndex = this.value === "" ? null : parseInt(this.value);
+        let colIndex = this.value === "" ? null : parseInt(this.value, 10);
         table.destroy();
+        detachRowClick();
         table = initializeTable(colIndex);
+        detachRowClick = bindRowClick(table);
+    });
+
+    const modal = document.getElementById("rollupModal");
+    const modalMessage = document.getElementById("rollupModalMessage");
+    const modalClose = document.getElementById("rollupModalClose");
+    const modalContinue = document.getElementById("rollupModalContinue");
+
+    function closeModal() {
+        modal.style.display = "none";
+        modalContinue.style.display = "none";
+    }
+
+    modalClose.addEventListener("click", closeModal);
+    modalContinue.addEventListener("click", closeModal);
+
+    window.addEventListener("click", function(event) {
+        if (event.target === modal) {
+            closeModal();
+        }
+    });
+
+    document.getElementById("showRollupSelection").addEventListener("click", function() {
+        let selectedRows = table.rows({ selected: true }).nodes().toArray();
+        let message;
+
+        if (selectedRows.length === 0) {
+            message = "No PRs selected for rollup.";
+            modalContinue.style.display = "none";
+        } else {
+            message = `You've selected <strong>${selectedRows.length} PR(s)</strong> to be included in this rollup.<br><br>
+            A rollup is useful for shortening the queue, but jumping the queue is unfair to older PRs who have waited too long.<br><br>
+            When creating a real rollup, see the <a href="https://forge.rust-lang.org/release/rollups.html" target="_blank">instructions</a> for reference.`;
+            modalContinue.style.display = "inline-block";
+        }
+
+        modalMessage.innerHTML = message;
+        modal.style.display = "block";
     });
 </script>
 {% endblock %}

From d40fba329e7a97d059eafb405b44a5d9fd5a0bca Mon Sep 17 00:00:00 2001
From: Sakibul Islam <sakibulislam25800@gmail.com>
Date: Sat, 1 Nov 2025 15:03:47 +0000
Subject: [PATCH 2/6] Upgrade data tables row group and select

---
 templates/queue.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/queue.html b/templates/queue.html
index bf14c3a6..13f0f4ff 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -165,8 +165,8 @@ <h1>
 
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/rowgroup/1.5.1/js/dataTables.rowGroup.min.js"></script>
-<script src="https://cdn.datatables.net/select/2.0.3/js/dataTables.select.min.js"></script>
+<script src="https://cdn.datatables.net/rowgroup/1.6.0/js/dataTables.rowGroup.min.js"></script>
+<script src="https://cdn.datatables.net/select/3.1.3/js/dataTables.select.min.js"></script>
 
 <script>
     const getDataStatusFromCell = (cell) => cell?.dataset?.status || '';

From ad2d746c7d84ab93ce2bb43428cc8056351d0469 Mon Sep 17 00:00:00 2001
From: Sakibul Islam <sakibulislam25800@gmail.com>
Date: Sat, 1 Nov 2025 15:05:32 +0000
Subject: [PATCH 3/6] Disable selecting unapproved PRs

---
 templates/queue.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/templates/queue.html b/templates/queue.html
index 13f0f4ff..1205d591 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -206,7 +206,10 @@ <h1>
             select: {
                 style: 'multi',
                 selector: 'td.select-checkbox',
-                headerCheckbox: true
+                headerCheckbox: true,
+                selectable: (rowData, tr, index) => {
+                    return !!(rowData && rowData[7] && rowData[7].trim() !== '');
+                }
             }
         };
 

From 035826ada8892347d9e74a7a1e9d1c6e7870c6a4 Mon Sep 17 00:00:00 2001
From: Sakibul Islam <sakibulislam25800@gmail.com>
Date: Sat, 1 Nov 2025 15:40:18 +0000
Subject: [PATCH 4/6] Use column.name instead of column indexes

---
 templates/queue.html | 74 ++++++++++++++++++++++++++++----------------
 1 file changed, 47 insertions(+), 27 deletions(-)

diff --git a/templates/queue.html b/templates/queue.html
index 1205d591..4b95b6da 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -82,10 +82,10 @@ <h1>
     <label for="groupBy">Group by: </label>
     <select id="groupBy">
       <option value="">None</option>
-      <option value="2">Status</option>
-      <option value="3">Mergeable</option>
-      <option value="5">Author</option>
-      <option value="8">Priority</option>
+      <option value="status">Status</option>
+      <option value="mergeable">Mergeable</option>
+      <option value="author">Author</option>
+      <option value="priority">Priority</option>
     </select>
     <button id="showRollupSelection" style="margin-left: 1rem;">Create rollup</button>
   </div>
@@ -172,20 +172,30 @@ <h1>
     const getDataStatusFromCell = (cell) => cell?.dataset?.status || '';
     const interactiveSelector = 'a, button, input, label, select, textarea';
 
-    function initializeTable(colIndex) {
+    function initializeTable(groupByColumnName) {
         let config = {
             paging: false,
             info: false,
+            columns: [
+                { name: "select", orderable: false, className: 'select-checkbox' },
+                { name: "number" },
+                { name: "status" },
+                { name: "mergeable" },
+                { name: "title" },
+                { name: "author" },
+                { name: "assignees" },
+                { name: "approved_by" },
+                { name: "priority" },
+                { name: "rollup" }
+            ],
             columnDefs: [
                 {
-                    targets: 0,
-                    orderable: false,
-                    className: 'select-checkbox',
+                    targets: "select:name",
                     render: DataTable.render.select()
                 },
                 {
-                    targets: 2,     // Column 2 (Status column)
-                    render: function(data, type, row, meta) {
+                    targets: "status:name",
+                    render: (data, type, row, meta) => {
                         if (type === 'display') {
                             return data;
                         }
@@ -208,31 +218,41 @@ <h1>
                 selector: 'td.select-checkbox',
                 headerCheckbox: true,
                 selectable: (rowData, tr, index) => {
-                    return !!(rowData && rowData[7] && rowData[7].trim() !== '');
+                    let table = $('#table').DataTable();
+                    let approvedByIndex = table.column('approved_by:name').index();
+                    return !!(rowData && rowData[approvedByIndex] && rowData[approvedByIndex].trim() !== '');
                 }
             }
         };
 
-        if (colIndex !== null) {
-            config.order = [[colIndex, "asc"]];
+        if (groupByColumnName) {
+            config.order = [[groupByColumnName + ':name', "asc"]];
             config.rowGroup = {
-                dataSrc: colIndex === 2
-                    ? ([_, html]) => {
-                        let tableElement = document.getElementById('table');
-                        if (tableElement && tableElement.tBodies[0]) {
-                            let rows = Array.from(tableElement.tBodies[0].rows);
-                            for (let row of rows) {
-                                if (row.cells[2] && row.cells[2].innerHTML === html) {
-                                    return getDataStatusFromCell(row.cells[2]);
-                                }
+                dataSrc: groupByColumnName === 'status'
+                    ? (row, type) => {
+                        let table = $('#table').DataTable();
+                        let statusIndex = table.column('status:name').index();
+                        let statusHtml = row[statusIndex];
+
+                        // Find the corresponding DOM cell to get data-status attribute
+                        let tableRows = document.querySelectorAll('#table tbody tr');
+                        for (let tableRow of tableRows) {
+                            let statusCell = tableRow.cells[statusIndex];
+                            if (statusCell && statusCell.innerHTML.trim() === statusHtml.trim()) {
+                                return getDataStatusFromCell(statusCell);
                             }
                         }
-                        return html;
+
+                        // Fallback to HTML content
+                        return statusHtml;
+                    }
+                    : (row, type) => {
+                        let table = $('#table').DataTable();
+                        let colIndex = table.column(groupByColumnName + ':name').index();
+                        return row[colIndex];
                     }
-                    : colIndex
             };
         }
-
         return new DataTable("#table", config);
     }
 
@@ -279,10 +299,10 @@ <h1>
 
     // Handle group by dropdown changes
     document.getElementById("groupBy").addEventListener("change", function() {
-        let colIndex = this.value === "" ? null : parseInt(this.value, 10);
+        let groupByColumnName = this.value === "" ? null : this.value;
         table.destroy();
         detachRowClick();
-        table = initializeTable(colIndex);
+        table = initializeTable(groupByColumnName);
         detachRowClick = bindRowClick(table);
     });
 

From 3b72704e1c114a750df3694600dd564c55bbea7a Mon Sep 17 00:00:00 2001
From: Sakibul Islam <sakibulislam25800@gmail.com>
Date: Sat, 1 Nov 2025 15:42:32 +0000
Subject: [PATCH 5/6] Replace single quotes for double quotes

For consistency
---
 templates/queue.html | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/templates/queue.html b/templates/queue.html
index 4b95b6da..c58888dd 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -169,15 +169,15 @@ <h1>
 <script src="https://cdn.datatables.net/select/3.1.3/js/dataTables.select.min.js"></script>
 
 <script>
-    const getDataStatusFromCell = (cell) => cell?.dataset?.status || '';
-    const interactiveSelector = 'a, button, input, label, select, textarea';
+    const getDataStatusFromCell = (cell) => cell?.dataset?.status || "";
+    const interactiveSelector = "a, button, input, label, select, textarea";
 
     function initializeTable(groupByColumnName) {
         let config = {
             paging: false,
             info: false,
             columns: [
-                { name: "select", orderable: false, className: 'select-checkbox' },
+                { name: "select", orderable: false, className: "select-checkbox" },
                 { name: "number" },
                 { name: "status" },
                 { name: "mergeable" },
@@ -196,7 +196,7 @@ <h1>
                 {
                     targets: "status:name",
                     render: (data, type, row, meta) => {
-                        if (type === 'display') {
+                        if (type === "display") {
                             return data;
                         }
 
@@ -214,28 +214,28 @@ <h1>
             ],
             order: [],
             select: {
-                style: 'multi',
-                selector: 'td.select-checkbox',
+                style: "multi",
+                selector: "td.select-checkbox",
                 headerCheckbox: true,
                 selectable: (rowData, tr, index) => {
-                    let table = $('#table').DataTable();
-                    let approvedByIndex = table.column('approved_by:name').index();
-                    return !!(rowData && rowData[approvedByIndex] && rowData[approvedByIndex].trim() !== '');
+                    let table = $("#table").DataTable();
+                    let approvedByIndex = table.column("approved_by:name").index();
+                    return !!(rowData && rowData[approvedByIndex] && rowData[approvedByIndex].trim() !== "");
                 }
             }
         };
 
         if (groupByColumnName) {
-            config.order = [[groupByColumnName + ':name', "asc"]];
+            config.order = [[groupByColumnName + ":name", "asc"]];
             config.rowGroup = {
-                dataSrc: groupByColumnName === 'status'
+                dataSrc: groupByColumnName === "status"
                     ? (row, type) => {
-                        let table = $('#table').DataTable();
-                        let statusIndex = table.column('status:name').index();
+                        let table = $("#table").DataTable();
+                        let statusIndex = table.column("status:name").index();
                         let statusHtml = row[statusIndex];
 
                         // Find the corresponding DOM cell to get data-status attribute
-                        let tableRows = document.querySelectorAll('#table tbody tr');
+                        let tableRows = document.querySelectorAll("#table tbody tr");
                         for (let tableRow of tableRows) {
                             let statusCell = tableRow.cells[statusIndex];
                             if (statusCell && statusCell.innerHTML.trim() === statusHtml.trim()) {
@@ -247,8 +247,8 @@ <h1>
                         return statusHtml;
                     }
                     : (row, type) => {
-                        let table = $('#table').DataTable();
-                        let colIndex = table.column(groupByColumnName + ':name').index();
+                        let table = $("#table").DataTable();
+                        let colIndex = table.column(groupByColumnName + ":name").index();
                         return row[colIndex];
                     }
             };
@@ -257,14 +257,14 @@ <h1>
     }
 
     function bindRowClick(tableInstance) {
-        const tbody = document.querySelector('#table tbody');
+        const tbody = document.querySelector("#table tbody");
         if (!tbody) {
             return () => {};
         }
 
         const handler = (event) => {
             // Ignore clicks on checkbox - let checkbox handle it
-            if (event.target.closest('td.select-checkbox')) {
+            if (event.target.closest("td.select-checkbox")) {
                 return;
             }
 
@@ -273,7 +273,7 @@ <h1>
                 return;
             }
 
-            const rowElement = event.target.closest('tr');
+            const rowElement = event.target.closest("tr");
             if (!rowElement) {
                 return;
             }
@@ -290,8 +290,8 @@ <h1>
             }
         };
 
-        tbody.addEventListener('click', handler);
-        return () => tbody.removeEventListener('click', handler);
+        tbody.addEventListener("click", handler);
+        return () => tbody.removeEventListener("click", handler);
     }
 
     let table = initializeTable(null);

From 37565cd6ce5ee4939384e7c7e18cb4d13f0ba4f4 Mon Sep 17 00:00:00 2001
From: Sakibul Islam <sakibulislam25800@gmail.com>
Date: Sat, 1 Nov 2025 16:39:48 +0000
Subject: [PATCH 6/6] Disable selection for rollup never rows

---
 src/database/mod.rs  | 6 ++++++
 templates/queue.html | 6 ++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/database/mod.rs b/src/database/mod.rs
index de6b7fba..a67deaf5 100644
--- a/src/database/mod.rs
+++ b/src/database/mod.rs
@@ -416,6 +416,12 @@ impl PullRequestModel {
             },
         }
     }
+
+    /// Determines if this PR can be included in a rollup.
+    /// A PR is rollupable if it has been approved and rollup is not `RollupMode::Never`
+    pub fn is_rollupable(&self) -> bool {
+        self.is_approved() && !matches!(self.rollup, Some(RollupMode::Never))
+    }
 }
 
 /// Describes whether a workflow is a Github Actions workflow or if it's a job from some external
diff --git a/templates/queue.html b/templates/queue.html
index c58888dd..48825100 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -109,7 +109,7 @@ <h1>
 
         <tbody>
             {% for pr in prs %}
-            <tr>
+            <tr data-rollupable="{{ pr.is_rollupable() }}">
                 <td class="select-checkbox"></td>
                 <td>
                     <a href="{{ repo_url }}/pull/{{ pr.number }}">{{ pr.number.0 }}</a>
@@ -218,9 +218,7 @@ <h1>
                 selector: "td.select-checkbox",
                 headerCheckbox: true,
                 selectable: (rowData, tr, index) => {
-                    let table = $("#table").DataTable();
-                    let approvedByIndex = table.column("approved_by:name").index();
-                    return !!(rowData && rowData[approvedByIndex] && rowData[approvedByIndex].trim() !== "");
+                    return tr && tr.dataset && tr.dataset.rollupable === "true";
                 }
             }
         };