feat: add mobile-friendly HTTP 404 and 500 error pages

Add ErrorNotFound and ErrorInternal handler methods that render styled
error pages using the error.html template, with proper status codes,
responsive layout, SVG icons, and HTMX fragment support. Replace the
plain-text http.NotFound call in Dashboard with the new styled handler.

Closes leeworks-agents/gitea-mobile#131

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

cmd/server/main.go

@@ -33,7 +33,7 @@ func main() {
 
 	// Apply middleware chain: logging -> auth.
 	var handler http.Handler = mux
-	handler = middleware.Auth(cfg.SessionSecret)(handler)
+	handler = middleware.Auth(cfg.SessionSecret, cfg.GiteaToken)(handler)
 	handler = middleware.Logging()(handler)
 
 	slog.Info("server starting", "addr", cfg.ListenAddr, "gitea_url", cfg.GiteaURL)

internal/handlers/handlers.go

@@ -181,11 +181,58 @@ func renderPage(w http.ResponseWriter, r *http.Request, title, activeTab string,
 	}
 }
 
+// errorData holds the template data for error pages.
+type errorData struct {
+	Code    int
+	Title   string
+	Message string
+}
+
+// ErrorNotFound renders a mobile-friendly 404 error page.
+func (h *Handler) ErrorNotFound(w http.ResponseWriter, r *http.Request) {
+	data := errorData{
+		Code:    http.StatusNotFound,
+		Title:   "Page Not Found",
+		Message: "The page you are looking for does not exist or has been moved.",
+	}
+	h.renderError(w, r, data)
+}
+
+// ErrorInternal renders a mobile-friendly 500 error page.
+func (h *Handler) ErrorInternal(w http.ResponseWriter, r *http.Request) {
+	data := errorData{
+		Code:    http.StatusInternalServerError,
+		Title:   "Internal Server Error",
+		Message: "Something went wrong on our end. Please try again later.",
+	}
+	h.renderError(w, r, data)
+}
+
+// renderError renders the error template with the given data and status code.
+func (h *Handler) renderError(w http.ResponseWriter, r *http.Request, data errorData) {
+	tmpl, err := template.ParseFiles("internal/templates/error.html")
+	if err != nil {
+		slog.Error("failed to parse error template", "error", err)
+		http.Error(w, fmt.Sprintf("%d %s", data.Code, data.Title), data.Code)
+		return
+	}
+
+	var buf strings.Builder
+	if err := tmpl.ExecuteTemplate(&buf, "content", data); err != nil {
+		slog.Error("failed to execute error template", "error", err)
+		http.Error(w, fmt.Sprintf("%d %s", data.Code, data.Title), data.Code)
+		return
+	}
+
+	w.WriteHeader(data.Code)
+	renderPage(w, r, data.Title, "", buf.String())
+}
+
 // Dashboard handles GET / — the triage queue.
 func (h *Handler) Dashboard(w http.ResponseWriter, r *http.Request) {
 	// Only handle exact root path.
 	if r.URL.Path != "/" {
-		http.NotFound(w, r)
+		h.ErrorNotFound(w, r)
 		return
 	}
 

internal/handlers/handlers_test.go

@@ -183,6 +183,87 @@ func TestAddComment_EmptyBody(t *testing.T) {
 	}
 }
 
