feat(phone): add a Refresh link to the page

internal/phonedoor/page.html

@@ -16,8 +16,11 @@
 <body data-push-key="{{.PushKey}}">
 <header>
 <h1>nudge</h1>
+<div class="actions">
+<a class="push" href="/">Refresh</a>
 <p id="push-state" class="push" hidden></p>
 <button id="push" class="push" type="button" hidden>Turn on notifications</button>
+</div>
 </header>
 <main>
 <p id="push-failure" role="alert" hidden></p>

internal/phonedoor/phonedoor_test.go

@@ -181,6 +181,15 @@ func TestPageCarriesThePushKey(t *testing.T) {
 	}
 }
 
+func TestPageHasARefreshLink(t *testing.T) {
+	var box inbox.Inbox
+
+	body := get(t, &box, http.MethodGet, "/").Body.String()
+	if want := `<a class="push" href="/">Refresh</a>`; !strings.Contains(body, want) {
+		t.Errorf("page = %s, want it to contain %s", body, want)
+	}
+}
+
 func TestDoorServesOnlyItsRoutes(t *testing.T) {
 	tests := []struct {
 		method, path string

internal/phonedoor/static/style.css

@@ -182,6 +182,12 @@ button:hover {
   color: var(--ink);
 }
 
+.actions {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
 /* The notifications' state and button look like Bakhyard's header links. Their line is no taller
    than the phone's title, so the header keeps its height when they show. */
 .push {
@@ -196,15 +202,19 @@ p.push {
   color: var(--ink-muted);
 }
 
+a.push,
 button.push {
   /* The tap target stays 44 px tall, but the header's row makes room only for the text. */
   margin-block: -14px;
-  padding: 0;
+  padding: 14px 0;
   border: 0;
   background: none;
+  color: inherit;
+  text-decoration: none;
   text-underline-offset: 4px;
 }
 
+a.push:hover,
 button.push:enabled:hover {
   text-decoration-line: underline;
 }