Add polished answer notifications (#1)

Sends a branded Resend email when a question receives its first answer, records accepted and failed sends, and adds collapsed answer editing with cancel behavior.

Co-authored-by: codegirl-007 <s.raide@gmail.com>

templates/partials/_answer.html

@@ -5,6 +5,22 @@
     <h2>Answer</h2>
     <p class="byline">{{.Answer.AuthorName}} · 22 years, Bay Area</p>
     <p class="answer-body">{{.Answer.Body}}</p>
+    {{if isAdmin .User}}
+      <details class="answer-editor">
+        <summary>Edit answer</summary>
+        <form class="answer-form" method="post" action="/questions/{{.Answer.QuestionID}}/answer"
+          hx-post="/questions/{{.Answer.QuestionID}}/answer" hx-target="#answer-block" hx-swap="outerHTML">
+          <input type="hidden" name="_csrf" value="{{.CSRF}}">
+          <label for="answer-body">Edit answer</label>
+          <textarea id="answer-body" name="body" rows="8" required maxlength="12000">{{.Answer.Body}}</textarea>
+          <div class="answer-form-actions">
+            <button type="submit" class="btn btn-primary">Save answer</button>
+            <button type="reset" class="btn btn-ghost"
+              onclick="this.closest('details').removeAttribute('open')">Cancel</button>
+          </div>
+        </form>
+      </details>
+    {{end}}
   {{else}}
     <p class="waiting">No answer yet. Check back after the hunt.</p>
   {{end}}

templates/profile.html

@@ -25,6 +25,10 @@
       </div>
     </div>
 
+    <label for="email">Email</label>
+    <input id="email" name="email" type="email" required maxlength="254" autocomplete="email" value="{{.EmailVal}}">
+    <p class="hint">Required. We’ll email you when a plumber answers your question.</p>
+
     <label for="state">State</label>
     <select id="state" name="state">
       <option value=""{{if eq .StateVal ""}} selected{{end}}>Prefer not to say</option>

templates/question.html

@@ -23,12 +23,12 @@
     </div>
   </article>
   {{template "answer" .}}
-  {{if isAdmin .User}}
+  {{if and (isAdmin .User) (not .Answer)}}
     <form class="answer-form" method="post" action="/questions/{{.Question.ID}}/answer"
       hx-post="/questions/{{.Question.ID}}/answer" hx-target="#answer-block" hx-swap="outerHTML">
       <input type="hidden" name="_csrf" value="{{.CSRF}}">
-      <label for="answer-body">{{if .Answer}}Edit answer{{else}}Write the answer{{end}}</label>
-      <textarea id="answer-body" name="body" rows="8" required maxlength="12000">{{if .Answer}}{{.Answer.Body}}{{end}}</textarea>
+      <label for="answer-body">Write the answer</label>
+      <textarea id="answer-body" name="body" rows="8" required maxlength="12000"></textarea>
       <button type="submit" class="btn btn-primary">Save answer</button>
     </form>
   {{end}}

templates/register.html

@@ -9,6 +9,9 @@
     <label for="username">Username</label>
     <input id="username" name="username" type="text" required minlength="3" maxlength="20" pattern="[A-Za-z0-9_]+" autocomplete="username" autocapitalize="off" spellcheck="false" value="{{.Username}}">
     <p class="hint">3–20 letters, numbers, or underscores.</p>
+    <label for="email">Email</label>
+    <input id="email" name="email" type="email" required maxlength="254" autocomplete="email" value="{{.Email}}">
+    <p class="hint">We’ll email you when a plumber answers your question.</p>
     <label for="password">Password</label>
     <input id="password" name="password" type="password" required minlength="8" maxlength="72" autocomplete="new-password">
     <p class="hint">At least 8 characters (max 72 bytes).</p>