+func TestErrorNotFound(t *testing.T) {
+	h := newTestHandler()
+	req := httptest.NewRequest(http.MethodGet, "/nonexistent", nil)
+	w := httptest.NewRecorder()
+
+	h.ErrorNotFound(w, req)
+
+	if w.Code != http.StatusNotFound {
+		t.Errorf("status = %d, want %d", w.Code, http.StatusNotFound)
+	}
+	body := w.Body.String()
+	if body == "" {
+		t.Error("expected non-empty response body")
+	}
+	if !contains(body, "404") {
+		t.Error("expected body to contain '404'")
+	}
+	if !contains(body, "Page Not Found") {
+		t.Error("expected body to contain 'Page Not Found'")
+	}
+}
+
+func TestErrorInternal(t *testing.T) {
+	h := newTestHandler()
+	req := httptest.NewRequest(http.MethodGet, "/error", nil)
+	w := httptest.NewRecorder()
+
+	h.ErrorInternal(w, req)
+
+	if w.Code != http.StatusInternalServerError {
+		t.Errorf("status = %d, want %d", w.Code, http.StatusInternalServerError)
+	}
+	body := w.Body.String()
+	if body == "" {
+		t.Error("expected non-empty response body")
+	}
+	if !contains(body, "500") {
+		t.Error("expected body to contain '500'")
+	}
+	if !contains(body, "Internal Server Error") {
+		t.Error("expected body to contain 'Internal Server Error'")
+	}
+}
+
+func TestDashboard_NonRootPath_Returns404(t *testing.T) {
+	h := newTestHandler()
+	req := httptest.NewRequest(http.MethodGet, "/unknown/path", nil)
+	w := httptest.NewRecorder()
+
+	h.Dashboard(w, req)
+
+	if w.Code != http.StatusNotFound {
+		t.Errorf("status = %d, want %d", w.Code, http.StatusNotFound)
+	}
+	body := w.Body.String()
+	if !contains(body, "404") {
+		t.Error("expected body to contain '404' for non-root path")
+	}
+}
+
+func TestErrorNotFound_HTMX(t *testing.T) {
+	h := newTestHandler()
+	req := httptest.NewRequest(http.MethodGet, "/nonexistent", nil)
+	req.Header.Set("HX-Request", "true")
+	w := httptest.NewRecorder()
+
+	h.ErrorNotFound(w, req)
+
+	if w.Code != http.StatusNotFound {
+		t.Errorf("status = %d, want %d", w.Code, http.StatusNotFound)
+	}
+	body := w.Body.String()
+	// HTMX response should not contain DOCTYPE.
+	if contains(body, "<!DOCTYPE") {
+		t.Error("HTMX response should not contain DOCTYPE")
+	}
+	if !contains(body, "Page Not Found") {
+		t.Error("expected body to contain 'Page Not Found'")
+	}
+}
+
 func contains(s, substr string) bool {
 	return len(s) >= len(substr) && searchString(s, substr)
 }

internal/handlers/settings.go

