Add test notification link and footer

server/server.go

@@ -2,13 +2,15 @@ package server
 
 import (
 	"fmt"
+	"io"
 	"log/slog"
 	"net/http"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
 	"libdb.so/hrtclicker"
 	"libdb.so/hrtclicker/db"
+	"libdb.so/hrtclicker/internal/notifier"
 	"libdb.so/hrtclicker/web"
 )
 
@@ -32,6 +34,7 @@ func New(deps Dependencies) *Server {
 	}
 
 	r.Get("/", s.handleIndex)
+	r.Post("/notify/test", s.handleGotifyTest)
 	r.Post("/dosage/record", s.handleRecordDosage)
 	r.Post("/dosage/delete", s.handleDeleteDosage)
 
@@ -60,6 +63,27 @@ func (s *Server) handleDeleteDosage(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, "/", http.StatusSeeOther)
 }
 
+func (s *Server) handleGotifyTest(w http.ResponseWriter, r *http.Request) {
+	notification := hrtclicker.Notification{
+		Title:   "Test Notification",
+		Message: "hi cutie! <3",
+		Extras:  s.Config.Gotify.Notification.Extras,
+	}
+
+	if err := notifier.Notify(
+		r.Context(),
+		s.Config.Gotify.Endpoint,
+		s.Config.Gotify.Token,
+		notification,
+	); err != nil {
+		writeError(w, "failed to send test notification", err)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/plain")
+	io.WriteString(w, "notification sent, go check your phone!")
+}
+
 func writeError(w http.ResponseWriter, msg string, err error) {
 	http.Error(w, fmt.Sprintf("%s: %v", msg, err), http.StatusInternalServerError)
 }

web/pages/index.html

@@ -4,15 +4,6 @@
 
 <header>
   <h1>hrtclicker</h1>
-  <a
-    href="https://github.com/diamondburned/hrtclicker"
-    role="button"
-    title="Source code"
-    class="github-button"
-    target="_blank"
-  >
-    <img src="/static/github-mark-white.png" alt="GitHub" />
-  </a>
 </header>
 
 {{ $nextDoseTime := .NextDoseTime }}
@@ -102,6 +93,16 @@ <h2>Recent Doses</h2>
   </section>
 </main>
 
+<footer>
+  <a href="https://github.com/diamondburned/hrtclicker" class="github-button" target="_blank">
+    Source code
+  </a>
+  <span>ꞏ</span>
+  <form method="post" action="/notify/test">
+    <button type="submit" class="link-button">Test notification</button>
+  </form>
+</footer>
+
 <script async defer>
   const relativeFormatters = {
     short: new Intl.RelativeTimeFormat("en", { numeric: "auto", style: "short" }),

web/static/styles.css

@@ -33,11 +33,23 @@ h4 {
   font-family: sans-serif;
 }
 
+html,
+body {
+  height: 100%;
+}
+
 body {
   padding-top: 0;
   padding-bottom: 0;
   color: var(--fg);
   background-color: var(--bg);
+
+  display: flex;
+  flex-direction: column;
+}
+
+body > main {
+  flex: 1;
 }
 
 button {
@@ -51,6 +63,33 @@ button:hover {
   background-color: var(--pink);
 }
 
+a,
+button.link-button {
+  background-color: transparent;
+  color: #eb99a1;
+  font-size: 1em;
+  text-decoration: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  transition: none;
+  border-bottom: 2px solid transparent;
+}
+
+a:visited {
+  color: #eb99a1;
+}
+
+a:hover,
+button.link-button:hover {
+  color: #da4453;
+  border-bottom: 2px solid #d9d8dc;
+}
+
+button img {
+  margin: 0;
+}
+
 section {
   margin: var(--spacing) 0;
 }
@@ -93,6 +132,19 @@ header h1 {
   font-size: 1em;
 }
 
+footer {
+  margin: var(--spacing) 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: calc(var(--spacing) / 2);
+  font-size: 0.85em;
+}
+
+footer * {
+  line-height: 1.25;
+}
+
 table td,
 table th {
   padding: calc(var(--spacing) / 2);
@@ -151,7 +203,7 @@ table th {
 }
 
 #index #record-dose:hover {
-  color: var(--fg);
+  color: var(--bg);
   background-color: var(--blue);
 }
 
@@ -165,7 +217,7 @@ table th {
 }
 
 #index #delete-dose:hover {
-  color: var(--fg);
+  color: var(--bg);
   background-color: var(--pink);
 }