ui: add custom centered 404 page

internal/features/anime/handler.go

@@ -53,7 +53,8 @@ func NewHandler(svc *Service) *Handler {
 
 func (h *Handler) HandleCatalog(w http.ResponseWriter, r *http.Request) {
 	if r.URL.Path != "/" {
-		http.NotFound(w, r)
+		w.WriteHeader(http.StatusNotFound)
+		templates.NotFoundPage().Render(r.Context(), w)
 		return
 	}
 	templates.Catalog().Render(r.Context(), w)
@@ -122,7 +123,8 @@ func (h *Handler) HandleAnimeDetails(w http.ResponseWriter, r *http.Request) {
 	idStr := r.URL.Path[len("/anime/"):]
 	id, err := strconv.Atoi(idStr)
 	if err != nil || id <= 0 {
-		http.NotFound(w, r)
+		w.WriteHeader(http.StatusNotFound)
+		templates.NotFoundPage().Render(r.Context(), w)
 		return
 	}
 
@@ -136,7 +138,8 @@ func (h *Handler) HandleAnimeDetails(w http.ResponseWriter, r *http.Request) {
 		}
 
 		if jikan.IsNotFoundError(err) {
-			http.NotFound(w, r)
+			w.WriteHeader(http.StatusNotFound)
+			templates.NotFoundPage().Render(r.Context(), w)
 			return
 		}
 
@@ -210,7 +213,8 @@ func (h *Handler) HandleAPIAnime(w http.ResponseWriter, r *http.Request) {
 		}
 		templates.AnimeRecommendations(recs).Render(r.Context(), w)
 	default:
-		http.Error(w, "not found", http.StatusNotFound)
+		w.WriteHeader(http.StatusNotFound)
+		templates.NotFoundPage().Render(r.Context(), w)
 	}
 }
 

internal/templates/not_found.templ

@@ -0,0 +1,12 @@
+package templates
+
+templ NotFoundPage() {
+	@Layout("mal - not found", false) {
+		<section class="not-found-page anime-surface">
+			<p class="not-found-code">404</p>
+			<h1>Page not found</h1>
+			<p class="empty-inline-note">The page you requested does not exist, or it was moved.</p>
+			<p><a href="/" class="not-found-link">Back to catalog</a></p>
+		</section>
+	}
+}