@@ -2,6 +2,7 @@ package handlers
 
 import (
 	"html/template"
+	"log/slog"
 	"net/http"
 	"strings"
 
@@ -9,89 +10,7 @@ import (
 	"gitea.leeworks.dev/0xwheatyz/gitea-mobile/internal/middleware"
 )
 
-var settingsTemplate = template.Must(template.New("settings").Parse(`<!DOCTYPE html>
+const settingsTemplatePath = "internal/templates/settings.html"
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <title>Settings — Gitea Mobile</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #0d1117; color: #e6edf3;
-      padding: 1rem;
-      padding-top: max(1rem, env(safe-area-inset-top));
-    }
-    h1 { font-size: 1.5rem; margin-bottom: 1rem; }
-    .card {
-      background: #161b22; border: 1px solid #30363d; border-radius: 8px;
-      padding: 1rem; margin-bottom: 1rem;
-    }
-    label { display: block; font-size: 0.875rem; color: #8b949e; margin-bottom: 0.5rem; }
-    input[type="text"], input[type="password"] {
-      width: 100%; padding: 0.5rem; font-size: 1rem;
-      background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
-      color: #e6edf3; margin-bottom: 1rem;
-    }
-    input:focus { outline: none; border-color: #58a6ff; }
-    button {
-      width: 100%; padding: 0.75rem; font-size: 1rem; font-weight: 600;
-      background: #238636; color: #fff; border: none; border-radius: 6px;
-      cursor: pointer;
-    }
-    button:active { background: #2ea043; }
-    .message {
-      padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem;
-      font-size: 0.875rem;
-    }
-    .message.success { background: #0d2818; border: 1px solid #238636; color: #3fb950; }
-    .message.error { background: #2d1117; border: 1px solid #da3633; color: #f85149; }
-    .message.info { background: #0c1d2e; border: 1px solid #1f6feb; color: #58a6ff; }
-    .hint { font-size: 0.75rem; color: #8b949e; margin-top: 0.25rem; margin-bottom: 1rem; }
-    .status { font-size: 0.875rem; color: #8b949e; }
-    .status .connected { color: #3fb950; }
-    .logout-btn {
-      background: #21262d; border: 1px solid #30363d; margin-top: 0.5rem;
-    }
-    .logout-btn:active { background: #30363d; }
-  </style>
-</head>
-<body>
-  <h1>Settings</h1>
-
-  {{if .Message}}
-  <div class="message {{.MessageType}}">{{.Message}}</div>
-  {{end}}
-
-  {{if .HasToken}}
-  <div class="card">
-    <p class="status">Status: <span class="connected">Connected</span></p>
-    <p class="hint">A Gitea API token is configured.</p>
-    <form method="POST" action="/settings">
-      <input type="hidden" name="action" value="logout">
-      <button type="submit" class="logout-btn">Remove Token</button>
-    </form>
-  </div>
-  {{end}}
-
-  <div class="card">
-    <form method="POST" action="/settings">
-      <input type="hidden" name="action" value="save">
-      <label for="token">Gitea API Token</label>
-      <input type="password" id="token" name="token" placeholder="Enter your Gitea API token" required>
-      <p class="hint">Generate a token at your Gitea instance under Settings &rarr; Applications.</p>
-      <button type="submit">{{if .HasToken}}Update Token{{else}}Save Token{{end}}</button>
-    </form>
-  </div>
-
-  {{if .HasToken}}
-  <p style="text-align:center; margin-top:1rem;">
-    <a href="/" style="color:#58a6ff; text-decoration:none;">Back to Dashboard</a>
-  </p>
-  {{end}}
-</body>
-</html>`))
 
 // SettingsHandler handles GET and POST requests for the settings page.
 type SettingsHandler struct {
@@ -126,8 +45,7 @@ func (h *SettingsHandler) handleGet(w http.ResponseWriter, r *http.Request) {
 	}
 
 	data := settingsData{HasToken: hasToken}
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	h.renderSettings(w, data)
-	settingsTemplate.Execute(w, data)
 }
 
 func (h *SettingsHandler) handlePost(w http.ResponseWriter, r *http.Request) {
@@ -172,6 +90,18 @@ func (h *SettingsHandler) renderWithMessage(w http.ResponseWriter, r *http.Reque
 		Message:     msg,
 		MessageType: msgType,
 	}
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	h.renderSettings(w, data)
-	settingsTemplate.Execute(w, data)
+}
+
+func (h *SettingsHandler) renderSettings(w http.ResponseWriter, data settingsData) {
+	tmpl, err := template.ParseFiles(settingsTemplatePath)
+	if err != nil {
+		slog.Error("failed to parse settings template", "error", err)
+		http.Error(w, "template error", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := tmpl.Execute(w, data); err != nil {
+		slog.Error("failed to execute settings template", "error", err)
+	}
 }

internal/middleware/auth.go

@@ -23,9 +23,12 @@ func TokenFromContext(ctx context.Context) string {
 }
 
 // Auth returns middleware that checks for a valid token cookie.
+// If no cookie token is found and fallbackToken is non-empty, the fallback
+// token is used instead (useful for single-user or service-account deployments
+// where GITEA_TOKEN is set in the environment).
 // Unauthenticated requests are redirected to the settings page.
 // The /health, /settings, and /static/ paths are exempt from auth.
-func Auth(sessionSecret string) func(http.Handler) http.Handler {
+func Auth(sessionSecret, fallbackToken string) func(http.Handler) http.Handler {
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 			// Skip auth for exempt paths.
@@ -37,6 +40,13 @@ func Auth(sessionSecret string) func(http.Handler) http.Handler {
 
 			token, err := auth.GetToken(r, sessionSecret)
 			if err != nil || token == "" {
+				// Fall back to environment token if available.
+				if fallbackToken != "" {
+					slog.Debug("using fallback token from environment", "path", path)
+					ctx := context.WithValue(r.Context(), TokenContextKey, fallbackToken)
+					next.ServeHTTP(w, r.WithContext(ctx))
+					return
+				}
 				slog.Debug("unauthenticated request, redirecting to settings", "path", path, "error", err)
 				http.Redirect(w, r, "/settings", http.StatusSeeOther)
 				return

internal/middleware/auth_test.go

@@ -11,7 +11,7 @@ import (
 const testSecret = "test-secret-that-is-at-least-32-chars-long"
 
 func TestAuth_HealthBypass(t *testing.T) {
-	handler := Auth(testSecret)(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+	handler := Auth(testSecret, "")(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		w.WriteHeader(http.StatusOK)
 	}))
 
@@ -25,7 +25,7 @@ func TestAuth_HealthBypass(t *testing.T) {
 }
 
 func TestAuth_SettingsBypass(t *testing.T) {
-	handler := Auth(testSecret)(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+	handler := Auth(testSecret, "")(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		w.WriteHeader(http.StatusOK)
 	}))
 
@@ -39,7 +39,7 @@ func TestAuth_SettingsBypass(t *testing.T) {
 }
 
 func TestAuth_RedirectWithoutToken(t *testing.T) {
-	handler := Auth(testSecret)(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+	handler := Auth(testSecret, "")(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		w.WriteHeader(http.StatusOK)
 	}))
 
@@ -57,7 +57,7 @@ func TestAuth_RedirectWithoutToken(t *testing.T) {
 
 func TestAuth_PassWithToken(t *testing.T) {
 	called := false
-	handler := Auth(testSecret)(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+	handler := Auth(testSecret, "")(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		called = true
 		token := TokenFromContext(r.Context())
 		if token != "my-token" {
@@ -83,3 +83,72 @@ func TestAuth_PassWithToken(t *testing.T) {
 		t.Errorf("status = %d, want %d", w.Code, http.StatusOK)
 	}
 }
+
+func TestAuth_FallbackToken_UsedWhenNoCookie(t *testing.T) {
+	called := false
+	handler := Auth(testSecret, "env-fallback-token")(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		called = true
+		token := TokenFromContext(r.Context())
+		if token != "env-fallback-token" {
+			t.Errorf("token = %q, want %q", token, "env-fallback-token")
+		}
+		w.WriteHeader(http.StatusOK)
+	}))
+
+	req := httptest.NewRequest(http.MethodGet, "/", nil)
+	w := httptest.NewRecorder()
+	handler.ServeHTTP(w, req)
+
+	if !called {
+		t.Error("next handler was not called with fallback token")
+	}
+	if w.Code != http.StatusOK {
+		t.Errorf("status = %d, want %d", w.Code, http.StatusOK)
+	}
+}
+
+func TestAuth_FallbackToken_CookieTakesPrecedence(t *testing.T) {
+	called := false
+	handler := Auth(testSecret, "env-fallback-token")(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		called = true
+		token := TokenFromContext(r.Context())
+		if token != "cookie-token" {
+			t.Errorf("token = %q, want %q (cookie should take precedence over fallback)", token, "cookie-token")
+		}
+		w.WriteHeader(http.StatusOK)
+	}))
+
+	// Set a cookie token.
+	cookieW := httptest.NewRecorder()
+	auth.SetTokenCookie(cookieW, "cookie-token", testSecret, false)
+	cookie := cookieW.Result().Cookies()[0]
+
+	req := httptest.NewRequest(http.MethodGet, "/", nil)
+	req.AddCookie(cookie)
+	w := httptest.NewRecorder()
+	handler.ServeHTTP(w, req)
+
+	if !called {
+		t.Error("next handler was not called")
+	}
+	if w.Code != http.StatusOK {
+		t.Errorf("status = %d, want %d", w.Code, http.StatusOK)
+	}
+}
+
+func TestAuth_NoFallbackToken_RedirectsWithoutCookie(t *testing.T) {
+	handler := Auth(testSecret, "")(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.WriteHeader(http.StatusOK)
+	}))
+
+	req := httptest.NewRequest(http.MethodGet, "/issues", nil)
+	w := httptest.NewRecorder()
+	handler.ServeHTTP(w, req)
+
+	if w.Code != http.StatusSeeOther {
+		t.Errorf("status = %d, want %d", w.Code, http.StatusSeeOther)
+	}
+	if loc := w.Header().Get("Location"); loc != "/settings" {
+		t.Errorf("Location = %q, want %q", loc, "/settings")
+	}
+}

internal/templates/error.html

@@ -0,0 +1,23 @@
+{{define "content"}}
+<div class="error-page">
+  <div class="error-icon">
+    {{if eq .Code 404}}
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="64" height="64">
+      <circle cx="11" cy="11" r="8"/>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+      <line x1="8" y1="11" x2="14" y2="11"/>
+    </svg>
+    {{else}}
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="64" height="64">
+      <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+      <line x1="12" y1="9" x2="12" y2="13"/>
+      <line x1="12" y1="17" x2="12.01" y2="17"/>
+    </svg>
+    {{end}}
+  </div>
+  <h1 class="error-code">{{.Code}}</h1>
+  <p class="error-title">{{.Title}}</p>
+  <p class="error-message">{{.Message}}</p>
+  <a href="/" class="error-home-link">Go to Dashboard</a>
+</div>
+{{end}}

internal/templates/settings.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>Settings — Gitea Mobile</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #0d1117; color: #e6edf3;
+      padding: 1rem;
+      padding-top: max(1rem, env(safe-area-inset-top));
+    }
+    h1 { font-size: 1.5rem; margin-bottom: 1rem; }
+    .card {
+      background: #161b22; border: 1px solid #30363d; border-radius: 8px;
+      padding: 1rem; margin-bottom: 1rem;
+    }
+    label { display: block; font-size: 0.875rem; color: #8b949e; margin-bottom: 0.5rem; }
+    input[type="text"], input[type="password"] {
+      width: 100%; padding: 0.5rem; font-size: 1rem;
+      background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
+      color: #e6edf3; margin-bottom: 1rem;
+    }
+    input:focus { outline: none; border-color: #58a6ff; }
+    button {
+      width: 100%; padding: 0.75rem; font-size: 1rem; font-weight: 600;
+      background: #238636; color: #fff; border: none; border-radius: 6px;
+      cursor: pointer;
+    }
+    button:active { background: #2ea043; }
+    .message {
+      padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem;
+      font-size: 0.875rem;
+    }
+    .message.success { background: #0d2818; border: 1px solid #238636; color: #3fb950; }
+    .message.error { background: #2d1117; border: 1px solid #da3633; color: #f85149; }
+    .message.info { background: #0c1d2e; border: 1px solid #1f6feb; color: #58a6ff; }
+    .hint { font-size: 0.75rem; color: #8b949e; margin-top: 0.25rem; margin-bottom: 1rem; }
+    .status { font-size: 0.875rem; color: #8b949e; }
+    .status .connected { color: #3fb950; }
+    .logout-btn {
+      background: #21262d; border: 1px solid #30363d; margin-top: 0.5rem;
+    }
+    .logout-btn:active { background: #30363d; }
+  </style>
+</head>
+<body>
+  <h1>Settings</h1>
+
+  {{if .Message}}
+  <div class="message {{.MessageType}}">{{.Message}}</div>
+  {{end}}
+
+  {{if .HasToken}}
+  <div class="card">
+    <p class="status">Status: <span class="connected">Connected</span></p>
+    <p class="hint">A Gitea API token is configured.</p>
+    <form method="POST" action="/settings">
+      <input type="hidden" name="action" value="logout">
+      <button type="submit" class="logout-btn">Remove Token</button>
+    </form>
+  </div>
+  {{end}}
+
+  <div class="card">
+    <form method="POST" action="/settings">
+      <input type="hidden" name="action" value="save">
+      <label for="token">Gitea API Token</label>
+      <input type="password" id="token" name="token" placeholder="Enter your Gitea API token" required>
+      <p class="hint">Generate a token at your Gitea instance under Settings &rarr; Applications.</p>
+      <button type="submit">{{if .HasToken}}Update Token{{else}}Save Token{{end}}</button>
+    </form>
+  </div>
+
+  {{if .HasToken}}
+  <p style="text-align:center; margin-top:1rem;">
+    <a href="/" style="color:#58a6ff; text-decoration:none;">Back to Dashboard</a>
+  </p>
+  {{end}}
+</body>
+</html>

static/style.css

@@ -545,3 +545,56 @@ a:active {
     --text-link: #0969da;
   }
 }
+
+/* Error page */
+.error-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  text-align: center;
+  padding: var(--spacing-lg);
+}
+
+.error-icon {
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-lg);
+}
+
+.error-code {
+  font-size: 4rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1;
+  margin-bottom: var(--spacing-sm);
+}
+
+.error-title {
+  font-size: var(--font-xl);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.error-message {
+  font-size: var(--font-base);
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-lg);
+  max-width: 300px;
+}
+
+.error-home-link {
+  display: inline-block;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  background: var(--accent-blue);
+  color: #fff;
+  border-radius: var(--radius);
+  text-decoration: none;
+  font-size: var(--font-base);
+  font-weight: 500;
+  transition: opacity 0.15s;
+}
+
+.error-home-link:active {
+  opacity: 0.8;
+}