feat: add server-side pagination and status filtering to the job history page

web/templates/history.html

@@ -2,8 +2,17 @@
 <div class="card">
     <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
         <h2 style="margin: 0;">History</h2>
-        <div style="display: flex; align-items: center; gap: 1rem;">
-            <input type="text" id="history-search" class="form-control" placeholder="Search history..." onkeyup="filterHistory()" style="max-width: 300px;">
+        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
+            <div class="filter-bar">
+                <label for="status-filter" style="font-size: 0.875rem; color: var(--text-secondary);">Status:</label>
+                <select id="status-filter" class="filter-select" onchange="window.location.href='?status=' + this.value">
+                    <option value="all" {{if eq .FilterStatus "all"}}selected{{end}}>All</option>
+                    <option value="exclude_skipped" {{if eq .FilterStatus "exclude_skipped"}}selected{{end}}>Exclude Skipped</option>
+                    <option value="success" {{if eq .FilterStatus "success"}}selected{{end}}>Success Only</option>
+                    <option value="failed" {{if eq .FilterStatus "failed"}}selected{{end}}>Failed Only</option>
+                </select>
+            </div>
+            <input type="text" id="history-search" class="form-control" placeholder="Search page..." onkeyup="filterHistory()" style="max-width: 200px;">
             <span style="color: var(--text-secondary); font-size: 0.875rem; white-space: nowrap;">Total Records: <span id="record-count">{{.Total}}</span></span>
         </div>
     </div>
@@ -46,6 +55,24 @@
             </tbody>
         </table>
     </div>
+    <div class="pagination">
+        <span style="color: var(--text-secondary); font-size: 0.875rem;">
+            Page {{.CurrentPage}} of {{.TotalPages}}
+        </span>
+        <div class="pagination-controls">
+            {{if .HasPrev}}
+            <a href="?page={{.PrevPage}}&status={{.FilterStatus}}" class="page-btn">Previous</a>
+            {{else}}
+            <span class="page-btn disabled">Previous</span>
+            {{end}}
+
+            {{if .HasNext}}
+            <a href="?page={{.NextPage}}&status={{.FilterStatus}}" class="page-btn">Next</a>
+            {{else}}
+            <span class="page-btn disabled">Next</span>
+            {{end}}
+        </div>
+    </div>
 </div>
 
 <script>

web/templates/layout.html

@@ -26,12 +26,27 @@
             Go<span>Encode</span>
         </div>
         <div class="nav-links">
-            <a href="/" id="nav-dashboard">Dashboard</a>
-            <a href="/folders" id="nav-folders">Watch Folders</a>
-            <a href="/history" id="nav-history">History</a>
-            <a href="/logs" id="nav-logs">Logs</a>
+            <a href="/" id="nav-dashboard">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+                Dashboard
+            </a>
+            <a href="/folders" id="nav-folders">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/></svg>
+                Watch Folders
+            </a>
+            <a href="/history" id="nav-history">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
+                History
+            </a>
+            <a href="/logs" id="nav-logs">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
+                Logs
+            </a>
             {{if .AuthEnabled}}
-            <a href="/logout" style="margin-left: 2rem; color: #ff4444; border-color: #ff4444;">Sign Out</a>
+            <a href="/logout" style="color: #ff4444;">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
+                Sign Out
+            </a>
             {{end}}
         </div>
     </nav>