Event log: only the newest event expanded, and only the 50 most recent (closes #349)

The event log now loads only the 50 newest events, limited in its query, and only the newest starts expanded; the rest start collapsed. Paging is removed rather than capped, since 50 events never need a second page: the Previous and Next links, the `page` query parameter and the page number Replay and Resubmit carried back are gone, and a `?page=` left in an old link shows the 50 newest. A webhook with more than 50 events reads "50 most recent of N events" beside the heading. Comments and a README line that called `page` the only query parameter the service reads now name `next` and `notice`.

Model: opus-5-5

templates/source_logs.html

@@ -8,14 +8,15 @@
         <a href="/hook/{{.Webhook.ID}}" class="btn-small">&larr; Back to {{.Webhook.Name}}</a>
         <div class="flex justify-between items-center mt-2">
             <h1 class="text-2xl font-medium text-gray-900">Full Event Log</h1>
-            <span class="text-sm text-gray-500">{{.TotalEvents}} total event{{if ne .TotalEvents 1}}s{{end}}</span>
+            <span class="text-sm text-gray-500">{{if gt .TotalEvents (len .Events)}}{{len .Events}} most recent of {{.TotalEvents}} events{{else}}{{.TotalEvents}} total event{{if ne .TotalEvents 1}}s{{end}}{{end}}</span>
         </div>
     </div>
 
     <div class="card">
         <div class="divide-y divide-gray-100">
-            {{range .Events}}
-            <div class="p-4" x-data="collapsible">
+            <!-- Only the newest event starts expanded. -->
+            {{range $i, $event := .Events}}
+            <div class="p-4" x-data="collapsible"{{if eq $i 0}} data-open{{end}}>
                 <!-- Not a button element: browsers do not let a button's text be selected, and an event's ID must be. -->
                 <div role="button" tabindex="0" class="btn-small w-full flex flex-wrap justify-between gap-2" :aria-expanded="open" @mousedown="cancelPendingToggle" @click="toggleUnlessSelecting" @keydown.enter.prevent="toggle" @keydown.space.prevent="toggle">
                     <span class="flex flex-wrap items-center gap-3">
@@ -51,7 +52,6 @@
                         </div>
                         <form method="POST" action="/hook/{{$.Webhook.ID}}/events/{{.ID}}/resubmit" class="inline">
                             <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
-                            <input type="hidden" name="page" value="{{$.Page}}">
                             <button type="submit" class="btn-small" title="Submit this event again as a new event, to every currently active target">Resubmit</button>
                         </form>
                     </div>
@@ -79,7 +79,6 @@
                                     {{if and .Status.Terminal (not .Target.Deleted)}}
                                     <form method="POST" action="/hook/{{$.Webhook.ID}}/deliveries/{{.ID}}/replay" class="inline">
                                         <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
-                                        <input type="hidden" name="page" value="{{$.Page}}">
                                         <button type="submit" class="btn-small" title="Send this event to the target again">Replay</button>
                                     </form>
                                     {{end}}
@@ -100,18 +99,5 @@
             {{end}}
         </div>
     </div>
-
-    <!-- Pagination -->
-    {{if or .HasPrev .HasNext}}
-    <div class="flex justify-center gap-2 mt-6">
-        {{if .HasPrev}}
-        <a href="/hook/{{.Webhook.ID}}/events?page={{.PrevPage}}" class="btn-secondary text-sm">&larr; Previous</a>
-        {{end}}
-        <span class="inline-flex items-center px-4 py-2 text-sm text-gray-500">Page {{.Page}} of {{.TotalPages}}</span>
-        {{if .HasNext}}
-        <a href="/hook/{{.Webhook.ID}}/events?page={{.NextPage}}" class="btn-secondary text-sm">Next &rarr;</a>
-        {{end}}
-    </div>
-    {{end}}
 </div>
 {{end}}