fix: improve error messages

internal/ui/components/expense/expense.templ

@@ -146,7 +146,7 @@ templ AddExpenseForm(props AddExpenseFormProps) {
 		// Tags
 		<div>
 			@label.Label(label.Props{For: "new-expense-tags"}) {
-				Tags
+				Tags (Optional)
 			}
 			<datalist id="available-tags">
 				for _, tag := range props.Tags {
@@ -255,7 +255,7 @@ templ EditExpenseForm(spaceID string, exp *model.ExpenseWithTagsAndMethod, metho
 		// Tags
 		<div>
 			@label.Label(label.Props{For: "edit-tags-" + exp.ID}) {
-				Tags
+				Tags (Optional)
 			}
 			@tagsinput.TagsInput(tagsinput.Props{
 				ID:          "edit-tags-" + exp.ID,

internal/ui/layouts/base.templ

@@ -28,6 +28,7 @@ templ Base(props ...SEOProps) {
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<meta name="csrf-token" content={ ctxkeys.CSRFToken(ctx) }/>
+			<meta name="htmx-config" content='{"responseHandling":[{"code":"204","swap":false},{"code":"[23]..","swap":true},{"code":"422","swap":true},{"code":"[45]..","swap":false,"error":true},{"code":"...","swap":true}]}'/>
 			if len(props) > 0 {
 				@seo(props[0])
 			} else {

internal/ui/pages/app_dashboard.templ

@@ -71,7 +71,11 @@ templ Dashboard(spaces []*model.Space) {
 									Name:        "name",
 									Type:        input.TypeText,
 									Placeholder: "e.g. Household, Trip, Roommates",
+									Attributes: templ.Attributes{
+										"describedby": "create-space-error",
+									},
 								})
+								<p id="create-space-error" class="text-sm text-destructive"></p>
 							</div>
 							@dialog.Footer() {
 								@dialog.Close(dialog.CloseProps{For: "create-space-dialog"}) {

internal/ui/render.go

@@ -5,6 +5,7 @@ import (
 	"log/slog"
 	"net/http"
 
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/toast"
 	"github.com/a-h/templ"
 )
 
@@ -24,6 +25,22 @@ func RenderFragment(w http.ResponseWriter, r *http.Request, c templ.Component, f
 	}
 }
 
+func RenderError(w http.ResponseWriter, r *http.Request, msg string, code int) {
+	if r.Header.Get("HX-Request") == "true" {
+		w.Header().Set("HX-Reswap", "none")
+		w.WriteHeader(code)
+		RenderToast(w, r, toast.Toast(toast.Props{
+			Title:       msg,
+			Variant:     toast.VariantError,
+			Icon:        true,
+			Dismissible: true,
+			Duration:    5000,
+		}))
+		return
+	}
+	http.Error(w, msg, code)
+}
+
 func RenderToast(w http.ResponseWriter, r *http.Request, c templ.Component) {
 	RenderOOB(w, r, c, "beforeend:#toast-container")
 }