From 55ac79f7024f8fe18677193fea2c9baf5b1dd7b1 Mon Sep 17 00:00:00 2001
From: Agahnim <gabrielguysoulard@gmail.com>
Date: Fri, 20 Mar 2026 16:15:07 +0100
Subject: [PATCH] 404: make page responsive and make partial system for it

---
 src/templates/notfound.rs        | 34 +++++++++++++++++++++++++++-----
 static/style.css                 |  6 ++++++
 templates/notfound.html          |  5 +----
 templates/partials/notfound.html |  4 ++++
 4 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 templates/partials/notfound.html

diff --git a/src/templates/notfound.rs b/src/templates/notfound.rs
index f4f4281..7069409 100644
--- a/src/templates/notfound.rs
+++ b/src/templates/notfound.rs
@@ -1,10 +1,34 @@
+use std::sync::Arc;
+
 use askama::Template;
-use axum::response::{Html, IntoResponse};
+use axum::{
+    extract::State,
+    http::HeaderMap,
+    response::{Html, IntoResponse},
+};
+
+use crate::domain::AppState;
 
 #[derive(Template)]
 #[template(path = "notfound.html")]
-struct NotfoundTemplate;
-
-pub async fn notfound() -> impl IntoResponse {
-    Html(NotfoundTemplate.render().unwrap())
+struct NotfoundTemplate {
+    tracks: Vec<crate::domain::Track>,
+}
+
+#[derive(Template)]
+#[template(path = "partials/notfound.html")]
+struct NotfoundPartialTemplate;
+
+pub async fn notfound(headers: HeaderMap, state: State<Arc<AppState>>) -> impl IntoResponse {
+    if headers.contains_key("hx-request") {
+        Html(NotfoundPartialTemplate.render().unwrap())
+    } else {
+        Html(
+            NotfoundTemplate {
+                tracks: state.mp_tracks.clone(),
+            }
+            .render()
+            .unwrap(),
+        )
+    }
 }
diff --git a/static/style.css b/static/style.css
index dee1e16..c8ee92b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -175,8 +175,14 @@ katcenkat {
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  min-height: 100svh;
+  padding: 1rem;
+  gap: 1rem;
 
   img {
+    max-width: 100svw;
+    height: auto;
+    object-fit: contain;
     transition: opacity 5s ease, transform 5s ease-out;
     opacity: 1;
     transform: translateY(0px);
diff --git a/templates/notfound.html b/templates/notfound.html
index c0a7796..36d7f65 100644
--- a/templates/notfound.html
+++ b/templates/notfound.html
@@ -2,8 +2,5 @@
 
 
 {% block content %}
-<katcenkat>
-  <img src="/static/assets/images/notfound.webp" />
-  <img src="/static/assets/images/leuf.webp" />
-</katcenkat>
+{% include "partials/notfound.html" %}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/partials/notfound.html b/templates/partials/notfound.html
new file mode 100644
index 0000000..e650295
--- /dev/null
+++ b/templates/partials/notfound.html
@@ -0,0 +1,4 @@
+<katcenkat>
+  <img src="/static/assets/images/notfound.webp" />
+  <img src="/static/assets/images/leuf.webp" />
+</katcenkat>
\ No newline at end of file