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>
+	}
+}

static/css/style.css

@@ -466,6 +466,41 @@ main {
   font-size: 0.9rem;
 }
 
+.not-found-page {
+  width: min(780px, calc(100vw - (var(--space-6) * 2)));
+  min-height: 72vh;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-7);
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--space-3);
+  text-align: center;
+}
+
+.not-found-code {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: clamp(4rem, 15vw, 10rem);
+  letter-spacing: 0.04em;
+  line-height: 0.9;
+}
+
+.not-found-page h1 {
+  margin: 0;
+  font-size: clamp(2rem, 4vw, 3rem);
+}
+
+.not-found-link {
+  color: var(--accent);
+  text-decoration: none;
+  font-size: 1.05rem;
+}
+
+.not-found-link:hover {
+  text-decoration: underline;
+}
+
 .auth-shell {
   width: min(560px, 100%);
 }