feat: add pagination to the history log table

Author: aorith

assets/css/03_layout.css

@@ -121,11 +121,12 @@ input[type="radio"].nav {
     flex-wrap: wrap;
     gap: 6px;
     align-items: center;
-    margin: 0 1rem 0 1rem;
+    margin: 0 0.4rem 0 0.4rem;
     padding: 0.3rem 0.4rem 0.4rem 0.4rem;
   }
 
   .view-content {
     max-width: 100vw;
+    padding: 0.6rem;
   }
 }

assets/css/07_forms.css

@@ -7,6 +7,7 @@
 
 #parse-view textarea {
   width: 40dvw;
+  min-width: 350px;
   max-width: 650px;
   height: 400px;
 }
@@ -91,8 +92,7 @@ form .examples {
 }
 
 fieldset {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+  border: none;
 
   & legend {
     font-weight: 600;
@@ -103,8 +103,7 @@ fieldset {
 fieldset fieldset {
   font-size: 85%;
   margin: 0 0.4rem;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--border);
 
   & legend {
     color: var(--warm);

assets/css/10_history.css

@@ -8,6 +8,8 @@
 
   & table {
     margin-top: 10px;
+    min-width: 850px;
+    max-width: var(--view-width);
   }
 
   & th,
@@ -74,4 +76,28 @@
     font-size: var(--fsize-xxxs);
     font-style: italic;
   }
+
+  & {
+    .pagination {
+      display: flex;
+      justify-content: left;
+      align-items: left;
+      gap: 0.5rem;
+    }
+
+    .pagination a {
+      color: var(--accent);
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    .pagination a.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .pagination span {
+      color: var(--fg-1);
+    }
+  }
 }

assets/static/history.js

@@ -186,7 +186,9 @@ async function renameEntry(hash, newName) {
 }
 
 // Render history table
-async function renderHistory() {
+let currentPage = 1;
+const entriesPerPage = 10;
+async function renderHistory(page = 1) {
   try {
     const entries = await getAllEntries();
     const container = document.getElementById("historyContainer");
@@ -197,24 +199,41 @@ async function renderHistory() {
       return;
     }
 
+    // calculate pagination
+    const totalPages = Math.ceil(entries.length / entriesPerPage);
+    currentPage = Math.max(1, Math.min(page, totalPages));
+    const startIndex = (currentPage - 1) * entriesPerPage;
+    const endIndex = startIndex + entriesPerPage;
+    const paginatedEntries = entries.slice(startIndex, endIndex);
+
     let html =
       "<table><thead><tr><th>Name</th><th>Hash</th><th>Created At</th><th>Actions</th></tr></thead><tbody>";
 
-    entries.forEach((entry) => {
+    paginatedEntries.forEach((entry) => {
       html += `
-                        <tr>
-                            <td class="name-cell" onclick="editName('${entry.hash}')" id="name-${entry.hash}">${entry.name}</td>
-                            <td class="hash-cell"><abbr title="sha-256 digest generated from the logs input: ${entry.hash}">${entry.hash.slice(0, 10)}...</abbr></td>
-                            <td>${entry.created}</td>
-                            <td>
-                                <a class="btn-small btn-load" onclick="loadEntry('${entry.hash}')">Load</a>
-                                <a class="btn-small btn-delete" onclick="deleteEntry('${entry.hash}')">Delete</a>
-                            </td>
-                        </tr>
-                    `;
+        <tr>
+          <td class="name-cell" onclick="editName('${entry.hash}')" id="name-${entry.hash}">${entry.name}</td>
+          <td class="hash-cell"><abbr title="sha-256 digest generated from the logs input: ${entry.hash}">${entry.hash.slice(0, 10)}...</abbr></td>
+          <td>${entry.created}</td>
+          <td>
+            <a class="btn-small btn-load" onclick="loadEntry('${entry.hash}')">Load</a>
+            <a class="btn-small btn-delete" onclick="deleteEntry('${entry.hash}')">Delete</a>
+          </td>
+        </tr>
+      `;
     });
 
     html += "</tbody></table>";
+
+    // pagination controls
+    if (totalPages > 1) {
+      html += '<div class="pagination">';
+      html += `<a onclick="renderHistory(${currentPage - 1})" ${currentPage === 1 ? `class="disabled"` : ""}>Previous</a>`;
+      html += `<span>Page ${currentPage} of ${totalPages}</span>`;
+      html += `<a onclick="renderHistory(${currentPage + 1})" ${currentPage === totalPages ? `class="disabled"` : ""}>Next</a>`;
+      html += "</div>";
+    }
+
     container.innerHTML = html;
   } catch (error) {
     container.innerHTML = "Error rendering history";