From 9636d6870ea536f5599e4a293a67f2b89689a993 Mon Sep 17 00:00:00 2001
From: Danny <dth@taiga.ai>
Date: Sun, 19 Apr 2026 15:33:24 +0200
Subject: [PATCH] fix(webapp): add delete button to workout history cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously only the bot's /delete command could remove a workout —
the Mini App history view had an edit pencil but no delete button.
Added a trash-icon button next to the pencil with a native
Telegram confirm dialog before deleting.

Also added the per-user workout number to each history card header
(e.g. "#3 · Sun 19 Apr 2026, 14:30") so users can correlate with
the number shown in save toasts and /history.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 webapp/app.js    | 30 +++++++++++++++++++++++++++++-
 webapp/style.css |  5 +++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/webapp/app.js b/webapp/app.js
index 76ecd37..b3ae722 100644
--- a/webapp/app.js
+++ b/webapp/app.js
@@ -785,10 +785,11 @@ async function loadHistory(append = false) {
 
       card.innerHTML = `
         <div class="history-header">
-          <span class="history-date">${dateStr}</span>
+          <span class="history-date">#${w.user_number} &middot; ${dateStr}</span>
           <div class="history-header-right">
             <span class="history-volume">${Math.round(volume)} kg vol</span>
             <button class="btn-remove btn-edit btn-history-edit" title="Edit">&#9998;</button>
+            <button class="btn-remove btn-history-delete" title="Delete">&#128465;</button>
           </div>
         </div>
         ${groupsHtml}
@@ -799,6 +800,11 @@ async function loadHistory(append = false) {
         editSavedWorkout(w);
       });
 
+      card.querySelector(".btn-history-delete").addEventListener("click", (e) => {
+        e.stopPropagation();
+        confirmDeleteWorkout(w);
+      });
+
       container.appendChild(card);
     });
 
@@ -813,6 +819,28 @@ document.getElementById("btn-load-more").addEventListener("click", () => {
   loadHistory(true);
 });
 
+function confirmDeleteWorkout(w) {
+  const label = "Workout #" + (w.user_number ?? w.id);
+  const prompt = "Delete " + label + "? This can't be undone.";
+  const onConfirm = async (ok) => {
+    if (!ok) return;
+    try {
+      await api("DELETE", "/workouts/" + w.id);
+      showToast(label + " deleted");
+      tg.HapticFeedback.notificationOccurred("success");
+      loadHistory();
+    } catch (e) {
+      showToast(e.message || "Delete failed");
+      tg.HapticFeedback.notificationOccurred("error");
+    }
+  };
+  if (tg && typeof tg.showConfirm === "function") {
+    tg.showConfirm(prompt, onConfirm);
+  } else {
+    onConfirm(window.confirm(prompt));
+  }
+}
+
 // ── Stats View ──────────────────────────────────────────────────
 
 async function loadStats() {
diff --git a/webapp/style.css b/webapp/style.css
index 6804dbd..4bc7228 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -392,6 +392,11 @@ details[open] .raw-toggle::before {
   font-size: 14px !important;
 }
 
+.btn-history-delete {
+  font-size: 14px !important;
+  color: var(--tg-theme-destructive-text-color, #d33) !important;
+}
+
 .history-group {
   margin-bottom: 8px;
 }