add dialog to confirm chat deletion

src/View/ChatPages/settingsPage.tsx

@@ -1,5 +1,5 @@
 import { DeletableListItem } from "../Components/deletableListItem";
-import { DangerousActionButton } from "../Components/dangerousActionButton";
+import { ConfirmationDialog } from "../Components/confirmationDialog";
 import { ColorPicker } from "../Components/colorPicker";
 import * as React from "../../react";
 import SettingsPageViewModel from "../../ViewModel/Pages/settingsPageViewModel";
@@ -203,11 +203,15 @@ export function SettingsPage(
                         <hr></hr>
 
                         <div class="width-input">
-                            {DangerousActionButton(
+                            {ConfirmationDialog(
                                 coreViewModel,
                                 coreViewModel.translations.chatPage.settings
                                     .deleteChatButton,
-                                "chat_error",
+                                "delete_forever",
+                                coreViewModel.translations.chatPage.settings
+                                    .deleteChatHeadline,
+                                coreViewModel.translations.chatPage.settings
+                                    .deleteChatDescription,
                                 settingsPageViewModel.remove,
                             )}
                         </div>

src/View/Components/confirmationDialog.tsx

@@ -0,0 +1,47 @@
+import * as React from "../../react";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+
+export function ConfirmationDialog(
+    coreViewModel: CoreViewModel,
+    buttonLabel: string,
+    icon: string,
+    headline: string,
+    description: string,
+    action: () => void,
+) {
+    const isModalOpen = new React.State(false);
+
+    function openModal() {
+        isModalOpen.value = true;
+    }
+    function closeModal() {
+        isModalOpen.value = false;
+    }
+
+    return (
+        <div>
+            <button class="danger width-100" on:click={openModal}>
+                <span>{buttonLabel}</span>
+                <span class="icon">{icon}</span>
+            </button>
+
+            <div class="modal" toggle:open={isModalOpen}>
+                <div>
+                    <main>
+                        <h2>{headline}</h2>
+                        <p class="secondary">{description}</p>
+                    </main>
+                    <div class="flex-row">
+                        <button class="standard width-50" on:click={closeModal}>
+                            {coreViewModel.translations.general.cancelButton}
+                        </button>
+                        <button class="danger width-50" on:click={action}>
+                            <span>{buttonLabel}</span>
+                            <span class="icon">{icon}</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/View/translations.ts

@@ -244,6 +244,9 @@ const englishTranslations = {
             setColorButtonAudioLabel: "set color",
 
             deleteChatButton: "Delete entire chat",
+            deleteChatHeadline: "Delete chat?",
+            deleteChatDescription:
+                "This will delete all messages, tasks, and other data related to this chat from device.",
         },
 
         message: {
@@ -618,6 +621,9 @@ export const allTranslations: {
                 setColorButtonAudioLabel: "Farbe festlegen",
 
                 deleteChatButton: "Gesamten Chat löschen",
+                deleteChatHeadline: "Gesamten Chat löschen?",
+                deleteChatDescription:
+                    "Dies löscht alle Nachrichten, Aufgaben und alle anderen Daten, die zu diesem Chat gehören.",
             },
 
             message: {
@@ -965,6 +971,9 @@ export const allTranslations: {
                 setColorButtonAudioLabel: "establecer color",
 
                 deleteChatButton: "Eliminar todo el chat",
+                deleteChatHeadline: "¿Eliminar chat?",
+                deleteChatDescription:
+                    "¿Quieres borrar todas las mensajes, tareas y otros datos que pertenecen a este chat?",
             },
 
             message: {