From 8ced58039b065e18929f4840e84c55c338d5d980 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Tue, 10 Feb 2026 19:42:16 +0000
Subject: [PATCH] fix: add x icon to cancel button and saving spinner to edit
 forms

Replace both buttons with a centered "Saving..." spinner when the
form is submitting. Add x_mark icon to the cancel button for clarity.
---
 templates/pages/edit_bag.html     | 20 +++++++++++---------
 templates/pages/edit_brew.html    | 20 +++++++++++---------
 templates/pages/edit_cafe.html    | 20 +++++++++++---------
 templates/pages/edit_cup.html     | 20 +++++++++++---------
 templates/pages/edit_gear.html    | 20 +++++++++++---------
 templates/pages/edit_roast.html   | 20 +++++++++++---------
 templates/pages/edit_roaster.html | 20 +++++++++++---------
 7 files changed, 77 insertions(+), 63 deletions(-)

diff --git a/templates/pages/edit_bag.html b/templates/pages/edit_bag.html
index 2fcf473..24d07b2 100644
--- a/templates/pages/edit_bag.html
+++ b/templates/pages/edit_bag.html
@@ -82,24 +82,26 @@
         class="text-sm text-error"
         role="alert"
       ></p>
-      <div class="flex flex-col gap-2">
+      <div
+        data-show="$_submitting"
+        style="display:none"
+        class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
+      >
+        {{ icons::spinner("h-5 w-5") }} Saving&hellip;
+      </div>
+      <div class="flex flex-col gap-2" data-show="!$_submitting">
         <button
           type="submit"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
-          data-attr:disabled="$_submitting"
         >
-          <span data-show="$_submitting" style="display:none"
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          Save Changes
+          {{ icons::check("h-4 w-4") }} Save Changes
         </button>
         <button
           type="button"
           onclick="history.back()"
-          class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
     </form>
diff --git a/templates/pages/edit_brew.html b/templates/pages/edit_brew.html
index 4479dd0..f604be4 100644
--- a/templates/pages/edit_brew.html
+++ b/templates/pages/edit_brew.html
@@ -368,24 +368,26 @@
         class="text-sm text-error"
         role="alert"
       ></p>
-      <div class="flex flex-col gap-2">
+      <div
+        data-show="$_submitting"
+        style="display:none"
+        class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
+      >
+        {{ icons::spinner("h-5 w-5") }} Saving&hellip;
+      </div>
+      <div class="flex flex-col gap-2" data-show="!$_submitting">
         <button
           type="submit"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
-          data-attr:disabled="$_submitting"
         >
-          <span data-show="$_submitting" style="display:none"
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          Save Changes
+          {{ icons::check("h-4 w-4") }} Save Changes
         </button>
         <button
           type="button"
           onclick="history.back()"
-          class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
     </form>
diff --git a/templates/pages/edit_cafe.html b/templates/pages/edit_cafe.html
index 07ae990..5b3960e 100644
--- a/templates/pages/edit_cafe.html
+++ b/templates/pages/edit_cafe.html
@@ -125,24 +125,26 @@
         class="text-sm text-error"
         role="alert"
       ></p>
-      <div class="flex flex-col gap-2">
+      <div
+        data-show="$_submitting"
+        style="display:none"
+        class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
+      >
+        {{ icons::spinner("h-5 w-5") }} Saving&hellip;
+      </div>
+      <div class="flex flex-col gap-2" data-show="!$_submitting">
         <button
           type="submit"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
-          data-attr:disabled="$_submitting"
         >
-          <span data-show="$_submitting" style="display:none"
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          Save Changes
+          {{ icons::check("h-4 w-4") }} Save Changes
         </button>
         <button
           type="button"
           onclick="history.back()"
-          class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
     </form>
diff --git a/templates/pages/edit_cup.html b/templates/pages/edit_cup.html
index c98d433..6b096e0 100644
--- a/templates/pages/edit_cup.html
+++ b/templates/pages/edit_cup.html
@@ -79,24 +79,26 @@
         class="text-sm text-error"
         role="alert"
       ></p>
-      <div class="flex flex-col gap-2">
+      <div
+        data-show="$_submitting"
+        style="display:none"
+        class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
+      >
+        {{ icons::spinner("h-5 w-5") }} Saving&hellip;
+      </div>
+      <div class="flex flex-col gap-2" data-show="!$_submitting">
         <button
           type="submit"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
-          data-attr:disabled="$_submitting"
         >
-          <span data-show="$_submitting" style="display:none"
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          Save Changes
+          {{ icons::check("h-4 w-4") }} Save Changes
         </button>
         <button
           type="button"
           onclick="history.back()"
-          class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
     </form>
diff --git a/templates/pages/edit_gear.html b/templates/pages/edit_gear.html
index e54e8aa..63bcec5 100644
--- a/templates/pages/edit_gear.html
+++ b/templates/pages/edit_gear.html
@@ -71,24 +71,26 @@
         class="text-sm text-error"
         role="alert"
       ></p>
-      <div class="flex flex-col gap-2">
+      <div
+        data-show="$_submitting"
+        style="display:none"
+        class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
+      >
+        {{ icons::spinner("h-5 w-5") }} Saving&hellip;
+      </div>
+      <div class="flex flex-col gap-2" data-show="!$_submitting">
         <button
           type="submit"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
-          data-attr:disabled="$_submitting"
         >
-          <span data-show="$_submitting" style="display:none"
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          Save Changes
+          {{ icons::check("h-4 w-4") }} Save Changes
         </button>
         <button
           type="button"
           onclick="history.back()"
-          class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
     </form>
diff --git a/templates/pages/edit_roast.html b/templates/pages/edit_roast.html
index dddd09f..5b9b79a 100644
--- a/templates/pages/edit_roast.html
+++ b/templates/pages/edit_roast.html
@@ -147,24 +147,26 @@
         class="text-sm text-error"
         role="alert"
       ></p>
-      <div class="flex flex-col gap-2">
+      <div
+        data-show="$_submitting"
+        style="display:none"
+        class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
+      >
+        {{ icons::spinner("h-5 w-5") }} Saving&hellip;
+      </div>
+      <div class="flex flex-col gap-2" data-show="!$_submitting">
         <button
           type="submit"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
-          data-attr:disabled="$_submitting"
         >
-          <span data-show="$_submitting" style="display:none"
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          Save Changes
+          {{ icons::check("h-4 w-4") }} Save Changes
         </button>
         <button
           type="button"
           onclick="history.back()"
-          class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
     </form>
diff --git a/templates/pages/edit_roaster.html b/templates/pages/edit_roaster.html
index 9a2d5ac..fec1d63 100644
--- a/templates/pages/edit_roaster.html
+++ b/templates/pages/edit_roaster.html
@@ -89,24 +89,26 @@
         class="text-sm text-error"
         role="alert"
       ></p>
-      <div class="flex flex-col gap-2">
+      <div
+        data-show="$_submitting"
+        style="display:none"
+        class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
+      >
+        {{ icons::spinner("h-5 w-5") }} Saving&hellip;
+      </div>
+      <div class="flex flex-col gap-2" data-show="!$_submitting">
         <button
           type="submit"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
-          data-attr:disabled="$_submitting"
         >
-          <span data-show="$_submitting" style="display:none"
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          Save Changes
+          {{ icons::check("h-4 w-4") }} Save Changes
         </button>
         <button
           type="button"
           onclick="history.back()"
-          class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
     </form>