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

@@ -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::check("h-4 w-4") }} Save Changes
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          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>

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::check("h-4 w-4") }} Save Changes
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          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>

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::check("h-4 w-4") }} Save Changes
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          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>

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::check("h-4 w-4") }} Save Changes
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          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>

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::check("h-4 w-4") }} Save Changes
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          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>

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::check("h-4 w-4") }} Save Changes
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          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>

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::check("h-4 w-4") }} Save Changes
-            >{{ icons::spinner("h-4 w-4") }}</span
-          >
-          <span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
-          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>