From 22530f5a10a62d1f48197ee12ac1233ea9a2a51e Mon Sep 17 00:00:00 2001
From: Deepesh Kafaltiya <kafaltiyadeepesh@gmail.com>
Date: Tue, 19 May 2026 17:04:36 +0530
Subject: [PATCH] feat: make clear button dynamically toggle based on textarea
 input

---
 js/app.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/js/app.js b/js/app.js
index 9bfd993..a177cb6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1045,6 +1045,11 @@ addItemsBtn.addEventListener('click', () => {
 });
 });
 
+// Ensures the button is hidden on initial page load if the textarea is empty
+if (pasteInput.value.trim() === "") {
+    clearBtn.style.display = 'none';
+}
+
 extractBtn.addEventListener('click', async () => {
   const text = pasteInput.value;
   if (!text.trim()) return;
@@ -1060,9 +1065,21 @@ extractBtn.addEventListener('click', async () => {
   store.setExtracted(items);
 });
 
+// Wipes the text, clears the store, hides the button, and refocuses the cursor
 clearBtn.addEventListener('click', () => {
-  pasteInput.value = '';
-  store.clearExtracted();
+    pasteInput.value = '';
+    store.clearExtracted();
+    clearBtn.style.display = 'none'; // Hides the clear button instantly
+    pasteInput.focus();              // Puts the typing cursor back in the box
+});
+
+// Listens to typing/pasting to show or hide the button dynamically
+pasteInput.addEventListener('input', () => {
+    if (pasteInput.value.trim().length > 0) {
+        clearBtn.style.display = 'block'; 
+    } else {
+        clearBtn.style.display = 'none';
+    }
 });
 
 addItemsBtn.addEventListener('click', () => {