Make every clickable control look clickable, in two shared styles (closes #375)

Buttons keep btn-primary, btn-secondary and btn-danger and gain a
pointer cursor; the site name and the navigation links become
btn-secondary buttons. Every control that was plain coloured text
(Copy, both Add, the row actions, Resubmit, Replay, the back, footer
and download links) now uses btn-small, bordered at rest with hover
and focus states. Each card on the webhook list shows an Open label in
btn-small and takes its focus outline. Both styles are in
static/css/style.css, which the layout now loads.

The event log's clickable rows become buttons, so they work by
keyboard; Replay moves beside its delivery's row. Rows on the webhook
page and in the event log wrap at phone width. The browser test now
checks that Copy reads "Copied".

Model: opus-5-5

internal/handlers/ui_copy_test.go

@@ -82,9 +82,9 @@ func TestNavbarUsesWebhookTerminology(t *testing.T) {
 	})
 
 	assert.Contains(t, body, "Retention: 14 days")
-	assert.Contains(t, body, `class="btn-text">Webhooks</a>`)
+	assert.Contains(t, body, `class="btn-secondary">Webhooks</a>`)
 	assert.Contains(
-		t, body, `class="btn-text w-full text-left">Webhooks</a>`,
+		t, body, `class="btn-secondary w-full">Webhooks</a>`,
 	)
 	assert.Contains(
 		t, body,
@@ -163,7 +163,7 @@ func TestEventLogPageIsCalledFullEventLog(t *testing.T) {
 	)
 	assert.Contains(
 		t, detailBody,
-		`<a href="/hook/wh-1/events" class="btn-text text-sm">Full Event Log</a>`,
+		`<a href="/hook/wh-1/events" class="btn-small">Full Event Log</a>`,
 		"the link under recent events",
 	)
 
@@ -331,8 +331,9 @@ func TestEntrypointCopyButtonIsProgressiveEnhancement(t *testing.T) {
 	assert.Contains(t, body, "https://hooks.example.com/h/abc123")
 	assert.Contains(
 		t, body,
-		`hidden data-copy-target="entrypoint-url-ep-1"`,
-		"the button must start hidden and be revealed by script",
+		`<button type="button" hidden data-copy-target="entrypoint-url-ep-1"`,
+		"the copy control must be a button, start hidden and be "+
+			"revealed by script",
 	)
 
 	// renderTemplate streams to the ResponseWriter, so an abort

internal/server/alpine_browser_test.go

@@ -17,6 +17,7 @@ import (
 	"testing"
 	"time"
 
+	"github.com/chromedp/cdproto/browser"
 	"github.com/chromedp/cdproto/log"
 	"github.com/chromedp/cdproto/network"
 	"github.com/chromedp/cdproto/runtime"
@@ -43,7 +44,7 @@ const (
 // TestAlpineRunsUnderTheSecurityPolicy loads the webhook page and the
 // event log in a headless browser, served by the real router and so
 // under the real Content-Security-Policy, and checks that the pages'
-// Alpine.js directives work.
+// Alpine.js directives and the copy control work.
 func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 	t.Parallel()
 
@@ -55,6 +56,13 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 
 	userID, _ := env.seedUser(t, "browser", "browser-password")
 	webhook := env.seedWebhook(t, userID)
+	require.NoError(t, env.db.DB().Omit(clause.Associations).Create(
+		&database.Entrypoint{
+			WebhookID: webhook.ID,
+			Path:      "3c9e1f7a-5b2d-4e8a-9f6c-2a7d1e4b8c05",
+			Active:    true,
+		},
+	).Error)
 	event := env.seedEvent(t, webhook.ID, `{"hello":"browser"}`)
 	target := env.seedTarget(t, webhook.ID)
 	dlv := env.seedFailedDelivery(t, webhook.ID, event.ID, target.ID)
@@ -77,6 +85,7 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 
 	checkAddForms(ctx, t, page)
 	checkTargetType(ctx, t, page+"/events")
+	checkCopy(ctx, t, page)
 	checkEventLog(ctx, t, page+"/events", event.ID, target.Name)
 	checkMobileMenu(ctx, t, page)
 
@@ -220,6 +229,8 @@ func click(ctx context.Context, t *testing.T, xpath string) {
 
 // checkAddForms loads a webhook page and checks that each section's add
 // form stays hidden until the Add button beside its heading is clicked.
+// The click looks for a button element there, so it also checks that
+// Add is one.
 func checkAddForms(ctx context.Context, t *testing.T, url string) {
 	t.Helper()
 
@@ -327,6 +338,31 @@ func checkTargetType(ctx context.Context, t *testing.T, elsewhere string) {
 	)
 }
 
+// checkCopy loads a webhook page and checks that the Copy control beside
+// its entrypoint's URL is a button, and that clicking it copies the URL
+// and says so: the button reads "Copied" only once the copy succeeded.
+func checkCopy(ctx context.Context, t *testing.T, url string) {
+	t.Helper()
+
+	copyButton := `//button[@data-copy-target]`
+
+	// A browser lets the page in its active tab write to the clipboard
+	// on a click. A headless browser refuses unless told to allow it.
+	require.NoError(t, chromedp.Run(
+		ctx,
+		browser.SetPermission(
+			&browser.PermissionDescriptor{Name: "clipboard-write"},
+			browser.PermissionSettingGranted,
+		),
+		loadPage(url),
+	))
+
+	click(ctx, t, copyButton)
+
+	assert.True(t, shown(ctx, copyButton+`[text()="Copied"]`),
+		`clicking Copy does not show "Copied"`)
+}
+
 // checkEventLog loads the event log and checks that clicking an event's
 // row expands it, that in there clicking its delivery shows the
 // delivery's attempts and clicking again hides them, and that clicking

internal/server/routes_test.go

@@ -1178,12 +1178,12 @@ func TestHook_LinksBetweenPages(t *testing.T) {
 		// mobile menu link.
 		{
 			"/user/navigator/",
-			`href="([^"]+)" class="btn-text">Webhooks<`,
+			`href="([^"]+)" class="btn-secondary">Webhooks<`,
 			list,
 		},
 		{
 			"/user/navigator/",
-			`href="([^"]+)" class="btn-text w-full[^"]*">Webhooks<`,
+			`href="([^"]+)" class="btn-secondary w-full">Webhooks<`,
 			list,
 		},
 		{list, `href="(/hook/[^"]+)"`, page},