From 240d993d5715ffd07edeefc6a0d70957c3b89882 Mon Sep 17 00:00:00 2001
From: Simon Bernier St-Pierre <git.sbstp.ca@gmail.com>
Date: Fri, 7 Aug 2026 21:42:38 -0400
Subject: [PATCH] improve ux

---
 src/views.rs     | 14 +++++++-------
 static/style.css |  2 ++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/views.rs b/src/views.rs
index 2df83bb..c5c9bda 100644
--- a/src/views.rs
+++ b/src/views.rs
@@ -499,13 +499,6 @@ pub fn meal_page(
         html! {
             div class="page-heading" {
                 a class="back-link" href="/meals" { "← All meals" }
-                div class="list-topbar-actions" {
-                    button type="button" class="button button-small button-quiet" onclick="document.getElementById('meal-edit-modal').showModal()" { "Edit" }
-                    form method="post" action=(format!("/meals/{}/delete", meal.id)) {
-                        input type="hidden" name="csrf" value=(csrf_token);
-                        button class="danger-link" type="submit" { "Delete" }
-                    }
-                }
             }
             dialog id="meal-edit-modal" class="item-modal" {
                 div class="item-modal-card" {
@@ -545,6 +538,13 @@ pub fn meal_page(
                             p class="eyebrow" { "MEAL" }
                             h1 { (meal.name) @if let Some(category_name) = meal_category_name(meal, meal_categories) { span class="meal-category-label" { "(" (category_name) ")" } } }
                         }
+                        div class="list-topbar-actions" {
+                            button type="button" class="button button-small button-quiet" onclick="document.getElementById('meal-edit-modal').showModal()" { "Edit" }
+                            form method="post" action=(format!("/meals/{}/delete", meal.id)) onsubmit="return confirm('Delete this meal and its ingredients? This cannot be undone.')" {
+                                input type="hidden" name="csrf" value=(csrf_token);
+                                button class="danger-link bordered-delete" type="submit" { "Delete" }
+                            }
+                        }
                     }
                     @if meal.description.is_empty() {
                         p class="muted" { "No description." }
diff --git a/static/style.css b/static/style.css
index ff2f978..18253d5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -220,6 +220,8 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .edit-form { margin-bottom: 12px; }
 .edit-form input { min-height: 38px; padding: 7px 10px; font-size: .85rem; }
 .danger-link { padding: 0; border: 0; color: var(--coral); background: none; cursor: pointer; font-size: .8rem; font-weight: 800; }
+.bordered-delete { padding: 7px 14px; border: 1px solid var(--coral); border-radius: 10px; background: none; }
+.bordered-delete:hover { background: #fbeae4; }
 .button-danger { width: 100%; color: var(--coral); background: #fbeae4; }
 .button-danger:hover { background: #f7ddd4; }
 .empty-items { padding: 34px 10px 18px; color: var(--muted); text-align: center; }