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

Many controls were plain coloured text with no sign they could be clicked: Edit, Activate, Deactivate, Delete, Replay, Resubmit, both Add controls and the copy control beside each entrypoint URL. Every clickable control is now a real button or link in one of two shared styles: the buttons in input.css, now with a pointer cursor, and btn-small, a small bordered secondary action in style.css, which the layout now loads. The site name, the footer links and each webhook list card show at rest that they open something, with focus states. The copy control shows "Copied" after a click. Rows on the webhook page and in the event log wrap at phone width. The browser test covers the copy control.

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

@@ -1220,12 +1220,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},