fix: use in-app delete confirmation dialogs

app/static/js/app.js

@@ -415,17 +415,6 @@ function mountThemeToggle() {
   });
 }
 
-function mountDeleteConfirmations() {
-  document.querySelectorAll("[data-confirm-submit]").forEach((node) => {
-    node.addEventListener("click", (event) => {
-      const message = node.dataset.confirmSubmit || "Wirklich löschen?";
-      if (!window.confirm(message)) {
-        event.preventDefault();
-      }
-    });
-  });
-}
-
 document.addEventListener("DOMContentLoaded", async () => {
   await registerServiceWorker();
   injectCsrfTokens();
@@ -434,7 +423,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   mountDialogs();
   mountPersonalSplitSync();
   mountAnnualAmountSync();
-  mountDeleteConfirmations();
   document.querySelectorAll("[data-enable-push]").forEach((node) => {
     node.addEventListener("click", async (event) => {
       event.preventDefault();

app/templates/planning/detail.html

@@ -226,10 +226,25 @@
             <div class="dialog-action-row dialog-action-spread">
               <button class="ghost-button small-button" type="submit">Speichern</button>
               {% if month.incomes|length > 1 %}
-                <button class="ghost-button danger-button small-button" type="submit" formaction="{{ url_for('planning.delete_income', label=month.label, income_id=income.id) }}" formnovalidate data-confirm-submit="Einkommenszeile wirklich löschen?">Löschen</button>
+                <button class="ghost-button danger-button small-button" type="button" data-open-dialog="confirm-delete-income-{{ income.id }}">Löschen</button>
               {% endif %}
             </div>
           </form>
+          {% if month.incomes|length > 1 %}
+            <dialog id="confirm-delete-income-{{ income.id }}" class="app-dialog confirm-dialog">
+              <form method="dialog" class="dialog-close-row">
+                <button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
+              </form>
+              <div class="stack-form">
+                <h3>Einkommenszeile wirklich löschen?</h3>
+                <p class="muted">`{{ income.label }}` wird aus diesem Monat entfernt.</p>
+                <form method="post" action="{{ url_for('planning.delete_income', label=month.label, income_id=income.id) }}" class="dialog-action-row dialog-action-spread">
+                  <button class="ghost-button" type="button" data-open-dialog="income-dialog">Zurück</button>
+                  <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
+                </form>
+              </div>
+            </dialog>
+          {% endif %}
         {% endfor %}
       </div>
       <form method="post" action="{{ url_for('planning.create_income', label=month.label) }}" class="soft-form-section stack-form">
@@ -354,7 +369,7 @@
         <p class="muted">`{{ card.community_account.name }}` wird ausgeblendet und seine Budget-Zuordnungen werden gelöst.</p>
         <form method="post" action="{{ url_for('planning.delete_community_account', label=month.label, community_account_id=card.community_account.id) }}" class="dialog-action-row dialog-action-spread">
           <button class="ghost-button" type="button" data-open-dialog="community-account-item-{{ card.community_account.id }}">Zurück</button>
-          <button class="primary-button danger-fill-button" type="submit" data-confirm-submit="Konto wirklich löschen?">Jetzt löschen</button>
+          <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
         </form>
       </div>
     </dialog>
@@ -598,8 +613,20 @@
               {% endfor %}
             </div>
 
-            <form method="post" action="{{ url_for('planning.delete_category', label=month.label, category_id=category_data.category.id) }}">
+            <button class="ghost-button danger-button" type="button" data-open-dialog="confirm-delete-category-{{ category_data.category.id }}">Kategorie löschen</button>
-              <button class="ghost-button danger-button" type="submit" data-confirm-submit="Kategorie wirklich löschen?">Kategorie löschen</button>
+          </div>
+        </dialog>
+
+        <dialog id="confirm-delete-category-{{ category_data.category.id }}" class="app-dialog confirm-dialog">
+          <form method="dialog" class="dialog-close-row">
+            <button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
+          </form>
+          <div class="stack-form">
+            <h3>Kategorie wirklich löschen?</h3>
+            <p class="muted">`{{ category_data.category.name }}` wird ausgeblendet und ihre Einträge werden mit ausgeblendet.</p>
+            <form method="post" action="{{ url_for('planning.delete_category', label=month.label, category_id=category_data.category.id) }}" class="dialog-action-row dialog-action-spread">
+              <button class="ghost-button" type="button" data-open-dialog="{{ category_data.dialog_id }}">Zurück</button>
+              <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
             </form>
           </div>
         </dialog>
@@ -794,7 +821,7 @@
             <form method="post" action="{{ url_for('planning.delete_entry', label=month.label, entry_id=item.entry.id) }}" class="dialog-action-row dialog-action-spread">
               <input type="hidden" name="return_dialog" value="{{ category_data.dialog_id }}">
               <button class="ghost-button" type="button" data-open-dialog="{{ item.dialog_id }}">Zurück</button>
-              <button class="primary-button danger-fill-button" type="submit" data-confirm-submit="Eintrag wirklich löschen?">Jetzt löschen</button>
+              <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
             </form>
           </div>
         </dialog>

tests/test_routes.py

@@ -111,14 +111,15 @@ def test_planning_shows_budgets_and_community_accounts(logged_in_client):
     assert b"Auszahlung Person B" in response.data
 
 
-def test_planning_delete_actions_render_confirmation_hooks(logged_in_client):
+def test_planning_delete_actions_render_app_confirmation_dialogs(logged_in_client):
     response = logged_in_client.get("/planning/2026-04")
 
     assert response.status_code == 200
-    assert b'data-confirm-submit="Einkommenszeile wirklich l\xc3\xb6schen?' in response.data
+    assert b"confirm-delete-income-" in response.data
-    assert b'data-confirm-submit="Kategorie wirklich l\xc3\xb6schen?' in response.data
+    assert b"confirm-delete-category-" in response.data
-    assert b'data-confirm-submit="Konto wirklich l\xc3\xb6schen?' in response.data
+    assert b"confirm-delete-community-account-" in response.data
-    assert b'data-confirm-submit="Eintrag wirklich l\xc3\xb6schen?' in response.data
+    assert b"confirm-delete-entry-" in response.data
+    assert b"data-confirm-submit" not in response.data
 
 
 def test_community_account_can_assign_budget_categories(logged_in_client):