From 07377abff64597122892c006a4dffdf8378070e8 Mon Sep 17 00:00:00 2001
From: dwrz <dwrz@dwrz.net>
Date: Thu, 28 May 2026 01:00:12 +0000
Subject: [PATCH] Add reset confirmation

---
 internal/service/static/main.css | 14 ++++++++++++++
 internal/service/static/main.js  | 33 ++++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/internal/service/static/main.css b/internal/service/static/main.css
index db655a8..c3cc978 100644
--- a/internal/service/static/main.css
+++ b/internal/service/static/main.css
@@ -446,6 +446,20 @@ body {
   border-color: var(--color-red);
 }
 
+.footer__toolbar-btn--pending {
+  background: var(--color-yellow);
+  color: var(--color-black);
+  border-color: var(--color-yellow);
+}
+
+@media (hover: hover) {
+  .footer__toolbar-btn--pending:hover {
+    background: var(--color-yellow);
+    color: var(--color-black);
+    border-color: var(--color-yellow);
+  }
+}
+
 @media (hover: hover) {
   .footer__toolbar-btn--muted:hover {
     color: var(--color-red);
diff --git a/internal/service/static/main.js b/internal/service/static/main.js
index 7f583a8..262f33c 100644
--- a/internal/service/static/main.js
+++ b/internal/service/static/main.js
@@ -28,6 +28,7 @@ class Odidere {
     this.isProcessing = false;
     this.isRecording = false;
     this.isMuted = false;
+    this.isResetPending = false;
     this.mediaRecorder = null;
 
     // DOM Elements
@@ -143,8 +144,9 @@ class Odidere {
     // Send button
     this.$send.addEventListener('click', () => this.#submitText());
 
-    // Reset button
-    this.$reset.addEventListener('click', () => this.reset());
+    // Reset button: two-press safety
+    this.$reset.addEventListener('click', () => this.#handleResetClick());
+    this.document.addEventListener('click', (e) => this.#handleResetCancel(e));
 
     // File attachment
     this.$attach.addEventListener('click', () => this.$fileInput.click());
@@ -327,6 +329,33 @@ class Odidere {
     this.$fileInput.value = '';
   }
 
+  /**
+   * #handleResetClick toggles the pending state on first press,
+   * executes the reset on second press.
+   */
+  #handleResetClick() {
+    if (this.isResetPending) {
+      this.isResetPending = false;
+      this.$reset.classList.remove('footer__toolbar-btn--pending');
+      this.reset();
+    } else {
+      this.isResetPending = true;
+      this.$reset.classList.add('footer__toolbar-btn--pending');
+    }
+  }
+
+  /**
+   * #handleResetCancel clears the pending reset state when the user
+   * clicks anywhere outside the reset button.
+   * @param {MouseEvent} event
+   */
+  #handleResetCancel(event) {
+    if (!this.isResetPending) return;
+    if (this.$reset.contains(event.target)) return;
+    this.isResetPending = false;
+    this.$reset.classList.remove('footer__toolbar-btn--pending');
+  }
+
   // ====================
   // AUDIO RECORDING
   // ====================